This commit is contained in:
kakkokari-gtyih 2024-07-06 11:56:35 +09:00
parent 22fdc8c837
commit 15443e4418
2 changed files with 10 additions and 3 deletions

View file

@ -76,7 +76,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { shallowRef, watch, computed, ref, onDeactivated, onActivated, onMounted } from 'vue'; import { shallowRef, watch, computed, ref, 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 { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
@ -91,28 +91,35 @@ const props = defineProps<{
audio: Misskey.entities.DriveFile; audio: Misskey.entities.DriveFile;
}>(); }>();
const inEmbedPage = inject<boolean>('EMBED_PAGE', false);
const keymap = { const keymap = {
'up': () => { 'up': () => {
if (inEmbedPage) return;
if (hasFocus() && audioEl.value) { if (hasFocus() && audioEl.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() && audioEl.value) { if (hasFocus() && audioEl.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() && audioEl.value) { if (hasFocus() && audioEl.value) {
audioEl.value.currentTime = Math.max(audioEl.value.currentTime - 5, 0); audioEl.value.currentTime = Math.max(audioEl.value.currentTime - 5, 0);
} }
}, },
'right': () => { 'right': () => {
if (inEmbedPage) return;
if (hasFocus() && audioEl.value) { if (hasFocus() && audioEl.value) {
audioEl.value.currentTime = Math.min(audioEl.value.currentTime + 5, audioEl.value.duration); audioEl.value.currentTime = Math.min(audioEl.value.currentTime + 5, audioEl.value.duration);
} }
}, },
'space': () => { 'space': () => {
if (inEmbedPage) return;
if (hasFocus()) { if (hasFocus()) {
togglePlayPause(); togglePlayPause();
} }

View file

@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
controls controls
@keydown.prevent @keydown.prevent
> >
<source :src="video.url" :type="audio.type"> <source :src="video.url" :type="video.type">
</video> </video>
<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i> <i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
<div :class="$style.indicators"> <div :class="$style.indicators">
@ -59,7 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@keydown.prevent @keydown.prevent
@click.self="togglePlayPause" @click.self="togglePlayPause"
> >
<source :src="video.url" :type="audio.type"> <source :src="video.url" :type="video.type">
</video> </video>
<button v-if="isReady && !isPlaying" class="_button" :class="$style.videoOverlayPlayButton" @click="togglePlayPause"><i class="ti ti-player-play-filled"></i></button> <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"> <div v-else-if="!isActuallyPlaying" :class="$style.videoLoading">