From 6271f9493b63f96d0dd9915207e97fe120ef9037 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Fri, 12 Jan 2024 14:46:40 +0900
Subject: [PATCH] =?UTF-8?q?(add)=20=E3=83=9C=E3=83=AA=E3=83=A5=E3=83=BC?=
 =?UTF-8?q?=E3=83=A0=E3=82=92=E4=BF=9D=E5=AD=98=E3=81=A7=E3=81=8D=E3=82=8B?=
 =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkMediaAudio.vue | 12 ++++++++++--
 packages/frontend/src/components/MkMediaRange.vue |  8 ++++++--
 packages/frontend/src/components/MkMediaVideo.vue | 10 +++++++++-
 packages/frontend/src/store.ts                    |  6 ++++++
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index bfeb60cc1b..ef02fa01ae 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/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) {
diff --git a/packages/frontend/src/components/MkMediaRange.vue b/packages/frontend/src/components/MkMediaRange.vue
index e40947fe20..5f1b848b02 100644
--- a/packages/frontend/src/components/MkMediaRange.vue
+++ b/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({
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index f08114fdd3..12c822eac1 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/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;
 
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index e3a85377d8..ecb81b83dc 100644
--- a/packages/frontend/src/store.ts
+++ b/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',