sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'sim-dev/ytplayer' into develop

Browse Source
This commit is contained in:
sim1222 2022-09-17 00:31:25 +09:00
commit f15e9b1e4e
2 changed files with 44 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/client/src/components/MkUrlPreview.vue
View File

@ -10,7 +10,7 @@
<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in"> <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"> <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}')`"> <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> </div>
<article> <article>
<header> <header>
@ -37,6 +37,7 @@ import { onMounted, onUnmounted } from 'vue';
import { url as local, lang } from '@/config'; import { url as local, lang } from '@/config';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import * as os from '@/os'; import * as os from '@/os';
import { deviceKind } from '@/scripts/device-kind';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
url: string; url: string;
@ -47,6 +48,9 @@ const props = withDefaults(defineProps<{
compact: false, compact: false,
}); });
const MOBILE_THRESHOLD = 500;
const isMobile = $ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
const self = props.url.startsWith(local); const self = props.url.startsWith(local);
const attr = self ? 'to' : 'href'; const attr = self ? 'to' : 'href';
const target = self ? null : '_blank'; const target = self ? null : '_blank';

72
packages/client/src/pages/ytplayer.vue
View File

@ -6,15 +6,14 @@
</div> </div>
</transition> </transition>
<MkLoading v-if="fetching" /> <MkLoading v-if="fetching" />
<MkError v-else-if="!player.url" @retry="fetch()" /> <MkError v-else-if="!player.url" @retry="ytFetch()" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';
import { computed } from 'vue'; import { computed } from 'vue';
import { url as local, lang } from '@/config'; import { lang } from '@/config';
const props = defineProps<{ const props = defineProps<{
url: string; url: string;
@ -26,10 +25,6 @@ const requestUrl = new URL(props.url);
let fetching = $ref(true); let fetching = $ref(true);
let title = $ref<string | null>(null); 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({ let player = $ref({
url: null, url: null,
width: null, width: null,
@ -38,21 +33,22 @@ let player = $ref({
const requestLang = (lang || 'ja-JP').replace('ja-KS', 'ja-JP'); const requestLang = (lang || 'ja-JP').replace('ja-KS', 'ja-JP');
fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => { const ytFetch = () => {
res.json().then(info => { fetching = true;
if (info.url == null) return; fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
title = info.title; res.json().then(info => {
description = info.description; if (info.url == null) return;
thumbnail = info.thumbnail; title = info.title;
icon = info.icon; fetching = false;
sitename = info.sitename; player = info.player;
fetching = false; });
player = info.player; });
}); }
});
ytFetch();
definePageMetadata(computed(() => props.url ? { definePageMetadata(computed(() => props.url ? {
title: title?.toString() || 'ytplayer', title: title?.toString() || 'Youtube Player',
path: `/notes/${props.url}`, path: `/notes/${props.url}`,
icon: 'fa-brands fa-youtube' icon: 'fa-brands fa-youtube'
} : null)); } : null));
@ -61,20 +57,30 @@ console.log(await player.url);
</script> </script>
<style lang="scss"> <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 { .fill {
height: 100%; 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> </style>