diff --git a/packages/fakeyou/src/v2/api/tts/GetTtsModel.ts b/packages/components/src/api/tts/GetTtsModel.ts similarity index 95% rename from packages/fakeyou/src/v2/api/tts/GetTtsModel.ts rename to packages/components/src/api/tts/GetTtsModel.ts index f1d535642e..c223d75400 100644 --- a/packages/fakeyou/src/v2/api/tts/GetTtsModel.ts +++ b/packages/components/src/api/tts/GetTtsModel.ts @@ -1,4 +1,4 @@ -import { ApiConfig } from "@storyteller/components"; +import { ApiConfig } from "../ApiConfig"; export interface TtsModel { model_token: string, @@ -12,6 +12,8 @@ export interface TtsModel { creator_gravatar_hash: string, description_markdown: string, description_rendered_html: string, + is_front_page_featured: boolean, + is_twitch_featured: boolean, creator_set_visibility: string, updatable_slug: string, created_at: string, diff --git a/packages/fakeyou/src/v2/view/tts/tts_edit_categories/TtsEditCategoriesPage.tsx b/packages/fakeyou/src/v2/view/tts/tts_edit_categories/TtsEditCategoriesPage.tsx index e3a9eafb34..15053d1c82 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_edit_categories/TtsEditCategoriesPage.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_edit_categories/TtsEditCategoriesPage.tsx @@ -3,7 +3,7 @@ import { AssignTtsCategory, AssignTtsCategoryIsError, AssignTtsCategoryIsOk } fr import { BackLink } from '../../_common/BackLink'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig'; -import { GetTtsModel, GetTtsModelIsErr, GetTtsModelIsOk, TtsModel, TtsModelLookupError } from '../../../api/tts/GetTtsModel'; +import { GetTtsModel, GetTtsModelIsErr, GetTtsModelIsOk, TtsModel, TtsModelLookupError } from '@storyteller/components/src/api/tts/GetTtsModel'; import { ListTtsCategories, ListTtsCategoriesIsError, ListTtsCategoriesIsOk, TtsCategory } from '../../../api/category/ListTtsCategories'; import { ListTtsCategoriesForModel, ListTtsCategoriesForModelIsError, ListTtsCategoriesForModelIsOk, TtsModelCategory } from '../../../api/category/ListTtsCategoriesForModel'; import { SessionWrapper } from '../../../../session/SessionWrapper'; diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_edit/TtsModelEditFc.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_edit/TtsModelEditFc.tsx index 1e7cab3611..577dcae38b 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_model_edit/TtsModelEditFc.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_model_edit/TtsModelEditFc.tsx @@ -6,42 +6,16 @@ import { useParams, useHistory } from 'react-router-dom'; import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig'; import { VisibleIconFc } from '../../_icons/VisibleIcon'; import { HiddenIconFc } from '../../_icons/HiddenIcon'; +import { GetTtsModel, GetTtsModelIsErr, GetTtsModelIsOk, TtsModel, TtsModelLookupError } from '@storyteller/components/src/api/tts/GetTtsModel'; import { BackLink } from '../../_common/BackLink'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faHeadphones, faHome } from '@fortawesome/free-solid-svg-icons'; +import { faTwitch } from '@fortawesome/free-brands-svg-icons'; const DEFAULT_VISIBILITY = 'public'; const DEFAULT_PRETRAINED_VOCODER = 'hifigan-superres'; -interface TtsModelViewResponsePayload { - success: boolean, - model: TtsModel, -} - -interface TtsModel { - model_token: string, - title: string, - tts_model_type: string, - maybe_default_pretrained_vocoder: string | null, - text_preprocessing_algorithm: string, - creator_user_token: string, - creator_username: string, - creator_display_name: string, - description_markdown: string, - description_rendered_html: string, - creator_set_visibility: string, - updatable_slug: string, - created_at: string, - updated_at: string, - maybe_moderator_fields: TtsModelModeratorFields | null | undefined, -} - -interface TtsModelModeratorFields { - creator_ip_address_creation: string, - creator_ip_address_last_update: string, - mod_deleted_at: string | undefined | null, - user_deleted_at: string | undefined | null, -} - interface Props { sessionWrapper: SessionWrapper, enqueueTtsJob: (jobToken: string) => void, @@ -53,37 +27,38 @@ function TtsModelEditFc(props: Props) { const history = useHistory(); + // Model lookup const [ttsModel, setTtsModel] = useState(undefined); + const [notFoundState, setNotFoundState] = useState(false); + + // Fields const [title, setTitle] = useState(""); const [descriptionMarkdown, setDescriptionMarkdown] = useState(""); const [visibility, setVisibility] = useState(DEFAULT_VISIBILITY); const [defaultPretrainedVocoder, setDefaultPretrainedVocoder] = useState(DEFAULT_PRETRAINED_VOCODER); + const [isFrontPageFeatured, setIsFrontPageFeatured] = useState(false); + const [isTwitchFeatured, setIsTwitchFeatured] = useState(false); - const getModel = useCallback((token) => { - const api = new ApiConfig(); - const endpointUrl = api.viewTtsModel(token); + const getModel = useCallback(async (token) => { + const model = await GetTtsModel(token); - fetch(endpointUrl, { - method: 'GET', - headers: { - 'Accept': 'application/json', - }, - credentials: 'include', - }) - .then(res => res.json()) - .then(res => { - const modelsResponse : TtsModelViewResponsePayload = res; - if (!modelsResponse.success) { - return; + if (GetTtsModelIsOk(model)) { + setTtsModel(model); + + setTitle(model.title || "") + setDescriptionMarkdown(model.description_markdown || "") + setVisibility(model.creator_set_visibility || DEFAULT_VISIBILITY); + setDefaultPretrainedVocoder(model.maybe_default_pretrained_vocoder || DEFAULT_PRETRAINED_VOCODER); + setIsFrontPageFeatured(model.is_front_page_featured|| false); + setIsTwitchFeatured(model.is_twitch_featured || false); + + } else if (GetTtsModelIsErr(model)) { + switch(model) { + case TtsModelLookupError.NotFound: + setNotFoundState(true); + break; } - - setTitle(modelsResponse.model.title || "") - setDescriptionMarkdown(modelsResponse.model.description_markdown || "") - setVisibility(modelsResponse.model.creator_set_visibility || DEFAULT_VISIBILITY); - setDefaultPretrainedVocoder(modelsResponse.model.maybe_default_pretrained_vocoder || DEFAULT_PRETRAINED_VOCODER); - setTtsModel(modelsResponse.model); - }) - .catch(e => {}); + } }, []); @@ -113,8 +88,20 @@ function TtsModelEditFc(props: Props) { setDefaultPretrainedVocoder((ev.target as HTMLSelectElement).value) }; + const handleIsFrontPageFeaturedChange = (ev: React.FormEvent) => { + const value = !((ev.target as HTMLSelectElement).value === 'false'); + setIsFrontPageFeatured(value); + }; + + const handleIsTwitchFeaturedChange = (ev: React.FormEvent) => { + const value = !((ev.target as HTMLSelectElement).value === 'false'); + setIsTwitchFeatured(value); + }; + const modelLink = FrontendUrlConfig.ttsModelPage(token); + const isModerator = props.sessionWrapper.canEditOtherUsersTtsModels(); + const handleFormSubmit = (ev: React.FormEvent) => { ev.preventDefault(); @@ -131,13 +118,18 @@ function TtsModelEditFc(props: Props) { const api = new ApiConfig(); const endpointUrl = api.editTtsModel(modelToken); - const request = { + let request : any = { title: title, description_markdown: descriptionMarkdown, creator_set_visibility: visibility || DEFAULT_VISIBILITY, maybe_default_pretrained_vocoder: defaultPretrainedVocoder || DEFAULT_PRETRAINED_VOCODER, } + if (isModerator) { + request.is_front_page_featured = isFrontPageFeatured; + request.is_twitch_featured = isTwitchFeatured; + } + fetch(endpointUrl, { method: 'POST', headers: { @@ -162,6 +154,65 @@ function TtsModelEditFc(props: Props) { return false; }; + if (notFoundState) { + return ( +

Model not found

+ ); + } + + if (!ttsModel) { + return
+ } + + let optionalModeratorFields = <>; + + if (isModerator) { + let isFrontPageFeaturedFormValue = isFrontPageFeatured ? "true" : "false"; + let isTwitchFeaturedFormValue = isTwitchFeatured ? "true" : "false"; + + optionalModeratorFields = (<> +
+ +
+
+ +
+ + + +
+
+
+ +
+
+ +
+ + + +
+
+ ); + } + + let isDisabled = ttsModel === undefined; const visibilityIcon = (visibility === 'public') ? : ; @@ -187,6 +238,9 @@ function TtsModelEditFc(props: Props) { placeholder="Model Title" value={title} /> + + +
{/*

{invalidReason}

*/} @@ -233,6 +287,8 @@ function TtsModelEditFc(props: Props) { + {optionalModeratorFields} +
diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx index a4ad0231df..58cd46a136 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx @@ -9,7 +9,7 @@ import { v4 as uuidv4 } from 'uuid'; import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig'; import { HiddenIconFc } from '../../_icons/HiddenIcon'; import { VisibleIconFc } from '../../_icons/VisibleIcon'; -import { GetTtsModel, GetTtsModelIsErr, GetTtsModelIsOk, TtsModel, TtsModelLookupError } from '../../../api/tts/GetTtsModel'; +import { GetTtsModel, GetTtsModelIsErr, GetTtsModelIsOk, TtsModel, TtsModelLookupError } from '@storyteller/components/src/api/tts/GetTtsModel'; import { GravatarFc } from '../../_common/GravatarFc'; import { GetTtsModelUseCount } from '../../../api/tts/GetTtsModelUseCount'; import { BackLink } from '../../_common/BackLink'; @@ -226,6 +226,14 @@ function TtsModelViewFc(props: Props) { User deleted at (UTC) {ttsModel?.maybe_moderator_fields?.user_deleted_at || "not deleted"} + + Is Front Page Featured? + {ttsModel?.is_front_page_featured ? "yes" : "no"} + + + Is Twitch Featured? + {ttsModel?.is_twitch_featured ? "yes" : "no" } + ); }