embedのURLパラメータの初期化を共通化

packages/frontend/src/components/MkEmbedCodeGenDialog.vue

@@ -81,8 +81,9 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { url } from '@/config.js';
 import copy from '@/scripts/copy-to-clipboard.js';
-import { normalizeEmbedParams, embedRouteWithScrollbar, getEmbedCode } from '@/scripts/get-embed-code.js';
+import { normalizeEmbedParams, getEmbedCode } from '@/scripts/get-embed-code.js';
-import type { EmbeddableEntity, EmbedParams } from '@/scripts/get-embed-code.js';
+import { embedRouteWithScrollbar } from '@/scripts/embed-page.js';
+import type { EmbeddableEntity, EmbedParams } from '@/scripts/embed-page.js';
 
 const emit = defineEmits<{
 	(ev: 'ok', url: string, code: string): void;

packages/frontend/src/pages/embed/clip.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div>
 	<MkLoading v-if="loading"/>
-	<XEmbedTimelineUI v-else-if="clip" :showHeader="normalizedShowHeader">
+	<XEmbedTimelineUI v-else-if="clip" :showHeader="embedParams.header">
 		<template #header>
 			<div :class="$style.clipHeader">
 				<div :class="$style.headerClipIconRoot">
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkNotes
 				ref="notesEl"
 				:pagination="pagination"
-				:disableAutoLoad="!normalizedEnableAutoLoad"
+				:disableAutoLoad="embedParams.autoload"
 				:noGap="true"
 				:ad="false"
 			/>
@@ -52,11 +52,11 @@ import { url, instanceName } from '@/config.js';
 import { scrollToTop } from '@/scripts/scroll.js';
 import { isLink } from '@/scripts/is-link.js';
 import { useRouter } from '@/router/supplier.js';
+import { defaultEmbedParams } from '@/scripts/embed-page.js';
+import type { ParsedEmbedParams } from '@/scripts/embed-page.js';
 
 const props = defineProps<{
 	clipId: string;
-	showHeader?: string;
-	enableAutoLoad?: string;
 }>();
 
 function redirectIfNotEmbedPage() {
@@ -72,11 +72,7 @@ redirectIfNotEmbedPage();
 
 onActivated(redirectIfNotEmbedPage);
 
-// デフォルト: true
+const embedParams = inject<ParsedEmbedParams>('embedParams', defaultEmbedParams);
-const normalizedShowHeader = computed(() => props.showHeader !== 'false');
-
-// デフォルト: false
-const normalizedEnableAutoLoad = computed(() => props.enableAutoLoad === 'true');
 
 const clip = ref<Misskey.entities.Clip | null>(null);
 const pagination = computed(() => ({

packages/frontend/src/pages/embed/tag.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div>
-	<XEmbedTimelineUI v-if="tag" :showHeader="normalizedShowHeader">
+	<XEmbedTimelineUI v-if="tag" :showHeader="embedParams.header">
 		<template #header>
 			<div :class="$style.clipHeader">
 				<div :class="$style.headerClipIconRoot">
@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkNotes
 				ref="notesEl"
 				:pagination="pagination"
-				:disableAutoLoad="!normalizedEnableAutoLoad"
+				:disableAutoLoad="embedParams.autoload"
 				:noGap="true"
 				:ad="false"
 			/>
@@ -49,6 +49,8 @@ import { url, instanceName } from '@/config.js';
 import { scrollToTop } from '@/scripts/scroll.js';
 import { isLink } from '@/scripts/is-link.js';
 import { useRouter } from '@/router/supplier.js';
+import { defaultEmbedParams } from '@/scripts/embed-page.js';
+import type { ParsedEmbedParams } from '@/scripts/embed-page.js';
 
 const props = defineProps<{
 	tag: string;
@@ -69,11 +71,7 @@ redirectIfNotEmbedPage();
 
 onActivated(redirectIfNotEmbedPage);
 
-// デフォルト: true
+const embedParams = inject<ParsedEmbedParams>('embedParams', defaultEmbedParams);
-const normalizedShowHeader = computed(() => props.showHeader !== 'false');
-
-// デフォルト: false
-const normalizedEnableAutoLoad = computed(() => props.enableAutoLoad === 'true');
 
 const pagination = computed(() => ({
 	endpoint: 'notes/search-by-tag',

packages/frontend/src/pages/embed/user-timeline.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div>
 	<MkLoading v-if="loading"/>
-	<XEmbedTimelineUI v-else-if="user" :showHeader="normalizedShowHeader">
+	<XEmbedTimelineUI v-else-if="user" :showHeader="embedParams.header">
 		<template #header>
 			<div :class="$style.userHeader">
 				<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer" :class="$style.avatarLink">
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkNotes
 				ref="notesEl"
 				:pagination="pagination"
-				:disableAutoLoad="!normalizedEnableAutoLoad"
+				:disableAutoLoad="embedParams.autoload"
 				:noGap="true"
 				:ad="false"
 			/>
@@ -58,6 +58,8 @@ import { url, instanceName } from '@/config.js';
 import { scrollToTop } from '@/scripts/scroll.js';
 import { isLink } from '@/scripts/is-link.js';
 import { useRouter } from '@/router/supplier.js';
+import { defaultEmbedParams } from '@/scripts/embed-page.js';
+import type { ParsedEmbedParams } from '@/scripts/embed-page.js';
 
 const props = defineProps<{
 	username: string;
@@ -78,11 +80,7 @@ redirectIfNotEmbedPage();
 
 onActivated(redirectIfNotEmbedPage);
 
-// デフォルト: true
+const embedParams = inject<ParsedEmbedParams>('embedParams', defaultEmbedParams);
-const normalizedShowHeader = computed(() => props.showHeader !== 'false');
-
-// デフォルト: false
-const normalizedEnableAutoLoad = computed(() => props.enableAutoLoad === 'true');
 
 const user = ref<Misskey.entities.UserLite | null>(null);
 const pagination = computed(() => ({

packages/frontend/src/router/definition.ts

@@ -569,24 +569,12 @@ const routes: RouteDef[] = [{
 }, {
 	path: '/embed/user-timeline/@:username',
 	component: page(() => import('@/pages/embed/user-timeline.vue')),
-	query: {
-		header: 'showHeader',
-		autoload: 'enableAutoLoad',
-	}
 }, {
 	path: '/embed/clips/:clipId',
 	component: page(() => import('@/pages/embed/clip.vue')),
-	query: {
-		header: 'showHeader',
-		autoload: 'enableAutoLoad',
-	}
 }, {
 	path: '/embed/tags/:tag',
 	component: page(() => import('@/pages/embed/tag.vue')),
-	query: {
-		header: 'showHeader',
-		autoload: 'enableAutoLoad',
-	},
 }, {
 	path: '/timeline',
 	component: page(() => import('@/pages/timeline.vue')),

packages/frontend/src/scripts/embed-page.ts

@@ -6,6 +6,85 @@ import { miLocalStorage } from "@/local-storage.js";
 import type { Keys } from "@/local-storage.js";
 import { embedPage } from "@/config.js";
 
+//#region Embed関連の定義
+
+/** 埋め込みの対象となるエンティティ（/embed/xxx の xxx の部分と対応させる） */
+const embeddableEntities = [
+	'notes',
+	'user-timeline',
+	'clips',
+	'tags',
+] as const;
+
+/** 埋め込みの対象となるエンティティ */
+export type EmbeddableEntity = typeof embeddableEntities[number];
+
+/** 内部でスクロールがあるページ */
+export const embedRouteWithScrollbar: EmbeddableEntity[] = [
+	'clips',
+	'tags',
+	'user-timeline'
+];
+
+/** 埋め込みコードのパラメータ */
+export type EmbedParams = {
+	maxHeight?: number;
+	colorMode?: 'light' | 'dark';
+	rounded?: boolean;
+	border?: boolean;
+	autoload?: boolean;
+	header?: boolean;
+};
+
+export type ParsedEmbedParams = Required<Omit<EmbedParams, 'maxHeight' | 'colorMode'>> & Pick<EmbedParams, 'maxHeight' | 'colorMode'>;
+
+/** パラメータのデフォルトの値 */
+export const defaultEmbedParams = {
+	maxHeight: undefined,
+	colorMode: undefined,
+	rounded: true,
+	border: true,
+	autoload: false,
+	header: true,
+} as const;
+
+/**
+ * パラメータを正規化する（埋め込みページ初期化用）
+ * @param searchParams URLSearchParamsもしくはクエリ文字列
+ * @returns 正規化されたパラメータ
+ */
+export function parseEmbedParams(searchParams: URLSearchParams | string): ParsedEmbedParams {
+	let _searchParams: URLSearchParams;
+	if (typeof searchParams === 'string') {
+		_searchParams = new URLSearchParams(searchParams);
+	} else {
+		_searchParams = searchParams;
+	}
+
+	const params: EmbedParams = {};
+	for (const key in defaultEmbedParams) {
+		const value = _searchParams.get(key);
+		if (value != null) {
+			if (value === 'true') {
+				params[key] = true;
+			} else if (value === 'false') {
+				params[key] = false;
+			} else if (!isNaN(Number(value))) {
+				params[key] = Number(value);
+			} else if (key === 'colorMode' && ['light', 'dark'].includes(value)) {
+				params[key] = value as 'light' | 'dark';
+			} else {
+				params[key] = value;
+			}
+		}
+	}
+
+	return {
+		...defaultEmbedParams,
+		...params,
+	};
+}
+
 /**
  * EmbedページではlocalStorageを使用できないようにしているが、
  * 動作に必要な値はsafeSessionStorage（miLocalStorage内のやつ）に移動する

packages/frontend/src/scripts/get-embed-code.ts

@@ -7,44 +7,15 @@ import { url } from '@/config.js';
 import { MOBILE_THRESHOLD } from '@/const.js';
 import * as os from '@/os.js';
 import copy from '@/scripts/copy-to-clipboard.js';
+import type { EmbedParams, EmbeddableEntity } from '@/scripts/embed-page.js';
+import { defaultEmbedParams, embedRouteWithScrollbar } from '@/scripts/embed-page.js';
 import MkEmbedCodeGenDialog from '@/components/MkEmbedCodeGenDialog.vue';
 
-// 埋め込みの対象となるエンティティ（/embed/xxx の xxx の部分と対応させる）
+/**
-const embeddableEntities = [
+ * パラメータを正規化する（埋め込みコード作成用）
-	'notes',
+ * @param params パラメータ
-	'user-timeline',
+ * @returns 正規化されたパラメータ
-	'clips',
+ */
-	'tags',
-] as const;
-
-export type EmbeddableEntity = typeof embeddableEntities[number];
-
-// 内部でスクロールがあるページ
-export const embedRouteWithScrollbar: EmbeddableEntity[] = [
-	'clips',
-	'tags',
-	'user-timeline'
-];
-
-export type EmbedParams = {
-	maxHeight?: number;
-	colorMode?: 'light' | 'dark';
-	rounded?: boolean;
-	border?: boolean;
-	autoload?: boolean;
-	header?: boolean;
-};
-
-// パラメータのデフォルトの値
-export const defaultEmbedParams: EmbedParams = {
-	maxHeight: undefined,
-	colorMode: undefined,
-	rounded: true,
-	border: true,
-	autoload: false,
-	header: true,
-};
-
 export function normalizeEmbedParams(params: EmbedParams): Record<string, string> {
 	// paramsのvalueをすべてstringに変換。undefinedやnullはプロパティごと消す
 	const normalizedParams: Record<string, string> = {};

packages/frontend/src/ui/embed.vue

@@ -31,7 +31,8 @@ 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';
+import { postMessageToParentWindow } from '@/scripts/post-message.js';
+import { parseEmbedParams } from '@/scripts/embed-page.js';
 
 const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 
@@ -61,13 +62,16 @@ mainRouter.navHook = (path, flag): boolean => {
 
 //#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 params = new URLSearchParams(location.search);
+const embedRounded = ref(embedParams.rounded);
-const embedRounded = ref(params.get('rounded') !== 'false');
+const embedNoBorder = ref(!embedParams.border);
-const embedNoBorder = ref(params.get('border') === 'false');
+const maxHeight = ref(embedParams.maxHeight ?? 0);
-const maxHeight = ref(params.get('maxHeight') ? parseInt(params.get('maxHeight')!) : 0);
 //#endregion
 
 //#region Embed Resizer