Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

enhance(frontend): センシティブなメディアを開く際に確認ダイアログを出せるように (#14115)

Browse source 
* enhance(frontend): センシティブなメディアを開く際に確認ダイアログを出せるように

* Update Changelog
This commit is contained in:
かっこかり 2024-07-19 09:57:01 +09:00 • committed by GitHub
parent 54d0a46378
commit 1f24a8cb5a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 75 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

26
packages/frontend/src/components/MkMediaBanner.vue
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="$style.root">
<MkMediaAudio v-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" :audio="media"/>
<div v-else-if="media.isSensitive && hide" :class="$style.sensitive" @click="hide = false">
<div v-else-if="media.isSensitive && hide" :class="$style.sensitive" @click="show">
<span style="font-size: 1.6em;"><i class="ti ti-alert-triangle"></i></span>
<b>{{ i18n.ts.sensitive }}</b>
<span>{{ i18n.ts.clickToShow }}</span>
@ -24,24 +24,30 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { shallowRef, watch, ref } from 'vue';
import { ref } from 'vue';
import * as Misskey from 'misskey-js';
import { i18n } from '@/i18n.js';
import { defaultStore } from '@/store.js';
import * as os from '@/os.js';
import MkMediaAudio from '@/components/MkMediaAudio.vue';
const props = withDefaults(defineProps<{
const props = defineProps<{
media: Misskey.entities.DriveFile;
}>(), {
});
}>();
const audioEl = shallowRef<HTMLAudioElement>();
const hide = ref(true);
watch(audioEl, () => {
if (audioEl.value) {
audioEl.value.volume = 0.3;
async function show() {
if (props.media.isSensitive && defaultStore.state.confirmWhenRevealingSensitiveMedia) {
const { canceled } = await os.confirm({
type: 'question',
text: i18n.ts.sensitiveMediaRevealConfirm,
});
if (canceled) return;
}
});
hide.value = false;
}
</script>
<style lang="scss" module>