From ca7a5f1da40f45a74876807cee043f47ebcee0fa Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 13 Feb 2023 06:43:49 +0900
Subject: [PATCH] feat(client): yt-player (for v12)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Squashed commit of the following:

commit 5892ff98ec4019194ebea54a828e5c37bf799b75
Author: taiyme <53635909+taiyme@users.noreply.github.com>
Date:   Mon Feb 13 06:26:51 2023 +0900

    enhance(client): プレイヤー/ツイートを閉じる機能を強化

commit f1fa058c3dd7001cf3911841ba91a6c4e0355553
Author: taiyme <53635909+taiyme@users.noreply.github.com>
Date:   Mon Feb 13 06:01:47 2023 +0900

    enhance(client): プレイヤーを閉じる

commit 191583121d3491ef005c4265d18060d04861899f
Author: taiyme <53635909+taiyme@users.noreply.github.com>
Date:   Mon Feb 13 05:09:54 2023 +0900

    fix(client): yt-player button

    Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

commit a3a1b0976bebe2b2109569336ab2c1c706e4e9df
Author: taiyme <53635909+taiyme@users.noreply.github.com>
Date:   Mon Feb 13 05:03:56 2023 +0900

    fix(client): MkWindow

commit 8e7eac2a550a430465a36ade01d341c5ec6270f4
Author: taiyme <53635909+taiyme@users.noreply.github.com>
Date:   Mon Feb 13 04:40:27 2023 +0900

    i18n yt-player

    Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

commit ab79f9f61e1433c8e39a221c4f76ffc37c7a54bf
Author: taiyme <53635909+taiyme@users.noreply.github.com>
Date:   Mon Feb 13 04:18:23 2023 +0900

    fix(client): yt-player

    Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

commit 1959fd0b91db39c4fc29c93c1f5d40b95fcd157b
Author: taiyme <53635909+taiyme@users.noreply.github.com>
Date:   Mon Feb 13 04:13:18 2023 +0900

    feat: Youtube window player (#9095)

    * wip: feat: Youtube Player Window

    * fix: player fill window

    * fix: improve design

    * fix: disable at mobile and creanup code

    * fix: tailing comma

    * fix: delete debug output

    * fix: eslint

    * fix: switch to component

    * fix(backend): add missing dependency

    Fix #9101

    Co-authored-by: sim1222 <50144466+sim1222@users.noreply.github.com>
    Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

Co-authored-by: sim1222 <50144466+sim1222@users.noreply.github.com>
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 locales/de-DE.yml                             |  2 +
 locales/en-US.yml                             |  2 +
 locales/es-ES.yml                             |  2 +
 locales/id-ID.yml                             |  2 +
 locales/it-IT.yml                             |  2 +
 locales/ja-JP.yml                             |  2 +
 locales/ja-KS.yml                             |  2 +
 locales/ko-KR.yml                             |  2 +
 locales/nl-NL.yml                             |  2 +
 locales/ru-RU.yml                             |  2 +
 locales/sk-SK.yml                             |  2 +
 locales/th-TH.yml                             |  2 +
 locales/uk-UA.yml                             |  2 +
 locales/zh-CN.yml                             |  2 +
 locales/zh-TW.yml                             |  2 +
 packages/client/src/components/MkButton.vue   | 10 +-
 .../client/src/components/MkUrlPreview.vue    | 93 +++++++++++--------
 packages/client/src/components/MkWindow.vue   |  4 +-
 .../client/src/components/MkYoutubePlayer.vue | 72 ++++++++++++++
 19 files changed, 164 insertions(+), 45 deletions(-)
 create mode 100644 packages/client/src/components/MkYoutubePlayer.vue

diff --git a/locales/de-DE.yml b/locales/de-DE.yml
index a7f78da00ade..0954160e2eb0 100644
--- a/locales/de-DE.yml
+++ b/locales/de-DE.yml
@@ -894,6 +894,8 @@ navbar: "Navigationsleiste"
 shuffle: "Mischen"
 account: "Benutzerkonto"
 move: "Verschieben"
+windowMaximize: "Maximieren"
+windowRestore: "Wiederherstellen"
 _sensitiveMediaDetection:
   description: "Ermöglicht eine Erleichterung der Servermoderation durch die automatische Erkennungen von NSFW-Medien unter Verwendung von Machine Learning. Hierdurch wird die Serverlast etwas erhöht."
   sensitivity: "Erkennungssensitivität"
diff --git a/locales/en-US.yml b/locales/en-US.yml
index eb7d5487b06c..c2670bd2126c 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -894,6 +894,8 @@ navbar: "Navigation bar"
 shuffle: "Shuffle"
 account: "Account"
 move: "Move"
+windowMaximize: "Maximize"
+windowRestore: "Restore"
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing NSFW media via Machine Learning. This will slightly increase the load on the server."
   sensitivity: "Detection sensitivity"
diff --git a/locales/es-ES.yml b/locales/es-ES.yml
index d4daac1597a2..7abe6fe3e712 100644
--- a/locales/es-ES.yml
+++ b/locales/es-ES.yml
@@ -894,6 +894,8 @@ navbar: "Barra de navegación"
 shuffle: "Aleatorio"
 account: "Cuentas"
 move: "Mover"
+windowMaximize: "Maximizar"
+windowRestore: "Regresar"
 _sensitiveMediaDetection:
   description: "Reduce el esfuerzo de la moderación el el servidor a través del reconocimiento automático de contenido NSFW usando 'Machine Learning'. Esto puede incrementar ligeramente la carga en el servidor."
   sensitivity: "Sensibilidad de detección"
diff --git a/locales/id-ID.yml b/locales/id-ID.yml
index 7d0c9bd4d471..e3ed00deffd0 100644
--- a/locales/id-ID.yml
+++ b/locales/id-ID.yml
@@ -855,6 +855,8 @@ colored: "Diwarnai"
 label: "Label"
 localOnly: "Hanya lokal"
 account: "Akun"
+windowMaximize: "Maksimalkan"
+windowRestore: "Kembalikan"
 _emailUnavailable:
   used: "Alamat surel ini telah digunakan"
   format: "Format tidak valid."
diff --git a/locales/it-IT.yml b/locales/it-IT.yml
index 29cead580165..21aeb9ab8806 100644
--- a/locales/it-IT.yml
+++ b/locales/it-IT.yml
@@ -817,6 +817,8 @@ colored: "Colorato"
 label: "Etichetta"
 localOnly: "Soltanto locale"
 account: "Account"
+windowMaximize: "Ingrandisci"
+windowRestore: "Ripristina"
 _emailUnavailable:
   used: "Email già in uso"
   format: "Formato email non valido"
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 1b122c14b22b..6611e6695881 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -894,6 +894,8 @@ navbar: "ナビゲーションバー"
 shuffle: "シャッフル"
 account: "アカウント"
 move: "移動"
+windowMaximize: "最大化"
+windowRestore: "元に戻す"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"
diff --git a/locales/ja-KS.yml b/locales/ja-KS.yml
index a0103519f583..48003e4c588d 100644
--- a/locales/ja-KS.yml
+++ b/locales/ja-KS.yml
@@ -843,6 +843,8 @@ navbar: "ナビゲーションバー"
 shuffle: "シャッフルするで"
 account: "アカウント"
 move: "移動するで"
+windowMaximize: "最大化"
+windowRestore: "元に戻す"
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出して、モデレーションに役立てることができるで。サーバーの負荷が少し増えてまうなあ。"
   sensitivity: "検出感度やで"
diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
index b7f93e18bfc2..9a9c67e21e06 100644
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -893,6 +893,8 @@ navbar: "네비게이션 바"
 shuffle: "셔플"
 account: "계정"
 move: "이동"
+windowMaximize: "최대화"
+windowRestore: "복구"
 _sensitiveMediaDetection:
   description: "기계학습을 통해 자동으로 민감한 미디어를 탐지하여, 모더레이션에 참고할 수 있도록 합니다. 서버의 부하를 약간 증가시킵니다."
   sensitivity: "탐지 민감도"
diff --git a/locales/nl-NL.yml b/locales/nl-NL.yml
index 802449f59f9d..6b2917c65bc5 100644
--- a/locales/nl-NL.yml
+++ b/locales/nl-NL.yml
@@ -308,6 +308,8 @@ searchByGoogle: "Zoeken"
 cropImage: "Afbeelding bijsnijden"
 cropImageAsk: "Bijsnijdengevraagd"
 file: "Bestanden"
+windowMaximize: "Maximaliseren"
+windowRestore: "Herstellen"
 _email:
   _follow:
     title: "volgde jou"
diff --git a/locales/ru-RU.yml b/locales/ru-RU.yml
index 1f9c2c192014..9dd3b2ca9d83 100644
--- a/locales/ru-RU.yml
+++ b/locales/ru-RU.yml
@@ -849,6 +849,8 @@ beta: "Бета"
 enableAutoSensitive: "Автоматическое определение NSFW"
 enableAutoSensitiveDescription: "Если доступно, используйте машинное обучение для автоматической установки флага NSFW на носителе. Даже если эта функция отключена, она может быть установлена ​​автоматически в зависимости от инстанта."
 account: "Учётные записи"
+windowMaximize: "Развернуть"
+windowRestore: "Восстановить"
 _sensitiveMediaDetection:
   description: "Машинное обучение может быть использовано для автоматического обнаружения чувствительных медиа для модерации. Нагрузка на сервер увеличивается незначительно."
   setSensitiveFlagAutomatically: "Установить флаг NSFW"
diff --git a/locales/sk-SK.yml b/locales/sk-SK.yml
index c6fcd4c4cd2a..e0ff26f2560d 100644
--- a/locales/sk-SK.yml
+++ b/locales/sk-SK.yml
@@ -889,6 +889,8 @@ activeEmailValidationDescription: "Dôkladnejšie overí e-mailovú adresu použ
 navbar: "Navigačný panel"
 account: "Účty"
 move: "Pohyb"
+windowMaximize: "Maximalizovať"
+windowRestore: "Obnoviť"
 _sensitiveMediaDetection:
   description: "Strojové učenie sa použije na automatickú detekciu citlivých médií na účely ich moderovania. Mierne sa zvýši zaťaženie servera."
   sensitivity: "Citlivosť detekcie"
diff --git a/locales/th-TH.yml b/locales/th-TH.yml
index 3de363e5176d..c2c81ef72b59 100644
--- a/locales/th-TH.yml
+++ b/locales/th-TH.yml
@@ -894,6 +894,8 @@ navbar: "แถบนำทาง"
 shuffle: "สลับ"
 account: "บัญชีผู้ใช้"
 move: "ย้าย"
+windowMaximize: "ขยายใหญ่สุดแล้ว"
+windowRestore: "เลิกทำ"
 _sensitiveMediaDetection:
   description: "ลดความพยายามในการดูแลเซิร์ฟเวอร์ผ่านการจดจำสื่อ NSFW โดยอัตโนมัติผ่านการเรียนรู้ของเครื่อง การทำสิ่งนี้อาจจะเพิ่มภาระบนเซิร์ฟเวอร์เล็กน้อย"
   sensitivity: "การตรวจจับความไว"
diff --git a/locales/uk-UA.yml b/locales/uk-UA.yml
index 96c68cf36202..f3dd8d8ee3ce 100644
--- a/locales/uk-UA.yml
+++ b/locales/uk-UA.yml
@@ -744,6 +744,8 @@ reverse: "Перевернути"
 colored: "Кольоровий"
 label: "Назва"
 localOnly: "Локально"
+windowMaximize: "Розгорнути"
+windowRestore: "Відновити"
 _ffVisibility:
   public: "Опублікувати"
 _ad:
diff --git a/locales/zh-CN.yml b/locales/zh-CN.yml
index 022d8fa66d5f..80b04c5654c6 100644
--- a/locales/zh-CN.yml
+++ b/locales/zh-CN.yml
@@ -894,6 +894,8 @@ navbar: "导航栏"
 shuffle: "随机"
 account: "账户"
 move: "移动"
+windowMaximize: "最大化"
+windowRestore: "还原"
 _sensitiveMediaDetection:
   description: "可以使用机器学习技术自动检测敏感媒体，以便进行审核。服务器负载将略微增加。"
   sensitivity: "检测敏感度"
diff --git a/locales/zh-TW.yml b/locales/zh-TW.yml
index eb06cfc2859e..1366d4f6715a 100644
--- a/locales/zh-TW.yml
+++ b/locales/zh-TW.yml
@@ -894,6 +894,8 @@ navbar: "導覽列"
 shuffle: "隨機"
 account: "帳戶"
 move: "移動 "
+windowMaximize: "最大化"
+windowRestore: "復原"
 _sensitiveMediaDetection:
   description: "您可以使用機器學習自動檢測敏感媒體並將其用於審核。 伺服器的負荷會稍微增加。"
   sensitivity: "檢測敏感度"
diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index 8314fb6633f8..6cff18c74035 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -1,7 +1,7 @@
 <template>
 <button
 	v-if="!link" class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full }"
+	:class="{ inline, primary, gradate, danger, rounded, full, small }"
 	:type="type"
 	@click="emit('click', $event)"
 	@mousedown="onMousedown"
@@ -13,7 +13,7 @@
 </button>
 <MkA
 	v-else class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full }"
+	:class="{ inline, primary, gradate, danger, rounded, full, small }"
 	:to="to"
 	@mousedown="onMousedown"
 >
@@ -39,6 +39,7 @@ const props = defineProps<{
 	wait?: boolean;
 	danger?: boolean;
 	full?: boolean;
+	small?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -124,6 +125,11 @@ function onMousedown(evt: MouseEvent): void {
 		background: var(--buttonHoverBg);
 	}
 
+	&.small {
+		font-size: 90%;
+		padding: 6px 12px;
+	}
+
 	&.full {
 		width: 100%;
 	}
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index ec5d63871593..e9cc4fc092ac 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -1,16 +1,28 @@
 <template>
-<div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
-	<button class="disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="ti ti-x"></i></button>
-	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
-</div>
-<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
-	<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
-</div>
+<template v-if="playerEnabled">
+	<div class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
+		<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
+	</div>
+	<div class="preview-action">
+		<MkButton :small="true" inline @click="playerEnabled = false">
+			<i class="ti ti-x"></i> {{ i18n.ts.disablePlayer }}
+		</MkButton>
+	</div>
+</template>
+<template v-else-if="tweetId && tweetExpanded">
+	<div ref="twitter" class="twitter">
+		<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
+	</div>
+	<div class="preview-action">
+		<MkButton :small="true" inline @click="tweetExpanded = false">
+			<i class="ti ti-x"></i> {{ i18n.ts.close }}
+		</MkButton>
+	</div>
+</template>
 <div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
 	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
 		<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
 			<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
-				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="ti ti-player-play"></i></button>
 			</div>
 			<article>
 				<header>
@@ -24,18 +36,29 @@
 			</article>
 		</component>
 	</transition>
-	<div v-if="tweetId" class="expandTweet">
-		<a @click="tweetExpanded = true">
+	<div v-if="tweetId" class="preview-action">
+		<MkButton :small="true" inline @click="tweetExpanded = true">
 			<i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }}
-		</a>
+		</MkButton>
+	</div>
+	<div v-if="!playerEnabled && player.url" class="preview-action">
+		<MkButton :small="true" inline @click="playerEnabled = true">
+			<i class="ti ti-player-play"></i> {{ i18n.ts.enablePlayer }}
+		</MkButton>
+		<MkButton v-if="!isMobile" :small="true" inline @click="openPlayer()">
+			<i class="ti ti-picture-in-picture"></i> {{ i18n.ts.openInWindow }}
+		</MkButton>
 	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
+import { defineAsyncComponent, onMounted, onUnmounted } from 'vue';
 import { url as local, lang } from '@/config';
 import { i18n } from '@/i18n';
+import * as os from '@/os';
+import { deviceKind } from '@/scripts/device-kind';
+import MkButton from '@/components/MkButton.vue';
 
 const props = withDefaults(defineProps<{
 	url: string;
@@ -46,6 +69,9 @@ const props = withDefaults(defineProps<{
 	compact: false,
 });
 
+const MOBILE_THRESHOLD = 500;
+const isMobile = $ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
+
 const self = props.url.startsWith(local);
 const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
@@ -77,7 +103,7 @@ if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/
 	requestUrl.hostname = 'www.youtube.com';
 }
 
-const requestLang = (lang || 'ja-JP').replace('ja-KS', 'ja-JP');
+const requestLang = (lang ?? 'ja-JP').replace('ja-KS', 'ja-JP');
 
 requestUrl.hash = '';
 
@@ -103,6 +129,12 @@ function adjustTweetHeight(message: any) {
 	if (height) tweetHeight = height;
 }
 
+const openPlayer = (): void => {
+	os.popup(defineAsyncComponent(() => import('@/components/MkYoutubePlayer.vue')), {
+		url: requestUrl.href,
+	});
+};
+
 (window as any).addEventListener('message', adjustTweetHeight);
 
 onUnmounted(() => {
@@ -115,24 +147,6 @@ onUnmounted(() => {
 	position: relative;
 	width: 100%;
 
-	> button {
-		position: absolute;
-		top: -1.5em;
-		right: 0;
-		font-size: 1em;
-		width: 1.5em;
-		height: 1.5em;
-		padding: 0;
-		margin: 0;
-		color: var(--fg);
-		background: rgba(128, 128, 128, 0.2);
-		opacity: 0.7;
-
-		&:hover {
-			opacity: 0.9;
-		}
-	}
-
 	> iframe {
 		height: 100%;
 		left: 0;
@@ -233,16 +247,6 @@ onUnmounted(() => {
 			justify-content: center;
 			align-items: center;
 
-			> button {
-				font-size: 3.5em;
-				opacity: 0.7;
-
-				&:hover {
-					font-size: 4em;
-					opacity: 0.9;
-				}
-			}
-
 			& + article {
 				left: 100px;
 				width: calc(100% - 100px);
@@ -302,4 +306,11 @@ onUnmounted(() => {
 		}
 	}
 }
+
+.preview-action {
+	display: flex;
+	gap: 6px;
+	flex-wrap: wrap;
+	margin-top: 6px;
+}
 </style>
diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index 0ce3aa076d92..355df69d73fd 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -425,10 +425,10 @@ defineExpose({
 		border-radius: var(--radius);
 
 		> .header {
-			--height: 42px;
+			--height: 39px;
 
 			&.mini {
-				--height: 38px;
+				--height: 32px;
 			}
 
 			display: flex;
diff --git a/packages/client/src/components/MkYoutubePlayer.vue b/packages/client/src/components/MkYoutubePlayer.vue
new file mode 100644
index 000000000000..3c17af178bd7
--- /dev/null
+++ b/packages/client/src/components/MkYoutubePlayer.vue
@@ -0,0 +1,72 @@
+<template>
+<XWindow :initial-width="640" :initial-height="402" :can-resize="true" :close-button="true">
+	<template #header>
+		<i class="icon ti ti-brand-youtube" style="margin-right: 0.5em;"></i>
+		<span>{{ title ?? 'YouTube' }}</span>
+	</template>
+
+	<div class="poamfof">
+		<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+			<div v-if="player.url" class="player">
+				<iframe v-if="!fetching" :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
+			</div>
+		</transition>
+		<MkLoading v-if="fetching"/>
+		<MkError v-else-if="!player.url" @retry="ytFetch()"/>
+	</div>
+</XWindow>
+</template>
+
+<script lang="ts" setup>
+import XWindow from '@/components/MkWindow.vue';
+import { lang } from '@/config';
+
+const props = defineProps<{
+	url: string;
+}>();
+
+const requestUrl = new URL(props.url);
+
+let fetching = $ref(true);
+let title = $ref<string | null>(null);
+let player = $ref({
+	url: null,
+	width: null,
+	height: null,
+});
+
+const requestLang = (lang ?? 'ja-JP').replace('ja-KS', 'ja-JP');
+
+const ytFetch = (): void => {
+	fetching = true;
+	fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
+		res.json().then(info => {
+			if (info.url == null) return;
+			title = info.title;
+			fetching = false;
+			player = info.player;
+		});
+	});
+};
+
+ytFetch();
+
+</script>
+
+<style lang="scss">
+.poamfof {
+	position: relative;
+	overflow: hidden;
+	height: 100%;
+
+	.player {
+		position: absolute;
+		inset: 0;
+
+		iframe {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+</style>