wokada-voice-changer/client/lib/src/hooks/useClientSetting.ts

127 lines
4.1 KiB
TypeScript
Raw Normal View History

2023-02-19 14:20:37 +09:00
import { useState, useMemo, useEffect } from "react"
2023-02-14 22:32:25 +09:00
2023-03-09 06:47:11 +09:00
import { VoiceChangerClientSetting, DefaultVoiceChangerClientSetting, INDEXEDDB_KEY_CLIENT, ClientType } from "../const"
2023-01-12 23:01:45 +09:00
import { VoiceChangerClient } from "../VoiceChangerClient"
2023-01-29 09:42:45 +09:00
import { useIndexedDB } from "./useIndexedDB"
2023-01-12 16:38:45 +09:00
export type UseClientSettingProps = {
2023-04-11 00:21:17 +09:00
clientType: ClientType | null
2023-01-12 16:38:45 +09:00
voiceChangerClient: VoiceChangerClient | null
audioContext: AudioContext | null
}
export type ClientSettingState = {
2023-02-19 14:20:37 +09:00
clientSetting: VoiceChangerClientSetting;
2023-01-29 09:42:45 +09:00
clearSetting: () => Promise<void>
2023-01-12 16:38:45 +09:00
setServerUrl: (url: string) => void;
2023-02-19 14:20:37 +09:00
updateClientSetting: (clientSetting: VoiceChangerClientSetting) => void
2023-01-12 16:38:45 +09:00
start: () => Promise<void>
stop: () => Promise<void>
reloadClientSetting: () => Promise<void>
}
export const useClientSetting = (props: UseClientSettingProps): ClientSettingState => {
2023-02-19 14:20:37 +09:00
const [clientSetting, setClientSetting] = useState<VoiceChangerClientSetting>(DefaultVoiceChangerClientSetting)
2023-03-09 06:47:11 +09:00
const { setItem, getItem, removeItem } = useIndexedDB({ clientType: props.clientType })
2023-01-29 09:42:45 +09:00
// 初期化 その1 DBから取得
useEffect(() => {
const loadCache = async () => {
2023-02-19 14:20:37 +09:00
const setting = await getItem(INDEXEDDB_KEY_CLIENT) as VoiceChangerClientSetting
2023-02-22 07:35:26 +09:00
if (!setting) {
return
}
2023-02-19 14:20:37 +09:00
console.log("[ClientSetting] Load Setting from db", setting)
if (setting.audioInput == "null") {
setting.audioInput = null
}
if (setting) {
setClientSetting({ ...setting })
2023-01-29 09:42:45 +09:00
}
}
loadCache()
}, [])
// 初期化 その2 クライアントに設定
useEffect(() => {
if (!props.voiceChangerClient) return
2023-02-19 14:20:37 +09:00
props.voiceChangerClient.updateClientSetting(clientSetting)
2023-01-29 09:42:45 +09:00
}, [props.voiceChangerClient])
2023-02-19 14:20:37 +09:00
const storeSetting = async (setting: VoiceChangerClientSetting) => {
2023-01-29 09:42:45 +09:00
const storeData = { ...setting }
if (typeof storeData.audioInput != "string") {
storeData.audioInput = null
}
setItem(INDEXEDDB_KEY_CLIENT, storeData)
2023-02-19 14:20:37 +09:00
setClientSetting(setting)
2023-01-29 09:42:45 +09:00
}
const clearSetting = async () => {
await removeItem(INDEXEDDB_KEY_CLIENT)
}
2023-01-12 16:38:45 +09:00
//////////////
// 設定
/////////////
2023-02-19 14:20:37 +09:00
const updateClientSetting = useMemo(() => {
2023-02-19 19:22:00 +09:00
return (_clientSetting: VoiceChangerClientSetting) => {
2023-01-12 16:38:45 +09:00
if (!props.voiceChangerClient) return
2023-02-19 19:22:00 +09:00
for (let k in _clientSetting) {
2023-02-20 04:49:34 +09:00
const cur_v = clientSetting[k as keyof VoiceChangerClientSetting]
const new_v = _clientSetting[k as keyof VoiceChangerClientSetting]
2023-02-19 19:22:00 +09:00
if (cur_v != new_v) {
storeSetting(_clientSetting)
props.voiceChangerClient.updateClientSetting(_clientSetting)
break
}
}
2023-01-12 16:38:45 +09:00
}
2023-02-19 14:20:37 +09:00
}, [props.voiceChangerClient, clientSetting])
2023-01-12 16:38:45 +09:00
2023-02-19 14:20:37 +09:00
const setServerUrl = useMemo(() => {
return (url: string) => {
2023-02-12 12:25:57 +09:00
if (!props.voiceChangerClient) return
2023-02-19 14:20:37 +09:00
props.voiceChangerClient.setServerUrl(url, true)
2023-02-12 12:25:57 +09:00
}
}, [props.voiceChangerClient])
2023-02-12 18:19:22 +09:00
2023-01-12 16:38:45 +09:00
//////////////
// 操作
/////////////
// (1) start
const start = useMemo(() => {
return async () => {
if (!props.voiceChangerClient) return
2023-02-19 14:20:37 +09:00
// props.voiceChangerClient.setServerUrl(setting.mmvcServerUrl, true)
2023-04-11 03:07:14 +09:00
await props.voiceChangerClient.start()
2023-01-12 16:38:45 +09:00
}
2023-02-19 14:20:37 +09:00
}, [props.voiceChangerClient])
2023-01-12 16:38:45 +09:00
// (2) stop
const stop = useMemo(() => {
return async () => {
if (!props.voiceChangerClient) return
2023-04-11 03:07:14 +09:00
await props.voiceChangerClient.stop()
2023-01-12 16:38:45 +09:00
}
}, [props.voiceChangerClient])
const reloadClientSetting = useMemo(() => {
return async () => {
if (!props.voiceChangerClient) return
await props.voiceChangerClient.getClientSettings()
}
}, [props.voiceChangerClient])
return {
2023-02-19 14:20:37 +09:00
clientSetting,
2023-01-29 09:42:45 +09:00
clearSetting,
2023-01-12 16:38:45 +09:00
setServerUrl,
2023-02-19 14:20:37 +09:00
updateClientSetting,
2023-01-12 16:38:45 +09:00
start,
stop,
reloadClientSetting
}
}