@geekapps/silo-elements-nextjs 0.3.2 → 0.3.4

package/dist/VideoPlayer.js

@@ -183,6 +183,9 @@ function Video({
   const ageRatingWrapRef = useRef(null);
   const ageRatingIconRef = useRef(null);
   const ageRatingTextRef = useRef(null);
+  const ageRatingShownRef = useRef(false);
+  const ageRatingQueuedRef = useRef(false);
+  const ageRatingPendingRef = useRef(false);
   const [clickIcon, setClickIcon] = useState(null);
   const clickIconTimerRef = useRef(null);
   const clickIconRef = useRef(null);
@@ -257,9 +260,6 @@ function Video({
         setControlsVisible(false);
       }, 2400);
     }
-    if (video?.paused) {
-      showAgeRatingRef.current?.();
-    }
   }, [autoHideControls]);
   useEffect(() => {
     if (!containerRef.current) return;
@@ -335,7 +335,13 @@ function Video({
     gsap.to(el, {
       opacity: controlsVisible ? 1 : 0,
       duration: 0.2,
-      ease: "power1.inOut"
+      ease: "power1.inOut",
+      onComplete: () => {
+        if (!controlsVisible && ageRatingPendingRef.current) {
+          ageRatingPendingRef.current = false;
+          showAgeRatingRef.current?.();
+        }
+      }
     });
     el.style.pointerEvents = controlsVisible ? "" : "none";
     if (player) {
@@ -411,7 +417,7 @@ function Video({
       if (!wrap) return;
       if (ageRatingTlRef.current) ageRatingTlRef.current.kill();
       const HOLD = 12;
-      const tl = gsap.timeline({ delay: 0.6 });
+      const tl = gsap.timeline({ delay: 0.3 });
       tl.fromTo(wrap, { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power2.out" });
       if (icon) {
         tl.fromTo(
@@ -430,7 +436,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 +448,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) ageRatingPendingRef.current = true;
+      setHasPlayed(true);
       showControlsTemporarily();
     };
     const onPause = () => {
@@ -453,7 +461,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);
       }
@@ -2041,7 +2049,20 @@ function Video({
             activeCue && /* @__PURE__ */ jsx(
               "div",
               {
-                className: `pointer-events-none absolute inset-x-0 z-40 flex justify-center px-4 transition-all duration-200${controlsVisible ? "bottom-20 @sm:bottom-24 @lg:bottom-28" : "bottom-4 @sm:bottom-6"}`,
+                className: "pointer-events-none absolute inset-x-0 z-40 flex justify-center px-4",
+                style: {
+                  bottom: (() => {
+                    if (preview) {
+                      const frameW = preview.cue.w ?? 160;
+                      const frameH = preview.cue.h ?? 90;
+                      const thumbH = Math.round(200 * (frameH / frameW));
+                      return `${80 + thumbH + 32 + 10}px`;
+                    }
+                    if (controlsVisible) return "5rem";
+                    return "1rem";
+                  })(),
+                  transition: "bottom 0.2s ease"
+                },
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {