mirror/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2024-12-23 00:29:22 +09:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

(add) ボリュームを保存できるように

Browse Source
This commit is contained in:
kakkokari-gtyih 2024-01-12 14:46:40 +09:00
parent 9bbc5259d7
commit 6271f9493b
4 changed files with 31 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/frontend/src/components/MkMediaAudio.vue
View File

@ -46,6 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkMediaRange <MkMediaRange
v-model="volume" v-model="volume"
:class="$style.volumeSeekbar" :class="$style.volumeSeekbar"
@dragEnded="saveVolume"
/> />
</div> </div>
<MkMediaRange <MkMediaRange
@ -138,7 +139,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(defaultStore.state.mediaPlayer.volume);
const bufferedEnd = ref(0); const bufferedEnd = ref(0);
const bufferedDataRatio = computed(() => { const bufferedDataRatio = computed(() => {
if (!audioEl.value) return 0; 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 onceInit = false;
let stopAudioElWatch: () => void; let stopAudioElWatch: () => void;
@ -207,7 +215,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

@ -6,8 +6,8 @@ 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 :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> <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"/> <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> </template>
@ -22,6 +22,10 @@ withDefaults(defineProps<{
sliderBgWhite: false, sliderBgWhite: false,
}); });
const emit = defineEmits<{
(ev: 'dragEnded', value: number): void;
}>();
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
const model = defineModel({ required: true }) as ModelRef<string | number>; const model = defineModel({ required: true }) as ModelRef<string | number>;
const modelValue = computed({ const modelValue = computed({

10
packages/frontend/src/components/MkMediaVideo.vue
View File

@ -69,6 +69,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="volume" v-model="volume"
:sliderBgWhite="true" :sliderBgWhite="true"
:class="$style.volumeSeekbar" :class="$style.volumeSeekbar"
@dragEnded="saveVolume"
/> />
</div> </div>
<MkMediaRange <MkMediaRange
@ -176,7 +177,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(defaultStore.state.mediaPlayer.volume);
const bufferedEnd = ref(0); const bufferedEnd = ref(0);
const bufferedDataRatio = computed(() => { const bufferedDataRatio = computed(() => {
if (!videoEl.value) return 0; 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 onceInit = false;
let stopVideoElWatch: () => void; let stopVideoElWatch: () => void;

6
packages/frontend/src/store.ts
View File

@ -427,6 +427,12 @@ export const defaultStore = markRaw(new Storage('base', {
sfxVolume: 1, sfxVolume: 1,
}, },
}, },
mediaPlayer: {
where: 'device',
default: {
volume: 0.5,
},
},
sound_masterVolume: { sound_masterVolume: {
where: 'device', where: 'device',