mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-04 01:38:54 +09:00
Code

(add) apply mediaHighlight to video

Browse Source
This commit is contained in:
kakkokari-gtyih 2023-09-19 20:59:39 +09:00
parent 6eb6e2a9f0
commit 7c0dc87451
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/frontend/src/components/MkMediaVideo.vue
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.highlightSensitiveImages) ? $style.sensitiveContainer : $style.nonSensitiveContainer]" @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.highlightSensitiveImages) ? $style.sensitiveContainer : $style.nonSensitiveContainer]">
<video <video
:class="$style.video" :class="$style.video"
:poster="video.thumbnailUrl" :poster="video.thumbnailUrl"
@ -49,6 +49,14 @@ const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enab
position: relative; position: relative;
} }
.sensitiveContainer {
border: 3px solid var(--warn);
}
.nonSensitiveContainer {
border: 3px solid transparent;
}
.hide { .hide {
display: block; display: block;
position: absolute; position: absolute;