@rxdrag/website-lib-core 0.0.109 → 0.0.111

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.109",
+  "version": "0.0.111",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -34,8 +34,8 @@
     "gsap": "^3.12.7",
     "hls.js": "^1.6.13",
     "lodash-es": "^4.17.21",
-    "@rxdrag/rxcms-models": "0.3.96",
-    "@rxdrag/entify-lib": "0.0.23"
+    "@rxdrag/entify-lib": "0.0.23",
+    "@rxdrag/rxcms-models": "0.3.96"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0",

package/src/react/components/ReactVideoPlayer.tsx

@@ -19,6 +19,8 @@ export type VideoPlayerClassNames = {
   playButtonOuter?: string;
   playButtonInner?: string;
   playIcon?: string;
+  loadingOverlay?: string;
+  loadingContent?: string;
   overlay?: string;
   overlayTitle?: string;
   ctaButton?: string;
@@ -54,17 +56,22 @@ export const ReactVideoPlayer = forwardRef<
   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 [hasStarted, setHasStarted] = useState(false);
 
   const ensureSourceReady = useCallback(() => {
     const video = videoRef.current;
     const url = media.file?.original;
     if (!video || !url) return false;
-    if (isSourceReady) return true;
+    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;
         }
@@ -90,14 +97,16 @@ export const ReactVideoPlayer = forwardRef<
       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;
-  }, [isSourceReady, media.file?.original, media.storageType]);
+  }, [media.file?.original, media.storageType]);
 
   const handleContainerClick = useCallback(
     (e: React.MouseEvent) => {
@@ -128,7 +137,12 @@ export const ReactVideoPlayer = forwardRef<
       const ok = ensureSourceReady();
       if (!ok) return;
 
-      v.play();
+      setIsLoading(true);
+
+      v.play().catch((error) => {
+        console.log("ReactVideoPlayer play() failed:", error);
+        setIsLoading(false);
+      });
     },
     [isPlaying, designMode, ensureSourceReady]
   );
@@ -137,6 +151,7 @@ export const ReactVideoPlayer = forwardRef<
     const video = videoRef.current;
     if (!video) return;
 
+    video.pause();
     if (hlsRef.current) {
       hlsRef.current.destroy();
       hlsRef.current = null;
@@ -144,20 +159,35 @@ export const ReactVideoPlayer = forwardRef<
     video.removeAttribute("src");
     video.load();
     setIsSourceReady(false);
+    sourceReadyRef.current = false;
 
     const onPlay = () => {
       setIsPlaying(true);
       setIsEnded(false);
+      isEndedRef.current = false;
+      setIsLoading(false);
+      setHasStarted(true);
     };
     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 (eagerLoad) {
       ensureSourceReady();
@@ -167,6 +197,9 @@ export const ReactVideoPlayer = forwardRef<
       video.removeEventListener("play", onPlay);
       video.removeEventListener("pause", onPause);
       video.removeEventListener("ended", onEnded);
+      video.removeEventListener("waiting", onWaiting);
+      video.removeEventListener("canplay", onCanPlay);
+      video.removeEventListener("playing", onCanPlay);
 
       if (hlsRef.current) {
         hlsRef.current.destroy();
@@ -194,7 +227,8 @@ export const ReactVideoPlayer = forwardRef<
           "w-full h-full rounded-lg object-cover",
           classNames?.video
         )}
-        controls={!designMode}
+        playsInline
+        controls={!designMode && hasStarted}
       >
         {!media.storageType && media.file?.original && (eagerLoad || isSourceReady) ? (
           <source src={media.file.original} />
@@ -202,7 +236,7 @@ export const ReactVideoPlayer = forwardRef<
         Your browser does not support video playback.
       </video>
 
-      {!isPlaying && !isEnded && (
+      {!isPlaying && !isEnded && !isLoading && (
         <button
           type="button"
           onClick={handlePlayClick}
@@ -243,6 +277,26 @@ 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?.loadingOverlay
+          )}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div
+            className={clsx(
+              "flex items-center gap-3 rounded-full bg-black/50 px-4 py-2 text-white",
+              classNames?.loadingContent
+            )}
+          >
+            <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",
@@ -277,9 +331,13 @@ export const ReactVideoPlayer = forwardRef<
               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