diff options
Diffstat (limited to 'packages/frontend/src/components/MkMediaVideo.vue')
| -rw-r--r-- | packages/frontend/src/components/MkMediaVideo.vue | 20 |
1 files changed, 18 insertions, 2 deletions
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; |