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({ {