音声ファイルの音量をデバイス内で同期するように

src/components/Main/MainView/MessageElement/MessageFileListAudio.vue

@@ -16,9 +16,11 @@
         />
         <audio-player-volume-slider
           v-model:volume="volume"
+          :is-mute="isMute"
           :class="$style.volumeSlider"
           :disabled="cantPlay"
           keep-expanded
+          @toggle-mute="toggleMute"
         />
         <audio-player-loop-button
           v-model:loop="loop"
@@ -88,7 +90,7 @@ const {
   isPlaying,
   currentTime,
   duration,
-  volume,
+  volume: { volume, isMute, toggleMute },
   loop,
   isPinPShown,
   startPinP

src/components/Main/NavigationBar/EphemeralNavigationContent/AudioController/AudioControllerDetailPanel.vue

@@ -28,8 +28,10 @@
       />
       <audio-player-volume-slider
         v-model:volume="volume"
+        :is-mute="isMute"
         :class="$style.volumeSlider"
         :disabled="duration === 0"
+        @toggle-mute="toggleMute"
       />
     </div>
   </div>
@@ -52,11 +54,13 @@ const { fileMeta, fileRawPath } = useFileMeta(
   reactive({ fileId: computed(() => fileId.value ?? '') })
 )
 const name = computed(() => fileMeta.value?.name ?? '')
-const { isPlaying, currentTime, duration, volume, loop } = useAudio(
-  fileMeta,
-  fileRawPath,
-  audio
-)
+const {
+  isPlaying,
+  currentTime,
+  duration,
+  volume: { volume, toggleMute, isMute },
+  loop
+} = useAudio(fileMeta, fileRawPath, audio)
 </script>
 
 <style lang="scss" module>

src/components/UI/AudioPlayer/AudioPlayerVolumeSlider.vue

@@ -16,8 +16,8 @@
       :class="$style.icon"
       mdi
       :size="20"
-      :name="volume > 0 ? 'volume-high' : 'volume-off'"
-      @click.prevent="toggleVolume"
+      :name="isMute ? 'volume-off' : 'volume-high'"
+      @click.prevent="emit('toggleMute')"
     />
   </div>
 </template>
@@ -30,6 +30,7 @@ import { computed } from 'vue'
 const props = withDefaults(
   defineProps<{
     volume: number
+    isMute: boolean | undefined
     keepExpanded?: boolean
     disabled?: boolean
   }>(),
@@ -41,6 +42,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (e: 'update:volume', _val: number): void
+  (e: 'toggleMute'): void
 }>()
 
 const roundedVolume = computed({
@@ -51,9 +53,6 @@ const roundedVolume = computed({
     emit('update:volume', v)
   }
 })
-const toggleVolume = () => {
-  roundedVolume.value = props.volume > 0 ? 0 : 100
-}
 </script>
 
 <style lang="scss" module>

src/components/UI/ChromeAudio.vue

@@ -17,8 +17,10 @@
       />
       <audio-player-volume-slider
         v-model:volume="volume"
+        :is-mute="isMute"
         :class="$style.volumeSlider"
         :disabled="duration === 0"
+        @toggle-mute="toggleMute"
       />
     </div>
     <audio-player-pin-p-button
@@ -61,7 +63,7 @@ const {
   isPlaying,
   currentTime,
   duration,
-  volume,
+  volume: { volume, toggleMute, isMute },
   isPinPShown,
   startPinP
 } = useAudio(fileMeta, fileRawPath)

src/composables/media/useAudio.ts

@@ -1,8 +1,17 @@
 import type { Ref } from 'vue'
-import { ref, computed, watch, readonly, shallowRef, onUnmounted } from 'vue'
+import {
+  ref,
+  computed,
+  watch,
+  readonly,
+  shallowRef,
+  onUnmounted,
+  onMounted
+} from 'vue'
 import usePictureInPicture from './usePictureInPicture'
 import type { FileInfo } from '@traptitech/traq'
 import { useAudioController } from '/@/store/ui/audioController'
+import { useMediaSettingsStore } from '/@/store/app/mediaSettings'
 
 const toFinite = (n: number | undefined, def: number) =>
   Number.isFinite(n) ? (n as number) : def
@@ -135,11 +144,35 @@ export const useDuration = (audio: Ref<HTMLAudioElement | undefined>) => {
 }
 
 const useVolume = (audio: Ref<HTMLAudioElement | undefined>) => {
-  const nativeVolume = ref(toFinite(audio.value?.volume, 1))
+  const { audioVolume, restoringPromise } = useMediaSettingsStore()
+  const storeVolume = computed(() => audioVolume.value ?? 1)
+
+  onMounted(async () => {
+    await restoringPromise.value
+    setVolume(toFinite(storeVolume.value, 1))
+  })
+
+  const isMute = ref(audio.value?.muted)
+
+  const toggleMute = () => {
+    if (!audio.value) return
+    if (isMute.value === true) {
+      audio.value.muted = false
+      isMute.value = false
+    } else {
+      audio.value.muted = true
+      isMute.value = true
+    }
+  }
+
+  const setVolume = (v: number) => {
+    if (audio.value) audio.value.volume = v
+    audioVolume.value = v
+  }
 
   const onVolumeChange = () => {
     if (!audio.value) return
-    nativeVolume.value = toFinite(audio.value.volume, 1)
+    setVolume(toFinite(audio.value.volume, storeVolume.value))
   }
 
   watch(
@@ -149,7 +182,7 @@ const useVolume = (audio: Ref<HTMLAudioElement | undefined>) => {
         oldAudio.removeEventListener('volumechange', onVolumeChange)
       }
       if (newAudio) {
-        nativeVolume.value = toFinite(newAudio.volume, 1)
+        setVolume(toFinite(storeVolume.value, 1))
         newAudio.addEventListener('volumechange', onVolumeChange)
       }
     },
@@ -158,14 +191,14 @@ const useVolume = (audio: Ref<HTMLAudioElement | undefined>) => {
 
   const volume = computed<number>({
     get() {
-      return nativeVolume.value
+      return storeVolume.value
     },
     set(v) {
       if (!audio.value) return
       audio.value.volume = v / 100
     }
   })
-  return volume
+  return { volume, isMute, toggleMute }
 }
 
 const useLoop = (audio: Ref<HTMLAudioElement | undefined>) => {

src/store/app/mediaSettings.ts

@@ -0,0 +1,37 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+import { toRefs } from 'vue'
+import { convertToRefsStore } from '/@/store/utils/convertToRefsStore'
+import useIndexedDbValue from '/@/composables/utils/useIndexedDbValue'
+
+export type IDBState = {
+  audioVolume: Readonly<number> | undefined
+}
+
+const useMediaSettingsStorePinia = defineStore('app/mediaSettings', () => {
+  const initialValue: IDBState = {
+    audioVolume: 1
+  }
+
+  const [state, restoring, restoringPromise] = useIndexedDbValue(
+    'store/app/mediaSettings',
+    1,
+    {},
+    initialValue
+  )
+
+  return {
+    ...toRefs(state),
+    restoring,
+    restoringPromise
+  }
+})
+
+export const useMediaSettingsStore = convertToRefsStore(
+  useMediaSettingsStorePinia
+)
+
+if (import.meta.hot) {
+  import.meta.hot.accept(
+    acceptHMRUpdate(useMediaSettingsStorePinia, import.meta.hot)
+  )
+}