media page button download attribute

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

@@ -18,6 +18,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   tooltip?: string;
   full?: boolean;
   iconFlip?: boolean;
+  download?: boolean | string;
 }
 
 export default function Button({
@@ -32,6 +33,7 @@ export default function Button({
   tooltip,
   full = false,
   iconFlip = false,
+  download,
   ...rest
 }: ButtonProps) {
   let iconMarginClass = !square && label ? (iconFlip ? "ms-2" : "me-2") : "";
@@ -68,7 +70,15 @@ export default function Button({
       {ButtonContent}
     </Link>
   ) : href ? (
-    <a href={href} target={target} rel="noopener noreferrer" {...commonProps}>
+    <a
+      href={href}
+      target={target}
+      rel="noopener noreferrer"
+      download={
+        download ? (typeof download === "string" ? download : true) : undefined
+      }
+      {...commonProps}
+    >
       {ButtonContent}
     </a>
   ) : (

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

@@ -27,6 +27,7 @@ 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";
 
 interface MediaPageProps {
   sessionWrapper: SessionWrapper;
@@ -103,6 +104,8 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
     }
   }
 
+  let audioLink = new BucketConfig().getGcsUrl(mediaFile?.public_bucket_path);
+
   if (isLoading)
     return (
       <>
@@ -302,8 +305,9 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
                 <Button
                   icon={faArrowDownToLine}
                   label="Download"
-                  onClick={() => {}}
                   className="flex-grow-1"
+                  href={audioLink}
+                  download={true}
                 />
                 {/* <div className="d-flex gap-2">
                   <Button