From 23c06b3ba16785250e786199b045fc6062694505 Mon Sep 17 00:00:00 2001 From: BFlat Date: Wed, 1 Feb 2023 22:04:16 +0700 Subject: [PATCH 1/3] creator name in voice option --- .../components/ScopedVoiceModelOptions.tsx | 38 +++++++++++++------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ScopedVoiceModelOptions.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ScopedVoiceModelOptions.tsx index 108a01d194..c180e8ac46 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ScopedVoiceModelOptions.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ScopedVoiceModelOptions.tsx @@ -70,7 +70,14 @@ export function ScopedVoiceModelOptions(props: Props) { }) .map((ttsModel) => { return { - label: ttsModel.title, + label: ( + <> + {ttsModel.title}{" "} + + — {ttsModel.creator_display_name} + + + ), value: ttsModel.model_token, }; }); @@ -85,7 +92,7 @@ export function ScopedVoiceModelOptions(props: Props) { // when in reality no state would have changed. By forcing the user to choose, the user will set // the state appropriately. selectedOption = { - label: "Select voice...", + label: <>"Select voice...",, value: "*", }; } @@ -100,22 +107,23 @@ export function ScopedVoiceModelOptions(props: Props) { // label is to use controlled props / value as is done here: isLoading = true; selectedOption = { - label: "Loading...", + label: <>"Loading...", value: "*", }; } else if (options.length === 0) { // NB: Perhaps the user has refined their search to be too narrow (langauge + category) selectedOption = { - label: "No results (remove some filters)", + label: <>"No results (remove some filters)", value: "*", }; } const numberVoices = options.length; - const canSearchVoices = !props.isExploreTrayOpen // Always allow search when try is closed - || numberVoices > 100 // Always allow search when there are over 100 voices - || window.innerWidth >= 1000; // Always allow search when on desktop + const canSearchVoices = + !props.isExploreTrayOpen || // Always allow search when try is closed + numberVoices > 100 || // Always allow search when there are over 100 voices + window.innerWidth >= 1000; // Always allow search when on desktop let select; @@ -128,13 +136,20 @@ export function ScopedVoiceModelOptions(props: Props) { options={options} classNames={SearchFieldClass} onChange={handleChange} - onMenuOpen={() => { Analytics.ttsOpenPrimaryVoiceSelectMenu() } } + onMenuOpen={() => { + Analytics.ttsOpenPrimaryVoiceSelectMenu(); + }} isLoading={isLoading} isSearchable={true} - // NB: The following settings improve upon performance. + // NB: The following settings improve upon performance. // See: https://github.com/JedWatson/react-select/issues/3128 - filterOption={createFilter({ignoreAccents: false})} - components={{SingleValue: FixedSingleValueSelectOption, Option: FastReactSelectOption} as any} + filterOption={createFilter({ ignoreAccents: false })} + components={ + { + SingleValue: FixedSingleValueSelectOption, + Option: FastReactSelectOption, + } as any + } /> ); } else { @@ -168,7 +183,6 @@ export function ScopedVoiceModelOptions(props: Props) { {select} - From d53262af1d5161976059de828ce61f9386c3f8b5 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Wed, 1 Feb 2023 20:12:22 -0500 Subject: [PATCH 2/3] Fix dropdown searching --- .../components/ScopedVoiceModelOptions.tsx | 48 ++++++++++++++----- 1 file changed, 35 insertions(+), 13 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ScopedVoiceModelOptions.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ScopedVoiceModelOptions.tsx index c180e8ac46..bb00640122 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ScopedVoiceModelOptions.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ScopedVoiceModelOptions.tsx @@ -2,7 +2,7 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels"; import { TtsCategoryType } from "../../../../../../../AppWrapper"; -import Select, { createFilter } from "react-select"; +import Select, { createFilter, StylesConfig } from "react-select"; import { SearchFieldClass } from "./SearchFieldClass"; import { FastReactSelectOption } from "../../../../../_common/react_select/FastReactSelectOption"; import { Analytics } from "../../../../../../../common/Analytics"; @@ -58,7 +58,13 @@ export function ScopedVoiceModelOptions(props: Props) { leafiestCategoryModels = Array.from(new Set(allTtsModels)); } - let options = leafiestCategoryModels + interface DropdownOption { + label: string; + value: string; + creatorName?: string; + } + + let options : DropdownOption[] = leafiestCategoryModels .filter((ttsModel) => { // Scope to currently selected language if (props.selectedTtsLanguageScope === "*") { @@ -70,15 +76,9 @@ export function ScopedVoiceModelOptions(props: Props) { }) .map((ttsModel) => { return { - label: ( - <> - {ttsModel.title}{" "} - - — {ttsModel.creator_display_name} - - - ), + label: ttsModel.title, value: ttsModel.model_token, + creatorName: ttsModel.creator_display_name, }; }); @@ -92,8 +92,9 @@ export function ScopedVoiceModelOptions(props: Props) { // when in reality no state would have changed. By forcing the user to choose, the user will set // the state appropriately. selectedOption = { - label: <>"Select voice...",, + label: "Select voice...", value: "*", + creatorName: undefined, }; } @@ -107,14 +108,16 @@ export function ScopedVoiceModelOptions(props: Props) { // label is to use controlled props / value as is done here: isLoading = true; selectedOption = { - label: <>"Loading...", + label: "Loading...", value: "*", + creatorName: undefined, }; } else if (options.length === 0) { // NB: Perhaps the user has refined their search to be too narrow (langauge + category) selectedOption = { - label: <>"No results (remove some filters)", + label: "No results (remove some filters)", value: "*", + creatorName: undefined, }; } @@ -127,6 +130,23 @@ export function ScopedVoiceModelOptions(props: Props) { let select; + // Function to build the options themselves, so we can introduce extra elements. + const formatOptionLabel = (data: DropdownOption, formatOptionLabelMeta: any) => { + let creatorName = <> + if (data.creatorName !== undefined) { + creatorName = ( + + {" "} — {data.creatorName} + + ); + } + return ( +
+ {data.label}{creatorName} +
+ ) + }; + // TODO: Cleanup if (canSearchVoices) { @@ -150,6 +170,7 @@ export function ScopedVoiceModelOptions(props: Props) { Option: FastReactSelectOption, } as any } + formatOptionLabel={formatOptionLabel} /> ); } else { @@ -170,6 +191,7 @@ export function ScopedVoiceModelOptions(props: Props) { // See: https://github.com/JedWatson/react-select/issues/3128 filterOption={createFilter({ ignoreAccents: false })} components={{ Option: FastReactSelectOption } as any} + formatOptionLabel={formatOptionLabel} /> ); } From a561d85dbd393d97080fd5c53a5d51f114d43f80 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Wed, 1 Feb 2023 20:13:09 -0500 Subject: [PATCH 3/3] fix bugs with formatting author label --- .../search/components/ScopedVoiceModelOptions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ScopedVoiceModelOptions.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ScopedVoiceModelOptions.tsx index bb00640122..63dfdb1916 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ScopedVoiceModelOptions.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ScopedVoiceModelOptions.tsx @@ -2,7 +2,7 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels"; import { TtsCategoryType } from "../../../../../../../AppWrapper"; -import Select, { createFilter, StylesConfig } from "react-select"; +import Select, { createFilter } from "react-select"; import { SearchFieldClass } from "./SearchFieldClass"; import { FastReactSelectOption } from "../../../../../_common/react_select/FastReactSelectOption"; import { Analytics } from "../../../../../../../common/Analytics";