OpenSource/misskey
OpenSource/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2024-12-23 15:02:19 +01:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
kakkokari-gtyih 2024-07-06 10:45:16 +09:00
parent b1100eab7a
commit 4f9ddbcecd
2 changed files with 34 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
packages/frontend/src/_embed_boot_.ts
View file

@ -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');
});

20
packages/frontend/src/ui/embed.vue
View file

@ -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>