From 49921e356dbd76850c3266b5977d9c05fa7aa2d8 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Wed, 17 Apr 2024 16:15:26 -0700
Subject: [PATCH] updated 3d asset cards to show cover/default images

---
 .../common/Card/BVHCard/BVHCard.tsx           | 22 ++++++++++++------
 .../common/Card/FBXCard/FBXCard.tsx           | 22 +++++++++++++-----
 .../common/Card/GLBCard/GLBCard.tsx           | 23 ++++++++++++++-----
 .../common/Card/GLTFCard/GLTFCard.tsx         | 21 +++++++++++++----
 .../common/Card/SceneRonCard/SceneRonCard.tsx | 21 +++++++++++++----
 5 files changed, 80 insertions(+), 29 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/Card/BVHCard/BVHCard.tsx b/packages/fakeyou.com/src/components/common/Card/BVHCard/BVHCard.tsx
index 83029e705f..4cc65e672e 100644
--- a/packages/fakeyou.com/src/components/common/Card/BVHCard/BVHCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/BVHCard/BVHCard.tsx
@@ -4,10 +4,9 @@ import Card from "../Card";
 import useTimeAgo from "hooks/useTimeAgo";
 import Badge from "components/common/Badge";
 import { CardFooter } from "components/entities";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPersonWalking } from "@fortawesome/pro-solid-svg-icons";
 import getCardUrl from "../getCardUrl";
 import { GetMediaFileTitle } from "common/GetMediaFileTitle";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 
 interface BVHCardProps {
   bookmarks: any;
@@ -35,15 +34,24 @@ export default function BVHCard({
 
   const Wrapper = ({ children }: { children: any }) => inClick ? <div {...{ onClick: () => { inClick(data) } }}>{ children }</div> : <Link {...{ to: linkUrl  }}>{ children }</Link>;
 
-  // const bucketConfig = new BucketConfig();
+  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 (
     <Wrapper>
       <Card padding={false} canHover={true}>
-        <div className="card-img d-flex align-items-center justify-content-center">
-          <FontAwesomeIcon icon={faPersonWalking} className="card-img-icon" />
-        </div>
-
+        <img src={coverImage} alt={data.maybe_title} className="card-img" />
         <div className="card-img-overlay">
           <div className="card-img-gradient" />
 
diff --git a/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx b/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx
index 942aef323c..490d8d2bb7 100644
--- a/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx
@@ -4,9 +4,8 @@ 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";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 
 interface FBXCardProps {
   bookmarks: any;
@@ -29,6 +28,20 @@ export default function FBXCard({
 
   const timeAgo = useTimeAgo(data.created_at);
 
+  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
       {...{
@@ -36,10 +49,7 @@ export default function FBXCard({
       }}
     >
       <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>
-
+        <img src={coverImage} alt={data.maybe_title} className="card-img" />
         <div className="card-img-overlay">
           <div className="card-img-gradient" />
 
diff --git a/packages/fakeyou.com/src/components/common/Card/GLBCard/GLBCard.tsx b/packages/fakeyou.com/src/components/common/Card/GLBCard/GLBCard.tsx
index 094ad76ffb..d4cc6a8fec 100644
--- a/packages/fakeyou.com/src/components/common/Card/GLBCard/GLBCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/GLBCard/GLBCard.tsx
@@ -4,10 +4,9 @@ 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";
 import { GetMediaFileTitle } from "common/GetMediaFileTitle";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 
 interface GLBCardProps {
   bookmarks: any;
@@ -26,12 +25,27 @@ export default function GLBCard({
   ratings,
   type,
 }: GLBCardProps) {
+
   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
       {...{
@@ -39,10 +53,7 @@ export default function GLBCard({
       }}
     >
       <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>
-
+        <img src={coverImage} alt={data.maybe_title} className="card-img" />
         <div className="card-img-overlay">
           <div className="card-img-gradient" />
 
diff --git a/packages/fakeyou.com/src/components/common/Card/GLTFCard/GLTFCard.tsx b/packages/fakeyou.com/src/components/common/Card/GLTFCard/GLTFCard.tsx
index 27b5952f9b..5f53da9994 100644
--- a/packages/fakeyou.com/src/components/common/Card/GLTFCard/GLTFCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/GLTFCard/GLTFCard.tsx
@@ -4,10 +4,9 @@ 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";
 import { GetMediaFileTitle } from "common/GetMediaFileTitle";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 
 interface GLTFCardProps {
   bookmarks: any;
@@ -32,6 +31,20 @@ export default function GLTFCard({
 
   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
       {...{
@@ -39,9 +52,7 @@ export default function GLTFCard({
       }}
     >
       <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>
+        <img src={coverImage} alt={data.maybe_title} className="card-img" />
 
         <div className="card-img-overlay">
           <div className="card-img-gradient" />
diff --git a/packages/fakeyou.com/src/components/common/Card/SceneRonCard/SceneRonCard.tsx b/packages/fakeyou.com/src/components/common/Card/SceneRonCard/SceneRonCard.tsx
index d9bcb85a96..a0ec21d151 100644
--- a/packages/fakeyou.com/src/components/common/Card/SceneRonCard/SceneRonCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/SceneRonCard/SceneRonCard.tsx
@@ -4,10 +4,9 @@ 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";
 import { GetMediaFileTitle } from "common/GetMediaFileTitle";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 
 interface SceneRonCardProps {
   bookmarks: any;
@@ -32,6 +31,20 @@ export default function SceneRonCard({
 
   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
       {...{
@@ -39,9 +52,7 @@ export default function SceneRonCard({
       }}
     >
       <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>
+        <img src={coverImage} alt={data.maybe_title} className="card-img" />
 
         <div className="card-img-overlay">
           <div className="card-img-gradient" />