From 08f9296f85fa282d89e2e8d9a73a11c554782a8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=93=E3=81=91=E3=81=A3=E3=81=A1?= <kokt@sim1222.com>
Date: Fri, 16 Sep 2022 23:32:23 +0900
Subject: [PATCH] wip

---
 .../client/src/components/MkMediaVideo.vue    |   9 +-
 .../client/src/components/MkUrlPreview.vue    |  12 +-
 packages/client/src/pages/media-player.vue    | 118 ++++++++++++++++++
 packages/client/src/pages/ytplayer.vue        |  80 ------------
 packages/client/src/router.ts                 |   4 +-
 5 files changed, 136 insertions(+), 87 deletions(-)
 create mode 100644 packages/client/src/pages/media-player.vue
 delete mode 100644 packages/client/src/pages/ytplayer.vue

diff --git a/packages/client/src/components/MkMediaVideo.vue b/packages/client/src/components/MkMediaVideo.vue
index 5c38691e6..36edeae16 100644
--- a/packages/client/src/components/MkMediaVideo.vue
+++ b/packages/client/src/components/MkMediaVideo.vue
@@ -19,7 +19,8 @@
 			:type="video.type"
 		>
 	</video>
-	<i class="fas fa-eye-slash" @click="hide = true"></i>
+	<i class="fas fa-window-restore" @click="popup"></i>
+	<!-- <i class="fas fa-eye-slash" @click="hide = true"></i> -->
 </div>
 </template>
 
@@ -27,12 +28,18 @@
 import { ref } from 'vue';
 import * as misskey from 'misskey-js';
 import { defaultStore } from '@/store';
+import * as os from '@/os';
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
 const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
+
+function popup() {
+	os.pageWindow(`/media-player/${encodeURIComponent(props.video.id)}`);
+	hide.value = true;
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 02ee4b1b9..83bc41202 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/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 = false" @click="openPlayer()"><i class="fas fa-play-circle"></i></button>
+				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="isMobile? playerEnabled = true : openPlayer()"><i class="fas fa-play-circle"></i></button>
 			</div>
 			<article>
 				<header>
@@ -33,10 +33,11 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-import { url as local, lang } from '@/config';
+import { onMounted, onUnmounted, ref } from 'vue';
+import { url as local, lang, url } from '@/config';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
+import { deviceKind } from '@/scripts/device-kind';
 
 const props = withDefaults(defineProps<{
 	url: string;
@@ -47,6 +48,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';
@@ -105,7 +109,7 @@ function adjustTweetHeight(message: any) {
 }
 
 const openPlayer = () => {
-	os.pageWindow(`/ytplayer/${encodeURIComponent(requestUrl.href)}`);
+	os.pageWindow(`/media-player/${encodeURIComponent(requestUrl.href)}`);
 };
 
 (window as any).addEventListener('message', adjustTweetHeight);
diff --git a/packages/client/src/pages/media-player.vue b/packages/client/src/pages/media-player.vue
new file mode 100644
index 000000000..33900d01a
--- /dev/null
+++ b/packages/client/src/pages/media-player.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="poamfof fill">
+      <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+          <div v-if="player.url" class="player">
+	          <iframe v-if="!fetching && !media.type"  :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
+						<video v-else-if="!fetching && media.type.startsWith('video/')" :key="media.id" :video="media" :poster="media.thumbnailUrl" >
+							<source :src="media.url" :type="media.type">
+						</video>
+						<div v-else-if="!fetching && media.type.startsWith('audio/') && media.type !== 'audio/midi'" class="audio">
+							<audio ref="audioEl" class="audio" :src="media.url" :title="media.name" controls preload="metadata"
+								@volumechange="volumechange" />
+						</div>
+          </div>
+      </transition>
+			<MkLoading v-if="fetching" />
+      <MkError v-else-if="!player.url || !media.type.match(/(video|audio)\//)" />
+  </div>
+</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';
+import * as os from '@/os';
+import { DriveFile } from 'misskey-js/built/entities';
+import { ColdDeviceStorage } from '@/store';
+
+const props = defineProps<{
+    url: string;
+}>();
+
+console.log(props.url);
+
+try {
+	
+} catch (error) {
+	
+}
+
+const requestUrl = new URL(props.url);
+
+const audioEl = $ref<HTMLAudioElement | null>();
+let media = $ref<DriveFile>();
+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');
+
+if (props.url.hostname === 'www.youtube.com' && props.url.pathname.match('^/watch')) {
+	fetch(`/url?url=${encodeURIComponent(props.url.href)}&lang=${requestLang}`).then(res => {
+		res.json().then(info => {
+			if (info.url == null) return;
+			title = info.title;
+			fetching = false;
+			player = info.player;
+		});
+	});
+} else {
+	const id = props.url;
+	media = await os.api('drive/files/show', { fileId: id });
+}
+
+if (props.url) {
+	const id = props.url;
+	media = await os.api('drive/files/show', { fileId: id });
+}
+
+function volumechange() {
+	if (audioEl) ColdDeviceStorage.set('mediaVolume', audioEl.volume);
+}
+
+definePageMetadata(computed(() => props.url ? {
+	title: title?.toString() || 'ytplayer',
+	path: `/notes/${props.url}`,
+	icon: 'fa-brands fa-youtube'
+} : null));
+
+console.log(await player.url);
+</script>
+
+<style lang="scss">
+.poamfof {
+	position: relative;
+	overflow: hidden;
+	border-radius: 0 0 var(--radius) var(--radius);
+	.player {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			height: calc(100% - 10px);
+			width: calc(100% - 10px);
+			padding: 5px;
+			iframe {
+					width: 100%;
+					height: 100%;
+			}
+			video {
+					width: 100%;
+					height: 100%;
+			}
+			.audio {
+					width: 100%;
+					height: 100%;
+			}
+	}
+}
+.fill {
+	height: 100%;
+}
+</style>
diff --git a/packages/client/src/pages/ytplayer.vue b/packages/client/src/pages/ytplayer.vue
deleted file mode 100644
index 14f356ca2..000000000
--- a/packages/client/src/pages/ytplayer.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <div class="poamfof fill">
-      <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="fetch()" />
-  </div>
-</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: title?.toString() || 'ytplayer',
-	path: `/notes/${props.url}`,
-	icon: 'fa-brands fa-youtube'
-} : null));
-
-console.log(await player.url);
-</script>
-
-<style lang="scss">
-.fill {
-	height: 100%;
-}
-.player {
-	height: calc(100% - 10px);
-	width: calc(100% - 10px);
-	padding: 5px;
-
-	>iframe {
-		height: 100%;
-		width: 100%;
-		border-radius: 0 0 var(--radius) var(--radius);
-		left: 0;
-		top: 0;
-	}
-}
-</style>
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 1e2fd2207..69d8667c5 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -450,8 +450,8 @@ export const routes = [{
 	component: page(() => import('./pages/antenna-timeline.vue')),
 	loginRequired: true,
 }, {
-	path: '/ytplayer/:url',
-	component: page(() => import('./pages/ytplayer.vue')),
+	path: '/media-player/:url',
+	component: page(() => import('./pages/media-player.vue')),
 }, {
 	name: 'index',
 	path: '/',