clear more tickets

src/components/FullscreenIntroVideo.web.js

@@ -67,6 +67,25 @@ const FullscreenIntroVideo = ({ url, visible = true, onClose }) => {
     onClose?.();
   }, [onClose]);
 
+  const evaluateShouldClose = useCallback(() => {
+    const video = videoRef.current;
+
+    if (!video || hasClosedRef.current) {
+      return;
+    }
+
+    if (video.ended) {
+      handleClose();
+      return;
+    }
+
+    const remaining = video.duration - video.currentTime;
+
+    if (Number.isFinite(remaining) && remaining <= CLOSE_THRESHOLD_SECONDS) {
+      handleClose();
+    }
+  }, [handleClose]);
+
   useEffect(() => {
     let isMounted = true;
 
@@ -103,44 +122,22 @@ const FullscreenIntroVideo = ({ url, visible = true, onClose }) => {
   }, [url]);
 
   useEffect(() => {
-    if (!visible) {
+    if (!visible || !uri) {
       return undefined;
     }
 
     hasClosedRef.current = false;
+    let rafId;
 
-    const video = videoRef.current;
-
-    if (!video || !uri) {
-      return undefined;
-    }
-
-    const shouldClose = () => {
-      if (hasClosedRef.current) {
-        return false;
-      }
-      if (video.ended) {
-        return true;
-      }
-      const remaining = video.duration - video.currentTime;
-      return Number.isFinite(remaining) && remaining <= CLOSE_THRESHOLD_SECONDS;
-    };
-
-    const tryHandleClose = () => {
-      if (shouldClose()) {
-        handleClose();
-      }
-    };
-    const handleEnded = tryHandleClose;
-    const handleTimeUpdate = tryHandleClose;
-    const handlePause = tryHandleClose;
-    video.addEventListener("ended", handleEnded);
-    video.addEventListener("timeupdate", handleTimeUpdate);
-    video.addEventListener("pause", handlePause);
-    const pollId = setInterval(tryHandleClose, CLOSE_POLL_INTERVAL_MS);
-
-    video.currentTime = 0;
     const attemptPlay = () => {
+      const video = videoRef.current;
+
+      if (!video) {
+        rafId = requestAnimationFrame(attemptPlay);
+        return;
+      }
+
+      video.currentTime = 0;
       const result = video.play();
 
       if (result?.catch) {
@@ -153,15 +150,17 @@ const FullscreenIntroVideo = ({ url, visible = true, onClose }) => {
     };
 
     attemptPlay();
+    const pollId = setInterval(evaluateShouldClose, CLOSE_POLL_INTERVAL_MS);
 
     return () => {
-      video.pause();
-      video.removeEventListener("ended", handleEnded);
-      video.removeEventListener("timeupdate", handleTimeUpdate);
-      video.removeEventListener("pause", handlePause);
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
       clearInterval(pollId);
+      const video = videoRef.current;
+      video?.pause();
     };
-  }, [handleClose, muted, uri, visible]);
+  }, [evaluateShouldClose, muted, uri, visible]);
 
   useEffect(() => {
     const video = videoRef.current;
@@ -194,6 +193,10 @@ const FullscreenIntroVideo = ({ url, visible = true, onClose }) => {
             loop={false}
             muted={muted}
             controls={false}
+            onEnded={handleClose}
+            onPause={evaluateShouldClose}
+            onTimeUpdate={evaluateShouldClose}
+            onError={handleClose}
           />
         ) : null}
         <Pressable onPress={handleClose} style={closeButtonStyle}>