pass through dialog

client/demo/src/components/demo/001_GuiStateProvider.tsx

@@ -20,6 +20,7 @@ export const OpenMergeLabDialogCheckbox = "open-merge-lab-dialog-checkbox";
 export const OpenAdvancedSettingDialogCheckbox = "open-advanced-setting-dialog-checkbox";
 export const OpenGetServerInformationDialogCheckbox = "open-get-server-information-dialog-checkbox";
 export const OpenGetClientInformationDialogCheckbox = "open-get-client-information-dialog-checkbox";
+export const OpenEnablePassThroughDialogCheckbox = "open-enable-pass-through-dialog-checkbox";
 
 export const OpenTextInputDialogCheckbox = "open-text-input-dialog-checkbox";
 export const OpenShowLicenseDialogCheckbox = "open-show-license-dialog-checkbox";
@@ -46,6 +47,7 @@ export type StateControls = {
     showAdvancedSettingCheckbox: StateControlCheckbox;
     showGetServerInformationCheckbox: StateControlCheckbox;
     showGetClientInformationCheckbox: StateControlCheckbox;
+    showEnablePassThroughDialogCheckbox: StateControlCheckbox;
     showTextInputCheckbox: StateControlCheckbox;
     showLicenseCheckbox: StateControlCheckbox;
 };
@@ -195,6 +197,7 @@ export const GuiStateProvider = ({ children }: Props) => {
     const showAdvancedSettingCheckbox = useStateControlCheckbox(OpenAdvancedSettingDialogCheckbox);
     const showGetServerInformationCheckbox = useStateControlCheckbox(OpenGetServerInformationDialogCheckbox);
     const showGetClientInformationCheckbox = useStateControlCheckbox(OpenGetClientInformationDialogCheckbox);
+    const showEnablePassThroughDialogCheckbox = useStateControlCheckbox(OpenEnablePassThroughDialogCheckbox);
 
     const showTextInputCheckbox = useStateControlCheckbox(OpenTextInputDialogCheckbox);
     const showLicenseCheckbox = useStateControlCheckbox(OpenShowLicenseDialogCheckbox);
@@ -217,6 +220,7 @@ export const GuiStateProvider = ({ children }: Props) => {
         showAdvancedSettingCheckbox.updateState(false);
         showGetServerInformationCheckbox.updateState(false);
         showGetClientInformationCheckbox.updateState(false);
+        showEnablePassThroughDialogCheckbox.updateState(false);
 
         showTextInputCheckbox.updateState(false);
         showLicenseCheckbox.updateState(false);
@@ -257,6 +261,7 @@ export const GuiStateProvider = ({ children }: Props) => {
             showAdvancedSettingCheckbox,
             showGetServerInformationCheckbox,
             showGetClientInformationCheckbox,
+            showEnablePassThroughDialogCheckbox,
 
             showTextInputCheckbox,
             showLicenseCheckbox,

client/demo/src/components/demo/900_Dialogs.tsx

@@ -7,6 +7,7 @@ import { MergeLabDialog } from "./905_MergeLabDialog";
 import { AdvancedSettingDialog } from "./906_AdvancedSettingDialog";
 import { GetServerInfomationDialog } from "./907_GetServerInfomationDialog";
 import { GetClientInfomationDialog } from "./908_GetClientInfomationDialog";
+import { EnablePassThroughDialog } from "./909_EnablePassThroughDialog";
 
 export const Dialogs = () => {
     const guiState = useGuiState();
@@ -19,6 +20,7 @@ export const Dialogs = () => {
             {guiState.stateControls.showAdvancedSettingCheckbox.trigger}
             {guiState.stateControls.showGetServerInformationCheckbox.trigger}
             {guiState.stateControls.showGetClientInformationCheckbox.trigger}
+            {guiState.stateControls.showEnablePassThroughDialogCheckbox.trigger}
             <div className="dialog-container" id="dialog">
                 {guiState.stateControls.showWaitingCheckbox.trigger}
                 <WaitingDialog></WaitingDialog>
@@ -34,6 +36,8 @@ export const Dialogs = () => {
                 <GetServerInfomationDialog></GetServerInfomationDialog>
                 {guiState.stateControls.showGetClientInformationCheckbox.trigger}
                 <GetClientInfomationDialog></GetClientInfomationDialog>
+                {guiState.stateControls.showEnablePassThroughDialogCheckbox.trigger}
+                <EnablePassThroughDialog></EnablePassThroughDialog>
             </div>
         </div>
     );

client/demo/src/components/demo/909_EnablePassThroughDialog.tsx

@@ -0,0 +1,47 @@
+import React, { useMemo } from "react";
+import { useGuiState } from "./001_GuiStateProvider";
+import { useAppState } from "../../001_provider/001_AppStateProvider";
+import { useAppRoot } from "../../001_provider/001_AppRootProvider";
+
+export const EnablePassThroughDialog = () => {
+    const guiState = useGuiState();
+    const { audioContextState } = useAppRoot();
+    const { serverSetting } = useAppState();
+    const { setting } = useAppState();
+    const dialog = useMemo(() => {
+        const buttonRow = (
+            <div className="body-row split-3-4-3 left-padding-1">
+                <div className="body-item-text"></div>
+                <div className="body-button-container body-button-container-space-around">
+                    <div
+                        className="body-button"
+                        onClick={() => {
+                            serverSetting.updateServerSettings({ ...serverSetting.serverSetting, passThrough: true });
+                            guiState.stateControls.showEnablePassThroughDialogCheckbox.updateState(false);
+                        }}
+                    >
+                        OK
+                    </div>
+                    <div
+                        className="body-button"
+                        onClick={() => {
+                            guiState.stateControls.showEnablePassThroughDialogCheckbox.updateState(false);
+                        }}
+                    >
+                        Cancel
+                    </div>
+                </div>
+                <div className="body-item-text"></div>
+            </div>
+        );
+
+        console.log("AUDIO_CONTEXT", audioContextState.audioContext);
+        return (
+            <div className="dialog-frame">
+                <div className="dialog-title">Enable Pass Through</div>
+                <div className="dialog-content">{buttonRow}</div>
+            </div>
+        );
+    }, [setting, audioContextState]);
+    return dialog;
+};

client/demo/src/components/demo/components2/101_CharacterArea.tsx

@@ -123,7 +123,11 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
             }
         };
         const onPassThroughClicked = async () => {
-            serverSetting.updateServerSettings({ ...serverSetting.serverSetting, passThrough: !serverSetting.serverSetting.passThrough });
+            if (serverSetting.serverSetting.passThrough == false) {
+                guiState.stateControls.showEnablePassThroughDialogCheckbox.updateState(true);
+            } else {
+                serverSetting.updateServerSettings({ ...serverSetting.serverSetting, passThrough: false });
+            }
         };
         const startClassName = guiState.isConverting ? "character-area-control-button-active" : "character-area-control-button-stanby";
         const stopClassName = guiState.isConverting ? "character-area-control-button-stanby" : "character-area-control-button-active";