+
);
-};
-
-const HomepageLinkButton = ({ homepage_link, speed = 40 /* px/s */ }) => {
- const containerRef = useRef(null);
- const textRef = useRef(null);
- const [inlineStyle, setInlineStyle] = useState({});
-
- const handleMouseEnter = useCallback(() => {
- const container = containerRef.current;
- const text = textRef.current;
- if (!container || !text) return;
- const overflow = text.scrollWidth - container.clientWidth;
- if (overflow > 0) {
- const duration = overflow / speed;
- setInlineStyle({
- transform: `translateX(-${overflow}px)`,
- transition: `transform ${duration}s linear`,
- });
- }
- }, [speed]);
-
- const handleMouseLeave = useCallback(() => {
- setInlineStyle({
- transform: 'translateX(0)',
- transition: 'transform 0.3s ease-out',
- });
- }, []);
-
- return (
-
- );
};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.module.scss b/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.module.scss
index 2ad924bc..05c49046 100644
--- a/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.module.scss
@@ -56,45 +56,4 @@
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
-// }
-
-.open_homepage_button_wrapper {
- width: 100%;
-}
-
-.open_homepage_button {
- padding: 0.6rem 0;
- display: flex;
- align-items: center;
- gap: 1rem;
- cursor: pointer;
- text-decoration: none;
- &:hover .external_link_svg {
- color: var(--dark_200_color);
- }
- &:hover .open_homepage_text {
- border-bottom: 0.1rem solid var(--dark_500_color);
- }
-}
-
-.text_container {
- position: relative;
- overflow: hidden;
- flex: 1; /* テキスト部分をアイコンまで伸ばす */
-}
-
-.open_homepage_text {
- margin: 0; /* pタグのデフォルトマージン除去 */
- font-size: 1.4rem;
- color: var(--sent_400_color);
- white-space: nowrap;
- display: inline-block;
- transform: translateX(0);
- border-bottom: 0.1rem solid var(--sent_400_color);
-}
-
-.external_link_svg {
- flex-shrink: 0;
- width: 1.6rem;
- color: var(--dark_500_color);
-}
\ No newline at end of file
+// }
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
index 279c1d9d..7416c970 100644
--- a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
import { useI18n } from "@useI18n";
import styles from "./Transcription.module.scss";
import { updateLabelsById, genNumObjArray } from "@utils";
@@ -12,6 +13,7 @@ import {
RadioButtonContainer,
DropdownMenuContainer,
ComputeDeviceContainer,
+ SliderContainer,
} from "../_templates/Templates";
import {
@@ -24,6 +26,7 @@ export const Transcription = () => {
+
);
};
@@ -151,4 +157,48 @@ const SendReceivedMessageToVrcContainer = () => {
toggleFunction={toggleEnableSendReceivedMessageToVrc}
/>
);
+};
+
+const SendMessageFormatPartsContainer = () => {
+ const { t } = useI18n();
+ const {
+ currentSendMessageFormatParts,
+ setSendMessageFormatParts,
+ currentMessageFormat_ExampleViewFilter,
+ toggleMessageFormat_ExampleViewFilter,
+ } = useOthers();
+
+ return (
+
{
+ const { currentIsBreakPoint } = useStore_IsBreakPoint();
+ const message_format_container_class = clsx(styles.container, {
+ [styles.is_break_point]: currentIsBreakPoint.data,
+ });
+
+ return (
+
+
+
+ );
+};
+
+const ExampleComponent = ({ format, example_view_filter_variable, exampleViewFilterToggleFunction, format_id }) => {
+ const { currentUiLanguage } = useAppearance();
+ const { t } = useTranslation();
+
+
+ const locale_base_path = "config_page.others.message_format_common.example_view.";
+
+ const label_title = t(locale_base_path + "title");
+
+ const label_original_translated = t(locale_base_path + "original_translated");
+ const label_original_translated_multi = t(locale_base_path + "original_translated_multi");
+ const label_translated_only_multi = t(locale_base_path + "translated_only_multi");
+ const label_translated_only = t(locale_base_path + "translated_only");
+ const label_original_only = t(locale_base_path + "original_only");
+
+ const createExampleMessage = (id) => {
+ // 言語順序を決定
+ let example_text_order = [];
+ switch (currentUiLanguage.data) {
+ case "ja":
+ example_text_order = ["ja", "en", "ko", "fr"];
+ break;
+ case "ko":
+ example_text_order = ["ko", "ja", "en", "fr"];
+ break;
+ default: // en
+ example_text_order = ["en", "ja", "ko", "fr"];
+ break;
+ }
+
+ const original = EXAMPLE_TEXTS[example_text_order[0]];
+ const translations = example_text_order.slice(1).map(lang => EXAMPLE_TEXTS[lang]);
+
+ const originalPart = `${format.message.prefix}${original}${format.message.suffix}`;
+ const translationSingle = `${format.translation.prefix}${translations[0]}${format.translation.suffix}`;
+ const translationMulti = `${format.translation.prefix}${translations.join(format.translation.separator)}${format.translation.suffix}`;
+
+ switch (id) {
+ case "original_translated":
+ return format.translation_first
+ ? `${translationSingle}${format.separator}${originalPart}`
+ : `${originalPart}${format.separator}${translationSingle}`;
+
+ case "original_only":
+ return originalPart;
+
+ case "translated_only":
+ return translationSingle;
+
+ case "translated_only_multi":
+ return translationMulti;
+
+ case "original_translated_multi":
+ return format.translation_first
+ ? `${translationMulti}${format.separator}${originalPart}`
+ : `${originalPart}${format.separator}${translationMulti}`;
+
+ default:
+ throw new Error(`Unexpected id: ${id}`);
+ }
+ };
+
+ const ExampleBox = ({label, example_text_id}) => {
+ return (
+
+
+ );
+
+ };
+
+ const svg_class_names = clsx(styles.arrow_left_svg, {
+ [styles.to_down]: example_view_filter_variable[format_id] === "Simplified",
+ [styles.to_up]: example_view_filter_variable[format_id] === "All"
+ });
+
+
+ const FilteredExampleBox = ({format_id, id}) => {
+ if (format_id === "send" && id === "Simplified") {
+ return (
+ <>
+ {label}
+
+
+ {createExampleMessage(example_text_id)}
+
+
+ );
+};
+
+
+const InputComponent = ({id, variable, setFunction, format_id }) => {
+ const { t } = useTranslation();
+
+ const locale_base_path = "config_page.others.message_format_common.settings.";
+ const label_title = t(locale_base_path + "title");
+
+ const LABEL_ORIGINAL = t(locale_base_path + "original");
+ const LABEL_TRANSLATED = t(locale_base_path + "translated");
+ const LABEL_FOR_MULTI_TRANSLATION = t(locale_base_path + "for_multi_translation");
+
+ const replaceValue = (value) => {
+ if (value === "") return "";
+
+ const replaced = value.replace(/\\n/g, "\n");
+ return replaced;
+ };
+
+ const handleChange = (parent_key, child_key) => (e) => {
+ const rawValue = e.target.value;
+ const parsedValue = replaceValue(rawValue);
+
+ if (child_key !== undefined) {
+ setFunction({
+ ...variable,
+ [parent_key]: {
+ ...variable[parent_key],
+ [child_key]: parsedValue
+ }
+ });
+ } else {
+ setFunction({
+ ...variable,
+ [parent_key]: parsedValue
+ });
+ }
+ };
+
+ const toUiValue = (v) => {
+ if (typeof v === "string") {
+ return v.replace(/\n/g, "\\n");
+ }
+ console.log("Empty");
+
+ return v ?? "";
+ };
+
+ const resetFunction = () => {
+ if (format_id === "send") {
+ setFunction(ui_configs.send_message_format_parts);
+ } else if (format_id === "received") {
+ setFunction(ui_configs.received_message_format_parts);
+ }
+ };
+
+ const SwapButton = ({ variable, setFunction }) => {
+ const swapMessageAndTranslate = () => {
+ setFunction({ ...variable, translation_first: !variable.translation_first });
+ };
+
+ return (
+ {label_title}
+
+
+ { format_id === "send" &&
+ exampleViewFilterToggleFunction(format_id)}>
+
+
+ }
+
+ 
+
+ );
+ };
+
+ return (
+ {variable.translation_first ? LABEL_TRANSLATED : LABEL_ORIGINAL}
+{variable.translation_first ? LABEL_ORIGINAL : LABEL_TRANSLATED}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/message_format/MessageFormat.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/message_format/MessageFormat.module.scss
new file mode 100644
index 00000000..18244109
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/message_format/MessageFormat.module.scss
@@ -0,0 +1,200 @@
+.container {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ gap: 2.6rem;
+ padding-bottom: 2rem;
+ margin: 1rem 0;
+ &.is_break_point {
+ flex-direction: column;
+ gap: 2.2rem;
+ align-items: center;
+ .border {
+ height: 0.1rem;
+ width: 60%;
+ margin: 0;
+ flex-shrink: 0;
+ }
+ .show_more_container {
+ margin-top: 2rem;
+ }
+ .example_container {
+ gap: 0;
+ }
+ .message_format_settings_container {
+ gap: 0;
+ }
+ }
+}
+
+.border {
+ height: auto;
+ width: 0.1rem;
+ background-color: var(--dark_800_color);
+ margin: 3.2rem 0;
+ flex-shrink: 0;
+}
+
+.section_title {
+ font-size: 1.4rem;
+ text-align: center;
+ width: 100%;
+}
+
+.example_container {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ min-width: 14rem;
+ max-width: 34rem;
+ width: 100%;
+}
+
+.example_view_container {
+ display: flex;
+ flex-direction: column;
+ gap: 1.2rem;
+}
+
+.example_wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.4rem;
+}
+.example_label {
+ font-size: 1.4rem;
+ text-align: start;
+ width: 100%;
+ color: var(--dark_basic_text_color);
+}
+.example_chatbox {
+ padding: 0.6rem;
+ background-color: #3A4554;
+ border-radius: 1rem;
+ width: 100%;
+ text-align: center;
+}
+
+.example_text {
+ font-size: 1.2rem;
+}
+
+.show_more_container {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0.6rem 0;
+ cursor: pointer;
+ border-radius: 0.6rem;
+ &:hover {
+ background-color: var(--dark_850_color);
+ }
+ &:active {
+ background-color: var(--dark_875_color);
+ }
+}
+
+.arrow_left_svg {
+ width: 2rem;
+ color: var(--dark_450_color);
+ &.to_down {
+ transform: rotate(-90deg);
+ }
+ &.to_up {
+ transform: rotate(90deg);
+ }
+}
+
+.message_format_settings_container {
+ flex-direction: column;
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ gap: 2rem;
+}
+
+.message_format_settings_wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 3.8rem;
+ width: 34rem;
+ flex-shrink: 0;
+}
+
+.swap_button_container {
+ width: 100%;
+ display: flex;
+ justify-content: end;
+}
+
+.swap_button_wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0.8rem;
+ padding: 0.6rem 1.2rem;
+ border-radius: 0.4rem;
+ background-color: var(--dark_850_color);
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_800_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ }
+}
+
+.swap_text {
+ font-size: 1.4rem;
+}
+
+.swap_img {
+ width: 2rem;
+}
+
+
+.input_wrapper {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 1.8rem;
+}
+
+.input_contents {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ color: var(--dark_basic_text_color);
+}
+
+.preset_text {
+ font-size: 1.6rem;
+ text-align: center;
+ flex-shrink: 0;
+ color: var(--dark_basic_text_color);
+}
+
+.multi_translation_input_wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ justify-content: center;
+ color: var(--dark_basic_text_color);
+}
+
+.multi_translation_title {
+ font-size: 1.2rem;
+}
+
+.reset_button_wrapper {
+ width: 100%;
+ display: flex;
+ justify-content: end;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
index b25af8b9..b23f8043 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
@@ -18,6 +18,7 @@ import {
WordFilter,
WordFilterListToggleComponent,
DownloadModels,
+ MessageFormat,
} from "../_components/";
import { Checkbox } from "@common_components";
@@ -129,4 +130,17 @@ export const WordFilterContainer = (props) => (
export const DownloadModelsContainer = (props) => (
{label_title}
+
+
+
+
+ { !variable.translation_first ?
+
+
+ :
+
+ <_Entry ui_variable={toUiValue(variable.message.prefix)} width={ENTRY_WIDTH} onChange={handleChange("message", "prefix")} />
+
+ {LABEL_ORIGINAL}
+ <_Entry ui_variable={toUiValue(variable.message.suffix)} width={ENTRY_WIDTH} onChange={handleChange("message", "suffix")} /> +
+ <_Entry ui_variable={toUiValue(variable.separator)} width={ENTRY_WIDTH} onChange={handleChange("separator")} />
+
+
+ <_Entry ui_variable={toUiValue(variable.translation.prefix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "prefix")} />
+
+ {LABEL_TRANSLATED}
+ <_Entry ui_variable={toUiValue(variable.translation.suffix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "suffix")} /> +
+
+ }
+ { format_id === "send" &&
+
+ <_Entry ui_variable={toUiValue(variable.translation.prefix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "prefix")} />
+
+ {LABEL_TRANSLATED}
+ <_Entry ui_variable={toUiValue(variable.translation.suffix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "suffix")} /> +
+ <_Entry ui_variable={toUiValue(variable.separator)} width={ENTRY_WIDTH} onChange={handleChange("separator")} />
+
+
+ <_Entry ui_variable={toUiValue(variable.message.prefix)} width={ENTRY_WIDTH} onChange={handleChange("message", "prefix")} />
+
+ {LABEL_ORIGINAL}
+ <_Entry ui_variable={toUiValue(variable.message.suffix)} width={ENTRY_WIDTH} onChange={handleChange("message", "suffix")} /> +
+
+ }
+ {LABEL_FOR_MULTI_TRANSLATION}
+
+
+ {LABEL_TRANSLATED}
+ <_Entry ui_variable={toUiValue(variable.translation.separator)} width={ENTRY_WIDTH} onChange={handleChange("translation", "separator")} /> +{LABEL_TRANSLATED}
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx
index e51c8ea5..4d2044e1 100644
--- a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx
@@ -37,7 +37,7 @@ export const PosterShowcaseWorldsContents = () => {
);
if (poster.x_post_num !== null) {
return (
-
+
{content}
);
diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
index 1f2f9eb4..cc7e730f 100644
--- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
@@ -69,6 +69,7 @@ const UiScalingContainer = () => {
asyncUpdateBreakPoint();
}, [currentUiScaling.data]);
+ // [Duplicated]
const createMarks = (min, max) => {
const marks = [];
for (let value = min; value <= max; value += 10) {
@@ -111,6 +112,7 @@ export const MessageLogUiScalingContainer = () => {
setUiMessageLogUiScaling(currentMessageLogUiScaling.data);
}, [currentMessageLogUiScaling.data]);
+ // [Duplicated]
const createMarks = (min, max) => {
const marks = [];
for (let value = min; value <= max; value += 10) {
@@ -207,6 +209,7 @@ const TransparencyContainer = () => {
setUiTransparency(currentTransparency.data);
}, [currentTransparency.data]);
+ // [Duplicated]
const createMarks = (min, max) => {
const marks = [];
for (let value = min; value <= max; value += 10) {
diff --git a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
index 1baf00a5..65027ef3 100644
--- a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
@@ -8,6 +8,7 @@ import {
import {
CheckboxContainer,
+ MessageFormatContainer,
} from "../_templates/Templates";
import {
@@ -39,6 +40,11 @@ export const Others = () => {
+
+
+
+
+