RON card update

packages/fakeyou.com/src/components/common/Card/MediaCards.tsx

@@ -6,6 +6,7 @@ import BVHCard from "./BVHCard";
 import GLBCard from "./GLBCard";
 import GLTFCard from "./GLTFCard";
 import FBXCard from "./FBXCard";
+import SceneRonCard from "./SceneRonCard";
 
 interface Props {
   props: any;
@@ -26,6 +27,8 @@ export default function MediaCards({ props, type }: Props) {
       return <GLTFCard {...props} />;
     case "fbx":
       return <FBXCard {...props} />;
+    case "scene_ron":
+      return <SceneRonCard {...props} />;
     case "video":
       return <VideoCard {...props} />;
     default:

packages/fakeyou.com/src/components/common/Card/SceneRonCard/SceneRonCard.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Card from "../Card";
+import { CardFooter } from "components/entities";
+import useTimeAgo from "hooks/useTimeAgo";
+import Badge from "components/common/Badge";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCube } from "@fortawesome/pro-solid-svg-icons";
+import getCardUrl from "../getCardUrl";
+
+interface SceneRonCardProps {
+  bookmarks: any;
+  data: any;
+  ratings: any;
+  showCreator?: boolean;
+  source?: string;
+  type: "media" | "weights";
+}
+
+export default function SceneRonCard({
+  bookmarks,
+  data,
+  showCreator,
+  source = "",
+  ratings,
+  type,
+}: SceneRonCardProps) {
+  const linkUrl = getCardUrl(data, source, type);
+
+  const timeAgo = useTimeAgo(data.created_at);
+
+  return (
+    <Link
+      {...{
+        to: linkUrl,
+      }}
+    >
+      <Card padding={false} canHover={true}>
+        <div className="card-img d-flex align-items-center justify-content-center">
+          <FontAwesomeIcon icon={faCube} className="card-img-icon" />
+        </div>
+
+        <div className="card-img-overlay">
+          <div className="card-img-gradient" />
+
+          <div className="d-flex align-items-center">
+            <div className="d-flex flex-grow-1">
+              <Badge
+                {...{
+                  className: "fy-entity-type-scene_ron",
+                  label: "RON",
+                  overlay: true,
+                }}
+              />
+            </div>
+          </div>
+
+          <div className="card-img-overlay-text">
+            <div>
+              <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
+            </div>
+            <CardFooter
+              {...{
+                creator:
+                  data?.maybe_creator ||
+                  data.details?.maybe_media_file_data?.maybe_creator,
+                entityToken: data.details?.entity_token || data.token,
+                entityType: "scene_ron",
+                makeBookmarksProps: bookmarks?.makeProps,
+                makeRatingsProps: ratings?.makeProps,
+                showCreator,
+              }}
+            />
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}

packages/fakeyou.com/src/components/common/Card/SceneRonCard/index.ts

@@ -0,0 +1 @@
+export { default } from "./SceneRonCard";

packages/fakeyou.com/src/components/entities/CardWrapper/CardWrapper.scss

@@ -8,10 +8,27 @@
 // .fy-entity-type-glb { background-color: lime; }
 // .fy-entity-type-gltf { background-color: lime; }
 
-.fy-entity-type-audio { background-color: map-get($badge-colors,"teal"); }
-.fy-entity-type-image { background-color: map-get($badge-colors,"ultramarine"); }
-.fy-entity-type-video { background-color: map-get($badge-colors,"purple"); }
-.fy-entity-type-bvh { background-color: map-get($badge-colors,"pink"); }
-.fy-entity-type-fbx { background-color: map-get($badge-colors,"lime"); }
-.fy-entity-type-glb { background-color: map-get($badge-colors,"lime"); }
-.fy-entity-type-gltf { background-color: map-get($badge-colors,"lime"); }
+.fy-entity-type-audio {
+  background-color: map-get($badge-colors, "teal");
+}
+.fy-entity-type-image {
+  background-color: map-get($badge-colors, "ultramarine");
+}
+.fy-entity-type-video {
+  background-color: map-get($badge-colors, "purple");
+}
+.fy-entity-type-bvh {
+  background-color: map-get($badge-colors, "pink");
+}
+.fy-entity-type-fbx {
+  background-color: map-get($badge-colors, "lime");
+}
+.fy-entity-type-glb {
+  background-color: map-get($badge-colors, "lime");
+}
+.fy-entity-type-gltf {
+  background-color: map-get($badge-colors, "lime");
+}
+.fy-entity-type-scene_ron {
+  background-color: map-get($badge-colors, "lime");
+}

packages/fakeyou.com/src/utils/mediaTypeLabels.ts

@@ -0,0 +1,14 @@
+import { MediaFileType } from "@storyteller/components/src/api/_common/enums/MediaFileType";
+
+// THESE SHOULD BECOME A TRANSLATION STRINGS -- REPLACE LATER
+export const mediaTypeLabels = {
+  [MediaFileType.Audio]: "Audio",
+  [MediaFileType.Video]: "Video",
+  [MediaFileType.Image]: "Image",
+  [MediaFileType.BVH]: "BVH",
+  [MediaFileType.GLB]: "GLB",
+  [MediaFileType.GLTF]: "glTF",
+  [MediaFileType.SceneRon]: "RON",
+  [MediaFileType.FBX]: "FBX",
+  [MediaFileType.None]: "Unknown",
+};

packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx

@@ -37,6 +37,7 @@ import { WeightCategory } from "@storyteller/components/src/api/_common/enums/We
 import Iframe from "react-iframe";
 import SdBatchMediaPanel from "./components/SdBatchMediaPanel/SdBatchMediaPanel";
 import { GetMediaBatchImages } from "@storyteller/components/src/api/media_files/GetMediaBatchImages";
+import { mediaTypeLabels } from "utils/mediaTypeLabels";
 
 export default function MediaPage() {
   const { canEditTtsModel, user } = useSession();
@@ -264,7 +265,9 @@ export default function MediaPage() {
     }
   }
 
-  const mediaType = mediaFile?.media_type || ""; // THIS SHOULD BECOME A TRANSLATION STRING, THIS IS NOT DATA -V
+  const mediaType = mediaFile?.media_type
+    ? mediaTypeLabels[mediaFile?.media_type]
+    : "";
 
   let audioLink = new BucketConfig().getGcsUrl(mediaFile?.public_bucket_path);