From d989873c3640b7deed1d9bd528cacc3bc807148f Mon Sep 17 00:00:00 2001 From: sea-kelp <66500457+sea-kelp@users.noreply.github.com> Date: Tue, 18 Jun 2024 00:35:16 +0000 Subject: [PATCH] Add content warnings for videos/links (#1102) ## Fixes issue Fixes #493 ## Description of Changes *This change is cherry-picked from https://github.com/OrcaCollective/OpenOversight/pull/457* Adds content warnings to links and videos ## Notes for Deployment There's an alembic migration that will need to be run ## Screenshots (if appropriate) New checkbox "Include content warning?" which is checked by default per https://github.com/lucyparsons/OpenOversight/issues/493#issue-339263762 ![1](https://github.com/lucyparsons/OpenOversight/assets/66500457/9ea246c7-3f08-48c0-8940-181b676f8c34) How links and videos will look when a content warning is added: ![2](https://github.com/lucyparsons/OpenOversight/assets/66500457/b4d815bc-9919-47f0-ab00-e5fa7bdea024) ## Tests and Linting - [x] This branch is up-to-date with the `develop` branch. - [x] `pytest` passes on my local development environment. - [x] `pre-commit` passes on my local development environment. --------- Co-authored-by: michplunkett <5885605+michplunkett@users.noreply.github.com> --- OpenOversight/app/main/forms.py | 3 + OpenOversight/app/main/views.py | 1 + OpenOversight/app/models/database.py | 1 + .../app/static/css/openoversight.css | 12 ++++ OpenOversight/app/static/js/contentWarning.js | 24 +++++++ .../app/templates/incident_detail.html | 1 + OpenOversight/app/templates/officer.html | 1 + .../partials/links_and_videos_row.html | 19 +++-- OpenOversight/app/utils/forms.py | 1 + .../versions/2024-06-05-0203_939ea0f2b26d_.py | 31 +++++++++ OpenOversight/tests/routes/route_helpers.py | 16 ++++- OpenOversight/tests/routes/test_incidents.py | 69 ++++++++++++++++++- .../routes/test_officer_and_department.py | 47 +++++++++++++ 13 files changed, 217 insertions(+), 9 deletions(-) create mode 100644 OpenOversight/app/static/js/contentWarning.js create mode 100644 OpenOversight/migrations/versions/2024-06-05-0203_939ea0f2b26d_.py diff --git a/OpenOversight/app/main/forms.py b/OpenOversight/app/main/forms.py index 85cf25175..da6a7b0cf 100644 --- a/OpenOversight/app/main/forms.py +++ b/OpenOversight/app/main/forms.py @@ -240,6 +240,9 @@ class LinkForm(Form): default="", validators=[AnyOf(allowed_values(LINK_CHOICES))], ) + has_content_warning = BooleanField( + "Include content warning?", default=True, validators=[Optional()] + ) def validate(self, extra_validators=None): success = super(LinkForm, self).validate(extra_validators=extra_validators) diff --git a/OpenOversight/app/main/views.py b/OpenOversight/app/main/views.py index f054a0fc0..a05e1ca50 100644 --- a/OpenOversight/app/main/views.py +++ b/OpenOversight/app/main/views.py @@ -2374,6 +2374,7 @@ def new(self, form: FlaskForm = None): link_type=form.link_type.data, description=form.description.data, author=form.author.data, + has_content_warning=form.has_content_warning.data, created_by=current_user.id, last_updated_by=current_user.id, ) diff --git a/OpenOversight/app/models/database.py b/OpenOversight/app/models/database.py index 0fdbe41f9..347ad1465 100644 --- a/OpenOversight/app/models/database.py +++ b/OpenOversight/app/models/database.py @@ -623,6 +623,7 @@ class Link(BaseModel, TrackUpdates): link_type = db.Column(db.String(100), index=True) description = db.Column(db.Text(), nullable=True) author = db.Column(db.String(255), nullable=True) + has_content_warning = db.Column(db.Boolean, nullable=False, default=False) @validates("url") def validate_url(self, key, url): diff --git a/OpenOversight/app/static/css/openoversight.css b/OpenOversight/app/static/css/openoversight.css index 9d2fab2a6..d8d467109 100644 --- a/OpenOversight/app/static/css/openoversight.css +++ b/OpenOversight/app/static/css/openoversight.css @@ -679,3 +679,15 @@ tr:hover .row-actions { .bottom-margin { margin-bottom: 2rem; } + +.video-container .overlay { + align-items: center; + background: black; + color: white; + display: flex; + height: 100%; + justify-content: center; + position: absolute; + top: 0; + width: 100%; +} diff --git a/OpenOversight/app/static/js/contentWarning.js b/OpenOversight/app/static/js/contentWarning.js new file mode 100644 index 000000000..cefcbb0e3 --- /dev/null +++ b/OpenOversight/app/static/js/contentWarning.js @@ -0,0 +1,24 @@ +function createOverlay(container) { + const warningText = $( + "

Content Warning

This video may be disturbing for some viewers

" + ) + const hide = $('') + hide.click(() => overlay.css("display", "none")) + + const wrapper = $("
") + wrapper.append(warningText) + wrapper.append(hide) + + const overlay = $('
') + overlay.append(wrapper) + container.append(overlay) +} + +$(document).ready(() => { + $(".video-container").each((index, element) => { + const container = $(element) + if (container.data("has-content-warning")) { + createOverlay(container) + } + }) +}) diff --git a/OpenOversight/app/templates/incident_detail.html b/OpenOversight/app/templates/incident_detail.html index 04d565691..5ea9ce516 100644 --- a/OpenOversight/app/templates/incident_detail.html +++ b/OpenOversight/app/templates/incident_detail.html @@ -76,4 +76,5 @@

Incident Description

{% endif %} + {% endblock content %} diff --git a/OpenOversight/app/templates/officer.html b/OpenOversight/app/templates/officer.html index caf7c2c9a..9291fe7d7 100644 --- a/OpenOversight/app/templates/officer.html +++ b/OpenOversight/app/templates/officer.html @@ -136,4 +136,5 @@

{# end row #} + {% endblock content %} diff --git a/OpenOversight/app/templates/partials/links_and_videos_row.html b/OpenOversight/app/templates/partials/links_and_videos_row.html index a345fdb8f..7be25de4d 100644 --- a/OpenOversight/app/templates/partials/links_and_videos_row.html +++ b/OpenOversight/app/templates/partials/links_and_videos_row.html @@ -6,6 +6,10 @@

Links

{% for link in list %}
  • {{ link.title or link.url }} + {% if link.has_content_warning %} + Content Warning + {% endif %} {% if officer and (is_admin_or_coordinator or link.created_by == current_user.id) %} Edit @@ -30,10 +34,6 @@

    Links

    {% endif %} {% endfor %} - {% if officer and (current_user.is_admin_or_coordinator(officer.department)) %} -
    New Link/Video - {% endif %} {% for type, list in obj.links | groupby("link_type") %} {% if type == "video" %}

    Videos

    @@ -53,7 +53,8 @@

    Videos

    {% endif %} -
    +