Staging

src/pages/supercentro/components/chapters.style.js

@@ -225,8 +225,9 @@ export const ContainerCard3 = tw.div`
   absolute
   z-10
   h-auto w-[80vw] lg:w-[460px]
-
-
+  bg-[rgba(255,255,255,0.95)]
+  lg:bg-[rgba(255,255,255,0.95)]
+  xl:bg-[rgba(255,255,255,0)]
   px-[30px]
   py-[25px]
   lg:px-[32px]

src/pages/supercentro/story.js

@@ -4,6 +4,7 @@ import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import "./style.css";
 import thumb from "./images/thumb.png";
+
 gsap.registerPlugin(ScrollTrigger);
 
 export default function SuperCentro() {
@@ -14,25 +15,45 @@ export default function SuperCentro() {
     if (videoRef.current) {
       const video = videoRef.current;
 
-      // Wait until the video metadata is loaded to get the duration
-      video.addEventListener("loadedmetadata", () => {
+      // Function to handle video control with scroll
+      const handleLoadedMetadata = () => {
         const totalFrames = 24 * video.duration;
 
+        // Pause video to start from frame 0
+        video.pause();
+        video.currentTime = 0;
+
         gsap.to(video, {
-          currentTime: totalFrames / 24,
+          currentTime: totalFrames / 24, // Set the video to max duration for scrub effect
           scrollTrigger: {
             trigger: videoScrollRef.current,
             start: "top top",
             end: "bottom bottom",
             scrub: true,
             onUpdate: (self) => {
-              // Calculate the frame based on scroll progress
               const frame = Math.round(self.progress * totalFrames);
-              video.currentTime = frame / 24; // Set the current video time
+              video.currentTime = frame / 24; // Set the current time based on scroll
             },
           },
         });
-      });
+      };
+
+      // iOS handling to ensure video respects controls
+      const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+
+      if (isIOS) {
+        video.muted = true; // iOS requires muted for autoplay
+        video.playsInline = true; // Required for inline playback
+        video.pause(); // Pause initially
+      }
+
+      // Add metadata event listener
+      video.addEventListener("loadedmetadata", handleLoadedMetadata);
+
+      // Clean up on component unmount
+      return () => {
+        video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      };
     }
   }, []);
 
@@ -58,7 +79,9 @@ export default function SuperCentro() {
               className="responsive-video"
               playsInline
               muted
+              autoPlay
               preload="auto"
+              controls={false}
               poster={thumb}
             />
             <chapterDiv.QuadroUm id={"quadro"} />
@@ -69,4 +92,4 @@ export default function SuperCentro() {
       </div>
     </>
   );
-}
+}