perf(frontend): soundConfigStore を defaultStore に統合しAPIリクエストを削減

misskey-dev · Nov 4, 2023 · 67414e0 · 67414e0
1 parent ef8a65e
commit 67414e0
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 54 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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を同期