added GLB card and views

packages/components/src/api/_common/enums/MediaFileType.ts

@@ -4,6 +4,7 @@ export enum MediaFileType {
   Image = "image",
   BVH = "bvh",
   GLTF = "gltf",
+  GLB = "glb",
   FBX = "fbx",
   None = "none",
 }

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

@@ -0,0 +1,112 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Card from "../Card";
+import useTimeAgo from "hooks/useTimeAgo";
+import Badge from "components/common/Badge";
+import LikeButton from "components/common/LikeButton";
+import CreatorName from "../CreatorName";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCube } from "@fortawesome/pro-solid-svg-icons";
+import getCardUrl from "../getCardUrl";
+import useMediaFileTypeInfo from "hooks/useMediaFileTypeInfo";
+
+interface GLBCardProps {
+  bookmarks: any;
+  data: any;
+  ratings: any;
+  showCreator?: boolean;
+  source?: string;
+  type: "media" | "weights";
+}
+
+export default function GLBCard({
+  bookmarks,
+  data,
+  showCreator,
+  source = "",
+  ratings,
+  type,
+}: GLBCardProps) {
+  const linkUrl = getCardUrl(data, source, type);
+
+  const handleInnerClick = (event: any) => {
+    event.stopPropagation();
+  };
+
+  const timeAgo = useTimeAgo(data.created_at);
+
+  const { label: mediaBadgeLabel, color: mediaBadgeColor } =
+    useMediaFileTypeInfo(
+      data.media_type || data.details?.maybe_media_data?.media_type
+    );
+
+  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
+                label={mediaBadgeLabel}
+                color={mediaBadgeColor}
+                overlay={true}
+              />
+            </div>
+          </div>
+
+          <div className="card-img-overlay-text">
+            <div>
+              <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
+            </div>
+
+            <hr className="my-2" />
+
+            <div
+              className="d-flex align-items-center gap-2"
+              onClick={handleInnerClick}
+            >
+              {showCreator && (
+                <div className="flex-grow-1">
+                  <CreatorName
+                    displayName={
+                      data.maybe_creator?.display_name || "Anonymous"
+                    }
+                    gravatarHash={data.maybe_creator?.gravatar_hash || null}
+                    avatarIndex={
+                      data.maybe_creator?.default_avatar.image_index || 0
+                    }
+                    backgroundIndex={
+                      data.maybe_creator?.default_avatar.color_index || 0
+                    }
+                    username={data.maybe_creator?.username || "anonymous"}
+                  />
+                </div>
+              )}
+
+              <div>
+                <LikeButton
+                  {...{
+                    ...ratings.makeProps({
+                      entityToken: data.token,
+                      entityType: "media_file",
+                    }),
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}

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

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

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

@@ -3,6 +3,7 @@ import AudioCard from "./AudioCard";
 import ImageCard from "./ImageCard";
 import VideoCard from "./VideoCard";
 import BVHCard from "./BVHCard";
+import GLBCard from "./GLBCard";
 import GLTFCard from "./GLTFCard";
 import FBXCard from "./FBXCard";
 
@@ -19,6 +20,8 @@ export default function MediaCards({ props, type }: Props) {
       return <ImageCard {...props} />;
     case "bvh":
       return <BVHCard {...props} />;
+    case "glb":
+      return <GLBCard {...props} />;
     case "gltf":
       return <GLTFCard {...props} />;
     case "fbx":

packages/fakeyou.com/src/components/entities/BvhCard/BvhCard.tsx

@@ -1,17 +1,21 @@
 import React from "react";
 import useTimeAgo from "hooks/useTimeAgo";
+import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
+import { MakeRatingsProps } from "hooks/useRatings";
 import { faPersonWalking } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
+import LikeButton from "components/common/LikeButton";
 import CreatorName from "components/common/Card/CreatorName";
 import Badge from "components/common/Badge";
 
 interface Props {
   data: any,
+  makeRatingsProps?: MakeRatingsProps,
   showCreator?: boolean
 }
 
 
-export default function BvhCard({ data, showCreator }: Props) {
+export default function BvhCard({ data, makeRatingsProps, showCreator }: Props) {
   const timeAgo = useTimeAgo(data.created_at);
   const handleInnerClick = (event: any) => event.stopPropagation();
   return <>
@@ -54,16 +58,16 @@ export default function BvhCard({ data, showCreator }: Props) {
             </div>
           )}
           {
-            // <div>
-            //   <LikeButton
-            //     {...{
-            //       ...ratings.makeProps({
-            //         entityToken: data.token,
-            //         entityType: "media_file",
-            //       }),
-            //     }}
-            //   />
-            // </div>
+            makeRatingsProps ? <div>
+              <LikeButton
+                {...{
+                  ...makeRatingsProps({
+                    entityToken: data.token,
+                    entityType: "media_file",
+                  }),
+                }}
+              />
+            </div> : null
           }
         </div>
       </div>

packages/fakeyou.com/src/hooks/useBatchContent/index.ts

@@ -1 +1,2 @@
-export { default } from "./useBatchContent";
+export { default } from "./useBatchContent";
+export type { BatchInputProps, MakePropsParams } from "./useBatchContent";

packages/fakeyou.com/src/hooks/useBatchContent/useBatchContent.tsx

@@ -24,6 +24,18 @@ interface Gather {
   res: any
 }
 
+type BatchToggle = (entity_token: string, entity_type: string) => boolean;
+
+export interface MakePropsParams { entityToken: string, entityType: string }
+
+export interface BatchInputProps {
+  busy: boolean,
+  entityToken: string,
+  entityType: string,
+  isToggled: boolean,
+  toggle: BatchToggle
+}
+
 export default function useBatchContent({
   checker,
   debug,
@@ -80,7 +92,7 @@ export default function useBatchContent({
     return newState;
   });
 
-  const toggle = (entity_token: string, entity_type: string) => {
+  const toggle: BatchToggle = (entity_token, entity_type) => {
     if (session.check()) {
       let inLibrary = library[entity_token];
       statusSet(FetchStatus.in_progress);
@@ -114,7 +126,7 @@ export default function useBatchContent({
 
   const toggled = ( entity_token = "" ) => toggleCheck(library[entity_token]);
 
-  const makeProps = ({ entityToken, entityType }: { entityToken: string, entityType: string }) => ({
+  const makeProps = ({ entityToken, entityType }: MakePropsParams) => ({
     busy: busyList[entityToken],
     entityToken,
     entityType,

packages/fakeyou.com/src/hooks/useMediaFileTypeInfo/useMediaFileTypeInfo.tsx

@@ -25,6 +25,10 @@ const mediaFileTypeInfo: MediaFileTypeInfo = {
     label: "glTF",
     color: "lime",
   },
+  [MediaFileType.GLTF]: {
+    label: "GLB",
+    color: "lime",
+  },
   [MediaFileType.FBX]: {
     label: "FBX",
     color: "lime",

packages/fakeyou.com/src/hooks/useRatings/index.ts

@@ -1 +1,2 @@
-export { default } from "./useRatings";
+export { default } from "./useRatings";
+export type { MakeRatingsProps } from "./useRatings";

packages/fakeyou.com/src/hooks/useRatings/useRatings.tsx

@@ -1,6 +1,12 @@
 import { GetRatings } from "@storyteller/components/src/api/user_ratings/GetRatings";
 import { SetRating } from "@storyteller/components/src/api/user_ratings/SetRating";
-import { useBatchContent } from "hooks";
+import useBatchContent, { BatchInputProps, MakePropsParams } from "hooks/useBatchContent";
+
+export interface RatingsProps extends BatchInputProps {
+  likeCount: 0
+}
+
+export type MakeRatingsProps = (x: MakePropsParams) => RatingsProps;
 
 export default function useRatings() {
   const fetch = (entity_token: string, entity_type: string, lib: any) => {
@@ -40,11 +46,13 @@ export default function useRatings() {
     toggleCheck: (entity: any) => (entity?.rating_value || "") === "positive"
   });
 
+  const makeProps: MakeRatingsProps = ({ entityToken, entityType }: MakePropsParams) => ({
+    ...ratings.makeProps({ entityToken, entityType }),
+    likeCount: ratings.library[entityToken]?.positive_rating_count || 0,
+  });
+
   return {
     ...ratings,
-    makeProps: ({ entityToken, entityType }: { entityToken: string, entityType: string }) => ({
-      ...ratings.makeProps({ entityToken, entityType }),
-      likeCount: ratings.library[entityToken]?.positive_rating_count || 0,
-    })
+    makeProps
   }
 };

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

@@ -106,6 +106,16 @@ export default function MediaPage() {
             }}
           />
         );
+      case MediaFileType.GLB:
+        const glbUrl = bucketConfig.getGcsUrl(mediaFile.public_bucket_path);
+        return (
+          <Iframe
+            {...{
+              url: `https://engine.fakeyou.com?mode=viewer&gltf=${glbUrl}`,
+              className: "fy-studio-frame",
+            }}
+          />
+        );
       case MediaFileType.GLTF:
         const gltfUrl = bucketConfig.getGcsUrl(mediaFile.public_bucket_path);
         return (
@@ -258,49 +268,7 @@ export default function MediaPage() {
     },*/
   ];
 
-  const videoDetails = [
-    { property: "Type", value: mediaFile?.media_type || "" },
-    {
-      property: "Visibility",
-      value: mediaFile?.creator_set_visibility.toString() || "",
-    },
-    { property: "Created at", value: dateCreated || "" },
-  ];
-
-  const imageDetails = [
-    { property: "Type", value: mediaFile?.media_type || "" },
-    {
-      property: "Visibility",
-      value: mediaFile?.creator_set_visibility.toString() || "",
-    },
-    { property: "Created at", value: dateCreated || "" },
-  ];
-
-  const bvhDetails = [
-    {
-      property: "Type",
-      value: mediaType || "",
-    },
-    {
-      property: "Visibility",
-      value: mediaFile?.creator_set_visibility.toString() || "",
-    },
-    { property: "Created at", value: dateCreated || "" },
-  ];
-
-  const gltfDetails = [
-    {
-      property: "Type",
-      value: mediaType || "",
-    },
-    {
-      property: "Visibility",
-      value: mediaFile?.creator_set_visibility.toString() || "",
-    },
-    { property: "Created at", value: dateCreated || "" },
-  ];
-
-  const fbxDetails = [
+  const defaultDetails = [
     {
       property: "Type",
       value: mediaType || "",
@@ -318,22 +286,9 @@ export default function MediaPage() {
     case MediaFileType.Audio:
       mediaDetails = audioDetails;
       break;
-    case MediaFileType.Video:
-      mediaDetails = videoDetails;
-      break;
-    case MediaFileType.Image:
-      mediaDetails = imageDetails;
-      break;
-    case MediaFileType.BVH:
-      mediaDetails = bvhDetails;
-      break;
-    case MediaFileType.GLTF:
-      mediaDetails = gltfDetails;
-      break;
-    case MediaFileType.FBX:
-      mediaDetails = fbxDetails;
-      break;
     default:
+      mediaDetails = defaultDetails;
+      break
   }
 
   let modMediaDetails = undefined;