tabでカチカチやればメディアにアクセスできる問題を修正
This commit is contained in:
parent
fc9f6dfbf3
commit
44d8f390cb
|
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template>
|
||||
<div>
|
||||
<div v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :class="$style.banner">
|
||||
<XBanner :media="media"/>
|
||||
<XBanner :media="media" :inert="inEmbedPage"/>
|
||||
<a v-if="inEmbedPage && originalEntityUrl" :href="originalEntityUrl" target="_blank" rel="noopener" :class="$style.mediaLinkForEmbed"></a>
|
||||
</div>
|
||||
<div v-if="mediaList.filter(media => previewable(media)).length > 0" :class="$style.container">
|
||||
|
@ -22,8 +22,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
]"
|
||||
>
|
||||
<div v-for="media in mediaList.filter(media => previewable(media))" :class="$style.media">
|
||||
<XVideo v-if="media.type.startsWith('video')" :key="`video:${media.id}`" :video="media" :class="$style.mediaInner"/>
|
||||
<XImage v-else-if="media.type.startsWith('image')" :key="`image:${media.id}`" :class="$style.mediaInner" class="image" :data-id="media.id" :image="media" :raw="raw"/>
|
||||
<XVideo v-if="media.type.startsWith('video')" :key="`video:${media.id}`" :video="media" :class="$style.mediaInner" :inert="inEmbedPage"/>
|
||||
<XImage v-else-if="media.type.startsWith('image')" :key="`image:${media.id}`" :class="$style.mediaInner" class="image" :inert="inEmbedPage" :data-id="media.id" :image="media" :raw="raw"/>
|
||||
<a v-if="inEmbedPage && originalEntityUrl" :href="originalEntityUrl" target="_blank" rel="noopener" :class="$style.mediaLinkForEmbed"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -33,6 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:poster="video.thumbnailUrl ?? undefined"
|
||||
:title="video.comment ?? undefined"
|
||||
:alt="video.comment"
|
||||
tabindex="-1"
|
||||
preload="metadata"
|
||||
controls
|
||||
@keydown.prevent
|
||||
|
@ -53,6 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:poster="video.thumbnailUrl ?? undefined"
|
||||
:title="video.comment ?? undefined"
|
||||
:alt="video.comment"
|
||||
tabindex="-1"
|
||||
preload="metadata"
|
||||
playsinline
|
||||
@keydown.prevent
|
||||
|
@ -109,7 +111,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, shallowRef, computed, watch, onDeactivated, onActivated, onMounted } from 'vue';
|
||||
import { ref, shallowRef, computed, watch, inject, onDeactivated, onActivated, onMounted } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
import bytes from '@/filters/bytes.js';
|
||||
|
@ -126,28 +128,35 @@ const props = defineProps<{
|
|||
video: Misskey.entities.DriveFile;
|
||||
}>();
|
||||
|
||||
const inEmbedPage = inject<boolean>('EMBED_PAGE', false);
|
||||
|
||||
const keymap = {
|
||||
'up': () => {
|
||||
if (inEmbedPage) return;
|
||||
if (hasFocus() && videoEl.value) {
|
||||
volume.value = Math.min(volume.value + 0.1, 1);
|
||||
}
|
||||
},
|
||||
'down': () => {
|
||||
if (inEmbedPage) return;
|
||||
if (hasFocus() && videoEl.value) {
|
||||
volume.value = Math.max(volume.value - 0.1, 0);
|
||||
}
|
||||
},
|
||||
'left': () => {
|
||||
if (inEmbedPage) return;
|
||||
if (hasFocus() && videoEl.value) {
|
||||
videoEl.value.currentTime = Math.max(videoEl.value.currentTime - 5, 0);
|
||||
}
|
||||
},
|
||||
'right': () => {
|
||||
if (inEmbedPage) return;
|
||||
if (hasFocus() && videoEl.value) {
|
||||
videoEl.value.currentTime = Math.min(videoEl.value.currentTime + 5, videoEl.value.duration);
|
||||
}
|
||||
},
|
||||
'space': () => {
|
||||
if (inEmbedPage) return;
|
||||
if (hasFocus()) {
|
||||
togglePlayPause();
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue