@geekapps/silo-elements-nextjs 0.3.2 → 0.3.3

package/dist/VideoPlayer.js

@@ -183,6 +183,8 @@ function Video({
   const ageRatingWrapRef = useRef(null);
   const ageRatingIconRef = useRef(null);
   const ageRatingTextRef = useRef(null);
+  const ageRatingShownRef = useRef(false);
+  const ageRatingQueuedRef = useRef(false);
   const [clickIcon, setClickIcon] = useState(null);
   const clickIconTimerRef = useRef(null);
   const clickIconRef = useRef(null);
@@ -257,9 +259,6 @@ function Video({
         setControlsVisible(false);
       }, 2400);
     }
-    if (video?.paused) {
-      showAgeRatingRef.current?.();
-    }
   }, [autoHideControls]);
   useEffect(() => {
     if (!containerRef.current) return;
@@ -430,7 +429,9 @@ function Video({
         );
       }
       tl.to({}, { duration: HOLD });
-      tl.to(wrap, { opacity: 0, duration: 0.7, ease: "power2.inOut" });
+      tl.to(wrap, { opacity: 0, duration: 0.7, ease: "power2.inOut", onComplete: () => {
+        ageRatingShownRef.current = true;
+      } });
       ageRatingTlRef.current = tl;
     };
     showAgeRatingRef.current = showAgeRating;
@@ -440,10 +441,10 @@ function Video({
         window.clearTimeout(ageRatingPauseTimerRef.current);
         ageRatingPauseTimerRef.current = null;
       }
-      setHasPlayed((prev) => {
-        if (!prev) showAgeRating();
-        return true;
-      });
+      const shouldShow = !ageRatingShownRef.current || ageRatingQueuedRef.current;
+      ageRatingQueuedRef.current = false;
+      if (shouldShow) showAgeRating();
+      setHasPlayed(true);
       showControlsTemporarily();
     };
     const onPause = () => {
@@ -453,7 +454,7 @@ function Video({
       if (parsed.ageRating?.data) {
         if (ageRatingPauseTimerRef.current) window.clearTimeout(ageRatingPauseTimerRef.current);
         ageRatingPauseTimerRef.current = window.setTimeout(() => {
-          showAgeRating();
+          ageRatingQueuedRef.current = true;
           ageRatingPauseTimerRef.current = null;
         }, 60 * 1e3);
       }