🚧 : setup the demo for sticky scrolled video

hsunpei · Oct 8, 2024 · 3c09200 · 3c09200
1 parent 6a5a03f
commit 3c09200
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/apps/docs/components/video/StickyVideo.tsx b/apps/docs/components/video/StickyVideo.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 
 import { useSectionScrollState } from '@react-scrollytelling/core';
 import { useResizeObserver } from '@react-scrollytelling/layout';
@@ -15,28 +15,26 @@ export const StickyVideo = ({ src }: StickyVideoProps) => {
   const videoContainerRef = useRef<HTMLDivElement>(null);
   const { width, height } = useResizeObserver(videoContainerRef);
 
-  const {} = useSectionScrollState(sectionRef);
+  const { scrolledRatio } = useSectionScrollState(sectionRef);
 
   return (
     <StickyContainer
       overlay={
         <>
-          <section
-            className="border-green-400 bg-green-200 dark:border-green-700 dark:bg-green-800"
-            ref={sectionRef}
-          >
-            Overlay
+          <section className="relative border-green-400" ref={sectionRef} style={{ height }}>
+            {/* One video height of the empty space */}
           </section>
           <section
-            className="border-green-400 bg-green-200 dark:border-green-700 dark:bg-green-800"
+            className="relative border-green-400 bg-green-200 dark:border-green-700 dark:bg-green-800"
             ref={sectionRef}
+            style={{ height }}
           >
-            Overlay
+            {Math.round(scrolledRatio * 100)}%
           </section>
         </>
       }
     >
-      <div ref={videoContainerRef} className="absolute left-0 right-0 top-0 h-screen">
+      <div ref={videoContainerRef} className="absolute left-0 right-0 top-14 h-screen">
         <Video width={width} height={height} src={src} />
       </div>
     </StickyContainer>

diff --git a/apps/docs/pages/video_playback.mdx b/apps/docs/pages/video_playback.mdx
@@ -1,3 +1,12 @@
 import { StickyVideo } from '../components/video/StickyVideo'
 
+<div className="h-screen">
+  Demo Spacer
+</div>
+
 <StickyVideo src="/react-scrollytelling/videos/taiwan.mp4" />
+
+
+<div className="h-screen">
+  Demo Spacer
+</div>