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

packages/frontend/src/components/MkMediaAudio.vue

@@ -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) {

packages/frontend/src/components/MkMediaRange.vue

@@ -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({

packages/frontend/src/components/MkMediaVideo.vue

@@ -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;
 

packages/frontend/src/store.ts

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