blob: 1fad222fc5d579deac9fa32ac7956a6ee00c8fe4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkWindow :initialWidth="640" :initialHeight="402" :canResize="true" :closeButton="true">
<template #header>
<i class="icon ti ti-brand-youtube" style="margin-right: 0.5em;"></i>
<span>{{ title ?? 'YouTube' }}</span>
</template>
<div class="poamfof">
<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="player.url && (player.url.startsWith('http://') || player.url.startsWith('https://'))" 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>
<span v-else>invalid url</span>
</Transition>
<MkLoading v-if="fetching"/>
<MkError v-else-if="!player.url" @retry="ytFetch()"/>
</div>
</MkWindow>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import MkWindow from '@/components/MkWindow.vue';
import { versatileLang } from '@/scripts/intl-const.js';
import { defaultStore } from '@/store.js';
const props = defineProps<{
url: string;
}>();
const requestUrl = new URL(props.url);
if (!['http:', 'https:'].includes(requestUrl.protocol)) throw new Error('invalid url');
const fetching = ref(true);
const title = ref<string | null>(null);
const player = ref({
url: null as string | null,
width: null,
height: null,
});
const ytFetch = (): void => {
fetching.value = true;
window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${versatileLang}`).then(res => {
res.json().then(info => {
if (info.url == null) return;
title.value = info.title;
fetching.value = false;
player.value = info.player;
});
});
};
ytFetch();
</script>
<style lang="scss">
.poamfof {
position: relative;
overflow: hidden;
height: 100%;
.player {
position: absolute;
inset: 0;
iframe {
width: 100%;
height: 100%;
}
}
}
</style>
|
