media card simplication

packages/fakeyou.com/src/components/common/index.tsx

@@ -15,6 +15,7 @@ import FileLabel from "./FileLabel";
 import ImageInput from "./ImageInput";
 import Input from "./Input";
 import Label from "./Label";
+import LikeButton from "./LikeButton";
 import MocapInput from "./MocapInput";
 import Modal from "./Modal";
 import NumberSlider from "./NumberSlider";
@@ -56,6 +57,7 @@ export {
   ImageInput,
   Input,
   Label,
+  LikeButton,
   MocapInput,
   Modal,
   NumberSlider,

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

@@ -1,10 +1,33 @@
-import React from 'react';
-// import { CardWrapper } from "components/entities";
+import React from "react";
+import moment from "moment";
+import { MakeRatingsProps } from "hooks/useRatings";
+import AudioPlayer from "components/common/AudioPlayer";
+import CardBadge from "../CardBadge";
+import CardFooter from "../CardFooter";
 
 interface Props {
-  value?: any;
+  data: any,
+  makeRatingsProps?: MakeRatingsProps,
+  showCreator?: boolean
 }
 
-export default function AudioCard({ value }: Props) {
-  return {};
+export default function AudioCard({ data, makeRatingsProps, showCreator }: Props) {
+  const { created_at, media_type, public_bucket_path, origin: entityOrigin, token } = data || {}
+  const timeCreated = moment( created_at || "").fromNow();
+  return  <>
+      <div {...{ className: "mb-3" }}>
+        <CardBadge {...{ className: `fy-entity-type${ media_type ? "-" + media_type : "" }`, label: media_type }}/>
+        <h6 {...{ className: "fw-semibold text-white mb-1 mt-3" }}>
+          { entityOrigin.maybe_model ? entityOrigin.maybe_model.title : "Media Audio" }
+        </h6>
+        <p {...{ className: "fs-7 opacity-75" }}>{ timeCreated }</p>
+      </div>
+      <AudioPlayer {...{ src: public_bucket_path, id: `fy-audio-card-${token}` }}/>
+      <CardFooter {...{
+        creator: data?.maybe_creator, 
+        entityToken: data.token,
+        entityType: "media_file",
+        makeRatingsProps
+      }}/>
+    </>;
 };

packages/fakeyou.com/src/components/entities/AudioCard/index.tsx

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

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

@@ -1,62 +0,0 @@
-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 LikeButton from "components/common/LikeButton";
-import CreatorName from "components/common/Card/CreatorName";
-
-interface Props {
-  data: any,
-  makeRatingsProps?: MakeRatingsProps,
-  showCreator?: boolean
-}
-
-
-export default function BvhCard({ data, makeRatingsProps, showCreator }: Props) {
-  const timeAgo = useTimeAgo(data.created_at);
-  const handleInnerClick = (event: any) => event.stopPropagation();
-  return <>
-    <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>
-        )}
-        {
-          makeRatingsProps ? <div>
-            <LikeButton
-              {...{
-                ...makeRatingsProps({
-                  entityToken: data.token,
-                  entityType: "media_file",
-                }),
-              }}
-            />
-          </div> : null
-        }
-      </div>
-    </div>
-  </>;
-};

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

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { Badge } from "components/common";
+
+export default function CardBadge(props: any) {
+  return <div className="d-flex align-items-center">
+  <div className="d-flex flex-grow-1">
+    <Badge {...props} />
+  </div>
+</div>;
+};

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { MakeRatingsProps } from "hooks/useRatings";
+import LikeButton from "components/common/LikeButton";
+import CreatorName from "components/common/Card/CreatorName";
+
+interface CardFooterProps {
+  creator?: any,
+  entityToken: string,
+  entityType: string,
+  makeRatingsProps?: MakeRatingsProps,
+  showCreator?: boolean
+}
+
+export default function CardFooter({ creator, entityToken, entityType, makeRatingsProps, showCreator }: CardFooterProps) {
+  const { default_avatar, display_name, gravatar_hash, username } = creator || {};
+  return <>
+    { (showCreator || makeRatingsProps) && <hr className="my-2" /> }
+    <div {...{ className: "fy-card-footer" }}>
+      { showCreator && (
+        <div className="flex-grow-1">
+          <CreatorName {...{
+            avatarIndex: default_avatar?.image_index || 0,
+            backgroundIndex: default_avatar?.color_index || 0,
+            displayName: display_name || "Anonymous",
+            gravatarHash: gravatar_hash || null,
+            username
+          }} />
+        </div>
+      )}
+      {
+        makeRatingsProps ? <div>
+          <LikeButton {...makeRatingsProps({ entityToken, entityType })} />
+        </div> : null
+      }
+    </div>
+  </>;
+};

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
+import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome"; // for now
+import { faPersonWalking } from "@fortawesome/pro-solid-svg-icons";
+
+export const ImagePreview = ({ data }: { data: any }) => {
+  const bucketConfig = new BucketConfig();
+  const coverImage = bucketConfig.getCdnUrl(data.public_bucket_path, 600, 100);
+
+  return <img {...{ alt: data.weight_name, className: "card-img", src: coverImage }} />;
+};
+
+export const VideoPreview = ({ data }: { data: any }) => {
+
+  const { default_cover, maybe_cover_image_public_bucket_path } = data?.cover_image || {};
+
+  const bucketConfig = new BucketConfig();
+  //video doesnt have random cover image endpoint or thumbnails yet
+  let coverImage = `/images/default-covers/${ default_cover?.image_index || 0  }.webp`;
+
+  if (maybe_cover_image_public_bucket_path) {
+    coverImage = bucketConfig.getCdnUrl(maybe_cover_image_public_bucket_path, 600, 100);
+  }
+
+  return <img {...{ alt: data.weight_name, className: "card-video", src: coverImage }} />;
+};
+
+export const MocapPreview = () => <Icon {...{ className: "card-img", icon: faPersonWalking }}/>;
+
+// export const ImagePreview = previwImg("card-img");
+// export const VideoPreview = previwImg("card-video");

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { Badge } from "components/common";
 import getCardUrl from "components/common/Card/getCardUrl";
 import "./CardWrapper.scss";
 
@@ -15,38 +14,16 @@ interface Props {
   type: "media" | "weights"
 }
 
-const CardBadge = (props: any) => <div className="d-flex align-items-center">
-  <div className="d-flex flex-grow-1">
-    <Badge {...props} />
-  </div>
-</div>;
-
-const CardFrame = ({ data, children, preview: Preview }: { data: any, children: any, preview: React.ElementType }) => {
-  // const Preview = preview;
-  // console.log("🎈",preview);
-  return <>
-  <Preview />
-  <div {...{ className: "JUICY card-img-overlay" }}>
-    <div className="card-img-gradient" />
-    <CardBadge {...{ className: `abcxyz fy-entity-type${ data.media_type ? "-" + data.media_type : "" }`, label: data.media_type }}/>
-  </div>
-  { children }
-</>};
-
-export default function CardWrapper({ canHover, card: Card, data, onClick, padding, preview, source = "", type, ...rest }: Props) {
+export default function CardWrapper({ canHover, card: Card, data, onClick, padding, source = "", type, ...rest }: Props) {
   const linkUrl = getCardUrl(data,source,type);
   const cardProps = { data, source, type, ...rest }
   const className = `card ${ padding ? "p-3" : "" }${ onClick || canHover ? " card-clickable" : ""  }`;
-console.log("😎",preview);
+
   return onClick ?
   <div {...{ className, onClick }}>
-    <CardFrame {...{ data, preview }}>
-      <Card { ...cardProps }/>
-    </CardFrame>
+    <Card { ...cardProps }/>
   </div> : 
   <Link {...{ className, to: linkUrl }}>
-    <CardFrame {...{ data, preview }}>
-      <Card {...cardProps}/> 
-    </CardFrame>
+    <Card { ...cardProps }/>
   </Link>;
 };

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

@@ -2,13 +2,9 @@ import React, { useRef } from "react";
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 // import MediaCards from "components/common/Card/MediaCards";
-import AudioCard from "components/common/Card/AudioCard";
-import ImageCard from "components/common/Card/ImageCard";
-import VideoCard from "components/common/Card/VideoCard";
-import { BvhCard, CardWrapper } from "components/entities";
-
-import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome"; // for now
-import { faPersonWalking } from "@fortawesome/pro-solid-svg-icons";
+// import AudioCard from "components/common/Card/AudioCard";
+import { ImagePreview, MocapPreview, VideoPreview } from '../CardPreviews';
+import { AudioCard, OverlayCard, CardWrapper } from "components/entities";
 
 interface MediaCardsProps {
   props: any,
@@ -20,18 +16,16 @@ interface Props {
   success?: boolean
 }
 
-const MocapPreview = () => <Icon {...{ className: "card-img", icon: faPersonWalking }}/>;
-
 const MediaCards = ({ props, type }: MediaCardsProps) => {
   switch (type) {
     case "audio":
-      return <AudioCard {...props} />;
+      return <CardWrapper {...{ ...props, card: AudioCard, padding: true }}/>;
     case "image":
-      return <ImageCard {...props} />;
+      return <CardWrapper {...{ ...props, card: OverlayCard, preview: ImagePreview }}/>;
     case "video":
-      return <VideoCard {...props} />;
+      return <CardWrapper {...{ ...props, card: OverlayCard, preview: VideoPreview }}/>;
     case "bvh":
-      return <CardWrapper {...{ ...props, card: BvhCard, preview: MocapPreview }}/>
+      return <CardWrapper {...{ ...props, card: OverlayCard, preview: MocapPreview }}/>;
     default:
       return <div>Unsupported media type</div>;
   }

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

@@ -0,0 +1,36 @@
+import React from "react";
+import moment from "moment";
+import { MakeRatingsProps } from "hooks/useRatings";
+import CardBadge from "../CardBadge";
+import CardFooter from "../CardFooter";
+
+interface Props {
+  data: any,
+  makeRatingsProps?: MakeRatingsProps,
+  preview: React.ElementType,
+  showCreator?: boolean
+}
+
+export default function OverlayCard({ data, makeRatingsProps, preview: Preview, showCreator }: Props) {
+  const timeCreated = moment(data.created_at || "").fromNow();
+
+  return <>
+    <Preview {...{ data }}/>
+    <div {...{ className: "card-img-overlay" }}>
+      <div className="card-img-gradient" />
+      <CardBadge {...{ className: `fy-entity-type${ data.media_type ? "-" + data.media_type : "" }`, label: data.media_type }}/>
+    </div>
+    <div className="card-img-overlay-text">
+      <div>
+        <p className="fs-7 opacity-75 mb-0">{ timeCreated }</p>
+      </div>
+      <CardFooter {...{
+        creator: data?.maybe_creator, 
+        entityToken: data.token,
+        entityType: "media_file",
+        makeRatingsProps,
+        showCreator
+      }}/>
+    </div>
+  </>;
+};

packages/fakeyou.com/src/components/entities/OverlayCard/index.tsx

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

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

@@ -1,5 +1,6 @@
-import BvhCard from "./BvhCard";
+import AudioCard from "./AudioCard";
 import CardWrapper from "./CardWrapper";
 import MediaList from "./MediaList";
+import OverlayCard from "./OverlayCard";
 
-export { BvhCard, CardWrapper, MediaList };
+export { AudioCard, CardWrapper, MediaList, OverlayCard };