paramsのパースをbootで行うように

packages/frontend/src/_embed_boot_.ts

@@ -12,33 +12,55 @@ import { createApp, defineAsyncComponent } from 'vue';
 import { common } from '@/boot/common.js';
 import type { CommonBootOptions } from '@/boot/common.js';
 import { setIframeId, postMessageToParentWindow } from '@/scripts/post-message.js';
+import { parseEmbedParams } from '@/scripts/embed-page.js';
 import { defaultStore } from '@/store.js';
 
 const bootOptions: Partial<CommonBootOptions> = {};
 
-// カラーモードのオーバーライド
 const params = new URLSearchParams(location.search);
-const color = params.get('colorMode');
+const embedParams = parseEmbedParams(params);
-if (color && ['light', 'dark'].includes(color)) {
+
-	bootOptions.forceColorMode = color as 'light' | 'dark';
+// カラーモードのオーバーライド
+if (embedParams.colorMode != null) {
+	bootOptions.forceColorMode = embedParams.colorMode;
 }
 
+// サイズの制限
+document.documentElement.style.maxWidth = '500px';
+
+// サーバー起動の場合はもとから付与されているけど一応
+document.documentElement.classList.add('embed');
+
 // 外部タブでのstoreの変更の影響を受けないように
 defaultStore.setConfig({
 	disableMessageChannel: true,
 });
 
 // iframeIdの設定
-window.addEventListener('message', event => {
+function setIframeIdHandler(event: MessageEvent) {
 	if (event.data?.type === 'misskey:embedParent:registerIframeId' && event.data.payload?.iframeId != null) {
 		setIframeId(event.data.payload.iframeId);
+		window.removeEventListener('message', setIframeIdHandler);
 	}
-});
+}
+window.addEventListener('message', setIframeIdHandler);
 
 // 起動
 common(() => createApp(
 	defineAsyncComponent(() => import('@/ui/embed.vue')),
-), bootOptions).then(({ isClientUpdated }) => {
+), bootOptions).then(async ({ app }) => {
+	//#region Embed Provide
+	app.provide('EMBED_PAGE', true);
+	app.provide('embedParams', embedParams);
+	//#endregion
+
+	//#region defaultStoreを書き換え
+	await defaultStore.ready;
+
+	defaultStore.set('sound_notUseSound', true);
+	defaultStore.set('showPreview', false);
+	//#endregion
+
 	// 起動完了を通知（このあとクライアント側から misskey:embedParent:registerIframeId が送信される）
 	postMessageToParentWindow('misskey:embed:ready');
 });

packages/frontend/src/ui/embed.vue

@@ -26,13 +26,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, provide, ref, shallowRef, onMounted, onUnmounted } from 'vue';
+import { computed, provide, ref, shallowRef, onMounted, onUnmounted, inject } from 'vue';
 import XCommon from './_common_/common.vue';
 import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
 import { instanceName } from '@/config.js';
 import { mainRouter } from '@/router/main.js';
 import { postMessageToParentWindow } from '@/scripts/post-message.js';
-import { parseEmbedParams } from '@/scripts/embed-page.js';
+import { defaultEmbedParams } from '@/scripts/embed-page.js';
+import type { ParsedEmbedParams } from '@/scripts/embed-page.js';
+
+const embedParams = inject<ParsedEmbedParams>('embedParams', defaultEmbedParams);
 
 const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 
@@ -60,14 +63,6 @@ mainRouter.navHook = (path, flag): boolean => {
 };
 //#endregion
 
-//#region Embed Provide
-provide('EMBED_PAGE', true);
-
-const params = new URLSearchParams(location.search);
-const embedParams = parseEmbedParams(params);
-provide('embedParams', embedParams);
-//#endregion
-
 //#region Embed Style
 const embedRounded = ref(embedParams.rounded);
 const embedNoBorder = ref(!embedParams.border);
@@ -93,11 +88,6 @@ onUnmounted(() => {
 	resizeObserver.disconnect();
 });
 //#endregion
-
-document.documentElement.style.maxWidth = '500px';
-
-// サーバー起動の場合はもとから付与されているけど一応
-document.documentElement.classList.add('embed');
 </script>
 
 <style lang="scss" module>