From 794cbbce5775c2ad6f0491e17b46a759b6ceefb2 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Tue, 20 Aug 2024 17:55:30 +0900
Subject: [PATCH] revert original media components

---
 .../frontend/src/components/MkMediaAudio.vue     | 16 ++++------------
 .../frontend/src/components/MkMediaImage.vue     |  2 --
 .../frontend/src/components/MkMediaVideo.vue     | 14 +++-----------
 3 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index 4e25554aac..a080550ddf 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:class="$style.nativeAudio"
 			@keydown.prevent
 		>
-			<source :src="audio.url" :type="audio.type">
+			<source :src="audio.url">
 		</audio>
 	</div>
 
@@ -39,10 +39,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<audio
 			ref="audioEl"
 			preload="metadata"
-			tabindex="-1"
-			@keydown.prevent
+			@keydown.prevent="() => {}"
 		>
-			<source :src="audio.url" :type="audio.type">
+			<source :src="audio.url">
 		</audio>
 		<div :class="[$style.controlsChild, $style.controlsLeft]">
 			<button
@@ -89,7 +88,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, watch, computed, ref, inject, onDeactivated, onActivated, onMounted } from 'vue';
+import { shallowRef, watch, computed, ref, onDeactivated, onActivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import type { MenuItem } from '@/types/menu.js';
 import { defaultStore } from '@/store.js';
@@ -105,13 +104,10 @@ const props = defineProps<{
 	audio: Misskey.entities.DriveFile;
 }>();
 
-const inEmbedPage = inject<boolean>('EMBED_PAGE', false);
-
 const keymap = {
 	'up': {
 		allowRepeat: true,
 		callback: () => {
-    	if (inEmbedPage) return;
 			if (hasFocus() && audioEl.value) {
 				volume.value = Math.min(volume.value + 0.1, 1);
 			}
@@ -120,7 +116,6 @@ const keymap = {
 	'down': {
 		allowRepeat: true,
 		callback: () => {
-    	if (inEmbedPage) return;
 			if (hasFocus() && audioEl.value) {
 				volume.value = Math.max(volume.value - 0.1, 0);
 			}
@@ -129,7 +124,6 @@ const keymap = {
 	'left': {
 		allowRepeat: true,
 		callback: () => {
-    	if (inEmbedPage) return;
 			if (hasFocus() && audioEl.value) {
 				audioEl.value.currentTime = Math.max(audioEl.value.currentTime - 5, 0);
 			}
@@ -138,14 +132,12 @@ const keymap = {
 	'right': {
 		allowRepeat: true,
 		callback: () => {
-    	if (inEmbedPage) return;
 			if (hasFocus() && audioEl.value) {
 				audioEl.value.currentTime = Math.min(audioEl.value.currentTime + 5, audioEl.value.duration);
 			}
 		},
 	},
 	'space': () => {
-		if (inEmbedPage) return;
 		if (hasFocus()) {
 			togglePlayPause();
 		}
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index a990207d2c..0d1409e2c8 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -14,8 +14,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 			title: image.name,
 			class: $style.imageContainer,
 			href: image.url,
-			target: '_blank',
-			rel: 'noopener',
 			style: 'cursor: zoom-in;'
 		}"
 	>
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index a51f99b338..7c5a365148 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			controls
 			@keydown.prevent
 		>
-			<source :src="video.url" :type="video.type">
+			<source :src="video.url">
 		</video>
 		<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
 		<div :class="$style.indicators">
@@ -53,13 +53,12 @@ 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
 			@click.self="togglePlayPause"
 		>
-			<source :src="video.url" :type="video.type">
+			<source :src="video.url">
 		</video>
 		<button v-if="isReady && !isPlaying" class="_button" :class="$style.videoOverlayPlayButton" @click="togglePlayPause"><i class="ti ti-player-play-filled"></i></button>
 		<div v-else-if="!isActuallyPlaying" :class="$style.videoLoading">
@@ -110,7 +109,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef, computed, watch, inject, onDeactivated, onActivated, onMounted } from 'vue';
+import { ref, shallowRef, computed, watch, onDeactivated, onActivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import type { MenuItem } from '@/types/menu.js';
 import { type Keymap } from '@/scripts/hotkey.js';
@@ -128,13 +127,10 @@ const props = defineProps<{
 	video: Misskey.entities.DriveFile;
 }>();
 
-const inEmbedPage = inject<boolean>('EMBED_PAGE', false);
-
 const keymap = {
 	'up': {
 		allowRepeat: true,
 		callback: () => {
-    	if (inEmbedPage) return;
 			if (hasFocus() && videoEl.value) {
 				volume.value = Math.min(volume.value + 0.1, 1);
 			}
@@ -143,7 +139,6 @@ const keymap = {
 	'down': {
 		allowRepeat: true,
 		callback: () => {
-    	if (inEmbedPage) return;
 			if (hasFocus() && videoEl.value) {
 				volume.value = Math.max(volume.value - 0.1, 0);
 			}
@@ -152,7 +147,6 @@ const keymap = {
 	'left': {
 		allowRepeat: true,
 		callback: () => {
-    	if (inEmbedPage) return;
 			if (hasFocus() && videoEl.value) {
 				videoEl.value.currentTime = Math.max(videoEl.value.currentTime - 5, 0);
 			}
@@ -161,14 +155,12 @@ const keymap = {
 	'right': {
 		allowRepeat: true,
 		callback: () => {
-    	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();
 		}