Set marquee to not autoplay, add analytics

orcasound · Sep 26, 2023 · 3a10690 · 3a10690
1 parent a9cfb12
commit 3a10690
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/ui/src/components/Player/Player.tsx b/ui/src/components/Player/Player.tsx
@@ -35,7 +35,7 @@ export default function Player({
     "id" | "slug" | "nodeName" | "name" | "latLng" | "imageUrl"
   >;
 }) {
-  const [playMarquee, setPlayMarquee] = useState(true);
+  const [playMarquee, setPlayMarquee] = useState(false);
   const [playerStatus, setPlayerStatus] = useState<PlayerStatus>("idle");
   const playerRef = useRef<VideoJSPlayer | null>(null);
 
@@ -203,12 +203,15 @@ export default function Player({
         </TitlePopover>
         <Box
           sx={displayMobileOnly}
-          onClick={() => setPlayMarquee(!playMarquee)}
+          onClick={() => {
+            setPlayMarquee(!playMarquee);
+            analytics.stream.playerTextClicked(playerText);
+          }}
         >
           <Marquee
             speed={20}
             play={playerTextOverflowing && !isDesktop && playMarquee}
-            key={`${playerText}-${playerTextOverflowing}`}
+            key={`${playerText}-${playerTextOverflowing}-${playMarquee}`}
           >
             <Box ref={playerTextRef}>
               <Typography

diff --git a/ui/src/utils/analytics.ts b/ui/src/utils/analytics.ts
@@ -45,6 +45,13 @@ const stream = {
       action: "Player paused",
       label: feedSlug,
     }),
+  playerTextClicked: (playerText: string) => {
+    sendEvent({
+      category: "Stream",
+      action: "Player text clicked",
+      label: playerText,
+    })
+  }
 };
 
 function sendEvent(...eventParams: Parameters<typeof ReactGA.event>) {