From 7c29a18d61ab66eb59fc259c3f766f61a3e47ee3 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 24 Jul 2026 21:39:28 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=82=A2=E3=83=83?=
 =?UTF-8?q?=E3=83=97=E3=83=AD=E3=83=BC=E3=83=89=E5=89=8D=E3=81=AE=E3=83=95?=
 =?UTF-8?q?=E3=82=A1=E3=82=A4=E3=83=AB=E3=81=AE=E3=83=97=E3=83=AC=E3=83=93?=
 =?UTF-8?q?=E3=83=A5=E3=83=BC=E3=81=AB=E5=AF=BE=E5=BF=9C&=E3=82=A2?=
 =?UTF-8?q?=E3=83=83=E3=83=97=E3=83=AD=E3=83=BC=E3=83=89=E5=BE=8C=E3=81=AE?=
 =?UTF-8?q?=E3=83=97=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC=E3=81=ABMkLightbo?=
 =?UTF-8?q?x=E3=82=92=E4=BD=BF=E7=94=A8=20(#17794)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* wip

* [ci skip] Update CHANGELOG.md

* Update MkUploaderItems.vue

* Update MkUploaderItems.vue

* Update MkUploaderItems.vue
---
 CHANGELOG.md                                  |  3 +-
 packages/frontend/.storybook/generate.tsx     |  1 -
 .../MkImgPreviewDialog.stories.impl.ts        | 40 ------------
 .../src/components/MkImgPreviewDialog.vue     | 63 -------------------
 .../frontend/src/components/MkLightbox.vue    | 19 +++++-
 .../frontend/src/components/MkMediaList.vue   |  4 +-
 .../src/components/MkPostFormAttaches.vue     | 19 +++++-
 .../src/components/MkUploaderItems.vue        | 50 +++++++++++++--
 8 files changed, 84 insertions(+), 115 deletions(-)
 delete mode 100644 packages/frontend/src/components/MkImgPreviewDialog.stories.impl.ts
 delete mode 100644 packages/frontend/src/components/MkImgPreviewDialog.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 61acf1fa7b..4bcf30b603 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,7 +21,7 @@
 ### Client
 - 2025.4.0 以前の設定情報の移行処理が削除されました
 	- 2025.4.0 から直接 2026.6.0 以上にアップデートする場合は設定が移行されませんので注意してください。移行したい場合は一度 2026.5.1 を経由してください。
-- Enhance: 画像ビューワーを独自実装に変更・動画プレイヤーを統合
+- Enhance: 画像ビューワーを刷新・動画プレイヤーを統合
   - 操作性の改善
   - ビューワーとMisskeyの各種機能との統合を強化
   - パフォーマンスの向上
@@ -29,6 +29,7 @@
   - Fix: 幅が狭い画面で動画の再生が困難な問題を修正
   - Fix: 一部の画像のみセンシティブなとき、ビューワー内で画像を切り替えるとセンシティブな画像がそのまま表示される問題を修正
   - Fix: 一部の画像をビューワーで読み込んだ際に正しく表示されない問題を修正
+- Enhance: ファイルアップロード前にプレビューできるように
 - Enhance: タブがバックグラウンドの間は必要ない定期更新処理を停止するように
 - Fix: 「画像を新しいタブで開く」が機能しなくなっていた問題を修正
 - Fix: デバイスタイプをスマートフォンに固定している状態で画面幅が広いとき、画面左上のアイコンが表示されない問題を修正
diff --git a/packages/frontend/.storybook/generate.tsx b/packages/frontend/.storybook/generate.tsx
index 6005049dde..01ddefa544 100644
--- a/packages/frontend/.storybook/generate.tsx
+++ b/packages/frontend/.storybook/generate.tsx
@@ -458,7 +458,6 @@ function toStories(component: string): Promise<string> {
 		globSync('src/components/MkSignupServerRules.vue'),
 		globSync('src/components/MkUserSetupDialog.vue'),
 		globSync('src/components/MkUserSetupDialog.*.vue'),
-		globSync('src/components/MkImgPreviewDialog.vue'),
 		globSync('src/components/MkInstanceCardMini.vue'),
 		globSync('src/components/MkInviteCode.vue'),
 		globSync('src/components/MkTagItem.vue'),
diff --git a/packages/frontend/src/components/MkImgPreviewDialog.stories.impl.ts b/packages/frontend/src/components/MkImgPreviewDialog.stories.impl.ts
deleted file mode 100644
index 7da705a23f..0000000000
--- a/packages/frontend/src/components/MkImgPreviewDialog.stories.impl.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import type { StoryObj } from '@storybook/vue3';
-import { file } from '../../.storybook/fakes.js';
-import MkImgPreviewDialog from './MkImgPreviewDialog.vue';
-export const Default = {
-	render(args) {
-		return {
-			components: {
-				MkImgPreviewDialog,
-			},
-			setup() {
-				return {
-					args,
-				};
-			},
-			computed: {
-				props() {
-					return {
-						...this.args,
-					};
-				},
-			},
-			template: '<MkImgPreviewDialog v-bind="props" />',
-		};
-	},
-	args: {
-		file: file(),
-	},
-	parameters: {
-		chromatic: {
-			// NOTE: ロードが終わるまで待つ
-			delay: 3000,
-		},
-		layout: 'centered',
-	},
-} satisfies StoryObj<typeof MkImgPreviewDialog>;
diff --git a/packages/frontend/src/components/MkImgPreviewDialog.vue b/packages/frontend/src/components/MkImgPreviewDialog.vue
deleted file mode 100644
index 530b6c45db..0000000000
--- a/packages/frontend/src/components/MkImgPreviewDialog.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<MkModalWindow
-	ref="modal"
-	:width="1800"
-	:height="900"
-	@close="close"
-	@esc="close"
-	@click="close"
-	@closed="emit('closed')"
->
-	<template #header>{{ file.name }}</template>
-	<div :class="$style.container">
-		<img :src="file.url" :alt="file.comment || file.name" :class="$style.img"/>
-	</div>
-</MkModalWindow>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-import MkModalWindow from './MkModalWindow.vue';
-import type * as Misskey from 'misskey-js';
-
-defineProps<{
-	file: Misskey.entities.DriveFile;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-
-const modal = ref<typeof MkModalWindow | null>(null);
-
-function close() {
-	modal.value?.close();
-}
-
-</script>
-<style lang="scss" module>
-	.container {
-		box-sizing: border-box;
-		width: 100%;
-		height: 100%;
-		min-height: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		overflow: hidden;
-
-		background-color: var(--MI_THEME-bg);
-		background-size: auto auto;
-		background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--MI_THEME-panel) 6px, var(--MI_THEME-panel) 12px);
-	}
-
-	.img {
-		width: 100%;
-		max-height: 100%;
-		object-fit: contain;
-	}
-</style>
diff --git a/packages/frontend/src/components/MkLightbox.vue b/packages/frontend/src/components/MkLightbox.vue
index d999723c4c..ae40c7a612 100644
--- a/packages/frontend/src/components/MkLightbox.vue
+++ b/packages/frontend/src/components/MkLightbox.vue
@@ -48,13 +48,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, nextTick, onBeforeUnmount, onMounted } from 'vue';
+import { ref, watch, nextTick, onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
 import XItem from './MkLightbox.item.vue';
 import type { Content } from './MkLightbox.item.vue';
 import type { Keymap } from '@/utility/hotkey.js';
 import * as os from '@/os.js';
 import { prefer } from '@/preferences.js';
 import { isTouchUsing } from '@/utility/touch.js';
+import { focusTrap } from '@/utility/focus-trap.js';
 
 const props = withDefaults(defineProps<{
 	defaultIndex?: number;
@@ -66,6 +67,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
+const rootEl = useTemplateRef('rootEl');
 const activatedIndexes = ref(new Set<number>());
 const items = new Map<number, InstanceType<typeof XItem> | null>();
 const currentIndex = ref(props.defaultIndex ?? 0);
@@ -192,7 +194,22 @@ function onPopState() {
 	}
 }
 
+let releaseFocusTrap: (() => void) | null = null;
+
 onMounted(() => {
+	watch([showing], ([showing]) => {
+		if (showing === true) {
+			if (rootEl.value != null) {
+				const { release } = focusTrap(rootEl.value);
+
+				releaseFocusTrap = release;
+				rootEl.value.focus();
+			}
+		} else {
+			releaseFocusTrap?.();
+		}
+	}, { immediate: true });
+
 	window.history.pushState(null, '', '#pswp');
 	window.addEventListener('popstate', onPopState);
 });
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index a0ae2c2bca..bab49e5375 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -137,8 +137,8 @@ async function openGallery(id?: string) {
 		type: media.type.startsWith('video') ? 'video' : 'image',
 		url: media.url,
 		thumbnailUrl: media.thumbnailUrl,
-		width: media.properties.width ?? 0,
-		height: media.properties.height ?? 0,
+		width: media.properties.width,
+		height: media.properties.height,
 		filename: media.name,
 		file: media,
 		sourceElement: getElementByMarker(`${markerId}:${media.id}`),
diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
index 58adb16954..5779630562 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -153,6 +153,7 @@ function showFileMenu(file: Misskey.entities.DriveFile, ev: PointerEvent | Keybo
 	if (menuShowing) return;
 
 	const isImage = file.type.startsWith('image/');
+	const isVideo = file.type.startsWith('video/');
 
 	const menuItems: MenuItem[] = [];
 
@@ -170,13 +171,25 @@ function showFileMenu(file: Misskey.entities.DriveFile, ev: PointerEvent | Keybo
 		action: () => { describe(file); },
 	});
 
-	if (isImage) {
+	if (isImage || isVideo) {
 		menuItems.push({
 			text: i18n.ts.preview,
 			icon: 'ti ti-photo-search',
 			action: async () => {
-				const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkImgPreviewDialog.vue').then(x => x.default), {
-					file: file,
+				const constents = props.modelValue.filter(item => item.type.startsWith('image') || item.type.startsWith('video')).map(item => ({
+					id: item.id,
+					type: item.type.startsWith('video') ? 'video' as const : 'image' as const,
+					url: item.url,
+					thumbnailUrl: item.thumbnailUrl,
+					width: item.properties.width,
+					height: item.properties.height,
+					filename: item.name,
+					file: item,
+					//sourceElement: TODO
+				}));
+				const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkLightbox.vue').then(x => x.default), {
+					defaultIndex: constents.findIndex(content => content.id === file.id),
+					contents: constents,
 				}, {
 					closed: () => dispose(),
 				});
diff --git a/packages/frontend/src/components/MkUploaderItems.vue b/packages/frontend/src/components/MkUploaderItems.vue
index 0a7c154605..cf92828e2f 100644
--- a/packages/frontend/src/components/MkUploaderItems.vue
+++ b/packages/frontend/src/components/MkUploaderItems.vue
@@ -49,13 +49,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, onUnmounted, watch } from 'vue';
 import { isLink } from '@@/js/is-link.js';
-import { getUploadName } from '@/composables/use-uploader.js';
 import type { UploaderItem } from '@/composables/use-uploader.js';
+import { getUploadName } from '@/composables/use-uploader.js';
 import { i18n } from '@/i18n.js';
 import MkButton from '@/components/MkButton.vue';
 import bytes from '@/filters/bytes.js';
+import * as os from '@/os.js';
 
 const props = defineProps<{
 	items: UploaderItem[];
@@ -71,6 +72,32 @@ const emit = defineEmits<{
 	(ev: 'showMenuViaContextmenu', item: UploaderItem, event: PointerEvent): void;
 }>();
 
+//#region objectUrlMap
+const objectUrlMap = new Map<UploaderItem, string>();
+
+watch(() => props.items, () => {
+	for (const item of props.items) {
+		if (!objectUrlMap.has(item)) {
+			objectUrlMap.set(item, URL.createObjectURL(item.file));
+		}
+	}
+
+	for (const [item, url] of objectUrlMap.entries()) {
+		if (!props.items.includes(item)) {
+			URL.revokeObjectURL(url);
+			objectUrlMap.delete(item);
+		}
+	}
+}, { immediate: true, deep: true });
+
+onUnmounted(() => {
+	for (const url of objectUrlMap.values()) {
+		URL.revokeObjectURL(url);
+	}
+	objectUrlMap.clear();
+});
+//#endregion
+
 function getUploadNameParts(item: UploaderItem): {
 	baseName: string;
 	extension: string | null;
@@ -98,8 +125,23 @@ function onContextmenu(item: UploaderItem, ev: PointerEvent) {
 	emit('showMenuViaContextmenu', item, ev);
 }
 
-function onThumbnailClick(item: UploaderItem, ev: PointerEvent) {
-	// TODO: preview when item is image
+async function onThumbnailClick(item: UploaderItem, ev: PointerEvent) {
+	if (item.file.type.startsWith('image') || item.file.type.startsWith('video')) {
+		const contents = props.items.filter(item => item.file.type.startsWith('image') || item.file.type.startsWith('video')).map(item => ({
+			id: item.id,
+			type: (item.file.type.startsWith('video') ? 'video' as const : 'image' as const),
+			url: objectUrlMap.get(item)!,
+			thumbnailUrl: item.thumbnail,
+			filename: getUploadName(item),
+		}));
+
+		const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkLightbox.vue').then(x => x.default), {
+			defaultIndex: contents.findIndex(content => content.id === item.id),
+			contents: contents,
+		}, {
+			closed: () => dispose(),
+		});
+	}
 }
 </script>