From 5b8601d7694d04c18e1402a3fd2bc1a9954444e1 Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Thu, 13 Jul 2023 12:38:31 +0400 Subject: [PATCH 01/14] Store blurring state in UI store --- frontend/src/stores/ui.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/stores/ui.ts b/frontend/src/stores/ui.ts index b15fb466c3c..8894aa87359 100644 --- a/frontend/src/stores/ui.ts +++ b/frontend/src/stores/ui.ts @@ -42,6 +42,10 @@ export interface UiState { */ isMobileUa: boolean dismissedBanners: BannerId[] + /** + * whether to blur sensitive content in search and single result pages + */ + shouldBlurSensitive: boolean } export const breakpoints = Object.keys(ALL_SCREEN_SIZES) @@ -55,6 +59,7 @@ export const useUiStore = defineStore("ui", { breakpoint: "sm", isMobileUa: true, dismissedBanners: [], + shouldBlurSensitive: true, }), getters: { From 0b3a825d782c3bb4a596b22e14698ba76511293f Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Thu, 13 Jul 2023 12:46:30 +0400 Subject: [PATCH 02/14] Blur sensitive audio and image results --- .../VAudioThumbnail/VAudioThumbnail.vue | 22 ++++++++++++++++--- .../VAudioTrack/layouts/VBoxLayout.vue | 8 +++++++ .../VAudioTrack/layouts/VRowLayout.vue | 15 ++++++++++++- .../VSearchResultsGrid/VImageCell.vue | 13 +++++++++-- 4 files changed, 52 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue b/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue index 4f6c843cd94..cab9b649bdb 100644 --- a/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue +++ b/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue @@ -1,8 +1,15 @@ diff --git a/frontend/src/locales/scripts/en.json5 b/frontend/src/locales/scripts/en.json5 index 807bdb88199..df22a606d73 100644 --- a/frontend/src/locales/scripts/en.json5 +++ b/frontend/src/locales/scripts/en.json5 @@ -746,6 +746,8 @@ sensitiveContent: { title: { image: "This image may contain sensitive content.", + audio: "This audio track may contain sensitive content.", }, + creator: "Creator", }, } diff --git a/frontend/test/unit/specs/components/AudioTrack/v-audio-track.spec.js b/frontend/test/unit/specs/components/AudioTrack/v-audio-track.spec.js index ec71bb819a7..2babfc3b2f6 100644 --- a/frontend/test/unit/specs/components/AudioTrack/v-audio-track.spec.js +++ b/frontend/test/unit/specs/components/AudioTrack/v-audio-track.spec.js @@ -101,4 +101,35 @@ describe("AudioTrack", () => { expect(getByText(/Reproduction not allowed./i)).toBeVisible() // It's not possible to get the vm to test that Sentry has been called }) + + it("has blurred title in box layout when audio is sensitive", async () => { + options.propsData.audio.isSensitive = true + options.propsData.layout = "box" + const { getByText } = render(VAudioTrack, options, configureVue) + const h2 = getByText("This audio track may contain sensitive content.") + expect(h2).toHaveClass("blur-sm") + }) + + it("has blurred info in row layout when audio is sensitive", async () => { + options.propsData.audio.isSensitive = true + options.propsData.layout = "row" + const { getByText } = render(VAudioTrack, options, configureVue) + + const h2 = getByText("This audio track may contain sensitive content.") + expect(h2).toHaveClass("blur-sm") + + const creator = getByText("by Creator") + expect(creator).toHaveClass("blur-sm") + }) + + it("is does not contain title or creator anywhere when the audio is sensitive", async () => { + options.propsData.audio.isSensitive = true + options.propsData.layout = "row" + const screen = render(VAudioTrack, options, configureVue) + let { title, creator } = options.propsData.audio + let match = RegExp(`(${title}|${creator})`) + expect(screen.queryAllByText(match)).toEqual([]) + expect(screen.queryAllByTitle(match)).toEqual([]) + expect(screen.queryAllByAltText(match)).toEqual([]) + }) }) From b68a5e3dc8beefb9d74614cb87b6cd5be75bfbd0 Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Fri, 14 Jul 2023 20:15:42 +0400 Subject: [PATCH 05/14] Use blur radii specified in designs --- frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue | 2 +- frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue | 2 +- frontend/src/components/VAudioTrack/layouts/VRowLayout.vue | 4 ++-- frontend/src/components/VSearchResultsGrid/VImageCell.vue | 2 +- frontend/tailwind.config.js | 4 ++++ .../unit/specs/components/AudioTrack/v-audio-track.spec.js | 6 +++--- .../components/VSearchResultsGrid/v-image-cell.spec.js | 2 +- 7 files changed, 13 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue b/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue index d4995b5358e..7e85c1f38e2 100644 --- a/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue +++ b/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue @@ -26,7 +26,7 @@

{{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }}

diff --git a/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue b/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue index c79f2e24200..1f68f7cc18a 100644 --- a/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue +++ b/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue @@ -27,7 +27,7 @@ :class="{ 'text-2xl': isMedium || isLarge, 'leading-snug': isSmall, - 'blur-sm': shouldBlur, + 'blur-text': shouldBlur, }" > {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }} @@ -46,7 +46,7 @@