every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'ui' into for_webui

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-11-14 10:08:26 +09:00
parent 7bb64daccb 4b92c210d6
commit b4fe4961f7
17 changed files with 182 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
locales/en.json
View File

@@ -270,7 +270,7 @@
},
"send_received_message_to_vrc": {
"label": "Send Received Message To VRChat",
"desc": "Send the message you received from the speaker's sound to VRChat's chatbox. However, this feature is intended for users who genuinely need it. Please consult with the developer."
"desc": "Send the message you received from the speaker's sound to VRChat's chatbox."
},
"osc_ip_address": {
"label": "OSC IP Address"

1
src-ui/app/config_page/setting_section/setting_box/_components/index.js
View File

@@ -5,6 +5,7 @@ export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
export { Entry } from "./entry/Entry";
export { LabelComponent } from "./label_component/LabelComponent";
export { RadioButton } from "./radio_button/RadioButton";
export { SectionLabelComponent } from "./section_label_component/SectionLabelComponent";
export { Slider } from "./slider/Slider";
export { SwitchBox } from "./switch_box/SwitchBox";
export { ThresholdComponent } from "./threshold_component/ThresholdComponent";

11
src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx Normal file
View File

@@ -0,0 +1,11 @@
import styles from "./SectionLabelComponent.module.scss";
import clsx from "clsx";
export const SectionLabelComponent = (props) => {
return (
<div className={styles.container}>
<label className={styles.section_label}>{props.label}</label>
<div className={styles.section_line}></div>
</div>
);
};

16
src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss Normal file
View File

@@ -0,0 +1,16 @@
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
padding-bottom: 2rem;
}
.section_label {
font-size: 2rem;
flex-shrink: 0;
}
.section_line {
width: 100%;
height: 0.1rem;
background: linear-gradient(90deg, var(--dark_400_color) 0%, var(--dark_600_color) 35%, var(--dark_800_color) 100%);
}

41
src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
View File

@@ -8,6 +8,7 @@ import {
useEnableAutoExportMessageLogs,
useEnableVrcMicMuteSync,
useEnableSendMessageToVrc,
useEnableSendReceivedMessageToVrc,
} from "@logics_configs";
import {
@@ -18,19 +19,26 @@ import {
LabelComponent,
Checkbox,
ActionButton,
SectionLabelComponent,
} from "../_components/";
import OpenFolderSvg from "@images/open_folder.svg?react";
export const Others = () => {
return (
<>
<AutoClearMessageInputBoxContainer />
<SendOnlyTranslatedMessagesContainer />
<AutoExportMessageLogsContainer />
<VrcMicMuteSyncContainer />
<SendMessageToVrcContainer />
</>
<div className={styles.container}>
<div>
<AutoClearMessageInputBoxContainer />
<SendOnlyTranslatedMessagesContainer />
<AutoExportMessageLogsContainer />
<VrcMicMuteSyncContainer />
<SendMessageToVrcContainer />
</div>
<div>
<SectionLabelComponent label="Speaker2Chatbox" />
<SendReceivedMessageToVrcContainer />
</div>
</div>
);
};
@@ -64,12 +72,12 @@ const AutoExportMessageLogsContainer = () => {
const { openFolder_MessageLogs } = useOpenFolder();
return (
<div className={styles.container}>
<div className={styles.auto_export_message_logs_container}>
<LabelComponent
label={t("config_page.auto_export_message_logs.label")}
desc={t("config_page.auto_export_message_logs.desc")}
/>
<div className={styles.switch_section_container}>
<div className={styles.auto_export_message_logs_switch_section_container}>
<ActionButton
IconComponent={OpenFolderSvg}
onclickFunction={openFolder_MessageLogs}
@@ -107,4 +115,19 @@ const SendMessageToVrcContainer = () => {
toggleFunction={toggleEnableSendMessageToVrc}
/>
);
};
const SendReceivedMessageToVrcContainer = () => {
const { t } = useTranslation();
const { currentEnableSendReceivedMessageToVrc, toggleEnableSendReceivedMessageToVrc } = useEnableSendReceivedMessageToVrc();
return (
<CheckboxContainer
label={t("config_page.send_received_message_to_vrc.label")}
desc={t("config_page.send_received_message_to_vrc.desc")}
variable={currentEnableSendReceivedMessageToVrc}
toggleFunction={toggleEnableSendReceivedMessageToVrc}
/>
);
};

8
src-ui/app/config_page/setting_section/setting_box/others/Others.module.scss
View File

@@ -1,4 +1,10 @@
.container {
display: flex;
gap: 6.4rem;
flex-direction: column;
}
.auto_export_message_logs_container {
display: flex;
width: 100%;
justify-content: space-between;
@@ -12,7 +18,7 @@
border-bottom: solid 0.1rem var(--dark_800_color);
}
.switch_section_container {
.auto_export_message_logs_switch_section_container {
display: flex;
width: 100%;
justify-content: space-between;

23
src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
View File

@@ -24,25 +24,30 @@ import {
RadioButtonContainer,
} from "../_templates/Templates";
import {
SectionLabelComponent,
} from "../_components/";
export const Transcription = () => {
return (
<>
<div className={styles.container}>
<Mic_Container />
<Speaker_Container />
<TranscriptionEngine_Container />
</>
</div>
);
};
const Mic_Container = () => {
return (
<>
<div>
<SectionLabelComponent label="Mic" />
<MicRecordTimeout_Box />
<MicPhraseTimeout_Box />
<MicMaxWords_Box />
<MicWordFilter_Box />
</>
</div>
);
};
@@ -144,11 +149,12 @@ const MicWordFilter_Box = () => {
const Speaker_Container = () => {
return (
<>
<div>
<SectionLabelComponent label="Speaker" />
<SpeakerRecordTimeout_Box />
<SpeakerPhraseTimeout_Box />
<SpeakerMaxWords_Box />
</>
</div>
);
};
@@ -238,10 +244,11 @@ const SpeakerMaxWords_Box = () => {
const TranscriptionEngine_Container = () => {
return (
<>
<div>
<SectionLabelComponent label="Transcription Engines" />
<TranscriptionEngine_Box />
<WhisperWeightType_Box />
</>
</div>
);
};

5
src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
View File

@@ -0,0 +1,5 @@
.container {
display: flex;
flex-direction: column;
gap: 6.4rem;
}

16
src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx
View File

@@ -1,8 +1,10 @@
import { useTranslation } from "react-i18next";
import styles from "./RightSideComponents.module.scss";
import RefreshSvg from "@images/refresh.svg?react";
import HelpSvg from "@images/help.svg?react";
import { useStore_OpenedQuickSetting } from "@store";
import { useIsSoftwareUpdateAvailable } from "@logics_common";
import { useIsEnabledOverlaySmallLog, useEnableVrcMicMuteSync } from "@logics_configs";
import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton";
@@ -11,6 +13,7 @@ export const RightSideComponents = () => {
<div className={styles.container}>
<OpenVrcMicMuteSyncQuickSetting />
<OpenOverlayQuickSetting />
<SoftwareUpdateAvailableButton />
<a
className={styles.help_and_info_button}
href="https://mzsoftware.notion.site/VRCT-Documents-be79b7a165f64442ad8f326d86c22246"
@@ -57,4 +60,17 @@ const OpenVrcMicMuteSyncQuickSetting = () => {
onClickFunction={onClickFunction}
/>
);
};
const SoftwareUpdateAvailableButton = () => {
const { currentIsSoftwareUpdateAvailable } = useIsSoftwareUpdateAvailable();
const { t } = useTranslation();
if (currentIsSoftwareUpdateAvailable.data === false) return null;
return (
<button className={styles.software_update_button}>
<RefreshSvg className={styles.refresh_svg}/>
<p className={styles.software_update_label}>{t("main_page.update_available")}</p>
</button>
);
};

25
src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss
View File

@@ -21,4 +21,29 @@
.help_svg {
width: 2.4rem;
color: var(--dark_400_color);
}
.software_update_button {
display: flex;
justify-content: center;
align-items: center;
gap: 0.4rem;
color: var(--primary_300_color);
padding: 1rem 0.4rem;
cursor: pointer;
&:hover {
background-color: var(--dark_800_color);
}
&:active {
background-color: var(--dark_900_color);
}
}
.refresh_svg {
width: 1.8rem;
transform: rotate(-30deg);
}
.software_update_label {
font-size: 1.2rem;
}

1
src-ui/assets/refresh.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.944 12.979c-.489 4.509-4.306 8.021-8.944 8.021-2.698 0-5.112-1.194-6.763-3.075l1.245-1.633c1.283 1.645 3.276 2.708 5.518 2.708 3.526 0 6.444-2.624 6.923-6.021h-2.923l4-5.25 4 5.25h-3.056zm-15.864-1.979c.487-3.387 3.4-6 6.92-6 2.237 0 4.228 1.059 5.51 2.698l1.244-1.632c-1.65-1.876-4.061-3.066-6.754-3.066-4.632 0-8.443 3.501-8.941 8h-3.059l4 5.25 4-5.25h-2.92z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 442 B

1
src-ui/logics/common/index.js
View File

@@ -1,5 +1,6 @@
export { useWindow } from "./useWindow";
export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage";
export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable";
export { useOpenFolder } from "./useOpenFolder";
export { useMessage } from "./useMessage";
export { useVolume } from "./useVolume";

10
src-ui/logics/common/useIsSoftwareUpdateAvailable.js Normal file
View File

@@ -0,0 +1,10 @@
import { useStore_IsSoftwareUpdateAvailable } from "@store";
export const useIsSoftwareUpdateAvailable = () => {
const { currentIsSoftwareUpdateAvailable, updateIsSoftwareUpdateAvailable } = useStore_IsSoftwareUpdateAvailable();
return {
currentIsSoftwareUpdateAvailable,
updateIsSoftwareUpdateAvailable,
};
};

1
src-ui/logics/configs/index.js
View File

@@ -19,6 +19,7 @@ export { useUiScaling } from "./appearance/useUiScaling";
export { useEnableAutoClearMessageInputBox } from "./others/useEnableAutoClearMessageInputBox";
export { useEnableAutoExportMessageLogs } from "./others/useEnableAutoExportMessageLogs";
export { useEnableSendMessageToVrc } from "./others/useEnableSendMessageToVrc";
export { useEnableSendReceivedMessageToVrc } from "./others/useEnableSendReceivedMessageToVrc";
export { useEnableSendOnlyTranslatedMessages } from "./others/useEnableSendOnlyTranslatedMessages";
export { useEnableVrcMicMuteSync } from "./others/useEnableVrcMicMuteSync";

28
src-ui/logics/configs/others/useEnableSendReceivedMessageToVrc.js Normal file
View File

@@ -0,0 +1,28 @@
import { useStore_EnableSendReceivedMessageToVrc } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useEnableSendReceivedMessageToVrc = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentEnableSendReceivedMessageToVrc, updateEnableSendReceivedMessageToVrc, pendingEnableSendReceivedMessageToVrc } = useStore_EnableSendReceivedMessageToVrc();
const getEnableSendReceivedMessageToVrc = () => {
pendingEnableSendReceivedMessageToVrc();
asyncStdoutToPython("/get/data/send_received_message_to_vrc");
};
const toggleEnableSendReceivedMessageToVrc = () => {
pendingEnableSendReceivedMessageToVrc();
if (currentEnableSendReceivedMessageToVrc.data) {
asyncStdoutToPython("/set/disable/send_received_message_to_vrc");
} else {
asyncStdoutToPython("/set/enable/send_received_message_to_vrc");
}
};
return {
currentEnableSendReceivedMessageToVrc,
getEnableSendReceivedMessageToVrc,
toggleEnableSendReceivedMessageToVrc,
updateEnableSendReceivedMessageToVrc,
};
};

11
src-ui/logics/useReceiveRoutes.js
View File

@@ -5,6 +5,7 @@ import {
useWindow,
useMessage,
useVolume,
useIsSoftwareUpdateAvailable,
} from "@logics_common";
import {
@@ -32,6 +33,7 @@ import {
useEnableAutoExportMessageLogs,
useEnableVrcMicMuteSync,
useEnableSendMessageToVrc,
useEnableSendReceivedMessageToVrc,
useSelectedFontFamily,
useUiLanguage,
useUiScaling,
@@ -80,6 +82,7 @@ export const useReceiveRoutes = () => {
addSentMessageLog,
addReceivedMessageLog,
} = useMessage();
const { updateIsSoftwareUpdateAvailable } = useIsSoftwareUpdateAvailable();
const { updateSoftwareVersion } = useSoftwareVersion();
const { updateEnableAutoMicSelect } = useEnableAutoMicSelect();
const { updateEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
@@ -97,6 +100,7 @@ export const useReceiveRoutes = () => {
const { updateEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs();
const { updateEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
const { updateEnableSendMessageToVrc } = useEnableSendMessageToVrc();
const { updateEnableSendReceivedMessageToVrc } = useEnableSendReceivedMessageToVrc();
const { updateSendMessageButtonType } = useSendMessageButtonType();
const { updateUiLanguage } = useUiLanguage();
@@ -152,6 +156,7 @@ export const useReceiveRoutes = () => {
"/set/data/main_window_geometry": () => {},
"/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"),
"/run/open_filepath_config_file": () => console.log("Opened Directory, Config File"),
"/run/update_software_flag": updateIsSoftwareUpdateAvailable,
// Main Page
// Page Controls
@@ -396,6 +401,10 @@ export const useReceiveRoutes = () => {
"/set/enable/send_message_to_vrc": updateEnableSendMessageToVrc,
"/set/disable/send_message_to_vrc": updateEnableSendMessageToVrc,
"/get/data/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc,
"/set/enable/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc,
"/set/disable/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc,
// Advanced Settings
"/get/data/osc_ip_address": updateOscIpAddress,
"/set/data/osc_ip_address": updateOscIpAddress,
@@ -421,7 +430,7 @@ export const useReceiveRoutes = () => {
const initDataSyncProcess = (payload) => {
for (const [endpoint, value] of Object.entries(payload)) {
const route = routes[endpoint];
(route) ? route(value) : console.error(`Invalid endpoint: ${endpoint}\vvalue: ${JSON.stringify(value)}`);
(route) ? route(value) : console.error(`Invalid endpoint: ${endpoint}\nvalue: ${JSON.stringify(value)}`);
}
};

2
src-ui/store.js
View File

@@ -108,6 +108,7 @@ export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_Ma
transcription_receive: false,
}, "MainFunctionsStateMemory");
export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQuickSetting } = createAtomWithHook("", "OpenedQuickSetting");
export const { atomInstance: Atom_IsSoftwareUpdateAvailable, useHook: useStore_IsSoftwareUpdateAvailable } = createAtomWithHook(false, "IsSoftwareUpdateAvailable");
// Main Page
// Functions
@@ -227,6 +228,7 @@ export const { atomInstance: Atom_EnableSendOnlyTranslatedMessages, useHook: use
export const { atomInstance: Atom_EnableAutoExportMessageLogs, useHook: useStore_EnableAutoExportMessageLogs } = createAtomWithHook(false, "EnableAutoExportMessageLogs");
export const { atomInstance: Atom_EnableVrcMicMuteSync, useHook: useStore_EnableVrcMicMuteSync } = createAtomWithHook(false, "EnableVrcMicMuteSync");
export const { atomInstance: Atom_EnableSendMessageToVrc, useHook: useStore_EnableSendMessageToVrc } = createAtomWithHook(true, "EnableSendMessageToVrc");
export const { atomInstance: Atom_EnableSendReceivedMessageToVrc, useHook: useStore_EnableSendReceivedMessageToVrc } = createAtomWithHook(false, "EnableSendReceivedMessageToVrc");
// Advanced Settings
export const { atomInstance: Atom_OscIpAddress, useHook: useStore_OscIpAddress } = createAtomWithHook("127.0.0.1", "OscIpAddress");