more updates and comment section

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

@@ -11,6 +11,16 @@
   align-items: center;
   justify-content: center;
   color: $white !important;
+
+  &-square {
+    width: 46.5px;
+    height: 46.5px;
+  }
+
+  &-square-small {
+    width: 37.5px;
+    height: 37.5px;
+  }
 }
 
 .button-primary,
@@ -45,9 +55,9 @@
   border-color: lighten($secondary, 5%);
 }
 
-.button-destructive,
-.button-destructive:focus,
-.button-destructive:active {
+.button-danger,
+.button-danger:focus,
+.button-danger:active {
   background-color: $danger;
   color: $white !important;
   border: 2.5px solid;
@@ -55,7 +65,7 @@
   transition: 0.2s;
 }
 
-.button-destructive:hover {
+.button-danger:hover {
   background-color: lighten($danger, 5%);
   color: $white !important;
   border: 2.5px solid;

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

@@ -3,15 +3,20 @@ import { Link } from "react-router-dom";
 import "./Button.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import Tippy from "@tippyjs/react";
+import "tippy.js/dist/tippy.css";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  label?: string;
+  label?: string | null;
   icon?: IconDefinition;
   small?: boolean;
   variant?: "primary" | "secondary" | "danger";
-  to?: string; // for internal links
-  href?: string; // for external links
+  to?: string;
+  href?: string;
   target?: "_blank" | "_self";
+  square?: boolean;
+  tooltip?: string;
+  full?: boolean;
 }
 
 export default function Button({
@@ -22,56 +27,52 @@ export default function Button({
   to,
   href,
   target = "_self",
+  square,
+  tooltip,
+  full = false,
   ...rest
 }: ButtonProps) {
-  let buttonClass = `button`;
+  let IconComponent = icon ? (
+    <FontAwesomeIcon icon={icon} className={!square && label ? "me-2" : ""} />
+  ) : null;
+  let LabelComponent = !square ? label : null;
 
-  if (small) {
-    buttonClass += ` button-small`;
-  }
+  const externalClass = rest.className || "";
 
-  switch (variant) {
-    case "primary":
-      buttonClass += " button-primary";
-      break;
-    case "secondary":
-      buttonClass += " button-secondary";
-      break;
-    case "danger":
-      buttonClass += " button-destructive";
-      break;
-    default:
-      buttonClass += " button-primary";
-      break;
-  }
+  const commonProps = {
+    className: `${externalClass} button ${small ? "button-small" : ""} ${
+      square ? (small ? "button-square-small" : "button-square") : ""
+    } button-${variant} ${full ? "w-100" : ""}`,
+  };
 
-  if (to) {
-    return (
-      <Link to={to} className={buttonClass}>
-        {icon && <FontAwesomeIcon icon={icon} className="me-2" />}
-        {label}
-      </Link>
-    );
-  }
-  if (href) {
-    return (
-      <a
-        href={href}
-        target={target}
-        rel="noopener noreferrer"
-        className={buttonClass}
-      >
-        {icon && <FontAwesomeIcon icon={icon} className="me-2" />}
-        {label}
-      </a>
-    );
-  }
+  delete rest.className;
 
-  // If neither 'to' nor 'href' are provided (regular button)
-  return (
-    <button className={buttonClass} type="button" {...rest}>
-      {icon && <FontAwesomeIcon icon={icon} className="me-2" />}
-      {label}
+  const ButtonContent = (
+    <>
+      {IconComponent}
+      {LabelComponent}
+    </>
+  );
+
+  const WrappedButton = to ? (
+    <Link to={to} {...commonProps}>
+      {ButtonContent}
+    </Link>
+  ) : href ? (
+    <a href={href} target={target} rel="noopener noreferrer" {...commonProps}>
+      {ButtonContent}
+    </a>
+  ) : (
+    <button type="button" {...commonProps} {...rest}>
+      {ButtonContent}
     </button>
   );
+
+  return tooltip ? (
+    <Tippy theme="fakeyou" content={tooltip}>
+      {WrappedButton}
+    </Tippy>
+  ) : (
+    WrappedButton
+  );
 }

packages/fakeyou.com/src/scss/site-refresh.scss

@@ -926,10 +926,6 @@ styles with important tags:
     color: $white;
   }
 
-  .tippy-box[data-theme~="fakeyou"] > .tippy-svg-arrow {
-    fill: lighten($secondary, 5%);
-  }
-
   .tippy-box[data-theme~="range-slider"] {
     margin-top: -5px;
     background-color: lighten($panel, 10%);
@@ -937,6 +933,23 @@ styles with important tags:
     font-size: 13px !important;
   }
 
+  .tippy-box[data-theme~="fakeyou"][data-placement^="top"]
+    > .tippy-arrow::before {
+    border-top-color: lighten($secondary, 5%);
+  }
+  .tippy-box[data-theme~="fakeyou"][data-placement^="bottom"]
+    > .tippy-arrow::before {
+    border-bottom-color: lighten($secondary, 5%);
+  }
+  .tippy-box[data-theme~="fakeyou"][data-placement^="left"]
+    > .tippy-arrow::before {
+    border-left-color: lighten($secondary, 5%);
+  }
+  .tippy-box[data-theme~="fakeyou"][data-placement^="right"]
+    > .tippy-arrow::before {
+    border-right-color: lighten($secondary, 5%);
+  }
+
   .sliding-content {
     overflow: hidden;
     opacity: 0;

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

@@ -1,6 +1,6 @@
 import MediaData from "./MediaDataTypes";
 import React from "react";
-import AudioPlayer from "./MediaAudioPlayer";
+import MediaAudioPlayer from "./MediaAudioPlayer";
 
 interface MediaAudioComponentProps {
   mediaData: MediaData;
@@ -11,7 +11,7 @@ export default function MediaAudioComponent({
 }: MediaAudioComponentProps) {
   return (
     <div className="w-100">
-      <AudioPlayer mediaData={mediaData} />
+      <MediaAudioPlayer mediaData={mediaData} />
     </div>
   );
 }

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

@@ -13,11 +13,14 @@ import Button from "components/common/Button";
 import {
   faCircleExclamation,
   faArrowDownToLine,
+  faCirclePlay,
+  faShare,
 } from "@fortawesome/pro-solid-svg-icons";
 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 { RatingButtons } from "v2/view/_common/ratings/RatingButtons";
 // import { RatingStats } from "v2/view/_common/ratings/RatingStats";
 
@@ -28,7 +31,7 @@ interface MediaPageProps {
 // Dummy media data (replace with actual API data)
 let dummyMediaData = {
   token: "m_v032bt6ecm0rwhebbhgdmk5rexf7cij",
-  media_type: "video", // Change to somthing like "video" or "image" to test different types
+  media_type: "audio", // Change to somthing like "video" or "image" to test different types
   public_bucket_path:
     "/media/8/p/c/h/h/8pchhrgc0ayawn09s9gmtfec2mcft0xk/fakeyou_8pchhrgc0ayawn09s9gmtfec2mcft0xk.mp4", // Replace with actual URLs
   maybe_creator_user: {
@@ -230,18 +233,43 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
               </div>
             </div>
 
-            <div className="d-flex">
+            <div className="d-flex gap-2 flex-wrap">
               <Button
                 icon={faArrowDownToLine}
-                label="Download Result"
+                label="Download"
                 onClick={() => {}}
+                className="flex-grow-1"
               />
+              <div className="d-flex gap-2">
+                <Button
+                  square={true}
+                  variant="secondary"
+                  icon={faCirclePlay}
+                  onClick={() => {}}
+                  tooltip="Create"
+                />
+                <Button
+                  square={true}
+                  variant="secondary"
+                  icon={faShare}
+                  onClick={() => {}}
+                  tooltip="Share"
+                />
+              </div>
             </div>
 
             <Accordion>{mediaDetails}</Accordion>
           </div>
         </div>
       </Panel>
+      <Panel padding={true} mt={true}>
+        <h4 className="mb-3">Comments</h4>
+        <CommentComponent
+          entityType="user"
+          entityToken={mediaData.token}
+          sessionWrapper={sessionWrapper}
+        />
+      </Panel>
     </Container>
   );
 }

yarn.lock

@@ -4442,7 +4442,7 @@ __metadata:
     axios: ^0.21.0
     bulma: ^0.9.0
     craco: ^0.0.3
-    date-fns: ^2.22.1
+    date-fns: 2.22.1
     framer-motion: ^6.5.1
     howler: ^2.2.0
     i18next: ^21.6.11