mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-09 20:03:09 +02:00
fix(frontend/MediaVideo): 再生シークバーの当たり判定を調整 (#13027)
* fix(frontend/MediaVideo): 再生シークバーの当たり判定を調整 * fix
This commit is contained in:
parent
fc7cd636a3
commit
67a41c09ae
4 changed files with 14 additions and 9 deletions
|
@ -138,7 +138,7 @@ const rangePercent = computed({
|
|||
audioEl.value.currentTime = to * durationMs.value / 1000;
|
||||
},
|
||||
});
|
||||
const volume = ref(.5);
|
||||
const volume = ref(.25);
|
||||
const bufferedEnd = ref(0);
|
||||
const bufferedDataRatio = computed(() => {
|
||||
if (!audioEl.value) return 0;
|
||||
|
@ -161,7 +161,7 @@ function togglePlayPause() {
|
|||
|
||||
function toggleMute() {
|
||||
if (volume.value === 0) {
|
||||
volume.value = .5;
|
||||
volume.value = .25;
|
||||
} else {
|
||||
volume.value = 0;
|
||||
}
|
||||
|
|
|
@ -5,9 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<!-- Media系専用のinput range -->
|
||||
<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);'">
|
||||
<div :class="$style.controlsSeekbar">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -176,7 +176,7 @@ const rangePercent = computed({
|
|||
videoEl.value.currentTime = to * durationMs.value / 1000;
|
||||
},
|
||||
});
|
||||
const volume = ref(.5);
|
||||
const volume = ref(.25);
|
||||
const bufferedEnd = ref(0);
|
||||
const bufferedDataRatio = computed(() => {
|
||||
if (!videoEl.value) return 0;
|
||||
|
@ -236,7 +236,7 @@ function toggleFullscreen() {
|
|||
|
||||
function toggleMute() {
|
||||
if (volume.value === 0) {
|
||||
volume.value = .5;
|
||||
volume.value = .25;
|
||||
} else {
|
||||
volume.value = 0;
|
||||
}
|
||||
|
@ -535,6 +535,9 @@ onDeactivated(() => {
|
|||
|
||||
.seekbarRoot {
|
||||
grid-area: seekbar;
|
||||
/* ▼シークバー操作をやりやすくするためにクリックイベントが伝播されないエリアを拡張する */
|
||||
margin: -10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@container (min-width: 500px) {
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import { i18n } from '@/i18n.js';
|
||||
|
||||
export function hms(ms: number, options: {
|
||||
export function hms(ms: number, options?: {
|
||||
textFormat?: 'colon' | 'locale';
|
||||
enableSeconds?: boolean;
|
||||
enableMs?: boolean;
|
||||
|
|
Loading…
Reference in a new issue