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>