set media class on game uploads

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",
+}

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>(MediaFileClass.Unknown);
   const [engineSubtype,engineSubtypeSet] = useState<MediaFileSubtype | undefined>();
 
   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 || "")),

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<string[]>([]);
-  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 = (
       <>
+        <div className="mb-3">
+          <label htmlFor="fileClassSelect" className="form-label">Media Class</label>
+          <select 
+            onChange={mediaClassChange}
+            className="form-select" 
+            aria-label="Default select example" 
+            id="fileClassSelect"
+            value={mediaClass}
+          >
+            <option value={MediaFileClass.Unknown}>Unknown</option>
+            <option value={MediaFileClass.Audio}>Audio</option>
+            <option value={MediaFileClass.Image}>Image</option>
+            <option value={MediaFileClass.Video}>Video</option>
+            <option value={MediaFileClass.Animation}>Animation</option>
+            <option value={MediaFileClass.Character}>Character</option>
+            <option value={MediaFileClass.Prop}>Prop</option>
+            <option value={MediaFileClass.Scene}>Scene</option>
+          </select>
+        </div>
         <div className="mb-3">
           <label htmlFor="fileSubtypeSelect" className="form-label">Engine Media File Subtype</label>
           <select 
@@ -68,7 +88,7 @@ export default function DevUpload(props: DevUploadProps) {
             }}/>
           </div>
 
-          {mediaFileSubtypeForm}
+          {engineSubForm}
 
           <div className="d-flex gap-3 justify-content-end">
             <Button