diff options
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | locales/index.d.ts | 1 | ||||
| -rw-r--r-- | locales/ja-JP.yml | 1 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkMediaImage.vue | 20 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkMediaVideo.vue | 20 | ||||
| -rw-r--r-- | packages/frontend/src/pages/settings/general.vue | 3 | ||||
| -rw-r--r-- | packages/frontend/src/store.ts | 4 |
7 files changed, 46 insertions, 4 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 92bb2c8161..68db7f41c5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -44,6 +44,7 @@ - Feat: 新しい実績を追加 - Enhance: ノート詳細ページでリノート一覧、リアクション一覧タブを追加 - ノートのメニューからは当該項目は消えました +- Enhance: センシティブなメディアを目立たせる設定を追加 - Enhance: プロフィールにその人が作ったPlayの一覧出せるように - Enhance: メニューのスイッチの動作を改善 - Enhance: 絵文字ピッカーの検索の表示件数を100件に増加 diff --git a/locales/index.d.ts b/locales/index.d.ts index f7bc350e2b..3009c99185 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -713,6 +713,7 @@ export interface Locale { "alwaysMarkSensitive": string; "loadRawImages": string; "disableShowingAnimatedImages": string; + "highlightSensitiveMedia": string; "verificationEmailSent": string; "notSet": string; "emailVerified": string; diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 5436cf0494..b30fd5333d 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -710,6 +710,7 @@ lockedAccountInfo: "フォローを承認制にしても、ノートの公開範 alwaysMarkSensitive: "デフォルトでメディアをセンシティブ設定にする" loadRawImages: "添付画像のサムネイルをオリジナル画質にする" disableShowingAnimatedImages: "アニメーション画像を再生しない" +highlightSensitiveMedia: "メディアがセンシティブであることを分かりやすく表示" verificationEmailSent: "確認のメールを送信しました。メールに記載されたリンクにアクセスして、設定を完了してください。" notSet: "未設定" emailVerified: "メールアドレスが確認されました" diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue index c2d442f59f..cc1c28a9e1 100644 --- a/packages/frontend/src/components/MkMediaImage.vue +++ b/packages/frontend/src/components/MkMediaImage.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div :class="hide ? $style.hidden : $style.visible" :style="darkMode ? '--c: rgb(255 255 255 / 2%);' : '--c: rgb(0 0 0 / 2%);'" @click="onclick"> +<div :class="[hide ? $style.hidden : $style.visible, (image.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitive]" :style="darkMode ? '--c: rgb(255 255 255 / 2%);' : '--c: rgb(0 0 0 / 2%);'" @click="onclick"> <component :is="disableImageLink ? 'div' : 'a'" v-bind="disableImageLink ? { @@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only :title="image.comment || image.name" :width="image.properties.width" :height="image.properties.height" - :style="hide ? 'filter: brightness(0.5);' : null" + :style="hide ? 'filter: brightness(0.7);' : null" /> </component> <template v-if="hide"> @@ -124,6 +124,22 @@ function showMenu(ev: MouseEvent) { position: relative; } +.sensitive { + position: relative; + + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + border-radius: inherit; + box-shadow: inset 0 0 0 4px var(--warn); + } +} + .hiddenText { position: absolute; left: 0; diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index c5afe09745..751b5f7570 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div v-if="hide" :class="$style.hidden" @click="hide = false"> +<div v-if="hide" :class="[$style.hidden, (video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitiveContainer]" @click="hide = false"> <!-- 【注意】dataSaverMode が有効になっている際には、hide が false になるまでサムネイルや動画を読み込まないようにすること --> <div :class="$style.sensitive"> <b v-if="video.isSensitive" style="display: block;"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.enableDataSaverMode ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b> @@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only <span>{{ i18n.ts.clickToShow }}</span> </div> </div> -<div v-else :class="$style.visible"> +<div v-else :class="[$style.visible, (video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitiveContainer]"> <video :class="$style.video" :poster="video.thumbnailUrl" @@ -49,6 +49,22 @@ const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enab position: relative; } +.sensitiveContainer { + position: relative; + + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + border-radius: inherit; + box-shadow: inset 0 0 0 4px var(--warn); + } +} + .hide { display: block; position: absolute; diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index 6c59830614..a536bd1baa 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -115,6 +115,7 @@ SPDX-License-Identifier: AGPL-3.0-only <MkSwitch v-model="useBlurEffect">{{ i18n.ts.useBlurEffect }}</MkSwitch> <MkSwitch v-model="useBlurEffectForModal">{{ i18n.ts.useBlurEffectForModal }}</MkSwitch> <MkSwitch v-model="disableShowingAnimatedImages">{{ i18n.ts.disableShowingAnimatedImages }}</MkSwitch> + <MkSwitch v-model="highlightSensitiveMedia">{{ i18n.ts.highlightSensitiveMedia }}</MkSwitch> <MkSwitch v-model="squareAvatars">{{ i18n.ts.squareAvatars }}</MkSwitch> <MkSwitch v-model="useSystemFont">{{ i18n.ts.useSystemFont }}</MkSwitch> <MkSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</MkSwitch> @@ -234,6 +235,7 @@ const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer')); const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages')); const forceShowAds = computed(defaultStore.makeGetterSetter('forceShowAds')); const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages')); +const highlightSensitiveMedia = computed(defaultStore.makeGetterSetter('highlightSensitiveMedia')); const enableDataSaverMode = computed(defaultStore.makeGetterSetter('enableDataSaverMode')); const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab')); const nsfw = computed(defaultStore.makeGetterSetter('nsfw')); @@ -283,6 +285,7 @@ watch([ overridedDeviceKind, mediaListWithOneImageAppearance, reactionsDisplaySize, + highlightSensitiveMedia, keepScreenOn, ], async () => { await reloadAsk(); diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 8a43ba892d..16483f0cf7 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -185,6 +185,10 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: 'respect' as 'respect' | 'force' | 'ignore', }, + highlightSensitiveMedia: { + where: 'device', + default: false, + }, animation: { where: 'device', default: !window.matchMedia('(prefers-reduced-motion)').matches, |