feat(frontend): センシティブなメディアを目立たせる設定を追加 (#11851)

* (add) highlight sensitive image

* Update Changelog

* (change) 設定の位置

* (add) apply mediaHighlight to video

* (change) image -> media

* Update CHANGELOG

* やっぱもうちょっと太い方がいい

* (fix) style

* Update ja-JP.yml

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
かっこかり 2023-09-22 16:03:10 +09:00 committed by GitHub
parent c836157edb
commit 7dc9fe4e24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 46 additions and 4 deletions

View File

@ -44,6 +44,7 @@
- Feat: 新しい実績を追加 - Feat: 新しい実績を追加
- Enhance: ノート詳細ページでリノート一覧、リアクション一覧タブを追加 - Enhance: ノート詳細ページでリノート一覧、リアクション一覧タブを追加
- ノートのメニューからは当該項目は消えました - ノートのメニューからは当該項目は消えました
- Enhance: センシティブなメディアを目立たせる設定を追加
- Enhance: プロフィールにその人が作ったPlayの一覧出せるように - Enhance: プロフィールにその人が作ったPlayの一覧出せるように
- Enhance: メニューのスイッチの動作を改善 - Enhance: メニューのスイッチの動作を改善
- Enhance: 絵文字ピッカーの検索の表示件数を100件に増加 - Enhance: 絵文字ピッカーの検索の表示件数を100件に増加

1
locales/index.d.ts vendored
View File

@ -713,6 +713,7 @@ export interface Locale {
"alwaysMarkSensitive": string; "alwaysMarkSensitive": string;
"loadRawImages": string; "loadRawImages": string;
"disableShowingAnimatedImages": string; "disableShowingAnimatedImages": string;
"highlightSensitiveMedia": string;
"verificationEmailSent": string; "verificationEmailSent": string;
"notSet": string; "notSet": string;
"emailVerified": string; "emailVerified": string;

View File

@ -710,6 +710,7 @@ lockedAccountInfo: "フォローを承認制にしても、ノートの公開範
alwaysMarkSensitive: "デフォルトでメディアをセンシティブ設定にする" alwaysMarkSensitive: "デフォルトでメディアをセンシティブ設定にする"
loadRawImages: "添付画像のサムネイルをオリジナル画質にする" loadRawImages: "添付画像のサムネイルをオリジナル画質にする"
disableShowingAnimatedImages: "アニメーション画像を再生しない" disableShowingAnimatedImages: "アニメーション画像を再生しない"
highlightSensitiveMedia: "メディアがセンシティブであることを分かりやすく表示"
verificationEmailSent: "確認のメールを送信しました。メールに記載されたリンクにアクセスして、設定を完了してください。" verificationEmailSent: "確認のメールを送信しました。メールに記載されたリンクにアクセスして、設定を完了してください。"
notSet: "未設定" notSet: "未設定"
emailVerified: "メールアドレスが確認されました" emailVerified: "メールアドレスが確認されました"

View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <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 <component
:is="disableImageLink ? 'div' : 'a'" :is="disableImageLink ? 'div' : 'a'"
v-bind="disableImageLink ? { v-bind="disableImageLink ? {
@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:title="image.comment || image.name" :title="image.comment || image.name"
:width="image.properties.width" :width="image.properties.width"
:height="image.properties.height" :height="image.properties.height"
:style="hide ? 'filter: brightness(0.5);' : null" :style="hide ? 'filter: brightness(0.7);' : null"
/> />
</component> </component>
<template v-if="hide"> <template v-if="hide">
@ -124,6 +124,22 @@ function showMenu(ev: MouseEvent) {
position: relative; 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 { .hiddenText {
position: absolute; position: absolute;
left: 0; left: 0;

View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <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 になるまでサムネイルや動画を読み込まないようにすること --> <!-- 注意dataSaverMode が有効になっている際にはhide false になるまでサムネイルや動画を読み込まないようにすること -->
<div :class="$style.sensitive"> <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> <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> <span>{{ i18n.ts.clickToShow }}</span>
</div> </div>
</div> </div>
<div v-else :class="$style.visible"> <div v-else :class="[$style.visible, (video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitiveContainer]">
<video <video
:class="$style.video" :class="$style.video"
:poster="video.thumbnailUrl" :poster="video.thumbnailUrl"
@ -49,6 +49,22 @@ const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enab
position: relative; 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 { .hide {
display: block; display: block;
position: absolute; position: absolute;

View File

@ -115,6 +115,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="useBlurEffect">{{ i18n.ts.useBlurEffect }}</MkSwitch> <MkSwitch v-model="useBlurEffect">{{ i18n.ts.useBlurEffect }}</MkSwitch>
<MkSwitch v-model="useBlurEffectForModal">{{ i18n.ts.useBlurEffectForModal }}</MkSwitch> <MkSwitch v-model="useBlurEffectForModal">{{ i18n.ts.useBlurEffectForModal }}</MkSwitch>
<MkSwitch v-model="disableShowingAnimatedImages">{{ i18n.ts.disableShowingAnimatedImages }}</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="squareAvatars">{{ i18n.ts.squareAvatars }}</MkSwitch>
<MkSwitch v-model="useSystemFont">{{ i18n.ts.useSystemFont }}</MkSwitch> <MkSwitch v-model="useSystemFont">{{ i18n.ts.useSystemFont }}</MkSwitch>
<MkSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</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 disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
const forceShowAds = computed(defaultStore.makeGetterSetter('forceShowAds')); const forceShowAds = computed(defaultStore.makeGetterSetter('forceShowAds'));
const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages')); const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
const highlightSensitiveMedia = computed(defaultStore.makeGetterSetter('highlightSensitiveMedia'));
const enableDataSaverMode = computed(defaultStore.makeGetterSetter('enableDataSaverMode')); const enableDataSaverMode = computed(defaultStore.makeGetterSetter('enableDataSaverMode'));
const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab')); const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
const nsfw = computed(defaultStore.makeGetterSetter('nsfw')); const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
@ -283,6 +285,7 @@ watch([
overridedDeviceKind, overridedDeviceKind,
mediaListWithOneImageAppearance, mediaListWithOneImageAppearance,
reactionsDisplaySize, reactionsDisplaySize,
highlightSensitiveMedia,
keepScreenOn, keepScreenOn,
], async () => { ], async () => {
await reloadAsk(); await reloadAsk();

View File

@ -185,6 +185,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device', where: 'device',
default: 'respect' as 'respect' | 'force' | 'ignore', default: 'respect' as 'respect' | 'force' | 'ignore',
}, },
highlightSensitiveMedia: {
where: 'device',
default: false,
},
animation: { animation: {
where: 'device', where: 'device',
default: !window.matchMedia('(prefers-reduced-motion)').matches, default: !window.matchMedia('(prefers-reduced-motion)').matches,