fbx to gltf page additions

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);

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`;

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;

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<MediaFileSubtype | undefined>();
 
   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);
 

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<string[]>([]);
   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;

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 (
     <Container type="panel">
@@ -84,10 +83,10 @@ export default function FbxToGltfPage({
           <EntityInput {...{
             accept: ["fbx"],
             aspectRatio: "landscape",
-            label: "Choose entity",
+            label: "Choose FBX file",
             name: "mediaToken",
             onChange,
-            owner: "echelon",
+            // owner: "echelon",
             type: "media"
           }}/>
           {