From e814f3d74077d82b9acc5e7270e723bd15022564 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A8=E3=83=BC?=
 =?UTF-8?q?=E3=81=AB=E3=82=85?=
 <17376330+u1-liquid@users.noreply.github.com>
Date: Thu, 7 Mar 2024 05:23:50 +0900
Subject: [PATCH] improve menu

---
 .../frontend/src/components/MkMediaAudio.vue  | 21 +++--
 .../frontend/src/components/MkMediaImage.vue  | 78 +++++++++++++------
 .../frontend/src/components/MkMediaVideo.vue  | 21 +++--
 3 files changed, 85 insertions(+), 35 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index efcff17e65..cf44e10671 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -82,9 +82,7 @@ const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.data
 const menuShowing = ref(false);
 
 function showMenu(ev: MouseEvent) {
-	let menu: MenuItem[] = [];
-
-	menu = [
+	const menu: MenuItem[] = [
 		// TODO: 再生キューに追加
 		{
 			text: i18n.ts.hide,
@@ -95,6 +93,12 @@ function showMenu(ev: MouseEvent) {
 		},
 	];
 
+	if ($i?.id === props.audio.userId || iAmModerator) {
+		menu.push({
+			type: 'divider',
+		});
+	}
+
 	if (iAmModerator) {
 		menu.push({
 			text: props.audio.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
@@ -102,12 +106,19 @@ function showMenu(ev: MouseEvent) {
 			danger: true,
 			action: () => toggleSensitive(props.audio),
 		});
+
+		if ($i?.id !== props.audio.userId) {
+			menu.push({
+				type: 'link' as const,
+				text: i18n.ts._fileViewer.title,
+				icon: 'ti ti-info-circle',
+				to: `/admin/file/${props.audio.id}`,
+			});
+		}
 	}
 
 	if ($i?.id === props.audio.userId) {
 		menu.push({
-			type: 'divider',
-		}, {
 			type: 'link' as const,
 			text: i18n.ts._fileViewer.title,
 			icon: 'ti ti-info-circle',
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index d2d5be66b7..72ee04b5ac 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -53,6 +53,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { watch, ref, computed } from 'vue';
 import * as Misskey from 'misskey-js';
+import type { MenuItem } from '@/types/menu.js';
 import { getStaticImageUrl } from '@/scripts/media-proxy.js';
 import bytes from '@/filters/bytes.js';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
@@ -84,6 +85,51 @@ const url = computed(() => (props.raw || defaultStore.state.loadRawImages)
 		: props.image.thumbnailUrl,
 );
 
+function showMenu(ev: MouseEvent) {
+	const menu: MenuItem[] = [{
+		text: i18n.ts.hide,
+		icon: 'ti ti-eye-off',
+		action: () => {
+			hide.value = true;
+		},
+	}];
+
+	if ($i?.id === props.image.userId || iAmModerator) {
+		menu.push({
+			type: 'divider',
+		});
+	}
+
+	if (iAmModerator) {
+		menu.push({
+			text: props.image.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
+			icon: props.image.isSensitive ? 'ti ti-eye' : 'ti ti-eye-exclamation',
+			danger: true,
+			action: () => toggleSensitive(props.image),
+		});
+
+		if ($i?.id !== props.image.userId) {
+			menu.push({
+				type: 'link' as const,
+				text: i18n.ts._fileViewer.title,
+				icon: 'ti ti-info-circle',
+				to: `/admin/file/${props.image.id}`,
+			});
+		}
+	}
+
+	if ($i?.id === props.image.userId) {
+		menu.push({
+			type: 'link' as const,
+			text: i18n.ts._fileViewer.title,
+			icon: 'ti ti-info-circle',
+			to: `/my/drive/file/${props.image.id}`,
+		});
+	}
+
+	os.popupMenu(menu, ev.currentTarget ?? ev.target);
+}
+
 function showHiddenContent(ev: MouseEvent) {
 	if (!props.controls) {
 		return;
@@ -103,6 +149,13 @@ function showHiddenContent(ev: MouseEvent) {
 	}
 }
 
+function toggleSensitive(file: Misskey.entities.DriveFile) {
+	os.apiWithDialog('drive/files/update', {
+		fileId: file.id,
+		isSensitive: !file.isSensitive,
+	});
+}
+
 // Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
 watch(() => props.image, () => {
 	hide.value = (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.image.isSensitive && defaultStore.state.nsfw !== 'ignore');
@@ -110,31 +163,6 @@ watch(() => props.image, () => {
 	deep: true,
 	immediate: true,
 });
-
-function showMenu(ev: MouseEvent) {
-	os.popupMenu([{
-		text: i18n.ts.hide,
-		icon: 'ti ti-eye-off',
-		action: () => {
-			hide.value = true;
-		},
-	}, ...(iAmModerator ? [{
-		text: i18n.ts.markAsSensitive,
-		icon: 'ti ti-eye-exclamation',
-		danger: true,
-		action: () => {
-			os.apiWithDialog('drive/files/update', { fileId: props.image.id, isSensitive: true });
-		},
-	}] : []), ...($i?.id === props.image.userId ? [{
-		type: 'divider' as const,
-	}, {
-		type: 'link' as const,
-		text: i18n.ts._fileViewer.title,
-		icon: 'ti ti-info-circle',
-		to: `/my/drive/file/${props.image.id}`,
-	}] : [])], ev.currentTarget ?? ev.target);
-}
-
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 733931611c..5d42ab0349 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -112,9 +112,7 @@ const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.data
 const menuShowing = ref(false);
 
 function showMenu(ev: MouseEvent) {
-	let menu: MenuItem[] = [];
-
-	menu = [
+	const menu: MenuItem[] = [
 		// TODO: 再生キューに追加
 		{
 			text: i18n.ts.hide,
@@ -125,6 +123,12 @@ function showMenu(ev: MouseEvent) {
 		},
 	];
 
+	if ($i?.id === props.video.userId || iAmModerator) {
+		menu.push({
+			type: 'divider',
+		});
+	}
+
 	if (iAmModerator) {
 		menu.push({
 			text: props.video.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
@@ -132,12 +136,19 @@ function showMenu(ev: MouseEvent) {
 			danger: true,
 			action: () => toggleSensitive(props.video),
 		});
+
+		if ($i?.id !== props.video.userId) {
+			menu.push({
+				type: 'link' as const,
+				text: i18n.ts._fileViewer.title,
+				icon: 'ti ti-info-circle',
+				to: `/admin/file/${props.video.id}`,
+			});
+		}
 	}
 
 	if ($i?.id === props.video.userId) {
 		menu.push({
-			type: 'divider',
-		}, {
 			type: 'link' as const,
 			text: i18n.ts._fileViewer.title,
 			icon: 'ti ti-info-circle',