diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue index 1576144f6b..5ca4c50518 100644 --- a/packages/frontend/src/components/MkMediaBanner.vue +++ b/packages/frontend/src/components/MkMediaBanner.vue @@ -31,7 +31,7 @@ import { onMounted } from 'vue'; import * as misskey from 'misskey-js'; import VuePlyr from 'vue-plyr'; -import { ColdDeviceStorage } from '@/store'; +import { soundConfigStore } from '@/scripts/sound'; import 'vue-plyr/dist/vue-plyr.css'; import { i18n } from '@/i18n'; @@ -44,11 +44,11 @@ const audioEl = $shallowRef<HTMLAudioElement | null>(); let hide = $ref(true); function volumechange() { - if (audioEl) ColdDeviceStorage.set('mediaVolume', audioEl.volume); + if (audioEl) soundConfigStore.set('mediaVolume', audioEl.volume); } onMounted(() => { - if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume'); + if (audioEl) audioEl.volume = soundConfigStore.state.mediaVolume; }); </script> diff --git a/packages/frontend/src/pages/settings/sounds.vue b/packages/frontend/src/pages/settings/sounds.vue index 8855a275c6..724fe43478 100644 --- a/packages/frontend/src/pages/settings/sounds.vue +++ b/packages/frontend/src/pages/settings/sounds.vue @@ -7,7 +7,7 @@ <FormSection> <template #label>{{ i18n.ts.sounds }}</template> <div class="_gaps_s"> - <MkFolder v-for="type in Object.keys(sounds)" :key="type"> + <MkFolder v-for="type in soundsKeys" :key="type"> <template #label>{{ i18n.t('_sfx.' + type) }}</template> <template #suffix>{{ sounds[type].type ?? i18n.ts.none }}</template> @@ -21,51 +21,44 @@ </template> <script lang="ts" setup> -import { computed, ref } from 'vue'; +import { Ref, computed, ref } from 'vue'; import XSound from './sounds.sound.vue'; import MkRange from '@/components/MkRange.vue'; import MkButton from '@/components/MkButton.vue'; import FormSection from '@/components/form/section.vue'; import MkFolder from '@/components/MkFolder.vue'; -import { ColdDeviceStorage } from '@/store'; +import { soundConfigStore } from '@/scripts/sound'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; -const masterVolume = computed({ - get: () => { - return ColdDeviceStorage.get('sound_masterVolume'); - }, - set: (value) => { - ColdDeviceStorage.set('sound_masterVolume', value); - }, +const masterVolume = computed(soundConfigStore.makeGetterSetter('sound_masterVolume')); + +const soundsKeys = ['note', 'noteMy', 'notification', 'chat', 'chatBg', 'antenna', 'channel'] as const; + +const sounds = ref<Record<typeof soundsKeys[number], Ref<any>>>({ + note: soundConfigStore.reactiveState.sound_note, + noteMy: soundConfigStore.reactiveState.sound_noteMy, + notification: soundConfigStore.reactiveState.sound_notification, + chat: soundConfigStore.reactiveState.sound_chat, + chatBg: soundConfigStore.reactiveState.sound_chatBg, + antenna: soundConfigStore.reactiveState.sound_antenna, + channel: soundConfigStore.reactiveState.sound_channel, }); -const volumeIcon = computed(() => masterVolume.value === 0 ? 'ti ti-volume-3' : 'ti ti-volume'); - -const sounds = ref({ - note: ColdDeviceStorage.get('sound_note'), - noteMy: ColdDeviceStorage.get('sound_noteMy'), - notification: ColdDeviceStorage.get('sound_notification'), - chat: ColdDeviceStorage.get('sound_chat'), - chatBg: ColdDeviceStorage.get('sound_chatBg'), - antenna: ColdDeviceStorage.get('sound_antenna'), - channel: ColdDeviceStorage.get('sound_channel'), -}); - -async function updated(type, sound) { +async function updated(type: keyof typeof sounds.value, sound) { const v = { type: sound.type, volume: sound.volume, }; - ColdDeviceStorage.set('sound_' + type, v); + soundConfigStore.set(`sound_${type}`, v); sounds.value[type] = v; } function reset() { - for (const sound of Object.keys(sounds.value)) { - const v = ColdDeviceStorage.default['sound_' + sound]; - ColdDeviceStorage.set('sound_' + sound, v); + for (const sound of Object.keys(sounds.value) as Array<keyof typeof sounds.value>) { + const v = soundConfigStore.def[`sound_${sound}`].default; + soundConfigStore.set(`sound_${sound}`, v); sounds.value[sound] = v; } } diff --git a/packages/frontend/src/scripts/sound.ts b/packages/frontend/src/scripts/sound.ts index 35fd007e64..7a5dd4dbfa 100644 --- a/packages/frontend/src/scripts/sound.ts +++ b/packages/frontend/src/scripts/sound.ts @@ -1,4 +1,56 @@ -import { ColdDeviceStorage } from '@/store'; +import { markRaw } from 'vue'; +import { Storage } from '@/pizzax'; + +export const soundConfigStore = markRaw(new Storage('sound', { + mediaVolume: { + where: 'device', + default: 0.5 + }, + sound_masterVolume: { + where: 'device', + default: 0.3 + }, + sound_note: { + where: 'account', + default: { type: 'syuilo/n-aec', volume: 1 } + }, + sound_noteMy: { + where: 'account', + default: { type: 'syuilo/n-cea-4va', volume: 1 } + }, + sound_notification: { + where: 'account', + default: { type: 'syuilo/n-ea', volume: 1 } + }, + sound_chat: { + where: 'account', + default: { type: 'syuilo/pope1', volume: 1 } + }, + sound_chatBg: { + where: 'account', + default: { type: 'syuilo/waon', volume: 1 } + }, + sound_antenna: { + where: 'account', + default: { type: 'syuilo/triple', volume: 1 } + }, + sound_channel: { + where: 'account', + default: { type: 'syuilo/square-pico', volume: 1 } + }, +})); + +await soundConfigStore.ready; + +//#region サウンドのColdDeviceStorage => indexedDBのマイグレーション +for (const target of Object.keys(soundConfigStore.state) as Array<keyof typeof soundConfigStore.state>) { + const value = localStorage.getItem(`miux:${target}`); + if (value) { + soundConfigStore.set(target, JSON.parse(value) as typeof soundConfigStore.def[typeof target]['default']); + localStorage.removeItem(`miux:${target}`); + } +} +//#endregion const cache = new Map<string, HTMLAudioElement>(); @@ -67,19 +119,20 @@ export function getAudio(file: string, useCache = true): HTMLAudioElement { } export function setVolume(audio: HTMLAudioElement, volume: number): HTMLAudioElement { - const masterVolume = ColdDeviceStorage.get('sound_masterVolume'); + const masterVolume = soundConfigStore.state.sound_masterVolume; audio.volume = masterVolume - ((1 - volume) * masterVolume); return audio; } export function play(type: 'noteMy' | 'note' | 'antenna' | 'channel' | 'notification') { - const sound = ColdDeviceStorage.get(`sound_${type}`); + const sound = soundConfigStore.state[`sound_${type}`]; + if (_DEV_) console.log('play', type, sound); if (sound.type == null) return; playFile(sound.type, sound.volume); } export function playFile(file: string, volume: number) { - const masterVolume = ColdDeviceStorage.get('sound_masterVolume'); + const masterVolume = soundConfigStore.state.sound_masterVolume; if (masterVolume === 0) return; const audio = setVolume(getAudio(file), volume); diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 0728fc84e5..a935093240 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -343,15 +343,6 @@ export class ColdDeviceStorage { darkTheme, syncDeviceDarkMode: true, plugins: [] as Plugin[], - mediaVolume: 0.5, - sound_masterVolume: 0.5, - sound_note: { type: 'syuilo/n-eca', volume: 0.5 }, - sound_noteMy: { type: 'syuilo/n-cea-4va', volume: 0.5 }, - sound_notification: { type: 'syuilo/n-ea', volume: 0.5 }, - sound_chat: { type: 'syuilo/pope1', volume: 0.5 }, - sound_chatBg: { type: 'syuilo/waon', volume: 0.5 }, - sound_antenna: { type: 'syuilo/triple', volume: 0.5 }, - sound_channel: { type: 'syuilo/square-pico', volume: 0.5 }, }; public static watchers: Watcher[] = [];