diff --git a/client/demo/src/components/demo/components2/100_ModelSlotArea.tsx b/client/demo/src/components/demo/components2/100_ModelSlotArea.tsx index ee84d548..b0791a5a 100644 --- a/client/demo/src/components/demo/components2/100_ModelSlotArea.tsx +++ b/client/demo/src/components/demo/components2/100_ModelSlotArea.tsx @@ -3,7 +3,6 @@ import { useAppState } from "../../../001_provider/001_AppStateProvider"; import { useGuiState } from "../001_GuiStateProvider"; import { useMessageBuilder } from "../../../hooks/useMessageBuilder"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { useAppRoot } from "../../../001_provider/001_AppRootProvider"; export type ModelSlotAreaProps = {}; @@ -14,8 +13,7 @@ const SortTypes = { export type SortTypes = (typeof SortTypes)[keyof typeof SortTypes]; export const ModelSlotArea = (_props: ModelSlotAreaProps) => { - const { serverSetting, getInfo } = useAppState(); - const { appGuiSettingState } = useAppRoot(); + const { serverSetting, getInfo, webEdition } = useAppState(); const guiState = useGuiState(); const messageBuilderState = useMessageBuilder(); const [sortType, setSortType] = useState("slot"); @@ -118,7 +116,7 @@ export const ModelSlotArea = (_props: ModelSlotAreaProps) => { ); }, [modelTiles, sortType]); - if (appGuiSettingState.edition.indexOf("web") >= 0) { + if (webEdition) { return <>; } diff --git a/client/demo/src/components/demo/components2/101-0_Portrait.tsx b/client/demo/src/components/demo/components2/101-0_Portrait.tsx index 93431788..278e8297 100644 --- a/client/demo/src/components/demo/components2/101-0_Portrait.tsx +++ b/client/demo/src/components/demo/components2/101-0_Portrait.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useMemo, useState } from "react"; import { useAppState } from "../../../001_provider/001_AppStateProvider"; import { useMessageBuilder } from "../../../hooks/useMessageBuilder"; -import { useAppRoot } from "../../../001_provider/001_AppRootProvider"; export type PortraitProps = {}; const BeatriceSpeakerType = { male: "male", @@ -13,8 +12,7 @@ type BeatriceSpeakerType = (typeof BeatriceSpeakerType)[keyof typeof BeatriceSpe import MyIcon from "./female-clickable.svg"; import { useGuiState } from "../001_GuiStateProvider"; export const Portrait = (_props: PortraitProps) => { - const { appGuiSettingState } = useAppRoot(); - const { serverSetting, volume, bufferingTime, performance, webInfoState } = useAppState(); + const { serverSetting, volume, bufferingTime, performance, webInfoState, webEdition } = useAppState(); const messageBuilderState = useMessageBuilder(); const [beatriceSpeakerType, setBeatriceSpeakerType] = useState(BeatriceSpeakerType.male); const [beatriceSpeakerIndexInGender, setBeatriceSpeakerIndexInGender] = useState(""); @@ -23,8 +21,6 @@ export const Portrait = (_props: PortraitProps) => { const beatriceMaleSpeakersList = [1, 3, 5, 6, 9, 11, 12, 13, 20, 21, 22, 23, 28, 31, 32, 33, 34, 37, 41, 42, 44, 45, 46, 47, 48, 49, 50, 52, 54, 68, 70, 71, 73, 74, 75, 76, 77, 78, 79, 80, 81, 86, 87, 88, 89, 97, 98, 99, 100]; const beatriceFemaleSpeakersList = [2, 4, 7, 8, 10, 14, 15, 16, 17, 18, 19, 24, 25, 26, 27, 29, 30, 35, 36, 38, 39, 40, 43, 51, 53, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 69, 72, 82, 83, 84, 85, 90, 91, 92, 93, 94, 95, 96]; - const webEdition = appGuiSettingState.edition.indexOf("web") >= 0; - useMemo(() => { messageBuilderState.setMessage(__filename, "terms_of_use", { ja: "利用規約", en: "terms of use" }); }, []); diff --git a/client/demo/src/components/demo/components2/101-1_TuningArea.tsx b/client/demo/src/components/demo/components2/101-1_TuningArea.tsx index 2fcf4ecd..1ccfe420 100644 --- a/client/demo/src/components/demo/components2/101-1_TuningArea.tsx +++ b/client/demo/src/components/demo/components2/101-1_TuningArea.tsx @@ -1,15 +1,12 @@ import React, { useMemo } from "react"; import { useAppState } from "../../../001_provider/001_AppStateProvider"; import { useGuiState } from "../001_GuiStateProvider"; -import { useAppRoot } from "../../../001_provider/001_AppRootProvider"; export type TuningAreaProps = {}; export const TuningArea = (_props: TuningAreaProps) => { - const { appGuiSettingState } = useAppRoot(); - const { serverSetting, webInfoState } = useAppState(); + const { serverSetting, webInfoState, webEdition } = useAppState(); const { setBeatriceJVSSpeakerPitch, beatriceJVSSpeakerPitch } = useGuiState(); - const webEdition = appGuiSettingState.edition.indexOf("web") >= 0; const selected = useMemo(() => { if (webEdition) { diff --git a/client/demo/src/components/demo/components2/101-8_web-editionSettingArea.tsx b/client/demo/src/components/demo/components2/101-8_web-editionSettingArea.tsx index c4886b35..9db41bbc 100644 --- a/client/demo/src/components/demo/components2/101-8_web-editionSettingArea.tsx +++ b/client/demo/src/components/demo/components2/101-8_web-editionSettingArea.tsx @@ -1,14 +1,11 @@ import React, { useMemo } from "react"; import { useAppState } from "../../../001_provider/001_AppStateProvider"; -import { useAppRoot } from "../../../001_provider/001_AppRootProvider"; import { useGuiState } from "../001_GuiStateProvider"; export type WebEditionSettingAreaProps = {}; export const WebEditionSettingArea = (_props: WebEditionSettingAreaProps) => { - const { serverSetting, webInfoState } = useAppState(); - const { appGuiSettingState } = useAppRoot(); - const webEdition = appGuiSettingState.edition.indexOf("web") >= 0; + const { serverSetting, webInfoState, webEdition } = useAppState(); const guiState = useGuiState(); const selected = useMemo(() => { diff --git a/client/demo/src/components/demo/components2/102-1_QualityArea.tsx b/client/demo/src/components/demo/components2/102-1_QualityArea.tsx index 8d1b3086..33ac1d68 100644 --- a/client/demo/src/components/demo/components2/102-1_QualityArea.tsx +++ b/client/demo/src/components/demo/components2/102-1_QualityArea.tsx @@ -8,10 +8,9 @@ export type QualityAreaProps = { }; export const QualityArea = (props: QualityAreaProps) => { - const { setVoiceChangerClientSetting, serverSetting, setting } = useAppState(); + const { setVoiceChangerClientSetting, serverSetting, setting, webEdition } = useAppState(); const { appGuiSettingState } = useAppRoot(); const edition = appGuiSettingState.edition; - const webEdition = appGuiSettingState.edition.indexOf("web") >= 0; const qualityArea = useMemo(() => { if (!serverSetting.updateServerSettings || !setVoiceChangerClientSetting || !serverSetting.serverSetting || !setting) { diff --git a/client/demo/src/components/demo/components2/102-2_ConvertArea.tsx b/client/demo/src/components/demo/components2/102-2_ConvertArea.tsx index b6fe774b..d7388727 100644 --- a/client/demo/src/components/demo/components2/102-2_ConvertArea.tsx +++ b/client/demo/src/components/demo/components2/102-2_ConvertArea.tsx @@ -7,10 +7,9 @@ export type ConvertProps = { }; export const ConvertArea = (props: ConvertProps) => { - const { setting, serverSetting, setWorkletNodeSetting, trancateBuffer } = useAppState(); + const { setting, serverSetting, setWorkletNodeSetting, trancateBuffer, webEdition } = useAppState(); const { appGuiSettingState } = useAppRoot(); const edition = appGuiSettingState.edition; - const webEdition = appGuiSettingState.edition.indexOf("web") >= 0; const convertArea = useMemo(() => { let nums: number[]; diff --git a/client/demo/src/components/demo/components2/102-3_DeviceArea.tsx b/client/demo/src/components/demo/components2/102-3_DeviceArea.tsx index 27da1c8a..0f358c89 100644 --- a/client/demo/src/components/demo/components2/102-3_DeviceArea.tsx +++ b/client/demo/src/components/demo/components2/102-3_DeviceArea.tsx @@ -4,12 +4,11 @@ import { fileSelectorAsDataURL, useIndexedDB } from "@dannadori/voice-changer-cl import { useGuiState } from "../001_GuiStateProvider"; import { AUDIO_ELEMENT_FOR_PLAY_MONITOR, AUDIO_ELEMENT_FOR_PLAY_RESULT, AUDIO_ELEMENT_FOR_TEST_CONVERTED, AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK, INDEXEDDB_KEY_AUDIO_MONITR, INDEXEDDB_KEY_AUDIO_OUTPUT } from "../../../const"; import { isDesktopApp } from "../../../const"; -import { useAppRoot } from "../../../001_provider/001_AppRootProvider"; export type DeviceAreaProps = {}; export const DeviceArea = (_props: DeviceAreaProps) => { - const { setting, serverSetting, audioContext, setAudioOutputElementId, setAudioMonitorElementId, initializedRef, setVoiceChangerClientSetting, startOutputRecording, stopOutputRecording } = useAppState(); + const { setting, serverSetting, audioContext, setAudioOutputElementId, setAudioMonitorElementId, initializedRef, setVoiceChangerClientSetting, startOutputRecording, stopOutputRecording, webEdition } = useAppState(); const { isConverting, audioInputForGUI, inputAudioDeviceInfo, setAudioInputForGUI, fileInputEchoback, setFileInputEchoback, setAudioOutputForGUI, setAudioMonitorForGUI, audioOutputForGUI, audioMonitorForGUI, outputAudioDeviceInfo, shareScreenEnabled, setShareScreenEnabled, reloadDeviceInfo } = useGuiState(); const [inputHostApi, setInputHostApi] = useState("ALL"); const [outputHostApi, setOutputHostApi] = useState("ALL"); @@ -20,9 +19,6 @@ export const DeviceArea = (_props: DeviceAreaProps) => { const { getItem, setItem } = useIndexedDB({ clientType: null }); const [outputRecordingStarted, setOutputRecordingStarted] = useState(false); - const { appGuiSettingState } = useAppRoot(); - const webEdition = appGuiSettingState.edition.indexOf("web") >= 0; - // (1) Audio Mode const deviceModeRow = useMemo(() => { if (webEdition) { diff --git a/client/demo/src/components/demo/components2/102-4_RecorderArea.tsx b/client/demo/src/components/demo/components2/102-4_RecorderArea.tsx index bef35ebf..98a46878 100644 --- a/client/demo/src/components/demo/components2/102-4_RecorderArea.tsx +++ b/client/demo/src/components/demo/components2/102-4_RecorderArea.tsx @@ -2,16 +2,13 @@ import React, { useMemo, useState } from "react"; import { useAppState } from "../../../001_provider/001_AppStateProvider"; import { useGuiState } from "../001_GuiStateProvider"; import { AUDIO_ELEMENT_FOR_SAMPLING_INPUT, AUDIO_ELEMENT_FOR_SAMPLING_OUTPUT } from "../../../const"; -import { useAppRoot } from "../../../001_provider/001_AppRootProvider"; export type RecorderAreaProps = {}; export const RecorderArea = (_props: RecorderAreaProps) => { - const { serverSetting } = useAppState(); + const { serverSetting, webEdition } = useAppState(); const { audioOutputForAnalyzer, setAudioOutputForAnalyzer, outputAudioDeviceInfo } = useGuiState(); const [serverIORecording, setServerIORecording] = useState(false); - const { appGuiSettingState } = useAppRoot(); - const webEdition = appGuiSettingState.edition.indexOf("web") >= 0; const serverIORecorderRow = useMemo(() => { if (webEdition) { diff --git a/client/demo/src/components/demo/components2/102-5_MoreActionArea.tsx b/client/demo/src/components/demo/components2/102-5_MoreActionArea.tsx index aa778756..981c480b 100644 --- a/client/demo/src/components/demo/components2/102-5_MoreActionArea.tsx +++ b/client/demo/src/components/demo/components2/102-5_MoreActionArea.tsx @@ -1,13 +1,12 @@ import React, { useMemo } from "react"; import { useGuiState } from "../001_GuiStateProvider"; -import { useAppRoot } from "../../../001_provider/001_AppRootProvider"; +import { useAppState } from "../../../001_provider/001_AppStateProvider"; export type MoreActionAreaProps = {}; export const MoreActionArea = (_props: MoreActionAreaProps) => { const { stateControls } = useGuiState(); - const { appGuiSettingState } = useAppRoot(); - const webEdition = appGuiSettingState.edition.indexOf("web") >= 0; + const { webEdition } = useAppState(); const serverIORecorderRow = useMemo(() => { const onOpenMergeLabClicked = () => {