From 3898a019f56f92eeccf4b6a78f2a4cc807f380f4 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Tue, 3 Sep 2024 17:45:25 -0700
Subject: [PATCH] added Google Analytic events to VideoMediaPage

---
 .../common/SocialButton/SocialButton.tsx      | 22 +++++++++++++++----
 .../v2/view/pages/media/MediaPageSwitch.tsx   |  4 +++-
 .../v2/view/pages/media/VideoMediaPage.tsx    | 10 ++++-----
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/website/packages/fakeyou.com/src/components/common/SocialButton/SocialButton.tsx b/src/website/packages/fakeyou.com/src/components/common/SocialButton/SocialButton.tsx
index 917e476521..080618626a 100644
--- a/src/website/packages/fakeyou.com/src/components/common/SocialButton/SocialButton.tsx
+++ b/src/website/packages/fakeyou.com/src/components/common/SocialButton/SocialButton.tsx
@@ -21,7 +21,8 @@ export type Socials =
   | "download";
 
 interface SocialButtonProps {
-  downloadLink?: string;
+  bucketUrl?: string;
+  GApage?: string;
   hideLabel?: boolean;
   social: Socials;
   shareUrl?: string;
@@ -29,7 +30,8 @@ interface SocialButtonProps {
 }
 
 export default function SocialButton({
-  downloadLink,
+  bucketUrl,
+  GApage,
   hideLabel,
   social,
   shareUrl,
@@ -67,7 +69,7 @@ export default function SocialButton({
           text
         )}&body=${encodeURIComponent(url)}`;
       case "download":
-        return downloadLink;
+        return bucketUrl;
       default:
         return "#";
     }
@@ -79,7 +81,19 @@ export default function SocialButton({
         className: "social-button",
         href: getShareLink(social, shareUrl || "", shareText),
         target: "_blank",
-        ...(social === "download" ? { download: true } : {}),
+        ...(social === "download"
+          ? {
+              download: true,
+              onClick: () => {
+                // @ts-ignore
+                window.dataLayer.push({
+                  event: "media_file_download",
+                  page: GApage || "/",
+                  user_id: "$user_id",
+                });
+              },
+            }
+          : {}),
       }}
     >
       <div
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/media/MediaPageSwitch.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/media/MediaPageSwitch.tsx
index b9a642cc09..2bf953cf59 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/media/MediaPageSwitch.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/media/MediaPageSwitch.tsx
@@ -38,6 +38,7 @@ export interface MediaSubViewProps {
   animationType: AnimationOptions;
   animationTypeChange: (event: { target: { value: AnimationType } }) => void;
   bookmarkButtonProps: ActionButtonProps;
+  bucketUrl: string;
   canAccessStudio: () => boolean;
   canBanUsers: () => boolean;
   canEdit: boolean;
@@ -68,7 +69,7 @@ export default function MediaPageSwitch() {
   const [engineCategory, engineCategorySet] =
     useState<EngineCategoryOptions>(null);
 
-  const { mediaFile, prompt, remove, status } = useMedia({
+  const { bucketUrl, mediaFile, prompt, remove, status } = useMedia({
     mediaToken: urlToken,
     onSuccess: (res: any) => {
       isFeaturedSet(res.is_featured);
@@ -180,6 +181,7 @@ export default function MediaPageSwitch() {
   const subViewProps: MediaSubViewProps = {
     animationType,
     animationTypeChange,
+    bucketUrl,
     bookmarkButtonProps,
     canAccessStudio,
     canBanUsers,
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/media/VideoMediaPage.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/media/VideoMediaPage.tsx
index 4709c6eb32..a43952f8b8 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/media/VideoMediaPage.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/media/VideoMediaPage.tsx
@@ -19,7 +19,6 @@ import {
   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";
@@ -41,8 +40,9 @@ export enum EditingTitleState {
   saving,
 }
 
-export default function DevMediaPage({
+export default function VideoMediaPage({
   bookmarkButtonProps,
+  bucketUrl,
   canAccessStudio,
   canEdit,
   featureButtonProps,
@@ -58,7 +58,6 @@ 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,
@@ -125,8 +124,6 @@ export default function DevMediaPage({
     "download",
   ];
 
-  let downloadLink = bucketConfig.getGcsUrl(mediaFile?.public_bucket_path);
-
   const sharePath = `/media/${mediaFile?.token || ""}`;
 
   const shareUrl = GetWebsiteLink(sharePath);
@@ -320,7 +317,8 @@ export default function DevMediaPage({
                 {shareLinks.map((social, i) => (
                   <SocialButton
                     {...{
-                      downloadLink,
+                      bucketUrl,
+                      GApage: "/media",
                       hideLabel: true,
                       social,
                       shareUrl,