wip: feat: Youtube Player Window

packages/client/src/components/MkUrlPreview.vue

@@ -10,7 +10,7 @@
 	<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="fas fa-play-circle"></i></button>
+				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="playerEnabled = false" @click="openPlayer()"><i class="fas fa-play-circle"></i></button>
 			</div>
 			<article>
 				<header>
@@ -36,6 +36,7 @@
 import { onMounted, onUnmounted } from 'vue';
 import { url as local, lang } from '@/config';
 import { i18n } from '@/i18n';
+import * as os from '@/os';
 
 const props = withDefaults(defineProps<{
 	url: string;
@@ -103,6 +104,10 @@ function adjustTweetHeight(message: any) {
 	if (height) tweetHeight = height;
 }
 
+const openPlayer = () => {
+	os.pageWindow(`/ytplayer/${encodeURIComponent(requestUrl.href)}`);
+};
+
 (window as any).addEventListener('message', adjustTweetHeight);
 
 onUnmounted(() => {

packages/client/src/pages/ytplayer.vue

@@ -0,0 +1,76 @@
+<template>
+<MkStickyContainer>
+    <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')" :width="'100%'" :heigth="player.height || 500" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
+            </div>
+        </transition>
+				<MkLoading v-if="fetching" />
+        <MkError v-else-if="!player.url" @retry="fetch()" />
+    </div>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed } from 'vue';
+import { url as local, lang } from '@/config';
+
+const props = defineProps<{
+    url: string;
+}>();
+
+console.log(props.url);
+
+const requestUrl = new URL(props.url);
+
+let fetching = $ref(true);
+let title = $ref<string | null>(null);
+let description = $ref<string | null>(null);
+let thumbnail = $ref<string | null>(null);
+let icon = $ref<string | null>(null);
+let sitename = $ref<string | null>(null);
+let player = $ref({
+    url: null,
+    width: null,
+    height: null,
+});
+
+const requestLang = (lang || 'ja-JP').replace('ja-KS', 'ja-JP');
+
+fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
+    res.json().then(info => {
+        if (info.url == null) return;
+        title = info.title;
+        description = info.description;
+        thumbnail = info.thumbnail;
+        icon = info.icon;
+        sitename = info.sitename;
+        fetching = false;
+        player = info.player;
+    });
+});
+
+definePageMetadata(computed(() => props.url ? {
+    title: 'ytplayer',
+		path: `/notes/${props.url}`,
+} : null));
+
+console.log(await player.url);
+</script>
+
+<style lang="scss">
+.player {
+	position: relative;
+	width: 100%;
+	>iframe {
+		height: 500px;
+		left: 0;
+		position: absolute;
+		top: 0;
+		width: 100%;
+	}
+}
+</style>

packages/client/src/router.ts

@@ -445,6 +445,9 @@ export const routes = [{
 	path: '/timeline/antenna/:antennaId',
 	component: page(() => import('./pages/antenna-timeline.vue')),
 	loginRequired: true,
+}, {
+	path: '/ytplayer/:url',
+	component: page(() => import('./pages/ytplayer.vue')),
 }, {
 	name: 'index',
 	path: '/',