pass through dialog

This commit is contained in:
w-okada 2023-08-09 17:11:03 +09:00
parent 50f963ff6b
commit 638619b3b4
5 changed files with 75 additions and 4 deletions

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

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