usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

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> <template>
<div> <div>
<div v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :class="$style.banner"> <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> <a v-if="inEmbedPage && originalEntityUrl" :href="originalEntityUrl" target="_blank" rel="noopener" :class="$style.mediaLinkForEmbed"></a>
</div> </div>
<div v-if="mediaList.filter(media => previewable(media)).length > 0" :class="$style.container"> <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"> <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"/> <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" :data-id="media.id" :image="media" :raw="raw"/> <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> <a v-if="inEmbedPage && originalEntityUrl" :href="originalEntityUrl" target="_blank" rel="noopener" :class="$style.mediaLinkForEmbed"></a>
</div> </div>
</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" :poster="video.thumbnailUrl ?? undefined"
:title="video.comment ?? undefined" :title="video.comment ?? undefined"
:alt="video.comment" :alt="video.comment"
tabindex="-1"
preload="metadata" preload="metadata"
controls controls
@keydown.prevent @keydown.prevent
@ -53,6 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:poster="video.thumbnailUrl ?? undefined" :poster="video.thumbnailUrl ?? undefined"
:title="video.comment ?? undefined" :title="video.comment ?? undefined"
:alt="video.comment" :alt="video.comment"
tabindex="-1"
preload="metadata" preload="metadata"
playsinline playsinline
@keydown.prevent @keydown.prevent
@ -109,7 +111,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <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 * as Misskey from 'misskey-js';
import type { MenuItem } from '@/types/menu.js'; import type { MenuItem } from '@/types/menu.js';
import bytes from '@/filters/bytes.js'; import bytes from '@/filters/bytes.js';
@ -126,28 +128,35 @@ const props = defineProps<{
video: Misskey.entities.DriveFile; video: Misskey.entities.DriveFile;
}>(); }>();
const inEmbedPage = inject<boolean>('EMBED_PAGE', false);
const keymap = { const keymap = {
'up': () => { 'up': () => {
if (inEmbedPage) return;
if (hasFocus() && videoEl.value) { if (hasFocus() && videoEl.value) {
volume.value = Math.min(volume.value + 0.1, 1); volume.value = Math.min(volume.value + 0.1, 1);
} }
}, },
'down': () => { 'down': () => {
if (inEmbedPage) return;
if (hasFocus() && videoEl.value) { if (hasFocus() && videoEl.value) {
volume.value = Math.max(volume.value - 0.1, 0); volume.value = Math.max(volume.value - 0.1, 0);
} }
}, },
'left': () => { 'left': () => {
if (inEmbedPage) return;
if (hasFocus() && videoEl.value) { if (hasFocus() && videoEl.value) {
videoEl.value.currentTime = Math.max(videoEl.value.currentTime - 5, 0); videoEl.value.currentTime = Math.max(videoEl.value.currentTime - 5, 0);
} }
}, },
'right': () => { 'right': () => {
if (inEmbedPage) return;
if (hasFocus() && videoEl.value) { if (hasFocus() && videoEl.value) {
videoEl.value.currentTime = Math.min(videoEl.value.currentTime + 5, videoEl.value.duration); videoEl.value.currentTime = Math.min(videoEl.value.currentTime + 5, videoEl.value.duration);
} }
}, },
'space': () => { 'space': () => {
if (inEmbedPage) return;
if (hasFocus()) { if (hasFocus()) {
togglePlayPause(); togglePlayPause();
} }