save client config

client/demo/src/001_provider/001_AppStateProvider.tsx

@@ -36,14 +36,14 @@ export const AppStateProvider = ({ children }: Props) => {
     }, [])
 
     const initializedRef = useRef<boolean>(false)
-    useEffect(() => {
+    // useEffect(() => {
-        if (clientState.clientState.initialized) {
+    //     if (clientState.clientState.initialized) {
-            initializedRef.current = true
+    //         initializedRef.current = true
-            clientState.clientState.setVoiceChangerClientSetting({
+    //         clientState.clientState.setVoiceChangerClientSetting({
-                ...clientState.clientState.setting.voiceChangerClientSetting
+    //             ...clientState.clientState.setting.voiceChangerClientSetting
-            })
+    //         })
-        }
+    //     }
-    }, [clientState.clientState.initialized])
+    // }, [clientState.clientState.initialized])
 
     useEffect(() => {
         if (clientState.clientState.ioErrorCount > 100) {

client/demo/src/components/demo/907_GetServerInfomationDialog.tsx

@@ -19,7 +19,7 @@ export const GetServerInfomationDialog = () => {
         )
         const content = (
             <div className="get-server-information-container">
-                <textarea className="get-server-information-text-area" id="get-server-information-text-area" value={JSON.stringify(serverSetting.serverSetting, null, 4)} />
+                <textarea className="get-server-information-text-area" id="get-server-information-text-area" value={JSON.stringify(serverSetting.serverSetting, null, 4)} onChange={() => { }} />
             </div>
         )
         return (

client/demo/src/components/demo/components2/102-1_QualityArea.tsx

@@ -82,7 +82,7 @@ export const QualityArea = (props: QualityAreaProps) => {
 
             </div>
         )
-    }, [serverSetting.serverSetting, setting.voiceChangerClientSetting, serverSetting.updateServerSettings, setVoiceChangerClientSetting])
+    }, [serverSetting.serverSetting, setting, serverSetting.updateServerSettings, setVoiceChangerClientSetting])
 
 
     return qualityArea

client/demo/src/components/demo/components2/102-3_DeviceArea.tsx

@@ -96,7 +96,7 @@ export const DeviceArea = (_props: DeviceAreaProps) => {
                 </div>
             </div>
         )
-    }, [setVoiceChangerClientSetting, setting.voiceChangerClientSetting, inputAudioDeviceInfo, audioInputForGUI, serverSetting.serverSetting.enableServerAudio])
+    }, [setVoiceChangerClientSetting, setting, inputAudioDeviceInfo, audioInputForGUI, serverSetting.serverSetting.enableServerAudio])
 
 
     // (2-2) サーバ

client/demo/src/components/demo/components2/102-4_RecorderArea.tsx

@@ -106,7 +106,7 @@ export const RecorderArea = (_props: RecorderAreaProps) => {
             </>
         )
 
-    }, [serverIORecording])
+    }, [serverIORecording, audioOutputForAnalyzer, outputAudioDeviceInfo])
 
     return (
         <div className="config-sub-area">

client/lib/src/hooks/useClient.ts

@@ -80,11 +80,10 @@ export const useClient = (props: UseClientProps): ClientState => {
         })
     }, [])
 
-
     // (1-2) 各種設定I/F
-    const voiceChangerClientSetting = useClientSetting({ voiceChangerClient, audioContext: props.audioContext, defaultVoiceChangerClientSetting: setting.voiceChangerClientSetting })
+    const voiceChangerClientSetting = useClientSetting({ voiceChangerClient, audioContext: props.audioContext, voiceChangerClientSetting: setting.voiceChangerClientSetting })
-    const workletNodeSetting = useWorkletNodeSetting({ voiceChangerClient: voiceChangerClient, defaultWorkletNodeSetting: setting.workletNodeSetting })
+    const workletNodeSetting = useWorkletNodeSetting({ voiceChangerClient: voiceChangerClient, workletNodeSetting: setting.workletNodeSetting })
-    useWorkletSetting({ voiceChangerClient, defaultWorkletSetting: setting.workletSetting })
+    useWorkletSetting({ voiceChangerClient, workletSetting: setting.workletSetting })
     const serverSetting = useServerSetting({ voiceChangerClient })
     const indexedDBState = useIndexedDB({ clientType: null })
 
@@ -128,7 +127,36 @@ export const useClient = (props: UseClientProps): ClientState => {
         setIoErrorCount(ioErrorCountRef.current)
     }
 
-    // (2-1) 初期化処理
+    // 設定データ管理
+    const { setItem, getItem } = useIndexedDB({ clientType: null })
+    // 設定データの更新と保存
+    const _setSetting = (_setting: ClientSetting) => {
+        const storeData = { ..._setting }
+        storeData.voiceChangerClientSetting = { ...storeData.voiceChangerClientSetting }
+        if (typeof storeData.voiceChangerClientSetting.audioInput != "string") {
+            storeData.voiceChangerClientSetting.audioInput = "none"
+        }
+        setItem("clientSetting", storeData)
+
+        setSetting(_setting)
+    }
+    // 設定データ初期化
+    useEffect(() => {
+        if (!voiceChangerClient) {
+            return
+        }
+        const loadCache = async () => {
+            const _setting = await getItem("clientSetting") as ClientSetting
+            setSetting(_setting)
+        }
+        loadCache()
+    }, [voiceChangerClient])
+
+
+
+
+
+    // (2-1) クライアント初期化処理
     useEffect(() => {
         const initialized = async () => {
             if (!props.audioContext) {
@@ -202,7 +230,7 @@ export const useClient = (props: UseClientProps): ClientState => {
         setting.voiceChangerClientSetting = _voiceChangerClientSetting
         console.log("setting.voiceChangerClientSetting", setting.voiceChangerClientSetting)
         // workletSettingIF.setSetting(_workletSetting)
-        setSetting({ ...setting })
+        _setSetting({ ...setting })
     }
 
 
@@ -210,14 +238,14 @@ export const useClient = (props: UseClientProps): ClientState => {
         setting.workletNodeSetting = _workletNodeSetting
         console.log("setting.workletNodeSetting", setting.workletNodeSetting)
         // workletSettingIF.setSetting(_workletSetting)
-        setSetting({ ...setting })
+        _setSetting({ ...setting })
     }
 
     const setWorkletSetting = (_workletSetting: WorkletSetting) => {
         setting.workletSetting = _workletSetting
         console.log("setting.workletSetting", setting.workletSetting)
         // workletSettingIF.setSetting(_workletSetting)
-        setSetting({ ...setting })
+        _setSetting({ ...setting })
     }
 
     return {

client/lib/src/hooks/useClientSetting.ts

@@ -6,7 +6,7 @@ import { VoiceChangerClient } from "../VoiceChangerClient"
 export type UseClientSettingProps = {
     voiceChangerClient: VoiceChangerClient | null
     audioContext: AudioContext | null
-    defaultVoiceChangerClientSetting: VoiceChangerClientSetting
+    voiceChangerClientSetting: VoiceChangerClientSetting
 }
 
 export type ClientSettingState = {
@@ -19,23 +19,23 @@ export type ClientSettingState = {
 
 export const useClientSetting = (props: UseClientSettingProps): ClientSettingState => {
     // 更新比較用
-    const [voiceChangerClientSetting, setVoiceChangerClientSetting] = useState<VoiceChangerClientSetting>(props.defaultVoiceChangerClientSetting)
+    const [voiceChangerClientSetting, setVoiceChangerClientSetting] = useState<VoiceChangerClientSetting>(props.voiceChangerClientSetting)
 
     useEffect(() => {
         const update = async () => {
             if (!props.voiceChangerClient) return
-            for (let k in props.defaultVoiceChangerClientSetting) {
+            for (let k in props.voiceChangerClientSetting) {
                 const cur_v = voiceChangerClientSetting[k as keyof VoiceChangerClientSetting]
-                const new_v = props.defaultVoiceChangerClientSetting[k as keyof VoiceChangerClientSetting]
+                const new_v = props.voiceChangerClientSetting[k as keyof VoiceChangerClientSetting]
                 if (cur_v != new_v) {
-                    setVoiceChangerClientSetting(props.defaultVoiceChangerClientSetting)
+                    setVoiceChangerClientSetting(props.voiceChangerClientSetting)
-                    await props.voiceChangerClient.updateClientSetting(props.defaultVoiceChangerClientSetting)
+                    await props.voiceChangerClient.updateClientSetting(props.voiceChangerClientSetting)
                     break
                 }
             }
         }
         update()
-    }, [props.voiceChangerClient, props.defaultVoiceChangerClientSetting])
+    }, [props.voiceChangerClient, props.voiceChangerClientSetting])
 
 
     const setServerUrl = useMemo(() => {

client/lib/src/hooks/useWorkletNodeSetting.ts

@@ -6,7 +6,7 @@ import { VoiceChangerClient } from "../VoiceChangerClient"
 
 export type UseWorkletNodeSettingProps = {
     voiceChangerClient: VoiceChangerClient | null
-    defaultWorkletNodeSetting: WorkletNodeSetting
+    workletNodeSetting: WorkletNodeSetting
 }
 
 export type WorkletNodeSettingState = {
@@ -17,7 +17,7 @@ export type WorkletNodeSettingState = {
 
 export const useWorkletNodeSetting = (props: UseWorkletNodeSettingProps): WorkletNodeSettingState => {
     // 更新比較用
-    const [workletNodeSetting, _setWorkletNodeSetting] = useState<WorkletNodeSetting>(props.defaultWorkletNodeSetting)
+    const [workletNodeSetting, _setWorkletNodeSetting] = useState<WorkletNodeSetting>(props.workletNodeSetting)
 
     //////////////
     // 設定
@@ -25,17 +25,17 @@ export const useWorkletNodeSetting = (props: UseWorkletNodeSettingProps): Workle
     useEffect(() => {
 
         if (!props.voiceChangerClient) return
-        for (let k in props.defaultWorkletNodeSetting) {
+        for (let k in props.workletNodeSetting) {
             const cur_v = workletNodeSetting[k as keyof WorkletNodeSetting]
-            const new_v = props.defaultWorkletNodeSetting[k as keyof WorkletNodeSetting]
+            const new_v = props.workletNodeSetting[k as keyof WorkletNodeSetting]
             if (cur_v != new_v) {
-                _setWorkletNodeSetting(props.defaultWorkletNodeSetting)
+                _setWorkletNodeSetting(props.workletNodeSetting)
-                props.voiceChangerClient.updateWorkletNodeSetting(props.defaultWorkletNodeSetting)
+                props.voiceChangerClient.updateWorkletNodeSetting(props.workletNodeSetting)
                 break
             }
         }
 
-    }, [props.voiceChangerClient, props.defaultWorkletNodeSetting])
+    }, [props.voiceChangerClient, props.workletNodeSetting])
 
 
     const startOutputRecording = useMemo(() => {

client/lib/src/hooks/useWorkletSetting.ts

@@ -4,7 +4,7 @@ import { VoiceChangerClient } from "../VoiceChangerClient";
 
 export type UseWorkletSettingProps = {
     voiceChangerClient: VoiceChangerClient | null
-    defaultWorkletSetting: WorkletSetting
+    workletSetting: WorkletSetting
 }
 
 export type WorkletSettingState = {
@@ -14,12 +14,12 @@ export type WorkletSettingState = {
 }
 
 export const useWorkletSetting = (props: UseWorkletSettingProps): WorkletSettingState => {
-    const [setting, _setSetting] = useState<WorkletSetting>(props.defaultWorkletSetting)
+    const [setting, _setSetting] = useState<WorkletSetting>(props.workletSetting)
 
     useEffect(() => {
         if (!props.voiceChangerClient) return
         props.voiceChangerClient.configureWorklet(setting)
-    }, [props.voiceChangerClient, props.defaultWorkletSetting])
+    }, [props.voiceChangerClient, props.workletSetting])