diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index a76fe66c24..93ddbd7244 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -834,7 +834,7 @@ styles with important tags: opacity: 0; height: 0; transition-property: none !important; - transition: all 0.05s !important; + transition: all 0.1s !important; transition-timing-function: ease !important; } .sliding-content.open { @@ -842,7 +842,7 @@ styles with important tags: opacity: 1; height: 100%; transition-property: none !important; - transition: all 0.2s !important; + transition: all 0.4s !important; transition-timing-function: ease !important; } } 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 ca41cd5e7f..fc53d53da1 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 @@ -150,11 +150,9 @@ function TtsModelListPage(props: Props) { return () => clearTimeout(timeout); }, []); - const [isSliding, setIsSliding] = useState(false); const [isOpen, setIsOpen] = useState(false); - const handleClick = () => { - setIsSliding(!isSliding); + const handleClickExplore = () => { setIsOpen(!isOpen); }; @@ -523,60 +521,10 @@ function TtsModelListPage(props: Props) { className="w-100 d-flex flex-column" onSubmit={handleFormSubmit} > -
-
- - {/* - - */} -
- -
-
- -
- - -
-
- - {/* Explore Modal */} - + {/* Explore Rollout */}
+
+
+ + {/* + + */} +
+ +
+
+ +
+ + {} + + +
+
+ {directViewLink}
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ExploreVoicesModal.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ExploreVoicesModal.tsx index 96435ece7d..f7b65e8895 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ExploreVoicesModal.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ExploreVoicesModal.tsx @@ -5,7 +5,7 @@ import { LanguageOptions } from "./LanguageOptions"; import { TtsCategoryType } from "../../../../../../AppWrapper"; import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels"; import { CategoryOptions } from "./CategoryOptions"; -// import { ScopedVoiceModelOptions } from "./ScopedVoiceModelOptions"; +import { ScopedVoiceModelOptions } from "./ScopedVoiceModelOptions"; import { t } from "i18next"; interface Props { @@ -108,6 +108,7 @@ export function ExploreVoicesModal(props: Props) { onClick={() => { handleChangeCategory(0, "*"); }} + type="button" > {t("tts.TtsModelListPage.exploreModal.clearCategoryFilterButton")} @@ -131,6 +132,20 @@ export function ExploreVoicesModal(props: Props) { />
+
+ +
); } diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx index dba46c64c1..3ec51bc858 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx @@ -1,8 +1,6 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faMicrophone, -} from "@fortawesome/free-solid-svg-icons"; +import { faMicrophone } from "@fortawesome/free-solid-svg-icons"; import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels"; import { TtsCategoryType } from "../../../../../../AppWrapper"; import { Trans } from "react-i18next"; @@ -25,7 +23,7 @@ interface Props { maybeSelectedTtsModel?: TtsModelListItem; setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void; - selectedTtsLanguageScope: string, + selectedTtsLanguageScope: string; } export function ScopedVoiceModelOptions(props: Props) { @@ -44,17 +42,16 @@ export function ScopedVoiceModelOptions(props: Props) { if (maybeNewTtsModel !== undefined) { props.setMaybeSelectedTtsModel(maybeNewTtsModel); } - } + }; const leafiestCategory = selectedCategories[selectedCategories.length - 1]; let leafiestCategoryModels: Array = []; if (leafiestCategory !== undefined) { - leafiestCategoryModels = - Array.from( - ttsModelsByCategoryToken.get(leafiestCategory.category_token) || - new Set()); + leafiestCategoryModels = Array.from( + ttsModelsByCategoryToken.get(leafiestCategory.category_token) || new Set() + ); } else { leafiestCategoryModels = Array.from(new Set(allTtsModels)); } @@ -65,16 +62,20 @@ export function ScopedVoiceModelOptions(props: Props) { if (props.selectedTtsLanguageScope === "*") { return true; // NB: Sentinel value of "*" means all languages. } - return ttsModel.ietf_primary_language_subtag === props.selectedTtsLanguageScope; + return ( + ttsModel.ietf_primary_language_subtag === props.selectedTtsLanguageScope + ); }) .map((ttsModel) => { return { label: ttsModel.title, value: ttsModel.model_token, - } + }; }); - let selectedOption = options.find((option) => option.value === maybeSelectedTtsModel?.model_token); + let selectedOption = options.find( + (option) => option.value === maybeSelectedTtsModel?.model_token + ); if (selectedOption === undefined && options.length > 0) { // NB: We shouldn't select the first item in the list since that won't update the currently @@ -84,9 +85,9 @@ export function ScopedVoiceModelOptions(props: Props) { selectedOption = { label: "Select voice...", value: "*", - } + }; } - + const voiceCount = options.length; let isLoading = false; @@ -101,27 +102,18 @@ export function ScopedVoiceModelOptions(props: Props) { selectedOption = { 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)", value: "*", - } + }; } return ( <>
- -
@@ -132,18 +124,20 @@ export function ScopedVoiceModelOptions(props: Props) { options={options} classNames={SearchFieldClass} onChange={handleChange} - onMenuOpen={() => { Analytics.ttsOpenScopedVoiceSelectMenu() } } + onMenuOpen={() => { + Analytics.ttsOpenScopedVoiceSelectMenu(); + }} isLoading={isLoading} // On mobile, we don't want the onscreen keyboard to take up half the UI. autoFocus={false} isSearchable={false} - // 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={{Option: FastReactSelectOption} as any} - /> + filterOption={createFilter({ ignoreAccents: false })} + components={{ Option: FastReactSelectOption } as any} + />
- ) + ); }