Merge branch 'develop' into room

2026-05-20 09:25:33 +02:00 · 2026-05-02 12:41:38 +09:00
parent dcd2160294 6d9412b338
commit 8421ec75da
9 changed files with 110 additions and 141 deletions
--- a/packages/frontend/src/components/MkUploaderItems.vue
+++ b/packages/frontend/src/components/MkUploaderItems.vue
@@ -6,42 +6,42 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="$style.root" class="_gaps_s">
 	<div
-		v-for="item in props.items"
-		:key="item.id"
+		v-for="displayItem in displayItems"
+		:key="displayItem.item.id"
 		v-panel
-		:class="[$style.item, { [$style.itemWaiting]: item.preprocessing, [$style.itemCompleted]: item.uploaded, [$style.itemFailed]: item.uploadFailed }]"
+		:class="[$style.item, { [$style.itemWaiting]: displayItem.item.preprocessing, [$style.itemCompleted]: displayItem.item.uploaded, [$style.itemFailed]: displayItem.item.uploadFailed }]"
 		:style="{
-			'--p': item.progress != null ? `${item.progress.value / item.progress.max * 100}%` : '0%',
-			'--pp': item.preprocessProgress != null ? `${item.preprocessProgress * 100}%` : '100%',
+			'--p': displayItem.item.progress != null ? `${displayItem.item.progress.value / displayItem.item.progress.max * 100}%` : '0%',
+			'--pp': displayItem.item.preprocessProgress != null ? `${displayItem.item.preprocessProgress * 100}%` : '100%',
 		}"
-		@contextmenu.prevent.stop="onContextmenu(item, $event)"
+		@contextmenu.prevent.stop="onContextmenu(displayItem.item, $event)"
 	>
 		<div :class="$style.itemInner">
 			<div :class="$style.itemActionWrapper">
-				<MkButton :iconOnly="true" rounded @click="emit('showMenu', item, $event)"><i class="ti ti-dots"></i></MkButton>
+				<MkButton :iconOnly="true" rounded @click="emit('showMenu', displayItem.item, $event)"><i class="ti ti-dots"></i></MkButton>
 			</div>
-			<div :class="$style.itemThumbnail" :style="{ backgroundImage: `url(${ item.thumbnail })` }" @click="onThumbnailClick(item, $event)"></div>
+			<div :class="$style.itemThumbnail" :style="{ backgroundImage: `url(${ displayItem.item.thumbnail })` }" @click="onThumbnailClick(displayItem.item, $event)"></div>
 			<div :class="$style.itemBody">
 				<div>
-					<i v-if="item.isSensitive" style="color: var(--MI_THEME-warn); margin-right: 0.5em;" class="ti ti-eye-exclamation"></i>
+					<i v-if="displayItem.item.isSensitive" style="color: var(--MI_THEME-warn); margin-right: 0.5em;" class="ti ti-eye-exclamation"></i>
 					<MkCondensedLine :minScale="2 / 3">
-						<span>{{ getUploadName(item).lastIndexOf('.') != -1 ? getUploadName(item).substring(0, getUploadName(item).lastIndexOf('.')) : getUploadName(item) }}</span>
-						<span v-if="getUploadName(item).lastIndexOf('.') != -1" style="opacity: 0.5;">{{ getUploadName(item).substring(getUploadName(item).lastIndexOf('.')) }}</span>
+						<span>{{ displayItem.nameParts.baseName }}</span>
+						<span v-if="displayItem.nameParts.extension != null" style="opacity: 0.5;">{{ displayItem.nameParts.extension }}</span>
 					</MkCondensedLine>
 				</div>
 				<div :class="$style.itemInfo">
-					<span>{{ item.file.type }}</span>
-					<span v-if="item.compressedSize">({{ i18n.tsx._uploader.compressedToX({ x: bytes(item.compressedSize) }) }} = {{ i18n.tsx._uploader.savedXPercent({ x: Math.round((1 - item.compressedSize / item.file.size) * 100) }) }})</span>
-					<span v-else>{{ bytes(item.file.size) }}</span>
-					<span v-if="item.preprocessing">{{ i18n.ts.preprocessing }}<MkLoading inline em style="margin-left: 0.5em;"/></span>
+					<span>{{ displayItem.item.file.type }}</span>
+					<span v-if="displayItem.item.compressedSize">({{ i18n.tsx._uploader.compressedToX({ x: bytes(displayItem.item.compressedSize) }) }} = {{ i18n.tsx._uploader.savedXPercent({ x: Math.round((1 - displayItem.item.compressedSize / displayItem.item.file.size) * 100) }) }})</span>
+					<span v-else>{{ bytes(displayItem.item.file.size) }}</span>
+					<span v-if="displayItem.item.preprocessing">{{ i18n.ts.preprocessing }}<MkLoading inline em style="margin-left: 0.5em;"/></span>
 				</div>
 				<div>
 				</div>
 			</div>
 			<div :class="$style.itemIconWrapper">
-				<MkSystemIcon v-if="item.uploading" :class="$style.itemIcon" type="waiting"/>
-				<MkSystemIcon v-else-if="item.uploaded" :class="$style.itemIcon" type="success"/>
-				<MkSystemIcon v-else-if="item.uploadFailed" :class="$style.itemIcon" type="error"/>
+				<MkSystemIcon v-if="displayItem.item.uploading" :class="$style.itemIcon" type="waiting"/>
+				<MkSystemIcon v-else-if="displayItem.item.uploaded" :class="$style.itemIcon" type="success"/>
+				<MkSystemIcon v-else-if="displayItem.item.uploadFailed" :class="$style.itemIcon" type="error"/>
 			</div>
 		</div>
 	</div>
@@ -49,6 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
+import { computed } from 'vue';
 import { isLink } from '@@/js/is-link.js';
 import { getUploadName } from '@/composables/use-uploader.js';
 import type { UploaderItem } from '@/composables/use-uploader.js';
@@ -60,11 +61,36 @@ const props = defineProps<{
 	items: UploaderItem[];
 }>();

+const displayItems = computed(() => props.items.map(item => ({
+	item,
+	nameParts: getUploadNameParts(item),
+})));
+
 const emit = defineEmits<{
 	(ev: 'showMenu', item: UploaderItem, event: PointerEvent): void;
 	(ev: 'showMenuViaContextmenu', item: UploaderItem, event: PointerEvent): void;
 }>();

+function getUploadNameParts(item: UploaderItem): {
+	baseName: string;
+	extension: string | null;
+} {
+	const name = getUploadName(item);
+	const extensionIndex = name.lastIndexOf('.');
+
+	if (extensionIndex === -1) {
+		return {
+			baseName: name,
+			extension: null,
+		};
+	}
+
+	return {
+		baseName: name.substring(0, extensionIndex),
+		extension: name.substring(extensionIndex),
+	};
+}
+
 function onContextmenu(item: UploaderItem, ev: PointerEvent) {
 	if (ev.target && isLink(ev.target as HTMLElement)) return;
 	if (window.getSelection()?.toString() !== '') return;
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -194,7 +194,6 @@ export function popup<T extends Component>(

 	const id = ++popupIdCount;
 	const dispose = () => {
-		// このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ？
 		nextTick(() => {
 			popups.value = popups.value.filter(p => p.id !== id);
 		});
--- a/packages/frontend/src/utility/emoji-picker.ts
+++ b/packages/frontend/src/utility/emoji-picker.ts
@@ -3,9 +3,9 @@
 * SPDX-License-Identifier: AGPL-3.0-only
 */

-import { markRaw, shallowRef, ref, watch } from 'vue';
-import type MkEmojiPickerDialog__TypeReferenceOnly from '@/components/MkEmojiPickerDialog.vue';
-import { popup, popupAsyncWithDialog } from '@/os.js';
+import { shallowRef, ref, watch } from 'vue';
+import MkEmojiPickerDialog from '@/components/MkEmojiPickerDialog.vue';
+import { popup } from '@/os.js';
 import { prefer } from '@/preferences.js';

 /**
@@ -15,7 +15,6 @@ import { prefer } from '@/preferences.js';
 * 一度表示したダイアログを連続で使用できることが望ましいシーンでの利用が想定される。
 */
 class EmojiPicker {
-	private loadedComponent: typeof MkEmojiPickerDialog__TypeReferenceOnly | null = null;
 	private emojisRef = ref<string[]>([]);

 	constructor() {
@@ -23,15 +22,6 @@ class EmojiPicker {
 	}

 	public init() {
-		// コンポーネントをプリロードしてキャッシュしておく。
-		// iOS PWA では await を挟むとユーザーアクティベーションが失われfocusが効かなくなるため、
-		// show() 呼び出し時には同期的に popup() できるよう事前にコンポーネントを解決しておく。
-		import('@/components/MkEmojiPickerDialog.vue').then(m => {
-			this.loadedComponent = markRaw(m.default);
-		}).catch(err => {
-			console.error('[EmojiPicker] Failed to preload MkEmojiPickerDialog:', err);
-		});
-
 		watch([prefer.r.emojiPaletteForMain, prefer.r.emojiPalettes], () => {
 			this.emojisRef.value = prefer.s.emojiPaletteForMain == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForMain)?.emojis ?? [];
 		}, {
@@ -46,46 +36,21 @@ class EmojiPicker {
 	) {
 		const anchorRef = shallowRef(anchorElement);

-		if (this.loadedComponent) {
-			// コンポーネント解決済みのため同期的に popup() できる。
-			// ユーザーアクティベーションコンテキストが維持されiOSでもfocusが機能する。
-			const { dispose } = popup(this.loadedComponent, {
-				anchorElement: anchorRef,
-				pinnedEmojis: this.emojisRef,
-				asReactionPicker: false,
-				choseAndClose: false,
-			}, {
-				done: (emoji: string) => {
-					if (onChosen) onChosen(emoji);
-				},
-				closed: () => {
-					if (onClosed) onClosed();
-					dispose();
-				},
-			});
-		} else {
-			// フォールバック: 初回タップがプリロード完了前
-			popupAsyncWithDialog(
-				import('@/components/MkEmojiPickerDialog.vue').then(m => {
-					this.loadedComponent = markRaw(m.default);
-					return this.loadedComponent;
-				}),
-				{
-					anchorElement: anchorRef,
-					pinnedEmojis: this.emojisRef,
-					asReactionPicker: false,
-					choseAndClose: false,
-				},
-				{
-					done: (emoji: string) => {
-						if (onChosen) onChosen(emoji);
-					},
-					closed: () => {
-						if (onClosed) onClosed();
-					},
-				},
-			);
-		}
+		// defineAsyncComponentはiOS等でユーザーアクティベーションが失われてfocusが効かなくなるため使用不可
+		const { dispose } = popup(MkEmojiPickerDialog, {
+			anchorElement: anchorRef,
+			pinnedEmojis: this.emojisRef,
+			asReactionPicker: false,
+			choseAndClose: false,
+		}, {
+			done: (emoji: string) => {
+				if (onChosen) onChosen(emoji);
+			},
+			closed: () => {
+				if (onClosed) onClosed();
+				dispose();
+			},
+		});
 	}
 }

--- a/packages/frontend/src/utility/reaction-picker.ts
+++ b/packages/frontend/src/utility/reaction-picker.ts
@@ -4,13 +4,12 @@
 */

 import * as Misskey from 'misskey-js';
-import { markRaw, shallowRef, ref, watch } from 'vue';
-import type MkEmojiPickerDialog__TypeReferenceOnly from '@/components/MkEmojiPickerDialog.vue';
-import { popup, popupAsyncWithDialog } from '@/os.js';
+import { shallowRef, ref, watch } from 'vue';
+import MkEmojiPickerDialog from '@/components/MkEmojiPickerDialog.vue';
+import { popup } from '@/os.js';
 import { prefer } from '@/preferences.js';

 class ReactionPicker {
-	private loadedComponent: typeof MkEmojiPickerDialog__TypeReferenceOnly | null = null;
 	private reactionsRef = ref<string[]>([]);

 	constructor() {
@@ -18,15 +17,6 @@ class ReactionPicker {
 	}

 	public init() {
-		// コンポーネントをプリロードしてキャッシュしておく。
-		// iOS PWA では await を挟むとユーザーアクティベーションが失われfocusが効かなくなるため、
-		// show() 呼び出し時には同期的に popup() できるよう事前にコンポーネントを解決しておく。
-		import('@/components/MkEmojiPickerDialog.vue').then(m => {
-			this.loadedComponent = markRaw(m.default);
-		}).catch(err => {
-			console.error('[ReactionPicker] Failed to preload MkEmojiPickerDialog:', err);
-		});
-
 		watch([prefer.r.emojiPaletteForReaction, prefer.r.emojiPalettes], () => {
 			this.reactionsRef.value = prefer.s.emojiPaletteForReaction == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForReaction)?.emojis ?? [];
 		}, {
@@ -43,46 +33,21 @@ class ReactionPicker {
 		const anchorRef = shallowRef(anchorElement);
 		const targetNoteRef = ref(targetNote);

-		if (this.loadedComponent) {
-			// 通常パス: コンポーネント解決済みのため同期的に popup() できる。
-			// ユーザーアクティベーションコンテキストが維持されiOSでもfocusが機能する。
-			const { dispose } = popup(this.loadedComponent, {
-				anchorElement: anchorRef,
-				pinnedEmojis: this.reactionsRef,
-				asReactionPicker: true,
-				targetNote: targetNoteRef,
-			}, {
-				done: (reaction: string) => {
-					if (onChosen) onChosen(reaction);
-				},
-				closed: () => {
-					if (onClosed) onClosed();
-					dispose();
-				},
-			});
-		} else {
-			// フォールバック: 初回タップがプリロード完了前
-			popupAsyncWithDialog(
-				import('@/components/MkEmojiPickerDialog.vue').then(m => {
-					this.loadedComponent = markRaw(m.default);
-					return this.loadedComponent;
-				}),
-				{
-					anchorElement: anchorRef,
-					pinnedEmojis: this.reactionsRef,
-					asReactionPicker: true,
-					targetNote: targetNoteRef,
-				},
-				{
-					done: (reaction: string) => {
-						if (onChosen) onChosen(reaction);
-					},
-					closed: () => {
-						if (onClosed) onClosed();
-					},
-				},
-			);
-		}
+		// defineAsyncComponentはiOS等でユーザーアクティベーションが失われてfocusが効かなくなるため使用不可
+		const { dispose } = popup(MkEmojiPickerDialog, {
+			anchorElement: anchorRef,
+			pinnedEmojis: this.reactionsRef,
+			asReactionPicker: true,
+			targetNote: targetNoteRef,
+		}, {
+			done: (reaction: string) => {
+				if (onChosen) onChosen(reaction);
+			},
+			closed: () => {
+				if (onClosed) onClosed();
+				dispose();
+			},
+		});
 	}
 }