Allow toggling marquee play

orcasound · Sep 26, 2023 · b77a8e9 · b77a8e9
1 parent 6483450
commit b77a8e9
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/ui/src/components/Player/Player.tsx b/ui/src/components/Player/Player.tsx
@@ -35,6 +35,7 @@ export default function Player({
     "id" | "slug" | "nodeName" | "name" | "latLng" | "imageUrl"
   >;
 }) {
+  const [playMarquee, setPlayMarquee] = useState(true);
   const [playerStatus, setPlayerStatus] = useState<PlayerStatus>("idle");
   const playerRef = useRef<VideoJSPlayer | null>(null);
 
@@ -200,10 +201,13 @@ export default function Player({
             {playerText}
           </Typography>
         </TitlePopover>
-        <Box sx={displayMobileOnly}>
+        <Box
+          sx={displayMobileOnly}
+          onClick={() => setPlayMarquee(!playMarquee)}
+        >
           <Marquee
             speed={20}
-            play={playerTextOverflowing && !isDesktop}
+            play={playerTextOverflowing && !isDesktop && playMarquee}
             key={`${playerTextOverflowing}`}
           >
             <Box ref={playerTextRef}>
@@ -233,8 +237,14 @@ export default function Player({
           `${currentFeed.latLng.lat}, ${currentFeed.latLng.lng}`
         }
       >
-        <TitlePopover title={currentFeed && `${currentFeed.latLng.lat}, ${currentFeed.latLng.lng}`}>
-          {currentFeed && `${currentFeed.latLng.lat}, ${currentFeed.latLng.lng}`}
+        <TitlePopover
+          title={
+            currentFeed &&
+            `${currentFeed.latLng.lat}, ${currentFeed.latLng.lng}`
+          }
+        >
+          {currentFeed &&
+            `${currentFeed.latLng.lat}, ${currentFeed.latLng.lng}`}
         </TitlePopover>
       </Box>
     </Box>