spec(frontend): 非ログイン状態ではセンシティブに設定されたコンテンツを閲覧できないように (MisskeyIO#498)

packages/frontend/src/components/MkMediaBanner.vue

@@ -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="showHiddenContent">
 		<span style="font-size: 1.6em;"><i class="ti ti-alert-triangle"></i></span>
 		<b>{{ i18n.ts.sensitive }}</b>
 		<span>{{ i18n.ts.clickToShow }}</span>
@@ -28,6 +28,8 @@ import { shallowRef, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
 import MkMediaAudio from '@/components/MkMediaAudio.vue';
+import { pleaseLogin } from '@/scripts/please-login.js';
+import { $i } from '@/account.js';
 
 const props = withDefaults(defineProps<{
 	media: Misskey.entities.DriveFile;
@@ -37,6 +39,21 @@ const props = withDefaults(defineProps<{
 const audioEl = shallowRef<HTMLAudioElement>();
 const hide = ref(true);
 
+function showHiddenContent(ev: MouseEvent) {
+	if (props.media.isSensitive && !$i) {
+		ev.preventDefault();
+		ev.stopPropagation();
+		pleaseLogin();
+		return;
+	}
+
+	if (hide.value) {
+		ev.preventDefault();
+		ev.stopPropagation();
+		hide.value = false;
+	}
+}
+
 watch(audioEl, () => {
 	if (audioEl.value) {
 		audioEl.value.volume = 0.3;