added video download link + social link fixes

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

@@ -4,21 +4,33 @@ import {
   faWhatsapp,
   faTwitter,
 } from "@fortawesome/free-brands-svg-icons";
-import { faXmark, faEnvelope } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faArrowDownToLine,
+  faXmark,
+  faEnvelope,
+} from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import "./SocialButton.scss";
 
-export type Socials = "x" | "whatsapp" | "facebook" | "reddit" | "email";
+export type Socials =
+  | "x"
+  | "whatsapp"
+  | "facebook"
+  | "reddit"
+  | "email"
+  | "download";
 
 interface SocialButtonProps {
+  downloadLink?: string;
   hideLabel?: boolean;
   social: Socials;
-  shareUrl: string;
+  shareUrl?: string;
   shareText: string;
 }
 
 export default function SocialButton({
+  downloadLink,
   hideLabel,
   social,
   shareUrl,
@@ -30,6 +42,7 @@ export default function SocialButton({
     facebook: faFacebookF,
     reddit: faRedditAlien,
     email: faEnvelope,
+    download: faArrowDownToLine,
   };
 
   let socialIcon = socialIcons[social] || faXmark;
@@ -56,18 +69,22 @@ export default function SocialButton({
         return `mailto:?subject=${encodeURIComponent(
           text
         )}&body=${encodeURIComponent(url)}`;
+      case "download":
+        return downloadLink;
       default:
         return "#";
     }
   };
 
-  const handleClick = () => {
-    const shareLink = getShareLink(social, shareUrl, shareText);
-    window.open(shareLink, "_blank");
-  };
-
   return (
-    <button className="social-button" onClick={handleClick}>
+    <a
+      {...{
+        className: "social-button",
+        href: getShareLink(social, shareUrl || "", shareText),
+        target: "_blank",
+        ...(social === "download" ? { download: true } : {}),
+      }}
+    >
       <div
         className={`${
           !hideLabel ? "social-button-icon" : "social-button-icon-no-style"
@@ -80,6 +97,6 @@ export default function SocialButton({
           {social.charAt(0).toUpperCase() + social.slice(1)}
         </p>
       ) : null}
-    </button>
+    </a>
   );
 }

packages/fakeyou.com/src/scss/colours.scss

@@ -112,4 +112,8 @@ $badge-colors: (
   &.bg-email {
     background-color: #858585;
   }
+
+  &.bg-download {
+    background-color: map-get($badge-colors, "purple");
+  }
 }

packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PostlaunchLanding/ScrollingSceneCarousel.tsx

@@ -57,7 +57,10 @@ export default function ScrollingSceneCarousel({
     <div className="d-flex gap-5 mt-5 overflow-hidden flex-column">
       <Marquee
         gradient={true}
-        gradientColor="#1a1a27"
+        // this component doesn't seem to like string values and was causing errors
+        // so hex is converted to an RGB array -VH
+        // gradientColor="#1a1a27"
+        gradientColor={[26, 26, 29]}
         gradientWidth={small ? 80 : 200}
         speed={small ? 100 : 50}
         pauseOnHover={true}
@@ -82,7 +85,8 @@ export default function ScrollingSceneCarousel({
       {!small && (
         <Marquee
           gradient={true}
-          gradientColor="#1a1a27"
+          // gradientColor="#1a1a27"
+          gradientColor={[26, 26, 29]}
           gradientWidth={small ? 80 : 200}
           speed={small ? 100 : 50}
           pauseOnHover={true}

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

@@ -17,6 +17,8 @@ import {
   RenameMedia,
   RenameMediaResponse,
 } from "@storyteller/components/src/api/media_files/RenameMedia";
+import { GetWebsiteLink } from "@storyteller/components/src/env/GetWebsiteLink";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import PromptViewer from "./PromptViewer";
 import { MediaSubViewProps } from "./MediaPageSwitch";
 import { a, useTransition } from "@react-spring/web";
@@ -54,14 +56,13 @@ export default function DevMediaPage({
   const [editingTitle, editingTitleSet] = useState(EditingTitleState.closed);
   const { events, status: animationStatus } = useAnimationStatus();
   const titlePaused = animationStatus === AnimationStatus.paused;
+  const bucketConfig = new BucketConfig();
 
   const transitions = useTransition(
     editingTitle,
     basicTransition({ ...events })
   );
 
-  console.log("😎", mediaFile);
-
   const saveTitle = () => {
     editingTitleSet(EditingTitleState.saving);
     RenameMedia(urlToken, {
@@ -119,8 +120,17 @@ export default function DevMediaPage({
     "facebook",
     "reddit",
     "email",
+    "download",
   ];
 
+  let downloadLink = bucketConfig.getGcsUrl(mediaFile?.public_bucket_path);
+
+  const sharePath = `/media/${mediaFile?.token || ""}`;
+
+  const shareUrl = GetWebsiteLink(sharePath);
+
+  const shareText = "Check out this media on FakeYou.com!";
+
   return (
     <>
       <div
@@ -290,10 +300,11 @@ export default function DevMediaPage({
               {shareLinks.map((social, i) => (
                 <SocialButton
                   {...{
+                    downloadLink,
                     hideLabel: true,
                     social,
-                    shareUrl: "abc",
-                    shareText: "xyz",
+                    shareUrl,
+                    shareText,
                   }}
                 />
               ))}