mirror of
https://github.com/w-okada/voice-changer.git
synced 2025-01-23 05:25:01 +03:00
skip pass through confirmation
This commit is contained in:
w-okada
parent
e8e339bd7e
commit
8974bf78d2
11
client/demo/dist/index.html
vendored
11
client/demo/dist/index.html
vendored
@ -1 +1,10 @@
|
||||
<!doctype html><html style="width:100%;height:100%;overflow:hidden"><head><meta charset="utf-8"/><title>Voice Changer Client Demo</title><script defer="defer" src="index.js"></script></head><body style="width:100%;height:100%;margin:0"><div id="app" style="width:100%;height:100%"></div></body></html>
|
||||
<!DOCTYPE html>
|
||||
<html style="width: 100%; height: 100%; overflow: hidden">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Voice Changer Client Demo</title>
|
||||
<script defer src="index.js"></script></head>
|
||||
<body style="width: 100%; height: 100%; margin: 0px">
|
||||
<div id="app" style="width: 100%; height: 100%"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1255
client/demo/dist/index.js
vendored
1255
client/demo/dist/index.js
vendored
File diff suppressed because one or more lines are too long
31
client/demo/dist/index.js.LICENSE.txt
vendored
31
client/demo/dist/index.js.LICENSE.txt
vendored
@ -1,31 +0,0 @@
|
||||
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
@ -3,159 +3,215 @@ import { useGuiState } from "./001_GuiStateProvider";
|
||||
import { useAppState } from "../../001_provider/001_AppStateProvider";
|
||||
import { CrossFadeOverlapSize, Protocol } from "@dannadori/voice-changer-client-js";
|
||||
|
||||
|
||||
export const AdvancedSettingDialog = () => {
|
||||
const guiState = useGuiState()
|
||||
const { setting, serverSetting, setWorkletNodeSetting, setWorkletSetting } = useAppState()
|
||||
const guiState = useGuiState();
|
||||
const { setting, serverSetting, setWorkletNodeSetting, setWorkletSetting, setVoiceChangerClientSetting } = useAppState();
|
||||
const dialog = useMemo(() => {
|
||||
const closeButtonRow = (
|
||||
<div className="body-row split-3-4-3 left-padding-1">
|
||||
<div className="body-item-text">
|
||||
</div>
|
||||
<div className="body-item-text"></div>
|
||||
<div className="body-button-container body-button-container-space-around">
|
||||
<div className="body-button" onClick={() => { guiState.stateControls.showAdvancedSettingCheckbox.updateState(false) }} >close</div>
|
||||
<div
|
||||
className="body-button"
|
||||
onClick={() => {
|
||||
guiState.stateControls.showAdvancedSettingCheckbox.updateState(false);
|
||||
}}
|
||||
>
|
||||
close
|
||||
</div>
|
||||
</div>
|
||||
<div className="body-item-text"></div>
|
||||
</div>
|
||||
|
||||
)
|
||||
);
|
||||
|
||||
const onProtocolChanged = async (val: Protocol) => {
|
||||
setWorkletNodeSetting({ ...setting.workletNodeSetting, protocol: val })
|
||||
}
|
||||
setWorkletNodeSetting({ ...setting.workletNodeSetting, protocol: val });
|
||||
};
|
||||
const protocolRow = (
|
||||
<div className="advanced-setting-container-row">
|
||||
<div className="advanced-setting-container-row-title">
|
||||
protocol
|
||||
</div>
|
||||
<div className="advanced-setting-container-row-title">protocol</div>
|
||||
<div className="advanced-setting-container-row-field">
|
||||
<select value={setting.workletNodeSetting.protocol} onChange={(e) => {
|
||||
onProtocolChanged(e.target.value as
|
||||
Protocol)
|
||||
}}>
|
||||
{
|
||||
Object.values(Protocol).map(x => {
|
||||
return <option key={x} value={x}>{x}</option>
|
||||
})
|
||||
}
|
||||
<select
|
||||
value={setting.workletNodeSetting.protocol}
|
||||
onChange={(e) => {
|
||||
onProtocolChanged(e.target.value as Protocol);
|
||||
}}
|
||||
>
|
||||
{Object.values(Protocol).map((x) => {
|
||||
return (
|
||||
<option key={x} value={x}>
|
||||
{x}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
const crossfaceRow = (
|
||||
<div className="advanced-setting-container-row">
|
||||
<div className="advanced-setting-container-row-title">
|
||||
Crossfade
|
||||
</div>
|
||||
<div className="advanced-setting-container-row-title">Crossfade</div>
|
||||
<div className="advanced-setting-container-row-field">
|
||||
<div className="advanced-setting-container-row-field-crossfade-container">
|
||||
<div>
|
||||
<div>overlap:</div>
|
||||
<div>
|
||||
<select className="body-select" value={serverSetting.serverSetting.crossFadeOverlapSize} onChange={(e) => {
|
||||
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, crossFadeOverlapSize: Number(e.target.value) as CrossFadeOverlapSize })
|
||||
}}>
|
||||
{
|
||||
Object.values(CrossFadeOverlapSize).map(x => {
|
||||
return <option key={x} value={x}>{x}</option>
|
||||
})
|
||||
}
|
||||
<select
|
||||
className="body-select"
|
||||
value={serverSetting.serverSetting.crossFadeOverlapSize}
|
||||
onChange={(e) => {
|
||||
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, crossFadeOverlapSize: Number(e.target.value) as CrossFadeOverlapSize });
|
||||
}}
|
||||
>
|
||||
{Object.values(CrossFadeOverlapSize).map((x) => {
|
||||
return (
|
||||
<option key={x} value={x}>
|
||||
{x}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>start:</div>
|
||||
<div>
|
||||
<input type="number" min={0} max={1} step={0.1} value={serverSetting.serverSetting.crossFadeOffsetRate} onChange={(e) => {
|
||||
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, crossFadeOffsetRate: Number(e.target.value) })
|
||||
}} />
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.1}
|
||||
value={serverSetting.serverSetting.crossFadeOffsetRate}
|
||||
onChange={(e) => {
|
||||
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, crossFadeOffsetRate: Number(e.target.value) });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>end:</div>
|
||||
<div>
|
||||
<input type="number" min={0} max={1} step={0.1} value={serverSetting.serverSetting.crossFadeEndRate} onChange={(e) => {
|
||||
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, crossFadeEndRate: Number(e.target.value) })
|
||||
}} />
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.1}
|
||||
value={serverSetting.serverSetting.crossFadeEndRate}
|
||||
onChange={(e) => {
|
||||
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, crossFadeEndRate: Number(e.target.value) });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
const trancateRow = (
|
||||
<div className="advanced-setting-container-row">
|
||||
<div className="advanced-setting-container-row-title">
|
||||
Trancate
|
||||
</div>
|
||||
<div className="advanced-setting-container-row-title">Trancate</div>
|
||||
<div className="advanced-setting-container-row-field">
|
||||
<input type="number" min={5} max={300} step={1} value={setting.workletSetting.numTrancateTreshold} onChange={(e) => {
|
||||
setWorkletSetting({
|
||||
...setting.workletSetting,
|
||||
numTrancateTreshold: Number(e.target.value)
|
||||
})
|
||||
}} />
|
||||
<input
|
||||
type="number"
|
||||
min={5}
|
||||
max={300}
|
||||
step={1}
|
||||
value={setting.workletSetting.numTrancateTreshold}
|
||||
onChange={(e) => {
|
||||
setWorkletSetting({
|
||||
...setting.workletSetting,
|
||||
numTrancateTreshold: Number(e.target.value),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
const onSilenceFrontChanged = (val: number) => {
|
||||
serverSetting.updateServerSettings({
|
||||
...serverSetting.serverSetting,
|
||||
silenceFront: val
|
||||
})
|
||||
}
|
||||
silenceFront: val,
|
||||
});
|
||||
};
|
||||
const silenceFrontRow = (
|
||||
<div className="advanced-setting-container-row">
|
||||
<div className="advanced-setting-container-row-title">
|
||||
SilenceFront
|
||||
</div>
|
||||
<div className="advanced-setting-container-row-title">SilenceFront</div>
|
||||
<div className="advanced-setting-container-row-field">
|
||||
<select value={serverSetting.serverSetting.silenceFront} onChange={(e) => { onSilenceFrontChanged(Number(e.target.value)) }}>
|
||||
<option value="0" >off</option>
|
||||
<option value="1" >on</option>
|
||||
<select
|
||||
value={serverSetting.serverSetting.silenceFront}
|
||||
onChange={(e) => {
|
||||
onSilenceFrontChanged(Number(e.target.value));
|
||||
}}
|
||||
>
|
||||
<option value="0">off</option>
|
||||
<option value="1">on</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
const protectRow = (
|
||||
<div className="advanced-setting-container-row">
|
||||
<div className="advanced-setting-container-row-title">
|
||||
Protect
|
||||
</div>
|
||||
<div className="advanced-setting-container-row-title">Protect</div>
|
||||
<div className="advanced-setting-container-row-field">
|
||||
<div>
|
||||
<input type="range" className="body-item-input-slider" min="0" max="0.5" step="0.1" value={serverSetting.serverSetting.protect || 0} onChange={(e) => {
|
||||
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, protect: Number(e.target.value) })
|
||||
}}></input>
|
||||
<input
|
||||
type="range"
|
||||
className="body-item-input-slider"
|
||||
min="0"
|
||||
max="0.5"
|
||||
step="0.1"
|
||||
value={serverSetting.serverSetting.protect || 0}
|
||||
onChange={(e) => {
|
||||
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, protect: Number(e.target.value) });
|
||||
}}
|
||||
></input>
|
||||
<span className="body-item-input-slider-val">{serverSetting.serverSetting.protect}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
const onRVCQualityChanged = (val: number) => {
|
||||
serverSetting.updateServerSettings({
|
||||
...serverSetting.serverSetting,
|
||||
rvcQuality: val
|
||||
})
|
||||
}
|
||||
rvcQuality: val,
|
||||
});
|
||||
};
|
||||
const rvcQualityRow = (
|
||||
<div className="advanced-setting-container-row">
|
||||
<div className="advanced-setting-container-row-title">
|
||||
RVC Quality
|
||||
</div>
|
||||
<div className="advanced-setting-container-row-title">RVC Quality</div>
|
||||
<div className="advanced-setting-container-row-field">
|
||||
<select value={serverSetting.serverSetting.rvcQuality} onChange={(e) => { onRVCQualityChanged(Number(e.target.value)) }}>
|
||||
<option value="0" >low</option>
|
||||
<option value="1" >high</option>
|
||||
<select
|
||||
value={serverSetting.serverSetting.rvcQuality}
|
||||
onChange={(e) => {
|
||||
onRVCQualityChanged(Number(e.target.value));
|
||||
}}
|
||||
>
|
||||
<option value="0">low</option>
|
||||
<option value="1">high</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
);
|
||||
const skipPassThroughConfirmationRow = (
|
||||
<div className="advanced-setting-container-row">
|
||||
<div className="advanced-setting-container-row-title-long">Skip Pass through confirmation</div>
|
||||
<div className="advanced-setting-container-row-field">
|
||||
<select
|
||||
value={setting.voiceChangerClientSetting.passThroughConfirmationSkip ? "1" : "0"}
|
||||
onChange={(e) => {
|
||||
setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, passThroughConfirmationSkip: e.target.value == "1" ? true : false });
|
||||
}}
|
||||
>
|
||||
<option value="0">No</option>
|
||||
<option value="1">Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const content = (
|
||||
<div className="advanced-setting-container">
|
||||
{protocolRow}
|
||||
@ -164,8 +220,9 @@ export const AdvancedSettingDialog = () => {
|
||||
{silenceFrontRow}
|
||||
{protectRow}
|
||||
{rvcQualityRow}
|
||||
{skipPassThroughConfirmationRow}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="dialog-frame">
|
||||
@ -178,5 +235,4 @@ export const AdvancedSettingDialog = () => {
|
||||
);
|
||||
}, [serverSetting.serverSetting, serverSetting.updateServerSettings, setting.workletNodeSetting, setWorkletNodeSetting, setting.workletSetting, setWorkletSetting]);
|
||||
return dialog;
|
||||
|
||||
};
|
||||
|
||||
@ -124,7 +124,12 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
|
||||
};
|
||||
const onPassThroughClicked = async () => {
|
||||
if (serverSetting.serverSetting.passThrough == false) {
|
||||
guiState.stateControls.showEnablePassThroughDialogCheckbox.updateState(true);
|
||||
if (setting.voiceChangerClientSetting.passThroughConfirmationSkip) {
|
||||
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, passThrough: true });
|
||||
guiState.stateControls.showEnablePassThroughDialogCheckbox.updateState(false);
|
||||
} else {
|
||||
guiState.stateControls.showEnablePassThroughDialogCheckbox.updateState(true);
|
||||
}
|
||||
} else {
|
||||
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, passThrough: false });
|
||||
}
|
||||
|
||||
@ -1709,6 +1709,11 @@ audio::-webkit-media-controls-overlay-enclosure{
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.advanced-setting-container-row-title-long {
|
||||
width: 20rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.advanced-setting-container-row-field {
|
||||
width: 15rem;
|
||||
font-size: 0.9rem;
|
||||
|
||||
@ -490,6 +490,8 @@ export type VoiceChangerClientSetting = {
|
||||
inputGain: number
|
||||
outputGain: number
|
||||
monitorGain: number
|
||||
|
||||
passThroughConfirmationSkip: boolean
|
||||
}
|
||||
|
||||
///////////////////////
|
||||
@ -521,7 +523,8 @@ export const DefaultClientSettng: ClientSetting = {
|
||||
noiseSuppression2: false,
|
||||
inputGain: 1.0,
|
||||
outputGain: 1.0,
|
||||
monitorGain: 1.0
|
||||
monitorGain: 1.0,
|
||||
passThroughConfirmationSkip: false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user