From c82c403f8a059ba1e41e182024d6666e159d6fcb Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Thu, 25 Jul 2024 14:01:20 -0700
Subject: [PATCH] added mp4, gif, jpg, and png media file types to enums and
 list views

---
 packages/components/src/api/_common/enums/MediaFileType.ts   | 5 +++++
 .../fakeyou.com/src/components/common/Card/MediaCards.tsx    | 4 ++++
 .../src/components/entities/MediaList/MediaList.tsx          | 3 +++
 packages/fakeyou.com/src/utils/mediaTypeLabels.ts            | 4 ++++
 4 files changed, 16 insertions(+)

diff --git a/packages/components/src/api/_common/enums/MediaFileType.ts b/packages/components/src/api/_common/enums/MediaFileType.ts
index 791b8b1aab..75c920452b 100644
--- a/packages/components/src/api/_common/enums/MediaFileType.ts
+++ b/packages/components/src/api/_common/enums/MediaFileType.ts
@@ -37,4 +37,9 @@ export enum MediaFileType {
   Vmd = "vmd",
 
   None = "none",
+
+  Jpg = "jpg",
+  Png = "png",
+  Gif = "gif",
+  Mp4 = "mp4",
 }
diff --git a/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx b/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx
index 7748fe5247..fd52564073 100644
--- a/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx
@@ -21,6 +21,9 @@ export default function MediaCards({ props, type }: Props) {
   switch (type) {
     case "audio":
       return <AudioCard {...props} />;
+    case "gif":
+    case "jpg":
+    case "png":
     case "image":
       return <ImageCard {...props} />;
     case "bvh":
@@ -42,6 +45,7 @@ export default function MediaCards({ props, type }: Props) {
     case "vmd":
       // TODO(bt,2024-05-09): This is a temporary hack. ARKit files are uploaded as these
       return <ArKitCard {...props} />;
+    case "mp4":
     case "video":
       return <VideoCard {...props} key={`video-${keySuffix}`} />;
     default:
diff --git a/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx b/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
index eed8375fb3..9830051d74 100644
--- a/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
+++ b/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
@@ -25,12 +25,15 @@ const Cards = ({ props, type }: MediaCardsProps) => {
   switch (type) {
     case "audio":
       return <CardWrapper {...{ ...props, card: AudioCard, padding: true }} />;
+    case "gif":
     case "image":
+    case "jpg":
       return (
         <CardWrapper
           {...{ ...props, card: OverlayCard, preview: ImagePreview }}
         />
       );
+    case "mp4":
     case "video":
       return (
         <CardWrapper
diff --git a/packages/fakeyou.com/src/utils/mediaTypeLabels.ts b/packages/fakeyou.com/src/utils/mediaTypeLabels.ts
index 65c4447097..744ddceaa2 100644
--- a/packages/fakeyou.com/src/utils/mediaTypeLabels.ts
+++ b/packages/fakeyou.com/src/utils/mediaTypeLabels.ts
@@ -6,10 +6,14 @@ export const mediaTypeLabels = {
   [MediaFileType.Video]: "Video",
   [MediaFileType.Image]: "Image",
   [MediaFileType.BVH]: "BVH",
+  [MediaFileType.Gif]: "gif",
   [MediaFileType.GLB]: "GLB",
   [MediaFileType.GLTF]: "glTF",
+  [MediaFileType.Jpg]: "jpg",
+  [MediaFileType.Mp4]: "mp4",
   [MediaFileType.Pmd]: "PMD",
   [MediaFileType.Pmx]: "PMX",
+  [MediaFileType.Png]: "png",
   [MediaFileType.SceneRon]: "RON",
   [MediaFileType.SceneJson]: "Scene",
   [MediaFileType.FBX]: "FBX",