monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

fix(frontend/MediaVideo): 再生シークバーの当たり判定を調整 (#13027)

Browse source 
* fix(frontend/MediaVideo): 再生シークバーの当たり判定を調整

* fix
This commit is contained in:
かっこかり 2024-01-18 14:45:11 +09:00 committed by GitHub
parent fc7cd636a3
commit 67a41c09ae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -138,7 +138,7 @@ const rangePercent = computed({
audioEl.value.currentTime = to * durationMs.value / 1000; audioEl.value.currentTime = to * durationMs.value / 1000;
}, },
}); });
const volume = ref(.5); const volume = ref(.25);
const bufferedEnd = ref(0); const bufferedEnd = ref(0);
const bufferedDataRatio = computed(() => { const bufferedDataRatio = computed(() => {
if (!audioEl.value) return 0; if (!audioEl.value) return 0;
@ -161,7 +161,7 @@ function togglePlayPause() {
function toggleMute() { function toggleMute() {
if (volume.value === 0) { if (volume.value === 0) {
volume.value = .5; volume.value = .25;
} else { } else {
volume.value = 0; volume.value = 0;
} }
@ -207,7 +207,7 @@ function init() {
isActuallyPlaying.value = false; isActuallyPlaying.value = false;
isPlaying.value = false; isPlaying.value = false;
}); });
durationMs.value = audioEl.value.duration * 1000; durationMs.value = audioEl.value.duration * 1000;
audioEl.value.addEventListener('durationchange', () => { audioEl.value.addEventListener('durationchange', () => {
if (audioEl.value) { if (audioEl.value) {

8
packages/frontend/src/components/MkMediaRange.vue
View file

@ -5,9 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<!-- Media系専用のinput range --> <!-- Media系専用のinput range -->
<template> <template>
<div :class="$style.controlsSeekbar" :style="sliderBgWhite ? '--sliderBg: rgba(255,255,255,.25);' : '--sliderBg: var(--scrollbarHandle);'"> <div :style="sliderBgWhite ? '--sliderBg: rgba(255,255,255,.25);' : '--sliderBg: var(--scrollbarHandle);'">
<progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">{{ Math.round(buffer * 100) }}% buffered</progress> <div :class="$style.controlsSeekbar">
<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any" @change="emit('dragEnded', modelValue)"/> <progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">{{ Math.round(buffer * 100) }}% buffered</progress>
<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any" @change="emit('dragEnded', modelValue)"/>
</div>
</div> </div>
</template> </template>

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

@ -176,7 +176,7 @@ const rangePercent = computed({
videoEl.value.currentTime = to * durationMs.value / 1000; videoEl.value.currentTime = to * durationMs.value / 1000;
}, },
}); });
const volume = ref(.5); const volume = ref(.25);
const bufferedEnd = ref(0); const bufferedEnd = ref(0);
const bufferedDataRatio = computed(() => { const bufferedDataRatio = computed(() => {
if (!videoEl.value) return 0; if (!videoEl.value) return 0;
@ -236,7 +236,7 @@ function toggleFullscreen() {
function toggleMute() { function toggleMute() {
if (volume.value === 0) { if (volume.value === 0) {
volume.value = .5; volume.value = .25;
} else { } else {
volume.value = 0; volume.value = 0;
} }
@ -535,6 +535,9 @@ onDeactivated(() => {
.seekbarRoot { .seekbarRoot {
grid-area: seekbar; grid-area: seekbar;
/* ▼シークバー操作をやりやすくするためにクリックイベントが伝播されないエリアを拡張する */
margin: -10px;
padding: 10px;
} }
@container (min-width: 500px) { @container (min-width: 500px) {

2
packages/frontend/src/filters/hms.ts
View file

@ -5,7 +5,7 @@
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
export function hms(ms: number, options: { export function hms(ms: number, options?: {
textFormat?: 'colon' | 'locale'; textFormat?: 'colon' | 'locale';
enableSeconds?: boolean; enableSeconds?: boolean;
enableMs?: boolean; enableMs?: boolean;