feat(client): yt-player (for v12)

Squashed commit of the following: commit 5892ff98ec4019194ebea54a828e5c37bf799b75 Author: taiyme <[email protected]> Date: Mon Feb 13 06:26:51 2023 +0900 enhance(client): プレイヤー/ツイートを閉じる機能を強化 commit f1fa058c3dd7001cf3911841ba91a6c4e0355553 Author: taiyme <[email protected]> Date: Mon Feb 13 06:01:47 2023 +0900 enhance(client): プレイヤーを閉じる commit 191583121d3491ef005c4265d18060d04861899f Author: taiyme <[email protected]> Date: Mon Feb 13 05:09:54 2023 +0900 fix(client): yt-player button Co-authored-by: syuilo <[email protected]> commit a3a1b0976bebe2b2109569336ab2c1c706e4e9df Author: taiyme <[email protected]> Date: Mon Feb 13 05:03:56 2023 +0900 fix(client): MkWindow commit 8e7eac2a550a430465a36ade01d341c5ec6270f4 Author: taiyme <[email protected]> Date: Mon Feb 13 04:40:27 2023 +0900 i18n yt-player Co-authored-by: syuilo <[email protected]> commit ab79f9f61e1433c8e39a221c4f76ffc37c7a54bf Author: taiyme <[email protected]> Date: Mon Feb 13 04:18:23 2023 +0900 fix(client): yt-player Co-authored-by: syuilo <[email protected]> commit 1959fd0b91db39c4fc29c93c1f5d40b95fcd157b Author: taiyme <[email protected]> Date: Mon Feb 13 04:13:18 2023 +0900 feat: Youtube window player (misskey-dev#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 misskey-dev#9101 Co-authored-by: sim1222 <[email protected]> Co-authored-by: syuilo <[email protected]> Co-authored-by: sim1222 <[email protected]> Co-authored-by: syuilo <[email protected]>
taiyme · Feb 12, 2023 · ca7a5f1 · ca7a5f1
1 parent b9c9a09
commit ca7a5f1
Show file tree

Hide file tree

Showing 19 changed files with 164 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -894,6 +894,8 @@ navbar: "ナビゲーションバー"
 shuffle: "シャッフル"
 account: "アカウント"
 move: "移動"
+windowMaximize: "最大化"
+windowRestore: "元に戻す"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -425,10 +425,10 @@ defineExpose({
 		border-radius: var(--radius);
 
 		> .header {
-			--height: 42px;
+			--height: 39px;
 
 			&.mini {
-				--height: 38px;
+				--height: 32px;
 			}
 
 			display: flex;