From 1ed6ed6ef07ce5f21dd2c31a7b389e8a1a3900d4 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 29 Jun 2024 17:47:38 +0900
Subject: [PATCH] =?UTF-8?q?embed=E3=81=AEURL=E3=83=91=E3=83=A9=E3=83=A1?=
 =?UTF-8?q?=E3=83=BC=E3=82=BF=E3=81=AE=E5=88=9D=E6=9C=9F=E5=8C=96=E3=82=92?=
 =?UTF-8?q?=E5=85=B1=E9=80=9A=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkEmbedCodeGenDialog.vue   |  5 +-
 packages/frontend/src/pages/embed/clip.vue    | 14 ++--
 packages/frontend/src/pages/embed/tag.vue     | 12 ++-
 .../src/pages/embed/user-timeline.vue         | 12 ++-
 packages/frontend/src/router/definition.ts    | 12 ---
 packages/frontend/src/scripts/embed-page.ts   | 79 +++++++++++++++++++
 .../frontend/src/scripts/get-embed-code.ts    | 43 ++--------
 packages/frontend/src/ui/embed.vue            | 14 ++--
 8 files changed, 113 insertions(+), 78 deletions(-)

diff --git a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
index 713e527a3f..f6b4499c70 100644
--- a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
+++ b/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 type { EmbeddableEntity, EmbedParams } from '@/scripts/get-embed-code.js';
+import { normalizeEmbedParams, getEmbedCode } 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;
diff --git a/packages/frontend/src/pages/embed/clip.vue b/packages/frontend/src/pages/embed/clip.vue
index 2c09c033c1..4792f0dc6a 100644
--- a/packages/frontend/src/pages/embed/clip.vue
+++ b/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 normalizedShowHeader = computed(() => props.showHeader !== 'false');
-
-// デフォルト: false
-const normalizedEnableAutoLoad = computed(() => props.enableAutoLoad === 'true');
+const embedParams = inject<ParsedEmbedParams>('embedParams', defaultEmbedParams);
 
 const clip = ref<Misskey.entities.Clip | null>(null);
 const pagination = computed(() => ({
diff --git a/packages/frontend/src/pages/embed/tag.vue b/packages/frontend/src/pages/embed/tag.vue
index f64cff2391..96601d278f 100644
--- a/packages/frontend/src/pages/embed/tag.vue
+++ b/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 normalizedShowHeader = computed(() => props.showHeader !== 'false');
-
-// デフォルト: false
-const normalizedEnableAutoLoad = computed(() => props.enableAutoLoad === 'true');
+const embedParams = inject<ParsedEmbedParams>('embedParams', defaultEmbedParams);
 
 const pagination = computed(() => ({
 	endpoint: 'notes/search-by-tag',
diff --git a/packages/frontend/src/pages/embed/user-timeline.vue b/packages/frontend/src/pages/embed/user-timeline.vue
index 20aef69163..b1daf8a0d4 100644
--- a/packages/frontend/src/pages/embed/user-timeline.vue
+++ b/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 normalizedShowHeader = computed(() => props.showHeader !== 'false');
-
-// デフォルト: false
-const normalizedEnableAutoLoad = computed(() => props.enableAutoLoad === 'true');
+const embedParams = inject<ParsedEmbedParams>('embedParams', defaultEmbedParams);
 
 const user = ref<Misskey.entities.UserLite | null>(null);
 const pagination = computed(() => ({
diff --git a/packages/frontend/src/router/definition.ts b/packages/frontend/src/router/definition.ts
index cc9d88ef80..36547e8f3e 100644
--- a/packages/frontend/src/router/definition.ts
+++ b/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')),
diff --git a/packages/frontend/src/scripts/embed-page.ts b/packages/frontend/src/scripts/embed-page.ts
index 74d22b05fb..67268eac00 100644
--- a/packages/frontend/src/scripts/embed-page.ts
+++ b/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内のやつ）に移動する
diff --git a/packages/frontend/src/scripts/get-embed-code.ts b/packages/frontend/src/scripts/get-embed-code.ts
index d37ad5d46a..27b25336ef 100644
--- a/packages/frontend/src/scripts/get-embed-code.ts
+++ b/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',
-	'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 const defaultEmbedParams: EmbedParams = {
-	maxHeight: undefined,
-	colorMode: undefined,
-	rounded: true,
-	border: true,
-	autoload: false,
-	header: true,
-};
-
+/**
+ * パラメータを正規化する（埋め込みコード作成用）
+ * @param params パラメータ
+ * @returns 正規化されたパラメータ
+ */
 export function normalizeEmbedParams(params: EmbedParams): Record<string, string> {
 	// paramsのvalueをすべてstringに変換。undefinedやnullはプロパティごと消す
 	const normalizedParams: Record<string, string> = {};
diff --git a/packages/frontend/src/ui/embed.vue b/packages/frontend/src/ui/embed.vue
index a5a7e51073..984b78c9a7 100644
--- a/packages/frontend/src/ui/embed.vue
+++ b/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(params.get('rounded') !== 'false');
-const embedNoBorder = ref(params.get('border') === 'false');
-const maxHeight = ref(params.get('maxHeight') ? parseInt(params.get('maxHeight')!) : 0);
+const embedRounded = ref(embedParams.rounded);
+const embedNoBorder = ref(!embedParams.border);
+const maxHeight = ref(embedParams.maxHeight ?? 0);
 //#endregion
 
 //#region Embed Resizer