wip
This commit is contained in:
parent
95ec171479
commit
08f9296f85
@ -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>
|
||||
|
||||
@ -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);
|
||||
|
||||
118
packages/client/src/pages/media-player.vue
Normal file
118
packages/client/src/pages/media-player.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
@ -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: '/',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user