diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx index cc3ed52339..cfd27847ae 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx @@ -58,10 +58,12 @@ import { GetComputedTtsCategoryAssignmentsIsOk, GetComputedTtsCategoryAssignmentsSuccessResponse, } from "@storyteller/components/src/api/category/GetComputedTtsCategoryAssignments"; +import { DynamicallyCategorizeModels } from "../../../../../model/categories/SyntheticCategory"; import { - DynamicallyCategorizeModels, -} from "../../../../../model/categories/SyntheticCategory"; -import { AvailableTtsLanguageKey, AVAILABLE_TTS_LANGUAGE_CATEGORY_MAP, ENGLISH_LANGUAGE } from "../../../../../_i18n/AvailableLanguageMap"; + AvailableTtsLanguageKey, + AVAILABLE_TTS_LANGUAGE_CATEGORY_MAP, + ENGLISH_LANGUAGE, +} from "../../../../../_i18n/AvailableLanguageMap"; import { ExploreVoicesModal } from "./explore/ExploreVoicesModal"; import { FrontendUrlConfig } from "../../../../../common/FrontendUrlConfig"; @@ -122,8 +124,8 @@ interface Props { maybeSelectedTtsModel?: TtsModelListItem; setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void; - selectedTtsLanguageScope: string, - setSelectedTtsLanguageScope: (selectedTtsLanguageScope: string) => void, + selectedTtsLanguageScope: string; + setSelectedTtsLanguageScope: (selectedTtsLanguageScope: string) => void; } function TtsModelListPage(props: Props) { @@ -202,18 +204,26 @@ function TtsModelListPage(props: Props) { // NB: We'll use the frontend to order the synthetic categories first. - const LATEST_MODELS_CATEGORY_TOKEN = 'SYNTHETIC_CATEGORY:LATEST_MODELS'; - const TRENDING_MODELS_CATEGORY_TOKEN = 'SYNTHETIC_CATEGORY:TRENDING_MODELS'; + const LATEST_MODELS_CATEGORY_TOKEN = "SYNTHETIC_CATEGORY:LATEST_MODELS"; + const TRENDING_MODELS_CATEGORY_TOKEN = + "SYNTHETIC_CATEGORY:TRENDING_MODELS"; - let maybeLatestCategory = categories - .find((category) => category.category_token === LATEST_MODELS_CATEGORY_TOKEN); + let maybeLatestCategory = categories.find( + (category) => category.category_token === LATEST_MODELS_CATEGORY_TOKEN + ); - let maybeTrendingCategory = categories - .find((category) => category.category_token === TRENDING_MODELS_CATEGORY_TOKEN); + let maybeTrendingCategory = categories.find( + (category) => category.category_token === TRENDING_MODELS_CATEGORY_TOKEN + ); let otherCategories = categories - .filter((category) => category.category_token !== LATEST_MODELS_CATEGORY_TOKEN) - .filter((category) => category.category_token !== TRENDING_MODELS_CATEGORY_TOKEN); + .filter( + (category) => category.category_token !== LATEST_MODELS_CATEGORY_TOKEN + ) + .filter( + (category) => + category.category_token !== TRENDING_MODELS_CATEGORY_TOKEN + ); categories = []; @@ -302,9 +312,17 @@ function TtsModelListPage(props: Props) { if (props.maybeSelectedTtsModel) { const userName = props.maybeSelectedTtsModel.creator_display_name; - const modelLink = FrontendUrlConfig.ttsModelPage(props.maybeSelectedTtsModel.model_token); - const profileLink = FrontendUrlConfig.userProfilePage(props.maybeSelectedTtsModel.creator_display_name); - const modelLanguage = AVAILABLE_TTS_LANGUAGE_CATEGORY_MAP[props.maybeSelectedTtsModel.ietf_primary_language_subtag as AvailableTtsLanguageKey] || ENGLISH_LANGUAGE; + const modelLink = FrontendUrlConfig.ttsModelPage( + props.maybeSelectedTtsModel.model_token + ); + const profileLink = FrontendUrlConfig.userProfilePage( + props.maybeSelectedTtsModel.creator_display_name + ); + const modelLanguage = + AVAILABLE_TTS_LANGUAGE_CATEGORY_MAP[ + props.maybeSelectedTtsModel + .ietf_primary_language_subtag as AvailableTtsLanguageKey + ] || ENGLISH_LANGUAGE; directViewLink = (

- {t("tts.TtsModelListPage.voiceDetails.voiceBy")} - {" "} - { Analytics.ttsClickModelCreatorLink() } } + {t("tts.TtsModelListPage.voiceDetails.voiceBy")}{" "} + { + Analytics.ttsClickModelCreatorLink(); + }} className="fw-medium" > {userName}{" "} @@ -331,14 +350,14 @@ function TtsModelListPage(props: Props) { /> {" "} | - {t("tts.TtsModelListPage.languageLabel")}: {modelLanguage.languageName} {/*| Use count:{" "} + {t("tts.TtsModelListPage.languageLabel")}:{" "} + {modelLanguage.languageName}{" "} + {/*| Use count:{" "} 616400*/}

- - {t("tts.TtsModelListPage.voiceDetails.seeMoreDetails")} - + {t("tts.TtsModelListPage.voiceDetails.seeMoreDetails")}
@@ -484,43 +503,47 @@ function TtsModelListPage(props: Props) { setMaybeSelectedTtsModel={ props.setMaybeSelectedTtsModel } - selectedTtsLanguageScope={props.selectedTtsLanguageScope} + selectedTtsLanguageScope={ + props.selectedTtsLanguageScope + } /> {/* Explore Modal */} - + setSelectedTtsLanguageScope={ + props.setSelectedTtsLanguageScope + } + /> {directViewLink} @@ -565,7 +588,7 @@ function TtsModelListPage(props: Props) { {loading && }