Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

revert original media components

Browse source
This commit is contained in:
kakkokari-gtyih 2024-08-20 17:55:30 +09:00
parent 302b5ac953
commit 794cbbce57
3 changed files with 7 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/frontend/src/components/MkMediaAudio.vue
View file

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

2
packages/frontend/src/components/MkMediaImage.vue
View file

@ -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;'
}"
>

14
packages/frontend/src/components/MkMediaVideo.vue
View file

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