From 85a5bc75162d2b87f75f6270146f1bff9d58ac3b Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Wed, 8 May 2024 11:46:48 -0700
Subject: [PATCH] added SceneJSON cards for displaying Engine Scenes

---
 .../src/components/common/Card/MediaCards.tsx |  3 +
 .../Card/SceneJSONCard/SceneJSONCard.tsx      | 94 +++++++++++++++++++
 .../common/Card/SceneJSONCard/index.ts        |  1 +
 3 files changed, 98 insertions(+)
 create mode 100644 packages/fakeyou.com/src/components/common/Card/SceneJSONCard/SceneJSONCard.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Card/SceneJSONCard/index.ts

diff --git a/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx b/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx
index 47c6b4f775..7d7f568f1b 100644
--- a/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx
@@ -7,6 +7,7 @@ import GLBCard from "./GLBCard";
 import GLTFCard from "./GLTFCard";
 import FBXCard from "./FBXCard";
 import SceneRonCard from "./SceneRonCard";
+import SceneJSONCard from "./SceneJSONCard";
 
 interface Props {
   props: any;
@@ -29,6 +30,8 @@ export default function MediaCards({ props, type }: Props) {
       return <FBXCard {...props} />;
     case "scene_ron":
       return <SceneRonCard {...props} />;
+    case "scene_json":
+      return <SceneJSONCard {...props} />;
     case "video":
       return <VideoCard {...props} />;
     default:
diff --git a/packages/fakeyou.com/src/components/common/Card/SceneJSONCard/SceneJSONCard.tsx b/packages/fakeyou.com/src/components/common/Card/SceneJSONCard/SceneJSONCard.tsx
new file mode 100644
index 0000000000..3e6c324c6f
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Card/SceneJSONCard/SceneJSONCard.tsx
@@ -0,0 +1,94 @@
+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 getCardUrl from "../getCardUrl";
+import { GetMediaFileTitle } from "common/GetMediaFileTitle";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
+
+interface SceneRonCardProps {
+  bookmarks: any;
+  data: any;
+  ratings: any;
+  showCreator?: boolean;
+  source?: string;
+  type: "media" | "weights";
+}
+
+export default function SceneJSONCard({
+  bookmarks,
+  data,
+  showCreator,
+  source = "",
+  ratings,
+  type,
+}: SceneRonCardProps) {
+  const linkUrl = getCardUrl(data, source, type);
+
+  const timeAgo = useTimeAgo(data.created_at);
+
+  const title = GetMediaFileTitle(data);
+
+  const bucketConfig = new BucketConfig();
+
+  let coverImage = `/images/default-covers/${
+    data?.cover_image?.default_cover.image_index || 0
+  }.webp`;
+
+  if (data?.cover_image?.maybe_cover_image_public_bucket_path) {
+    coverImage = bucketConfig.getCdnUrl(
+      data.cover_image.maybe_cover_image_public_bucket_path,
+      600,
+      100
+    );
+  }
+
+  return (
+    <Link
+      {...{
+        to: linkUrl,
+      }}
+    >
+      <Card padding={false} canHover={true}>
+        <img src={coverImage} alt={data.maybe_title} className="card-img" />
+
+        <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: "Scene",
+                  overlay: true,
+                }}
+              />
+            </div>
+          </div>
+
+          <div className="card-img-overlay-text">
+            <div>
+              <h6 className="fw-semibold text-white mb-1 mt-3">{title}</h6>
+              <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_json",
+                makeBookmarksProps: bookmarks?.makeProps,
+                makeRatingsProps: ratings?.makeProps,
+                showCreator,
+              }}
+            />
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/Card/SceneJSONCard/index.ts b/packages/fakeyou.com/src/components/common/Card/SceneJSONCard/index.ts
new file mode 100644
index 0000000000..4863afa092
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Card/SceneJSONCard/index.ts
@@ -0,0 +1 @@
+export { default } from "./SceneJSONCard";