From f97146be98e36f7a657c07c9c0a7f05f2e895ef1 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: Sat, 17 Sep 2022 00:07:58 +0900
Subject: [PATCH] fix: disable at mobile and creanup code

---
 .../client/src/components/MkUrlPreview.vue    |  6 +-
 packages/client/src/pages/ytplayer.vue        | 72 ++++++++++---------
 2 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 02ee4b1b9..2f49d4793 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>
@@ -37,6 +37,7 @@ import { 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';
 
 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';
diff --git a/packages/client/src/pages/ytplayer.vue b/packages/client/src/pages/ytplayer.vue
index 14f356ca2..bbd758ece 100644
--- a/packages/client/src/pages/ytplayer.vue
+++ b/packages/client/src/pages/ytplayer.vue
@@ -6,15 +6,14 @@
           </div>
       </transition>
 			<MkLoading v-if="fetching" />
-      <MkError v-else-if="!player.url" @retry="fetch()" />
+      <MkError v-else-if="!player.url" @retry="ytFetch()" />
   </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 { lang } from '@/config';
 
 const props = defineProps<{
     url: string;
@@ -26,10 +25,6 @@ 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,
@@ -38,21 +33,22 @@ let player = $ref({
 
 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;
-    });
-});
+const ytFetch = () => {
+	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();
 
 definePageMetadata(computed(() => props.url ? {
-	title: title?.toString() || 'ytplayer',
+	title: title?.toString() || 'Youtube Player',
 	path: `/notes/${props.url}`,
 	icon: 'fa-brands fa-youtube'
 } : null));
@@ -61,20 +57,30 @@ console.log(await player.url);
 </script>
 
 <style lang="scss">
+.poamfof {
+	position: relative;
+	overflow: hidden;
+	min-height: 64px;
+
+	.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%;
+			border-radius: 0 0 var(--radius) var(--radius);
+		}
+	}
+}
+
 .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>