mirror/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey synced 2024-12-03 09:19:03 +09:00
Code

tabでカチカチやればメディアにアクセスできる問題を修正

Browse Source
This commit is contained in:
kakkokari-gtyih 2024-07-06 11:25:58 +09:00
parent fc9f6dfbf3
commit 44d8f390cb
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/src/components/MkMediaList.vue
View File

@ -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>

11
packages/frontend/src/components/MkMediaVideo.vue
View File

@ -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();
}