save client config

This commit is contained in:
wataru 2023-06-25 22:38:21 +09:00
parent baeb771c29
commit ad9f910163
10 changed files with 71 additions and 43 deletions

File diff suppressed because one or more lines are too long

View File

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

View File

@ -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 (

View File

@ -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

View File

@ -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) サーバ

View File

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

View File

@ -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 workletNodeSetting = useWorkletNodeSetting({ voiceChangerClient: voiceChangerClient, defaultWorkletNodeSetting: setting.workletNodeSetting })
useWorkletSetting({ voiceChangerClient, defaultWorkletSetting: setting.workletSetting })
const voiceChangerClientSetting = useClientSetting({ voiceChangerClient, audioContext: props.audioContext, voiceChangerClientSetting: setting.voiceChangerClientSetting })
const workletNodeSetting = useWorkletNodeSetting({ voiceChangerClient: voiceChangerClient, workletNodeSetting: setting.workletNodeSetting })
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 {

View File

@ -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)
await props.voiceChangerClient.updateClientSetting(props.defaultVoiceChangerClientSetting)
setVoiceChangerClientSetting(props.voiceChangerClientSetting)
await props.voiceChangerClient.updateClientSetting(props.voiceChangerClientSetting)
break
}
}
}
update()
}, [props.voiceChangerClient, props.defaultVoiceChangerClientSetting])
}, [props.voiceChangerClient, props.voiceChangerClientSetting])
const setServerUrl = useMemo(() => {

View File

@ -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)
props.voiceChangerClient.updateWorkletNodeSetting(props.defaultWorkletNodeSetting)
_setWorkletNodeSetting(props.workletNodeSetting)
props.voiceChangerClient.updateWorkletNodeSetting(props.workletNodeSetting)
break
}
}
}, [props.voiceChangerClient, props.defaultWorkletNodeSetting])
}, [props.voiceChangerClient, props.workletNodeSetting])
const startOutputRecording = useMemo(() => {

View File

@ -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])