From 44d8f390cbb53a7debb33a9a56f575687be67fb6 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 6 Jul 2024 11:25:58 +0900
Subject: [PATCH] =?UTF-8?q?tab=E3=81=A7=E3=82=AB=E3=83=81=E3=82=AB?=
 =?UTF-8?q?=E3=83=81=E3=82=84=E3=82=8C=E3=81=B0=E3=83=A1=E3=83=87=E3=82=A3?=
 =?UTF-8?q?=E3=82=A2=E3=81=AB=E3=82=A2=E3=82=AF=E3=82=BB=E3=82=B9=E3=81=A7?=
 =?UTF-8?q?=E3=81=8D=E3=82=8B=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkMediaList.vue  |  6 +++---
 packages/frontend/src/components/MkMediaVideo.vue | 11 ++++++++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index 4909842db6..f87a0d49ac 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -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>
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 707d7c1501..5923a4be85 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -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();
 		}