(add) ボリュームを保存できるように
This commit is contained in:
parent
9bbc5259d7
commit
6271f9493b
|
@ -46,6 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkMediaRange
|
||||
v-model="volume"
|
||||
:class="$style.volumeSeekbar"
|
||||
@dragEnded="saveVolume"
|
||||
/>
|
||||
</div>
|
||||
<MkMediaRange
|
||||
|
@ -138,7 +139,7 @@ const rangePercent = computed({
|
|||
audioEl.value.currentTime = to * durationMs.value / 1000;
|
||||
},
|
||||
});
|
||||
const volume = ref(.5);
|
||||
const volume = ref(defaultStore.state.mediaPlayer.volume);
|
||||
const bufferedEnd = ref(0);
|
||||
const bufferedDataRatio = computed(() => {
|
||||
if (!audioEl.value) return 0;
|
||||
|
@ -167,6 +168,13 @@ function toggleMute() {
|
|||
}
|
||||
}
|
||||
|
||||
function saveVolume(newVolume: number) {
|
||||
defaultStore.set('mediaPlayer', {
|
||||
...defaultStore.state.mediaPlayer,
|
||||
volume: newVolume,
|
||||
});
|
||||
}
|
||||
|
||||
let onceInit = false;
|
||||
let stopAudioElWatch: () => void;
|
||||
|
||||
|
@ -207,7 +215,7 @@ function init() {
|
|||
isActuallyPlaying.value = false;
|
||||
isPlaying.value = false;
|
||||
});
|
||||
|
||||
|
||||
durationMs.value = audioEl.value.duration * 1000;
|
||||
audioEl.value.addEventListener('durationchange', () => {
|
||||
if (audioEl.value) {
|
||||
|
|
|
@ -6,8 +6,8 @@ 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);'">
|
||||
<progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">% buffered</progress>
|
||||
<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any"/>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
@ -22,6 +22,10 @@ withDefaults(defineProps<{
|
|||
sliderBgWhite: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'dragEnded', value: number): void;
|
||||
}>();
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const model = defineModel({ required: true }) as ModelRef<string | number>;
|
||||
const modelValue = computed({
|
||||
|
|
|
@ -69,6 +69,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
v-model="volume"
|
||||
:sliderBgWhite="true"
|
||||
:class="$style.volumeSeekbar"
|
||||
@dragEnded="saveVolume"
|
||||
/>
|
||||
</div>
|
||||
<MkMediaRange
|
||||
|
@ -176,7 +177,7 @@ const rangePercent = computed({
|
|||
videoEl.value.currentTime = to * durationMs.value / 1000;
|
||||
},
|
||||
});
|
||||
const volume = ref(.5);
|
||||
const volume = ref(defaultStore.state.mediaPlayer.volume);
|
||||
const bufferedEnd = ref(0);
|
||||
const bufferedDataRatio = computed(() => {
|
||||
if (!videoEl.value) return 0;
|
||||
|
@ -242,6 +243,13 @@ function toggleMute() {
|
|||
}
|
||||
}
|
||||
|
||||
function saveVolume(newVolume: number) {
|
||||
defaultStore.set('mediaPlayer', {
|
||||
...defaultStore.state.mediaPlayer,
|
||||
volume: newVolume,
|
||||
});
|
||||
}
|
||||
|
||||
let onceInit = false;
|
||||
let stopVideoElWatch: () => void;
|
||||
|
||||
|
|
|
@ -427,6 +427,12 @@ export const defaultStore = markRaw(new Storage('base', {
|
|||
sfxVolume: 1,
|
||||
},
|
||||
},
|
||||
mediaPlayer: {
|
||||
where: 'device',
|
||||
default: {
|
||||
volume: 0.5,
|
||||
},
|
||||
},
|
||||
|
||||
sound_masterVolume: {
|
||||
where: 'device',
|
||||
|
|
Loading…
Reference in New Issue