@geekapps/silo-elements-nextjs 0.3.3 → 0.3.5

package/dist/VideoPlayer.js

@@ -185,6 +185,7 @@ function Video({
   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);
@@ -334,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) {
@@ -410,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(
@@ -443,7 +450,7 @@ function Video({
       }
       const shouldShow = !ageRatingShownRef.current || ageRatingQueuedRef.current;
       ageRatingQueuedRef.current = false;
-      if (shouldShow) showAgeRating();
+      if (shouldShow) ageRatingPendingRef.current = true;
       setHasPlayed(true);
       showControlsTemporarily();
     };
@@ -2042,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",
                   {