From 6703e9fcc2e9909549d2c1899502841c15230560 Mon Sep 17 00:00:00 2001 From: Victor Date: Wed, 13 Mar 2024 16:45:29 -0700 Subject: [PATCH 1/6] DevUpload uses useMediaUploader --- .../entities/EntityInput/EntityInputEmpty.tsx | 5 +- .../src/components/entities/EntityTypes.tsx | 72 ++++++-- packages/fakeyou.com/src/hooks/index.tsx | 2 + .../fakeyou.com/src/hooks/useFile/useFile.tsx | 2 +- .../src/hooks/useMediaUploader/index.tsx | 1 + .../useMediaUploader/useMediaUploader.tsx | 62 +++++++ .../v2/view/pages/dev_upload/DevUpload.tsx | 169 ++++-------------- .../view/pages/fbx_to_gltf/FbxToGltfPage.tsx | 169 ++++++------------ 8 files changed, 218 insertions(+), 264 deletions(-) create mode 100644 packages/fakeyou.com/src/hooks/useMediaUploader/index.tsx create mode 100644 packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx index ce401f7d4e..be2b7bfe7a 100644 --- a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx +++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx @@ -35,14 +35,13 @@ export default function EntityInputEmpty({ accept, open, inputMode, inputProps, const mediaIcons = () => { switch (accepted[0]) { - case "audio": return faWaveform; - case "image": return faImage; + case "mp3": return faWaveform; + case "jpg": return faImage; case "bvh": return faPersonWalking; default: return faFile; } }; - const supported = `${ accepted.length ? accepted.join(", ") : accepted[0] } files supported`; return <> diff --git a/packages/fakeyou.com/src/components/entities/EntityTypes.tsx b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx index 184109ac5c..68e354cf15 100644 --- a/packages/fakeyou.com/src/components/entities/EntityTypes.tsx +++ b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx @@ -1,3 +1,5 @@ +import { enumToKeyArr } from "resources"; + export enum EntityInputMode { bookmarks, media, @@ -10,10 +12,7 @@ export enum MediaFilters { audio, image, video, - bvh, - glb, - gltf, - fbx + engine_asset } export enum WeightsFilters { @@ -36,19 +35,46 @@ export enum WeightsCategories { voiceConversion } -export type EntityModeProp = keyof typeof EntityInputMode; -export type MediaFilterProp = keyof typeof MediaFilters; -export type WeightFilterProp = keyof typeof WeightsFilters; -export type WeightCategoriesProp = keyof typeof WeightsCategories; -export type AcceptTypes = MediaFilterProp | WeightFilterProp; -export type JobSelection = WeightCategoriesProp | WeightFilterProp; - export enum EntityType { unknown, media, weights } +export enum EngineTypes { + bvh, + fbx, + glb, + gltf, + obj, + ron +} + +export enum AudioTypes { + mp3, + wav +} + +export enum ImageTypes { + jpg, + png +} + +export enum VideoTypes { + mp4, +} + +export type EntityModeProp = keyof typeof EntityInputMode; +export type MediaFilterProp = keyof typeof MediaFilters; +export type WeightFilterProp = keyof typeof WeightsFilters; +export type EngineFilterProp = keyof typeof EngineTypes; +export type AudioFilterProp = keyof typeof AudioTypes; +export type ImageFilterProp = keyof typeof ImageTypes; +export type VideoFilterProp = keyof typeof VideoTypes; +export type WeightCategoriesProp = keyof typeof WeightsCategories; +export type AcceptTypes = EngineFilterProp | AudioFilterProp | ImageFilterProp | VideoFilterProp | WeightFilterProp; +export type JobSelection = WeightCategoriesProp | WeightFilterProp; + export const ListEntityFilters = (mode?: number) => { const bookmarkFilters = Object.keys({ ...MediaFilters, ...WeightsFilters }).filter(val => isNaN(Number(val))).reduce((obj,current) => ({ ...obj, [current]: current }),{}); @@ -62,4 +88,26 @@ export const EntityFilterOptions = (mode?: EntityInputMode, t = (v:string) => v) if (typeof value === "string") return { value, label: t(value) } return { label: "all", value: "all" }; }); -}; \ No newline at end of file +}; + +export const isSelectedType = (mode: MediaFilters, fileExtension: string) => enumToKeyArr([ + { ...AudioTypes, ...ImageTypes, ...VideoTypes, ...EngineTypes }, + AudioTypes, + ImageTypes, + VideoTypes, + EngineTypes +][mode]).includes(fileExtension); + +export const getMediaCategory = (fileExtension: string) => { + console.log("🍔",isSelectedType(MediaFilters.image,fileExtension)); + isSelectedType(MediaFilters.image,fileExtension); + if (isSelectedType(MediaFilters.engine_asset, fileExtension)) return MediaFilters.engine_asset; + if (isSelectedType(MediaFilters.audio, fileExtension)) return MediaFilters.audio; + if (isSelectedType(MediaFilters.image, fileExtension)) return MediaFilters.image; + if (isSelectedType(MediaFilters.video, fileExtension)) return MediaFilters.video; + return MediaFilters.all; // will change to "unknown" eventually +} + + + + diff --git a/packages/fakeyou.com/src/hooks/index.tsx b/packages/fakeyou.com/src/hooks/index.tsx index 65610c6c90..a33be1d36f 100644 --- a/packages/fakeyou.com/src/hooks/index.tsx +++ b/packages/fakeyou.com/src/hooks/index.tsx @@ -14,6 +14,7 @@ import useLazyLists from './useLazyLists'; import useListContent from './useListContent'; import useLocalize from './useLocalize'; import useMedia from './useMedia'; +import useMediaUploader from './useMediaUploader'; import useModal from './useModal'; import useNotifications from './useNotifications'; import useOnScreen from "./useOnScreen"; @@ -44,6 +45,7 @@ export { useListContent, useLocalize, useMedia, + useMediaUploader, useModal, useNotifications, useOnScreen, diff --git a/packages/fakeyou.com/src/hooks/useFile/useFile.tsx b/packages/fakeyou.com/src/hooks/useFile/useFile.tsx index ed6a4a2156..557b95cf42 100644 --- a/packages/fakeyou.com/src/hooks/useFile/useFile.tsx +++ b/packages/fakeyou.com/src/hooks/useFile/useFile.tsx @@ -19,7 +19,7 @@ export default function useFile({ debug, onChange = n, onClear = n }: Props) { blobSet(inputFile ? URL.createObjectURL(inputFile) : ""); }; const inputChange = ({ target = {} }: { target: any }) => { - fileChange(target.value); + fileChange(target.files ? target.files[0] : target.value); }; const clear = () => { if (inputRef?.current?.value) inputRef.current.value = ''; diff --git a/packages/fakeyou.com/src/hooks/useMediaUploader/index.tsx b/packages/fakeyou.com/src/hooks/useMediaUploader/index.tsx new file mode 100644 index 0000000000..3555ba20f5 --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useMediaUploader/index.tsx @@ -0,0 +1 @@ +export { default } from "./useMediaUploader"; \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx b/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx new file mode 100644 index 0000000000..f1d7a9df65 --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx @@ -0,0 +1,62 @@ +import { useState } from "react"; +import { useFile } from "hooks"; +import { v4 as uuidv4 } from "uuid"; +import { isSelectedType, MediaFilters } from "components/entities/EntityTypes"; +import { UploadMedia, UploadMediaResponse } from "@storyteller/components/src/api/media_files/UploadMedia"; +import { + UploadEngineAsset, + UploadEngineAssetResponse +}from "@storyteller/components/src/api/media_files/UploadEngineAsset"; +import { MediaFileSubtype } from "@storyteller/components/src/api/enums/MediaFileSubtype"; +import { GetFileTypeByExtension as extension } from "@storyteller/components/src/utils/GetFileTypeByExtension"; + +type UploaderResponse = UploadEngineAssetResponse | UploadMediaResponse; + +interface Props { + onSuccess?: (res: UploaderResponse) => any; +} + +const n = () => {}; + +export default function useMediaUploader({ onSuccess = n }: Props) { + const [engineSubtype,engineSubtypeSet] = useState(); + + const createUpload = (inputFile: File, todo = n ) => { + const fileExtension = extension(inputFile.name || ""); + const isEngineAsset = isSelectedType(MediaFilters.engine_asset, fileExtension); + const baseConfig = { uuid_idempotency_token: uuidv4(), file: inputFile }; + const engineConfig = { ...baseConfig, media_file_subtype: engineSubtype }; + const mediaConfig = { ...baseConfig, source: "file" }; + const uploader = isEngineAsset ? UploadEngineAsset(engineConfig) : UploadMedia(mediaConfig); + + if (inputFile) { + uploader + .then((res: UploaderResponse) => { + if ("media_file_token" in res) { + onSuccess(res); + todo(); + } + }); + } + }; + + const { file, clear, inputProps } = useFile({}); + + const upload = () => createUpload(file,clear); + + const engineSubtypeChange = ({ target }: { target: any }) => engineSubtypeSet(target.value); + + return { + clear, + engineSubtype, + engineSubtypeChange, + file, + inputProps, + isAudio: isSelectedType(MediaFilters.audio, extension(file?.name || "")), + isEngineAsset: isSelectedType(MediaFilters.engine_asset, extension(file?.name || "")), + isImage: isSelectedType(MediaFilters.image, extension(file?.name || "")), + isVideo: isSelectedType(MediaFilters.video, extension(file?.name || "")), + upload + } + +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx b/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx index e39616b909..599757c700 100644 --- a/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx @@ -1,142 +1,47 @@ import React, { useState } from "react"; -import Panel from "components/common/Panel"; -import Container from "components/common/Container"; import PageHeader from "components/layout/PageHeader"; -import { useSession } from "hooks"; -import { Button } from "components/common"; +import { useMediaUploader, useSession } from "hooks"; +import { Button, Container, Panel } from "components/common"; import { faUpload } from "@fortawesome/pro-solid-svg-icons"; -import { FileType, GetFileTypeByExtension } from "@storyteller/components/src/utils/GetFileTypeByExtension"; -import { UploadMedia, UploadMediaResponse, } from "@storyteller/components/src/api/media_files/UploadMedia"; -import { UploadEngineAsset, UploadEngineAssetResponse, } from "@storyteller/components/src/api/media_files/UploadEngineAsset"; import { MediaFileSubtype } from "@storyteller/components/src/api/enums/MediaFileSubtype"; -import { v4 as uuidv4 } from "uuid"; import { Link } from "react-router-dom"; -enum UploadType { - EngineAsset = "engine_asset", - Image = "image", - Audio = "audio", - Video = "video", - Unknown = "unknown", -} - interface DevUploadProps {} export default function DevUpload(props: DevUploadProps) { - const { studioAccessCheck } = useSession(); - - const [file, fileSet] = useState(null); - const [maybeMediaFileSubtype, maybeMediaFileSubtypeSet] = useState(undefined); - const [uploadType, uploadTypeSet] = useState(UploadType.Unknown); const [tokens, tokensSet] = useState([]); + const { engineSubtype, engineSubtypeChange, file, inputProps, isEngineAsset, isVideo, upload } = useMediaUploader({ + onSuccess: (res: any) => tokensSet([res.media_file_token, ...tokens]) + }); - const handleFileChange = (event: any) => { - const maybeFile = event.target.files[0]; - const fileType = GetFileTypeByExtension(maybeFile?.name || ""); - - let uploadType = UploadType.Unknown; - - switch (fileType) { - case FileType.Bvh: - case FileType.Fbx: - case FileType.Glb: - case FileType.Gltf: - case FileType.Obj: - case FileType.Ron: - uploadType = UploadType.EngineAsset; - break; - case FileType.Jpg: - case FileType.Png: - uploadType = UploadType.Image; - break; - case FileType.Mp3: - case FileType.Wav: - uploadType = UploadType.Audio; - break; - case FileType.Mp4: - uploadType = UploadType.Video; - break; - case FileType.Unknown: - default: - uploadType = UploadType.Unknown; - break; - } - - fileSet(maybeFile); - uploadTypeSet(uploadType); - }; - - const handleSubtypeChange = (ev: React.FormEvent) => { - const value = (ev.target as HTMLSelectElement).value; - const maybeSubtype = value as MediaFileSubtype; - maybeMediaFileSubtypeSet(maybeSubtype); - } - - const handleUpload = () => { - if (!file) { - console.error("no file specified for upload"); - return; - } - - switch(uploadType) { - case UploadType.EngineAsset: - UploadEngineAsset({ - uuid_idempotency_token: uuidv4(), - file, - media_file_subtype: maybeMediaFileSubtype, - }) - .then((res: UploadEngineAssetResponse) => { - if ("media_file_token" in res) { - tokensSet([res.media_file_token, ...tokens]); - fileSet(null); - } - }); - break; - default: - UploadMedia({ - uuid_idempotency_token: uuidv4(), - file, - source: "file", - }) - .then((res: UploadMediaResponse) => { - if ("media_file_token" in res) { - tokensSet([res.media_file_token, ...tokens]); - fileSet(null); - } - }); - } - }; + const { onChange } = inputProps; + const { studioAccessCheck } = useSession(); let title = "Upload Generic File"; let mediaFileSubtypeForm = <>; - switch (uploadType) { - case UploadType.Video: - title = "Upload Video"; - break; - - case UploadType.EngineAsset: - title = "Upload Engine Asset"; - mediaFileSubtypeForm = ( - <> -
- - -
- - ); - break; + if (isVideo) { title = "Upload Video"; } + if (isEngineAsset) { + title = "Upload Engine Asset"; + mediaFileSubtypeForm = ( + <> +
+ + +
+ + ); } return studioAccessCheck( @@ -146,7 +51,7 @@ export default function DevUpload(props: DevUploadProps) { subText="Upload files to the server for testing." /> - {maybeMediaFileSubtype} + {engineSubtype}
@@ -154,12 +59,12 @@ export default function DevUpload(props: DevUploadProps) {
- +
{mediaFileSubtypeForm} @@ -169,7 +74,7 @@ export default function DevUpload(props: DevUploadProps) { disabled={!file} icon={faUpload} label="Upload Media" - onClick={handleUpload} + onClick={upload} />
diff --git a/packages/fakeyou.com/src/v2/view/pages/fbx_to_gltf/FbxToGltfPage.tsx b/packages/fakeyou.com/src/v2/view/pages/fbx_to_gltf/FbxToGltfPage.tsx index 05455ada9b..af0907ae4a 100644 --- a/packages/fakeyou.com/src/v2/view/pages/fbx_to_gltf/FbxToGltfPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/fbx_to_gltf/FbxToGltfPage.tsx @@ -19,6 +19,9 @@ import { EnqueueFbxToGltfIsSuccess, EnqueueFbxToGltfIsError, } from "@storyteller/components/src/api/file_conversion/EnqueueFbxToGltf"; +import { onChanger } from "resources"; + +import { EntityInput } from "components/entities"; interface FbxToGltfPageProps { enqueueInferenceJob: ( @@ -30,86 +33,8 @@ interface FbxToGltfPageProps { export default function FbxToGltfPage({ enqueueInferenceJob, }: FbxToGltfPageProps) { - const history = useHistory(); - const { mediaToken: mediaTokenParam } = useParams<{ mediaToken: string }>(); - const [mediaToken, setMediaToken] = useState(mediaTokenParam); - const { media: presetFile } = useMedia({ - mediaToken: mediaToken ?? undefined, - }); - const fileProps = useFile({}); - const [isSubmitting, setIsSubmitting] = useState(false); - const [isWorking, setIsWorking] = useState(false); - - const { inferenceJobs } = useInferenceJobs( - FrontendInferenceJobType.ConvertFbxtoGltf - ); - - console.log("inferenceJobs", inferenceJobs); - - useEffect(() => { - // If there's a mediaToken, automatically prepare the file for conversion - if (mediaToken && presetFile) { - } - }, [mediaToken, presetFile]); - - const clearMediaToken = () => { - // Reset the media token state - setMediaToken(null); - history.push("/fbx-to-gltf"); - }; - - const makeFBXUploadRequest = () => ({ - uuid_idempotency_token: uuidv4(), - file: fileProps.file, - source: "file", - type: "fbx/model", - }); - - const handleUploadFBX = async () => { - try { - const res = await UploadMedia(makeFBXUploadRequest()); - if (res.success && res.media_file_token) { - return { upload_token: res.media_file_token }; - } - console.error("Upload failed:", res); - return null; - } catch (error) { - console.error("Error in upload:", error); - return null; - } - }; - - const submit = async () => { - if (isSubmitting) return; - setIsSubmitting(true); - setIsWorking(true); - try { - let uploadToken = mediaToken; - - // If no media token, upload the file first - if (!mediaToken && fileProps.file) { - const uploadResponse = await handleUploadFBX(); - if (uploadResponse && uploadResponse.upload_token) { - uploadToken = uploadResponse.upload_token; - } else { - console.error("Failed to upload file. Response:", uploadResponse); - throw new Error("File upload failed"); - } - } - - // Enqueue the conversion job - if (uploadToken) { - await EnqueueConvert({ upload_token: uploadToken }); - } else { - console.error("No upload token available for conversion"); - } - } catch (error) { - console.error("Error in submit process: ", error); - } finally { - setIsWorking(false); - setIsSubmitting(false); - } - }; + const [mediaToken,mediaTokenSet] = useState(); + const onChange = onChanger({ mediaTokenSet }); const EnqueueConvert = async ({ upload_token }: any) => { if (!upload_token) return false; @@ -156,47 +81,59 @@ export default function FbxToGltfPage({
- {mediaToken && presetFile ? ( -
- - -
-
- -
-
{presetFile.token}
-

- Created by {presetFile.maybe_creator_user?.display_name} -

-
-
-
- -
- ) : ( - - )} + + { + + // mediaToken && presetFile ? ( + //
+ // + // + //
+ //
+ // + //
+ //
{presetFile.token}
+ //

+ // Created by {presetFile.maybe_creator_user?.display_name} + //

+ //
+ //
+ //
+ // + //
+ // ) : ( + // + // ) + }
From 7eb003f515d64b631557811d79b385d198642416 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Wed, 13 Mar 2024 23:12:58 -0400 Subject: [PATCH 2/6] update title based on current website (FakeYou vs Storyteller) --- .../src/common/UsePrefixedDocumentTitle.tsx | 27 +++++++++++++++++-- .../src/v2/view/pages/landing/LandingPage.tsx | 6 +++-- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/packages/fakeyou.com/src/common/UsePrefixedDocumentTitle.tsx b/packages/fakeyou.com/src/common/UsePrefixedDocumentTitle.tsx index 08a99eabca..c1bdc08362 100644 --- a/packages/fakeyou.com/src/common/UsePrefixedDocumentTitle.tsx +++ b/packages/fakeyou.com/src/common/UsePrefixedDocumentTitle.tsx @@ -1,12 +1,35 @@ import { useDocumentTitle } from "@storyteller/components/src/hooks/UseDocumentTitle" +import { DomainConfig, Website, getCurrentDomainConfig } from "utils/domainConfig"; -const DEFAULT_FOR_EMPTY_TITLE = "FakeYou. Deep Fake Text to Speech."; +const FAKEYOU_DEFAULT_TITLE = "FakeYou. Deep Fake Text to Speech."; +const FAKEYOU_SUFFIX = "FakeYou"; + +const STORYTELLER_DEFAULT_TITLE = "Storyteller.ai - AI Film and Movie Tools"; +const STORYTELLER_SUFFIX = "Storyteller.ai"; export function usePrefixedDocumentTitle(title?: string) { + const domainConfig : DomainConfig = getCurrentDomainConfig(); + const fixed = title === undefined ? "" : title.trim(); + + let defaultTitle; + let defaultSuffix; + + switch (domainConfig.website) { + case Website.FakeYou: + defaultTitle = FAKEYOU_DEFAULT_TITLE; + defaultSuffix = FAKEYOU_SUFFIX; + break; + case Website.StorytellerAi: + default: + defaultTitle = STORYTELLER_DEFAULT_TITLE; + defaultSuffix = STORYTELLER_SUFFIX; + break; + } + // NB: Choice of a vertical bar "|" separator is due to conserving pixels, which *might* matter to SEO. // I haven't fully investigated the veracity of this, nor the position of prefixes, suffixes, etc. // https://www.searchenginejournal.com/pipe-or-dash-in-title-tag/378099/#close - const outputTitle = fixed.length === 0 ? DEFAULT_FOR_EMPTY_TITLE : `${fixed} | FakeYou`; + const outputTitle = fixed.length === 0 ? defaultTitle : `${fixed} | ${defaultSuffix}`; useDocumentTitle(outputTitle); } diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx index 037f31a146..20673e769e 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx @@ -35,12 +35,14 @@ interface Props { } function LandingPage(props: Props) { - usePrefixedDocumentTitle("FakeYou Celebrity Voice Generator"); - PosthogClient.recordPageview(); const domain: DomainConfig = useDomainConfig(); + const webpageTitle = domain.website === Website.FakeYou ? "FakeYou Celebrity Voice Generator" : ""; + + usePrefixedDocumentTitle(webpageTitle); + const isLoggedIn = props.sessionWrapper.isLoggedIn(); const canAccessStudio = props.sessionWrapper.canAccessStudio(); From 2b4879d1d5e37ebd94cfbc0d08e0b2e713a033cb Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Wed, 13 Mar 2024 23:20:49 -0400 Subject: [PATCH 3/6] don't leak storyteller.ai studio features --- packages/components/src/api/ApiConfig.ts | 6 ++++-- packages/components/src/api/GetApiHost.ts | 6 ++++-- .../src/v2/view/pages/landing/LandingPage.tsx | 13 +++++++++++-- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/packages/components/src/api/ApiConfig.ts b/packages/components/src/api/ApiConfig.ts index 453ba0d200..1fc776580c 100644 --- a/packages/components/src/api/ApiConfig.ts +++ b/packages/components/src/api/ApiConfig.ts @@ -46,7 +46,8 @@ class ApiConfig { break; case "storyteller.ai": case "staging.storyteller.ai": - apiHost = "api.storyteller.ai"; + //apiHost = "api.storyteller.ai"; + apiHost = "api.fakeyou.com"; break; case "storyteller.stream": // Storyteller.stream is deprecated and will be decommissioned in the future. @@ -61,7 +62,8 @@ class ApiConfig { case "devproxy.storyteller.ai": case "devproxy.storyteller.ai:7000": case "devproxy.storyteller.ai:7001": - apiHost = "api.storyteller.ai"; + //apiHost = "api.storyteller.ai"; + apiHost = "api.fakeyou.com"; useSsl = true; break; case "dev.fakeyou.com": diff --git a/packages/components/src/api/GetApiHost.ts b/packages/components/src/api/GetApiHost.ts index f49b5d2b6f..e2a7547b83 100644 --- a/packages/components/src/api/GetApiHost.ts +++ b/packages/components/src/api/GetApiHost.ts @@ -15,13 +15,15 @@ export default function GetApiHost() { return hostConfig("api.fakeyou.com"); case "storyteller.ai": case "staging.storyteller.ai": - return hostConfig("api.storyteller.ai"); + //return hostConfig("api.storyteller.ai"); + return hostConfig("api.fakeyou.com"); case "storyteller.stream": // Storyteller.stream is deprecated and will be decommissioned in the future. return hostConfig("api.storyteller.stream"); case "devproxy.fakeyou.com": return hostConfig("api.fakeyou.com"); case "devproxy.storyteller.ai": - return hostConfig("api.storyteller.ai"); + //return hostConfig("api.storyteller.ai"); + return hostConfig("api.fakeyou.com"); case "dev.fakeyou.com": return hostConfig("api.dev.fakeyou.com:12345",false); // false disables SSL default: diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx index 20673e769e..01c1f8baf0 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx @@ -45,7 +45,16 @@ function LandingPage(props: Props) { const isLoggedIn = props.sessionWrapper.isLoggedIn(); - const canAccessStudio = props.sessionWrapper.canAccessStudio(); + // DO NOT LEAK THIS YET!! + let protectedStudioOnboarding = <> + + if (props.sessionWrapper.canAccessStudio()) { + protectedStudioOnboarding = ( + <> + + + ); + } return ( <> @@ -83,7 +92,7 @@ function LandingPage(props: Props) { {/* STORYTELLER,AI */} {!isLoggedIn ? ( <> - {!canAccessStudio && } + {protectedStudioOnboarding} Date: Wed, 13 Mar 2024 20:33:12 -0700 Subject: [PATCH 4/6] fbx to gltf page additions --- .../entities/EntityInput/EntityInput.tsx | 25 ++---- .../entities/EntityInput/EntityInputEmpty.tsx | 18 ++--- .../src/components/entities/EntityTypes.tsx | 4 +- .../useMediaUploader/useMediaUploader.tsx | 18 ++--- .../v2/view/pages/dev_upload/DevUpload.tsx | 3 +- .../view/pages/fbx_to_gltf/FbxToGltfPage.tsx | 79 +++++++++---------- 6 files changed, 66 insertions(+), 81 deletions(-) diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx index 176965a1ea..f63e509945 100644 --- a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx +++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx @@ -4,11 +4,9 @@ import { a, useTransition } from "@react-spring/web"; import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; import Iframe from "react-iframe"; import { Label, Spinner } from "components/common"; -import { AcceptTypes, EntityInputMode, EntityModeProp } from "components/entities/EntityTypes"; -import { useFile, useMedia, useModal, useSession } from "hooks"; +import { AcceptTypes, EntityInputMode, EntityModeProp, UploaderResponse } from "components/entities/EntityTypes"; +import { useMedia, useMediaUploader, useModal, useSession } from "hooks"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; -import { UploadMedia, UploadMediaResponse } from "@storyteller/components/src/api/media_files/UploadMedia"; -import { v4 as uuidv4 } from "uuid"; import EntityInputEmpty from "./EntityInputEmpty"; import "./EntityInput.scss"; @@ -77,22 +75,11 @@ export default function EntityInput({ accept: inAccept, aspectRatio = "square", onChange({ target: { name, value: token } }); }; - const { clear, inputProps } = useFile({ - onChange: (inputFile: any) => { - if (inputFile) UploadMedia({ - uuid_idempotency_token: uuidv4(), - file: inputFile, - source: "file", - }) - .then((res: UploadMediaResponse) => { - if ("media_file_token" in res) { - clear(); - selectToken(res.media_file_token); - } - }); - else console.log("🥺 no file"); - } + const { inputProps } = useMediaUploader({ + autoUpload: true, + onSuccess: (res: UploaderResponse) => selectToken(res.media_file_token) }); + const onSelect = (data: MediaFile) => { mediaSet(data); selectToken(data.token); diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx index be2b7bfe7a..7579e7dda6 100644 --- a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx +++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { AcceptTypes, EntityInputMode, MediaFilters } from "components/entities/EntityTypes"; +import { AcceptTypes, EntityInputMode, isSelectedType, MediaFilters } from "components/entities/EntityTypes"; import { SlideProps } from "./EntityInput"; import { MediaBrowser } from "components/modals"; import { FileWrapper } from "components/common"; @@ -23,23 +23,21 @@ interface EmptySlideProps extends SlideProps { user: any }; -const mediaCheck = (value: string) => (value in MediaFilters); - export default function EntityInputEmpty({ accept, open, inputMode, inputProps, user, ...rest }: EmptySlideProps) { const accepted = accept ? accept : []; - const isMedia = !!accepted.find(mediaCheck); + const isMedia = isSelectedType(MediaFilters.all,accepted[0]); + const browserClick = () => open({ component: MediaBrowser, props: { accept, inputMode, username: user?.username || "", ...rest } }); const mediaIcons = () => { - switch (accepted[0]) { - case "mp3": return faWaveform; - case "jpg": return faImage; - case "bvh": return faPersonWalking; - default: return faFile; - } + if (isSelectedType(MediaFilters.audio,accepted[0])) return faWaveform; + if (isSelectedType(MediaFilters.engine_asset,accepted[0])) return faPersonWalking; + if (isSelectedType(MediaFilters.image,accepted[0])) return faImage; + if (isSelectedType(MediaFilters.video,accepted[0])) return faFile; + return faFile; }; const supported = `${ accepted.length ? accepted.join(", ") : accepted[0] } files supported`; diff --git a/packages/fakeyou.com/src/components/entities/EntityTypes.tsx b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx index 68e354cf15..4aea3d2022 100644 --- a/packages/fakeyou.com/src/components/entities/EntityTypes.tsx +++ b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx @@ -1,4 +1,6 @@ import { enumToKeyArr } from "resources"; +import { UploadMediaResponse } from "@storyteller/components/src/api/media_files/UploadMedia"; +import { UploadEngineAssetResponse }from "@storyteller/components/src/api/media_files/UploadEngineAsset"; export enum EntityInputMode { bookmarks, @@ -74,6 +76,7 @@ export type VideoFilterProp = keyof typeof VideoTypes; export type WeightCategoriesProp = keyof typeof WeightsCategories; export type AcceptTypes = EngineFilterProp | AudioFilterProp | ImageFilterProp | VideoFilterProp | WeightFilterProp; export type JobSelection = WeightCategoriesProp | WeightFilterProp; +export type UploaderResponse = UploadEngineAssetResponse | UploadMediaResponse; export const ListEntityFilters = (mode?: number) => { const bookmarkFilters = Object.keys({ ...MediaFilters, ...WeightsFilters }).filter(val => isNaN(Number(val))).reduce((obj,current) => ({ ...obj, [current]: current }),{}); @@ -99,7 +102,6 @@ export const isSelectedType = (mode: MediaFilters, fileExtension: string) => enu ][mode]).includes(fileExtension); export const getMediaCategory = (fileExtension: string) => { - console.log("🍔",isSelectedType(MediaFilters.image,fileExtension)); isSelectedType(MediaFilters.image,fileExtension); if (isSelectedType(MediaFilters.engine_asset, fileExtension)) return MediaFilters.engine_asset; if (isSelectedType(MediaFilters.audio, fileExtension)) return MediaFilters.audio; diff --git a/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx b/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx index f1d7a9df65..9ff5407cca 100644 --- a/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx +++ b/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx @@ -1,24 +1,20 @@ import { useState } from "react"; import { useFile } from "hooks"; import { v4 as uuidv4 } from "uuid"; -import { isSelectedType, MediaFilters } from "components/entities/EntityTypes"; -import { UploadMedia, UploadMediaResponse } from "@storyteller/components/src/api/media_files/UploadMedia"; -import { - UploadEngineAsset, - UploadEngineAssetResponse -}from "@storyteller/components/src/api/media_files/UploadEngineAsset"; +import { isSelectedType, MediaFilters, UploaderResponse } from "components/entities/EntityTypes"; +import { UploadMedia } from "@storyteller/components/src/api/media_files/UploadMedia"; +import { UploadEngineAsset }from "@storyteller/components/src/api/media_files/UploadEngineAsset"; import { MediaFileSubtype } from "@storyteller/components/src/api/enums/MediaFileSubtype"; import { GetFileTypeByExtension as extension } from "@storyteller/components/src/utils/GetFileTypeByExtension"; -type UploaderResponse = UploadEngineAssetResponse | UploadMediaResponse; - interface Props { + autoUpload?: boolean, onSuccess?: (res: UploaderResponse) => any; } const n = () => {}; -export default function useMediaUploader({ onSuccess = n }: Props) { +export default function useMediaUploader({ autoUpload, onSuccess = n }: Props) { const [engineSubtype,engineSubtypeSet] = useState(); const createUpload = (inputFile: File, todo = n ) => { @@ -40,7 +36,9 @@ export default function useMediaUploader({ onSuccess = n }: Props) { } }; - const { file, clear, inputProps } = useFile({}); + const { file, clear, inputProps } = useFile({ + ...autoUpload ? { onChange: (inputFile: File) => createUpload(inputFile,clear) } : {} + }); const upload = () => createUpload(file,clear); diff --git a/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx b/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx index 599757c700..22f65fd5f5 100644 --- a/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import PageHeader from "components/layout/PageHeader"; import { useMediaUploader, useSession } from "hooks"; import { Button, Container, Panel } from "components/common"; +import { UploaderResponse } from "components/entities/EntityTypes"; import { faUpload } from "@fortawesome/pro-solid-svg-icons"; import { MediaFileSubtype } from "@storyteller/components/src/api/enums/MediaFileSubtype"; import { Link } from "react-router-dom"; @@ -11,7 +12,7 @@ interface DevUploadProps {} export default function DevUpload(props: DevUploadProps) { const [tokens, tokensSet] = useState([]); const { engineSubtype, engineSubtypeChange, file, inputProps, isEngineAsset, isVideo, upload } = useMediaUploader({ - onSuccess: (res: any) => tokensSet([res.media_file_token, ...tokens]) + onSuccess: (res: UploaderResponse) => tokensSet([res.media_file_token, ...tokens]) }); const { onChange } = inputProps; diff --git a/packages/fakeyou.com/src/v2/view/pages/fbx_to_gltf/FbxToGltfPage.tsx b/packages/fakeyou.com/src/v2/view/pages/fbx_to_gltf/FbxToGltfPage.tsx index af0907ae4a..62c4cad198 100644 --- a/packages/fakeyou.com/src/v2/view/pages/fbx_to_gltf/FbxToGltfPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/fbx_to_gltf/FbxToGltfPage.tsx @@ -1,23 +1,22 @@ +import React, { useState } from "react"; import { faArrowRightArrowLeft, - faFile, - faTrashAlt, + // faFile, + // faTrashAlt, } from "@fortawesome/pro-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Button, Container, Panel } from "components/common"; -import FileInput from "components/common/FileInput"; +// import FileInput from "components/common/FileInput"; import PageHeader from "components/layout/PageHeader"; -import { useFile, useInferenceJobs, useMedia } from "hooks"; -import React, { useEffect, useState } from "react"; -import { useHistory, useParams } from "react-router-dom"; -import { v4 as uuidv4 } from "uuid"; -import { UploadMedia } from "@storyteller/components/src/api/media_files/UploadMedia"; +// import { useHistory, useParams } from "react-router-dom"; +// import { v4 as uuidv4 } from "uuid"; +// import { UploadMedia } from "@storyteller/components/src/api/media_files/UploadMedia"; import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; import FbxToGltfJobList from "./components/FbxToGltfJobList"; import { - EnqueueFbxToGltf, - EnqueueFbxToGltfIsSuccess, - EnqueueFbxToGltfIsError, + // EnqueueFbxToGltf, + // EnqueueFbxToGltfIsSuccess, + // EnqueueFbxToGltfIsError, } from "@storyteller/components/src/api/file_conversion/EnqueueFbxToGltf"; import { onChanger } from "resources"; @@ -36,36 +35,36 @@ export default function FbxToGltfPage({ const [mediaToken,mediaTokenSet] = useState(); const onChange = onChanger({ mediaTokenSet }); - const EnqueueConvert = async ({ upload_token }: any) => { - if (!upload_token) return false; + // const EnqueueConvert = async ({ upload_token }: any) => { + // if (!upload_token) return false; - try { - let request = { - uuid_idempotency_token: uuidv4(), - file_source: undefined, - media_file_token: upload_token, - }; + // try { + // let request = { + // uuid_idempotency_token: uuidv4(), + // file_source: undefined, + // media_file_token: upload_token, + // }; - const response = await EnqueueFbxToGltf(request); + // const response = await EnqueueFbxToGltf(request); - if (EnqueueFbxToGltfIsSuccess(response)) { - console.log("Enqueue successful"); + // if (EnqueueFbxToGltfIsSuccess(response)) { + // console.log("Enqueue successful"); - if (response && response.inference_job_token) { - enqueueInferenceJob( - response.inference_job_token, - FrontendInferenceJobType.ConvertFbxtoGltf - ); - } - return true; - } else if (EnqueueFbxToGltfIsError(response)) { - throw new Error("Enqueue failed"); - } - } catch (error) { - console.error("Error in enqueueing conversion: ", error); - return false; - } - }; + // if (response && response.inference_job_token) { + // enqueueInferenceJob( + // response.inference_job_token, + // FrontendInferenceJobType.ConvertFbxtoGltf + // ); + // } + // return true; + // } else if (EnqueueFbxToGltfIsError(response)) { + // throw new Error("Enqueue failed"); + // } + // } catch (error) { + // console.error("Error in enqueueing conversion: ", error); + // return false; + // } + // }; return ( @@ -84,10 +83,10 @@ export default function FbxToGltfPage({ { From 47923888c1a07a645e24ee386f231e2bb57a37b2 Mon Sep 17 00:00:00 2001 From: BFlat Date: Thu, 14 Mar 2024 11:48:53 +0700 Subject: [PATCH 5/6] storyteller landing and dashboard update --- .../src/components/layout/SideNav/SideNav.tsx | 10 ++-- .../fakeyou.com/src/v2/view/PageContainer.tsx | 7 ++- .../v2/view/pages/dashboard/DashboardPage.tsx | 19 ++++++++ .../src/v2/view/pages/landing/LandingPage.tsx | 48 +++++++++---------- .../LandingVideoReel/LandingVideoReel.tsx | 28 ++++++++--- 5 files changed, 76 insertions(+), 36 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/pages/dashboard/DashboardPage.tsx diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx index a96377a081..e8c869b32f 100644 --- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx +++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx @@ -30,6 +30,8 @@ import { useInferenceJobs, useLocalize } from "hooks"; import { Logout } from "@storyteller/components/src/api/session/Logout"; import { Button } from "components/common"; import { WebUrl } from "common/WebUrl"; +import { DomainConfig, Website } from "utils/domainConfig"; +import { useDomainConfig } from "context/DomainConfigContext"; interface SideNavProps { sessionWrapper: SessionWrapper; @@ -56,6 +58,7 @@ export default function SideNav({ const isOnLoginPage = window.location.pathname.includes("/login"); const isOnSignUpPage = window.location.pathname.includes("/signup"); const isOnStudioPage = window.location.pathname.includes("/studio"); + const domain: DomainConfig = useDomainConfig(); let history = useHistory(); const handleNavLinkClick = () => { @@ -107,7 +110,8 @@ export default function SideNav({ const shouldNotShowSidebar = (!isLoggedIn && (isOnLandingPage || isOnLoginPage || isOnSignUpPage)) || - isOnStudioPage; + isOnStudioPage || + (domain.website === Website.StorytellerAi && isOnLandingPage); const shouldShowSidebar = windowWidth >= 992 && !shouldNotShowSidebar; const sidebarClassName = `sidebar ${ shouldShowSidebar ? "visible" : "" @@ -333,7 +337,7 @@ export default function SideNav({
  • @@ -341,7 +345,7 @@ export default function SideNav({ icon={faHome} className="sidebar-heading-icon" /> - Home + {domain.website === Website.FakeYou ? "Home" : "Dashboard"}
  • diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index d04313e233..df58a8d189 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -127,6 +127,7 @@ import DevTTS from "./pages/dev_tts/DevTTS"; import { StudioIntroPage } from "./pages/storyteller_studio_intro/StudioIntroPage"; import StudioVSTPage from "./pages/storyteller_studio_intro/StudioVST/StudioVSTPage"; import { StudioIntroResultPage } from "./pages/storyteller_studio_intro/StudioIntroResultPage"; +import DashboardPage from "./pages/dashboard/DashboardPage"; interface Props { sessionWrapper: SessionWrapper; @@ -727,6 +728,10 @@ class PageContainer extends React.Component< /> + + + + @@ -812,7 +817,7 @@ class PageContainer extends React.Component< - + {/* Route for initial voice creation */} + + + ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx index 01c1f8baf0..90c9f2442a 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx @@ -39,14 +39,17 @@ function LandingPage(props: Props) { const domain: DomainConfig = useDomainConfig(); - const webpageTitle = domain.website === Website.FakeYou ? "FakeYou Celebrity Voice Generator" : ""; + const webpageTitle = + domain.website === Website.FakeYou + ? "FakeYou Celebrity Voice Generator" + : ""; usePrefixedDocumentTitle(webpageTitle); const isLoggedIn = props.sessionWrapper.isLoggedIn(); // DO NOT LEAK THIS YET!! - let protectedStudioOnboarding = <> + let protectedStudioOnboarding = <>; if (props.sessionWrapper.canAccessStudio()) { protectedStudioOnboarding = ( @@ -58,8 +61,8 @@ function LandingPage(props: Props) { return ( <> - {domain.website === Website.StorytellerAi && !isLoggedIn && ( - + {domain.website === Website.StorytellerAi && ( + )} {domain.website === Website.FakeYou ? ( @@ -90,27 +93,22 @@ function LandingPage(props: Props) { ) : ( <> {/* STORYTELLER,AI */} - {!isLoggedIn ? ( - <> - {protectedStudioOnboarding} - - - - - - ) : ( - - )} + + {protectedStudioOnboarding} + + + + + + )} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.tsx index e526023967..e4b42c9658 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.tsx @@ -1,12 +1,26 @@ import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; import { Button } from "components/common"; -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import "./LandingVideoReel.scss"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { useLocation } from "react-router-dom"; -interface LandingVideoReelProps {} +interface LandingVideoReelProps { + sessionWrapper: SessionWrapper; +} -export default function LandingVideoReel(props: LandingVideoReelProps) { - const isOnLandingPage = window.location.pathname === "/"; +export default function LandingVideoReel({ + sessionWrapper, +}: LandingVideoReelProps) { + const location = useLocation(); + const [isOnLandingPage, setIsOnLandingPage] = useState( + window.location.pathname === "/" + ); + const isLoggedIn = sessionWrapper.isLoggedIn(); + + useEffect(() => { + setIsOnLandingPage(location.pathname === "/"); + }, [location]); useEffect(() => { const contentWrapper = document.getElementById("page-content-wrapper"); @@ -41,7 +55,7 @@ export default function LandingVideoReel(props: LandingVideoReelProps) { searchBar?.classList.remove("landing-search"); contentWrapper?.classList.remove("no-page-padding-top"); }; - }, [isOnLandingPage]); + }, [isOnLandingPage, isLoggedIn]); return (
    @@ -62,8 +76,8 @@ export default function LandingVideoReel(props: LandingVideoReelProps) {
    From bb204e5a9b2e516d598dba92c9cf4fde21580869 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Thu, 14 Mar 2024 07:25:13 -0400 Subject: [PATCH 6/6] set media class on game uploads --- .../src/api/enums/MediaFileClass.ts | 27 ++++++++++++++++++ .../useMediaUploader/useMediaUploader.tsx | 8 +++++- .../v2/view/pages/dev_upload/DevUpload.tsx | 28 ++++++++++++++++--- 3 files changed, 58 insertions(+), 5 deletions(-) create mode 100644 packages/components/src/api/enums/MediaFileClass.ts diff --git a/packages/components/src/api/enums/MediaFileClass.ts b/packages/components/src/api/enums/MediaFileClass.ts new file mode 100644 index 0000000000..69d222b55e --- /dev/null +++ b/packages/components/src/api/enums/MediaFileClass.ts @@ -0,0 +1,27 @@ + +export enum MediaFileClass { + /// Unknown (default value) + /// This will be present until we migrate all old files. + Unknown = "unknown", + + /// Audio files: wav, mp3, etc. + Audio = "audio", + + /// Image files: png, jpeg, etc. + Image = "image", + + /// Video files: mp4, etc. + Video = "video", + + /// Engine "animations" + Animation = "animation", + + /// Engine "characters" + Character = "character", + + /// Engine "prop" items + Prop = "prop", + + /// Engine scenes (internal and external scenes) + Scene = "scene", +} diff --git a/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx b/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx index 9ff5407cca..d33c224485 100644 --- a/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx +++ b/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx @@ -6,6 +6,7 @@ import { UploadMedia } from "@storyteller/components/src/api/media_files/UploadM import { UploadEngineAsset }from "@storyteller/components/src/api/media_files/UploadEngineAsset"; import { MediaFileSubtype } from "@storyteller/components/src/api/enums/MediaFileSubtype"; import { GetFileTypeByExtension as extension } from "@storyteller/components/src/utils/GetFileTypeByExtension"; +import { MediaFileClass } from "@storyteller/components/src/api/enums/MediaFileClass"; interface Props { autoUpload?: boolean, @@ -15,13 +16,14 @@ interface Props { const n = () => {}; export default function useMediaUploader({ autoUpload, onSuccess = n }: Props) { + const [mediaClass,mediaClassSet] = useState(MediaFileClass.Unknown); const [engineSubtype,engineSubtypeSet] = useState(); const createUpload = (inputFile: File, todo = n ) => { const fileExtension = extension(inputFile.name || ""); const isEngineAsset = isSelectedType(MediaFilters.engine_asset, fileExtension); const baseConfig = { uuid_idempotency_token: uuidv4(), file: inputFile }; - const engineConfig = { ...baseConfig, media_file_subtype: engineSubtype }; + const engineConfig = { ...baseConfig, media_file_subtype: engineSubtype, media_file_class: mediaClass }; const mediaConfig = { ...baseConfig, source: "file" }; const uploader = isEngineAsset ? UploadEngineAsset(engineConfig) : UploadMedia(mediaConfig); @@ -44,10 +46,14 @@ export default function useMediaUploader({ autoUpload, onSuccess = n }: Props) { const engineSubtypeChange = ({ target }: { target: any }) => engineSubtypeSet(target.value); + const mediaClassChange = ({ target }: { target: any }) => mediaClassSet(target.value); + return { clear, engineSubtype, engineSubtypeChange, + mediaClass, + mediaClassChange, file, inputProps, isAudio: isSelectedType(MediaFilters.audio, extension(file?.name || "")), diff --git a/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx b/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx index 22f65fd5f5..cfbc9a4168 100644 --- a/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevUpload.tsx @@ -5,13 +5,14 @@ import { Button, Container, Panel } from "components/common"; import { UploaderResponse } from "components/entities/EntityTypes"; import { faUpload } from "@fortawesome/pro-solid-svg-icons"; import { MediaFileSubtype } from "@storyteller/components/src/api/enums/MediaFileSubtype"; +import { MediaFileClass } from "@storyteller/components/src/api/enums/MediaFileClass"; import { Link } from "react-router-dom"; interface DevUploadProps {} export default function DevUpload(props: DevUploadProps) { const [tokens, tokensSet] = useState([]); - const { engineSubtype, engineSubtypeChange, file, inputProps, isEngineAsset, isVideo, upload } = useMediaUploader({ + const { engineSubtype, engineSubtypeChange, mediaClass, mediaClassChange, file, inputProps, isEngineAsset, isVideo, upload } = useMediaUploader({ onSuccess: (res: UploaderResponse) => tokensSet([res.media_file_token, ...tokens]) }); @@ -19,13 +20,32 @@ export default function DevUpload(props: DevUploadProps) { const { studioAccessCheck } = useSession(); let title = "Upload Generic File"; - let mediaFileSubtypeForm = <>; + let engineSubForm = <>; if (isVideo) { title = "Upload Video"; } if (isEngineAsset) { title = "Upload Engine Asset"; - mediaFileSubtypeForm = ( + engineSubForm = ( <> +
    + + +