@rxdrag/website-lib-core 0.0.108 → 0.0.110

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.108",
+  "version": "0.0.110",
   "type": "module",
   "exports": {
     ".": "./index.ts"

package/src/react/components/ReactVideoPlayer.tsx

@@ -31,6 +31,7 @@ export const ReactVideoPlayer = forwardRef<
     endTitle?: string;
     media: Media;
     posterUrl?: string;
+    eagerLoad?: boolean;
     classNames?: VideoPlayerClassNames;
     callToAction?: string;
     onToggleSelect?: (id: ID) => void;
@@ -42,6 +43,7 @@ export const ReactVideoPlayer = forwardRef<
     media,
     onToggleSelect,
     posterUrl,
+    eagerLoad,
     classNames,
     callToAction,
     designMode,
@@ -51,6 +53,57 @@ export const ReactVideoPlayer = forwardRef<
   const hlsRef = useRef<Hls | null>(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [isEnded, setIsEnded] = useState(false);
+  const [isSourceReady, setIsSourceReady] = useState(false);
+  const sourceReadyRef = useRef(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const isEndedRef = useRef(false);
+
+  const ensureSourceReady = useCallback(() => {
+    const video = videoRef.current;
+    const url = media.file?.original;
+    if (!video || !url) return false;
+    if (sourceReadyRef.current) return true;
+
+    if (media.storageType === "cloudflare_stream") {
+      if (!Hls.isSupported()) {
+        if (video.canPlayType("application/vnd.apple.mpegurl")) {
+          video.src = url;
+          sourceReadyRef.current = true;
+          setIsSourceReady(true);
+          return true;
+        }
+        return false;
+      }
+
+      const hls = new Hls({ enableWorker: true });
+      hls.on(Hls.Events.ERROR, (_event, data) => {
+        if (data.fatal) {
+          switch (data.type) {
+            case Hls.ErrorTypes.NETWORK_ERROR:
+              hls.startLoad();
+              break;
+            case Hls.ErrorTypes.MEDIA_ERROR:
+              hls.recoverMediaError();
+              break;
+            default:
+              hls.destroy();
+              break;
+          }
+        }
+      });
+      hls.loadSource(url);
+      hls.attachMedia(video);
+      hlsRef.current = hls;
+      sourceReadyRef.current = true;
+      setIsSourceReady(true);
+      return true;
+    }
+
+    video.src = url;
+    sourceReadyRef.current = true;
+    setIsSourceReady(true);
+    return true;
+  }, [media.file?.original, media.storageType]);
 
   const handleContainerClick = useCallback(
     (e: React.MouseEvent) => {
@@ -73,80 +126,83 @@ export const ReactVideoPlayer = forwardRef<
       e.stopPropagation();
       const v = videoRef.current;
       if (!v) return;
-      if (isPlaying) v.pause();
-      else v.play();
+      if (isPlaying) {
+        v.pause();
+        return;
+      }
+
+      const ok = ensureSourceReady();
+      if (!ok) return;
+
+      setIsLoading(true);
+
+      v.play().catch((error) => {
+        console.log("ReactVideoPlayer play() failed:", error);
+        setIsLoading(false);
+      });
     },
-    [isPlaying, designMode]
+    [isPlaying, designMode, ensureSourceReady]
   );
 
   useEffect(() => {
     const video = videoRef.current;
-    const url = media.file?.original;
-    if (!video || !url) return;
+    if (!video) return;
+
+    video.pause();
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+    video.removeAttribute("src");
+    video.load();
+    setIsSourceReady(false);
+    sourceReadyRef.current = false;
 
     const onPlay = () => {
       setIsPlaying(true);
       setIsEnded(false);
+      isEndedRef.current = false;
+      setIsLoading(false);
     };
     const onPause = () => setIsPlaying(false);
     const onEnded = () => {
       setIsPlaying(false);
       setIsEnded(true);
+      isEndedRef.current = true;
+      setIsLoading(false);
+    };
+    const onWaiting = () => {
+      if (!isEndedRef.current) setIsLoading(true);
+    };
+    const onCanPlay = () => {
+      setIsLoading(false);
     };
 
     video.addEventListener("play", onPlay);
     video.addEventListener("pause", onPause);
     video.addEventListener("ended", onEnded);
+    video.addEventListener("waiting", onWaiting);
+    video.addEventListener("canplay", onCanPlay);
+    video.addEventListener("playing", onCanPlay);
 
-    if (media.storageType === "cloudflare_stream") {
-      if (!Hls.isSupported()) {
-        if (video.canPlayType("application/vnd.apple.mpegurl")) {
-          video.src = url;
-        }
-        return () => {
-          video.removeEventListener("play", onPlay);
-          video.removeEventListener("pause", onPause);
-          video.removeEventListener("ended", onEnded);
-        };
-      }
-
-      const hls = new Hls({ enableWorker: true });
-      hls.on(Hls.Events.ERROR, (_event, data) => {
-        if (data.fatal) {
-          switch (data.type) {
-            case Hls.ErrorTypes.NETWORK_ERROR:
-              hls.startLoad();
-              break;
-            case Hls.ErrorTypes.MEDIA_ERROR:
-              hls.recoverMediaError();
-              break;
-            default:
-              hls.destroy();
-              break;
-          }
-        }
-      });
+    if (eagerLoad) {
+      ensureSourceReady();
+    }
 
-      hls.loadSource(url);
-      hls.attachMedia(video);
-      hlsRef.current = hls;
+    return () => {
+      video.removeEventListener("play", onPlay);
+      video.removeEventListener("pause", onPause);
+      video.removeEventListener("ended", onEnded);
+      video.removeEventListener("waiting", onWaiting);
+      video.removeEventListener("canplay", onCanPlay);
+      video.removeEventListener("playing", onCanPlay);
 
-      return () => {
-        video.removeEventListener("play", onPlay);
-        video.removeEventListener("pause", onPause);
-        video.removeEventListener("ended", onEnded);
-        hls.destroy();
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
         hlsRef.current = null;
-      };
-    } else {
-      video.src = url;
-      return () => {
-        video.removeEventListener("play", onPlay);
-        video.removeEventListener("pause", onPause);
-        video.removeEventListener("ended", onEnded);
-      };
-    }
-  }, [media.file?.original, media.storageType]);
+      }
+    };
+  }, [eagerLoad, ensureSourceReady, media.file?.original, media.storageType]);
 
   return (
     <div
@@ -161,7 +217,7 @@ export const ReactVideoPlayer = forwardRef<
       <video
         ref={videoRef}
         onClick={(e) => !designMode && e.stopPropagation()}
-        preload="metadata"
+        preload={eagerLoad ? "metadata" : "none"}
         poster={posterUrl ?? media.file?.thumbnail}
         className={clsx(
           "w-full h-full rounded-lg object-cover",
@@ -169,13 +225,13 @@ export const ReactVideoPlayer = forwardRef<
         )}
         controls={!designMode}
       >
-        {!media.storageType && media.file?.original ? (
+        {!media.storageType && media.file?.original && (eagerLoad || isSourceReady) ? (
           <source src={media.file.original} />
         ) : null}
         Your browser does not support video playback.
       </video>
 
-      {!isPlaying && !isEnded && (
+      {!isPlaying && !isEnded && !isLoading && (
         <button
           type="button"
           onClick={handlePlayClick}
@@ -216,6 +272,21 @@ export const ReactVideoPlayer = forwardRef<
         </button>
       )}
 
+      {!isPlaying && !isEnded && isLoading && (
+        <div
+          className={clsx(
+            "absolute inset-0 flex items-center justify-center w-full h-full rounded-lg z-10 bg-black/20",
+            classNames?.playButton
+          )}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="flex items-center gap-3 rounded-full bg-black/50 px-4 py-2 text-white">
+            <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+            <span className="text-sm">Loading...</span>
+          </div>
+        </div>
+      )}
+
       <div
         className={clsx(
           "absolute inset-0 bg-black/50 flex-col gap-6 items-center justify-center text-center text-white hidden z-10 rounded-2xl",
@@ -248,9 +319,15 @@ export const ReactVideoPlayer = forwardRef<
               e.stopPropagation();
               const v = videoRef.current;
               if (!v) return;
+              const ok = ensureSourceReady();
+              if (!ok) return;
+              setIsLoading(true);
               v.currentTime = 0;
               setIsEnded(false);
-              v.play();
+              v.play().catch((error) => {
+                console.log("ReactVideoPlayer play() failed:", error);
+                setIsLoading(false);
+              });
             }}
           >
             Replay