💄 : refine the demo for the video

hsunpei · Oct 8, 2024 · 2a056af · 2a056af
1 parent 3c09200
commit 2a056af
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/apps/docs/components/video/StickyVideo.tsx b/apps/docs/components/video/StickyVideo.tsx
@@ -25,17 +25,22 @@ export const StickyVideo = ({ src }: StickyVideoProps) => {
             {/* One video height of the empty space */}
           </section>
           <section
-            className="relative border-green-400 bg-green-200 dark:border-green-700 dark:bg-green-800"
+            className="relative border-green-400 dark:border-green-700"
             ref={sectionRef}
             style={{ height }}
           >
-            {Math.round(scrolledRatio * 100)}%
+            <div
+              className="rounded-full bg-emerald-200 bg-opacity-80 px-5 py-1 text-slate-800 backdrop-blur-sm dark:bg-emerald-950 dark:bg-opacity-80 dark:text-slate-200"
+              style={{ width: `${scrolledRatio * 100}%` }}
+            >
+              {Math.round(scrolledRatio * 100)}%
+            </div>
           </section>
         </>
       }
     >
       <div ref={videoContainerRef} className="absolute left-0 right-0 top-14 h-screen">
-        <Video width={width} height={height} src={src} />
+        <Video width={width} height={height} src={src} ratio={scrolledRatio} />
       </div>
     </StickyContainer>
   );

diff --git a/packages/video/src/components/Video.tsx b/packages/video/src/components/Video.tsx
@@ -1,20 +1,19 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 export interface VideoProps {
   src: string;
   className?: string;
   width: number;
   height: number;
-  percentage?: number;
+  ratio?: number;
 }
 
 // TODO:
-// - Play by percentage
 // - thumbnail
 // - preload
-// - use imperative handle to play
+// - use imperative handle to play instead of changing through props
 
-export const Video = ({ src, width, height, percentage = 0, className }: VideoProps) => {
+export const Video = React.memo(({ src, width, height, ratio = 0, className }: VideoProps) => {
   const videoRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
@@ -23,7 +22,7 @@ export const Video = ({ src, width, height, percentage = 0, className }: VideoPr
       const updateCurrentTime = () => {
         const duration = videoElement.duration;
         if (!isNaN(duration)) {
-          videoElement.currentTime = (percentage / 100) * duration;
+          videoElement.currentTime = ratio * duration;
         }
       };
 
@@ -37,7 +36,7 @@ export const Video = ({ src, width, height, percentage = 0, className }: VideoPr
         videoElement.removeEventListener('loadedmetadata', updateCurrentTime);
       };
     }
-  }, [percentage]);
+  }, [ratio]);
 
   return (
     <video
@@ -48,4 +47,4 @@ export const Video = ({ src, width, height, percentage = 0, className }: VideoPr
       className={`h-full w-full object-cover ${className}`}
     ></video>
   );
-};
+});