From 67414e0181877730d598f76dcc54bc1d10b86bd3 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sat, 4 Nov 2023 10:09:21 +0900 Subject: [PATCH] =?UTF-8?q?perf(frontend):=20soundConfigStore=20=E3=82=92?= =?UTF-8?q?=20defaultStore=20=E3=81=AB=E7=B5=B1=E5=90=88=E3=81=97API?= =?UTF-8?q?=E3=83=AA=E3=82=AF=E3=82=A8=E3=82=B9=E3=83=88=E3=82=92=E5=89=8A?= =?UTF-8?q?=E6=B8=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/components/MkMediaBanner.vue | 1 - .../frontend/src/pages/settings/sounds.vue | 20 ++++---- packages/frontend/src/scripts/sound.ts | 46 ++----------------- packages/frontend/src/store.ts | 25 ++++++++++ 4 files changed, 38 insertions(+), 54 deletions(-) diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue index 69da1a7466..122f8ad794 100644 --- a/packages/frontend/src/components/MkMediaBanner.vue +++ b/packages/frontend/src/components/MkMediaBanner.vue @@ -34,7 +34,6 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { onMounted, shallowRef, watch } from 'vue'; import * as Misskey from 'misskey-js'; -import { soundConfigStore } from '@/scripts/sound.js'; import { i18n } from '@/i18n.js'; const props = withDefaults(defineProps<{ diff --git a/packages/frontend/src/pages/settings/sounds.vue b/packages/frontend/src/pages/settings/sounds.vue index 819e7ffe53..cd1707a594 100644 --- a/packages/frontend/src/pages/settings/sounds.vue +++ b/packages/frontend/src/pages/settings/sounds.vue @@ -32,20 +32,20 @@ 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 { soundConfigStore } from '@/scripts/sound.js'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; +import { defaultStore } from '@/store.js'; -const masterVolume = computed(soundConfigStore.makeGetterSetter('sound_masterVolume')); +const masterVolume = computed(defaultStore.makeGetterSetter('sound_masterVolume')); const soundsKeys = ['note', 'noteMy', 'notification', '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, - antenna: soundConfigStore.reactiveState.sound_antenna, - channel: soundConfigStore.reactiveState.sound_channel, + note: defaultStore.reactiveState.sound_note, + noteMy: defaultStore.reactiveState.sound_noteMy, + notification: defaultStore.reactiveState.sound_notification, + antenna: defaultStore.reactiveState.sound_antenna, + channel: defaultStore.reactiveState.sound_channel, }); async function updated(type: keyof typeof sounds.value, sound) { @@ -54,14 +54,14 @@ async function updated(type: keyof typeof sounds.value, sound) { volume: sound.volume, }; - soundConfigStore.set(`sound_${type}`, v); + defaultStore.set(`sound_${type}`, v); sounds.value[type] = v; } function reset() { 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); + const v = defaultStore.def[`sound_${sound}`].default; + defaultStore.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 1ef075818f..f995c122d1 100644 --- a/packages/frontend/src/scripts/sound.ts +++ b/packages/frontend/src/scripts/sound.ts @@ -3,47 +3,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { markRaw } from 'vue'; -import { Storage } from '@/pizzax.js'; - -export const soundConfigStore = markRaw(new Storage('sound', { - 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_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 +import { defaultStore } from '@/store.js'; const cache = new Map<string, HTMLAudioElement>(); @@ -112,13 +72,13 @@ export function getAudio(file: string, useCache = true): HTMLAudioElement { } export function setVolume(audio: HTMLAudioElement, volume: number): HTMLAudioElement { - const masterVolume = soundConfigStore.state.sound_masterVolume; + const masterVolume = defaultStore.state.sound_masterVolume; audio.volume = masterVolume - ((1 - volume) * masterVolume); return audio; } export function play(type: 'noteMy' | 'note' | 'antenna' | 'channel' | 'notification') { - const sound = soundConfigStore.state[`sound_${type}`]; + const sound = defaultStore.state[`sound_${type}`]; if (_DEV_) console.log('play', type, sound); if (sound.type == null) return; playFile(sound.type, sound.volume); diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 7f916656de..6d95ddba35 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -382,6 +382,31 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: true, }, + + sound_masterVolume: { + where: 'device', + default: 0.3, + }, + sound_note: { + where: 'device', + default: { type: 'syuilo/n-aec', volume: 1 }, + }, + sound_noteMy: { + where: 'device', + default: { type: 'syuilo/n-cea-4va', volume: 1 }, + }, + sound_notification: { + where: 'device', + default: { type: 'syuilo/n-ea', volume: 1 }, + }, + sound_antenna: { + where: 'device', + default: { type: 'syuilo/triple', volume: 1 }, + }, + sound_channel: { + where: 'device', + default: { type: 'syuilo/square-pico', volume: 1 }, + }, })); // TODO: 他のタブと永続化されたstateを同期