Merge pull request #442 from storytold/bflat-fy-weights-page-changes

weight and media page updates to align design

packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.scss

@@ -3,7 +3,7 @@
 .cover-img {
   overflow: hidden;
   border-radius: 0.5rem;
-  border: 2px solid rgba($white, 0.3);
+  border: 2px solid rgba($white, 0.2);
   margin-right: 12px;
   position: relative;
 

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

@@ -1,7 +1,7 @@
 import React from "react";
 import "./WeightCoverImage.scss";
 
-interface AudioWeightCoverImageProps {
+interface WeightCoverImageProps {
   src: string;
   alt?: string;
   height?: number;
@@ -13,7 +13,7 @@ export default function WeightCoverImage({
   alt,
   height = 100,
   width = 100,
-}: AudioWeightCoverImageProps) {
+}: WeightCoverImageProps) {
   const containerStyle = {
     height: `${height}px`,
     width: `${width}px`,

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

@@ -25,10 +25,11 @@ import {
 import Accordion from "components/common/Accordion";
 import DataTable from "components/common/DataTable";
 import { Gravatar } from "@storyteller/components/src/elements/Gravatar";
-import useTimeAgo from "hooks/useTimeAgo";
 import { CommentComponent } from "v2/view/_common/comments/CommentComponent";
 import { MediaFileType } from "@storyteller/components/src/api/_common/enums/MediaFileType";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
+import moment from "moment";
+import WeightCoverImage from "components/common/WeightCoverImage";
 
 interface MediaPageProps {
   sessionWrapper: SessionWrapper;
@@ -36,11 +37,13 @@ interface MediaPageProps {
 
 export default function MediaPage({ sessionWrapper }: MediaPageProps) {
   const { token } = useParams<{ token: string }>();
-  const [mediaFile, setMediaFile] = useState<MediaFile | undefined | null>(null);
+  const [mediaFile, setMediaFile] = useState<MediaFile | undefined | null>(
+    null
+  );
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<boolean>(false);
-
-  const timeCreated = useTimeAgo(mediaFile?.created_at.toISOString() || "");
+  const timeCreated = moment(mediaFile?.created_at || "").fromNow();
+  const dateCreated = moment(mediaFile?.created_at || "").format("LLL");
 
   const getMediaFile = useCallback(async (mediaFileToken: string) => {
     let result = await GetMediaFile(mediaFileToken);
@@ -171,7 +174,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
 
   const audioDetails = [
     { property: "Type", value: mediaFile.media_type },
-    { property: "Created at", value: mediaFile.created_at.toString() },
+    { property: "Created at", value: dateCreated || "" },
     {
       property: "Visibility",
       value: mediaFile.creator_set_visibility.toString(),
@@ -196,7 +199,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
 
   const videoDetails = [
     { property: "Type", value: mediaFile.media_type },
-    { property: "Created at", value: mediaFile.created_at.toString() },
+    { property: "Created at", value: dateCreated || "" },
     {
       property: "Visibility",
       value: mediaFile.creator_set_visibility.toString(),
@@ -205,7 +208,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
 
   const imageDetails = [
     { property: "Type", value: mediaFile.media_type },
-    { property: "Created at", value: mediaFile.created_at.toString() },
+    { property: "Created at", value: dateCreated || "" },
     {
       property: "Visibility",
       value: mediaFile.creator_set_visibility.toString(),
@@ -266,7 +269,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
               {renderMediaComponent(mediaFile)}
             </div>
 
-            <div className="panel p-3 py-4 p-md-4 mt-4 d-none d-xl-block">
+            <div className="panel p-3 py-4 p-md-4 mt-3 d-none d-xl-block">
               <h4 className="fw-semibold mb-3">Comments</h4>
               <CommentComponent
                 entityType="user"
@@ -276,29 +279,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
             </div>
           </div>
           <div className="col-12 col-xl-4">
-            <div className="panel panel-clear d-flex flex-column gap-4">
-              <div className="d-flex gap-2">
-                <Gravatar
-                  size={48}
-                  username={mediaFile.maybe_creator_user?.display_name}
-                  avatarIndex={
-                    mediaFile.maybe_creator_user?.default_avatar.image_index
-                  }
-                  backgroundIndex={
-                    mediaFile.maybe_creator_user?.default_avatar.color_index
-                  }
-                />
-                <div className="d-flex flex-column">
-                  <Link
-                    className="fw-medium"
-                    to={`/profile/${mediaFile.maybe_creator_user?.display_name}`}
-                  >
-                    {mediaFile.maybe_creator_user?.display_name}
-                  </Link>
-                  {timeCreated}
-                </div>
-              </div>
-
+            <div className="panel panel-clear d-flex flex-column gap-3">
               <div className="d-flex gap-2 flex-wrap">
                 <Button
                   icon={faArrowDownToLine}
@@ -308,7 +289,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
                   download={audioLink}
                 />
                 {/* Share and Create Buttons */}
-                 {/* 
+                {/* 
                 <div className="d-flex gap-2">
                   <Button
                     square={true}
@@ -327,14 +308,72 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
                   /> 
                 </div> */}
               </div>
-              {  mediaFile.media_type === MediaFileType.Audio ? 
-                <Button {...{ 
-                  icon: faFaceViewfinder,
-                  label: "Use audio in Face Animator",
-                  to: `/face-animator/${ mediaFile.token }`,
-                  variant: "secondary"
-                }}/> : null
-              }
+
+              {mediaFile.media_type === MediaFileType.Audio ? (
+                <Button
+                  {...{
+                    icon: faFaceViewfinder,
+                    label: "Use audio in Face Animator",
+                    to: `/face-animator/${mediaFile.token}`,
+                    variant: "secondary",
+                  }}
+                />
+              ) : null}
+
+              <Panel className="rounded">
+                <div className="d-flex gap-2 p-3">
+                  <Gravatar
+                    size={48}
+                    username={mediaFile.maybe_creator_user?.username || ""}
+                    email_hash={
+                      mediaFile.maybe_creator_user?.gravatar_hash || ""
+                    }
+                    avatarIndex={
+                      mediaFile.maybe_creator_user?.default_avatar
+                        .image_index || 0
+                    }
+                    backgroundIndex={
+                      mediaFile.maybe_creator_user?.default_avatar
+                        .color_index || 0
+                    }
+                  />
+                  <div className="d-flex flex-column">
+                    {mediaFile.maybe_creator_user?.display_name ? (
+                      <Link
+                        className="fw-medium"
+                        to={`/profile/${mediaFile.maybe_creator_user?.display_name}`}
+                      >
+                        {mediaFile.maybe_creator_user?.display_name}
+                      </Link>
+                    ) : (
+                      <p className="fw-medium text-white">Anonymous</p>
+                    )}
+
+                    <p className="fs-7">Created: {timeCreated}</p>
+                  </div>
+                </div>
+              </Panel>
+
+              <Panel className="rounded">
+                <div className="d-flex flex-column gap-2 p-3">
+                  <h6 className="fw-medium mb-0">Weight Used:</h6>
+                  <hr className="my-1" />
+                  <div className="d-flex align-items-center">
+                    <WeightCoverImage
+                      src="/images/dummy-image.jpg"
+                      height={60}
+                      width={60}
+                    />
+                    <div className="d-flex flex-column">
+                      <Link to="/">
+                        <h6 className="mb-0">Weight Name</h6>
+                      </Link>
+                      <p className="fs-7">by hanashi</p>
+                    </div>
+                  </div>
+                </div>
+              </Panel>
+
               <Accordion>
                 <Accordion.Item title="Media Details" defaultOpen={true}>
                   {mediaDetails}
@@ -347,7 +386,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
         </div>
       </Container>
 
-      <div className="d-xl-none my-4">
+      <div className="d-xl-none my-3">
         <Container type="panel">
           <Panel padding={true}>
             <h4 className="fw-semibold mb-3">Comments</h4>

packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx

@@ -70,6 +70,8 @@ export default function WeightPage({
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<boolean>(false);
   const timeUpdated = moment(weight?.updated_at || "").fromNow();
+  const dateUpdated = moment(weight?.updated_at || "").format("LLL");
+  const dateCreated = moment(weight?.updated_at || "").format("LLL");
   const [isShareModalOpen, setIsShareModalOpen] = useState(false);
   const [buttonLabel, setButtonLabel] = useState("Copy");
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -241,7 +243,7 @@ export default function WeightPage({
     { property: "Category", value: weightCategory },
     {
       property: "Visibility",
-      value: weight.creator_set_visibility.toString(),
+      value: weight.creator_set_visibility?.toString() || "",
     },
     { property: "Created at", value: weight.created_at?.toString() || "" },
     { property: "Updated at", value: weight.updated_at?.toString() || "" },
@@ -252,10 +254,10 @@ export default function WeightPage({
     { property: "Category", value: weightCategory },
     {
       property: "Visibility",
-      value: weight.creator_set_visibility.toString(),
+      value: weight.creator_set_visibility?.toString() || "",
     },
-    { property: "Created at", value: weight.created_at?.toString() || "" },
-    { property: "Updated at", value: weight.updated_at?.toString() || "" },
+    { property: "Created at", value: dateCreated || "" },
+    { property: "Updated at", value: dateUpdated || "" },
 
     //more to add for image/stable diffusion details
   ];
@@ -464,7 +466,8 @@ export default function WeightPage({
                 <div className="d-flex gap-2 p-3">
                   <Gravatar
                     size={48}
-                    username={weight.creator?.display_name}
+                    username={weight.creator?.username || ""}
+                    email_hash={weight.creator?.gravatar_hash || ""}
                     avatarIndex={
                       weight.creator?.default_avatar.image_index || 0
                     }