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..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 @@ -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 === "*") { @@ -72,6 +78,7 @@ export function ScopedVoiceModelOptions(props: Props) { return { label: ttsModel.title, value: ttsModel.model_token, + creatorName: ttsModel.creator_display_name, }; }); @@ -87,6 +94,7 @@ export function ScopedVoiceModelOptions(props: Props) { selectedOption = { label: "Select voice...", value: "*", + creatorName: undefined, }; } @@ -102,23 +110,43 @@ export function ScopedVoiceModelOptions(props: Props) { selectedOption = { 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)", value: "*", + creatorName: undefined, }; } 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; + // 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 ( +