refactor(stage-ui): settings store simplified (#965)

Author: leaft

packages/stage-ui/package.json

@@ -29,6 +29,7 @@
     "./stores/providers/aliyun": "./src/stores/providers/aliyun/index.ts",
     "./stores/analytics": "./src/stores/analytics/index.ts",
     "./stores/character": "./src/stores/character/index.ts",
+    "./stores/settings": "./src/stores/settings/index.ts",
     "./stores/*": "./src/stores/*.ts",
     "./stores": "./src/stores/index.ts",
     "./workers/vad": "./src/workers/vad/index.ts",

packages/stage-ui/src/stores/settings.ts

@@ -0,0 +1,58 @@
+import { useLocalStorageManualReset } from '@proj-airi/stage-shared/composables'
+import { defineStore } from 'pinia'
+import { onMounted, watch } from 'vue'
+
+import { useAudioDevice } from '../audio'
+
+export const useSettingsAudioDevice = defineStore('settings-audio-devices', () => {
+  const { audioInputs, deviceConstraints, selectedAudioInput: selectedAudioInputNonPersist, startStream, stopStream, stream, askPermission } = useAudioDevice()
+
+  const selectedAudioInputPersist = useLocalStorageManualReset<string>('settings/audio/input', selectedAudioInputNonPersist.value)
+  const selectedAudioInputEnabledPersist = useLocalStorageManualReset<boolean>('settings/audio/input/enabled', false)
+
+  watch(selectedAudioInputPersist, (newValue) => {
+    selectedAudioInputNonPersist.value = newValue
+  })
+
+  watch(selectedAudioInputEnabledPersist, (val) => {
+    if (val) {
+      startStream()
+    }
+    else {
+      stopStream()
+    }
+  })
+
+  onMounted(() => {
+    const hasSelectedInput = selectedAudioInputPersist.value
+      && audioInputs.value.some(device => device.deviceId === selectedAudioInputPersist.value)
+
+    if (selectedAudioInputEnabledPersist.value && hasSelectedInput) {
+      startStream()
+    }
+    if (selectedAudioInputNonPersist.value && !selectedAudioInputEnabledPersist.value) {
+      selectedAudioInputPersist.value = selectedAudioInputNonPersist.value
+    }
+  })
+
+  function resetState() {
+    selectedAudioInputPersist.reset()
+    selectedAudioInputNonPersist.value = ''
+    selectedAudioInputEnabledPersist.reset()
+    stopStream()
+  }
+
+  return {
+    audioInputs,
+    deviceConstraints,
+    selectedAudioInput: selectedAudioInputPersist,
+    enabled: selectedAudioInputEnabledPersist,
+
+    stream,
+
+    askPermission,
+    startStream,
+    stopStream,
+    resetState,
+  }
+})

packages/stage-ui/src/stores/settings/audio-device.ts

@@ -0,0 +1,18 @@
+import { useLocalStorageManualReset } from '@proj-airi/stage-shared/composables'
+import { defineStore } from 'pinia'
+
+export const useSettingsControlsIsland = defineStore('settings-controls-island', () => {
+  const allowVisibleOnAllWorkspaces = useLocalStorageManualReset<boolean>('settings/allow-visible-on-all-workspaces', true)
+  const controlsIslandIconSize = useLocalStorageManualReset<'auto' | 'large' | 'small'>('settings/controls-island/icon-size', 'auto')
+
+  function resetState() {
+    allowVisibleOnAllWorkspaces.reset()
+    controlsIslandIconSize.reset()
+  }
+
+  return {
+    allowVisibleOnAllWorkspaces,
+    controlsIslandIconSize,
+    resetState,
+  }
+})