From 4f9ddbcecdab3ec1c129493cc4165078a124b340 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 6 Jul 2024 10:45:16 +0900
Subject: [PATCH] =?UTF-8?q?params=E3=81=AE=E3=83=91=E3=83=BC=E3=82=B9?=
 =?UTF-8?q?=E3=82=92boot=E3=81=A7=E8=A1=8C=E3=81=86=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/_embed_boot_.ts | 36 +++++++++++++++++++++------
 packages/frontend/src/ui/embed.vue    | 20 ++++-----------
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/src/_embed_boot_.ts b/packages/frontend/src/_embed_boot_.ts
index 836e6865b6..36f5e6143d 100644
--- a/packages/frontend/src/_embed_boot_.ts
+++ b/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');
-if (color && ['light', 'dark'].includes(color)) {
-	bootOptions.forceColorMode = color as 'light' | 'dark';
+const embedParams = parseEmbedParams(params);
+
+// カラーモードのオーバーライド
+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');
 });
diff --git a/packages/frontend/src/ui/embed.vue b/packages/frontend/src/ui/embed.vue
index 984b78c9a7..a505cbea14 100644
--- a/packages/frontend/src/ui/embed.vue
+++ b/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>