@xhub-reels/sdk 0.1.22 → 0.2.5

package/dist/index.cjs

@@ -1447,7 +1447,7 @@ function useHls(options) {
       setIsReady(false);
       canPlayFiredRef.current = false;
       currentSrcRef.current = src;
-      const handleCanPlay2 = () => {
+      const handleCanPlay = () => {
         canPlayFiredRef.current = true;
         setIsReady(true);
       };
@@ -1457,10 +1457,10 @@ function useHls(options) {
           setIsReady(true);
         }
       };
-      video.addEventListener("canplay", handleCanPlay2, { once: true });
+      video.addEventListener("canplay", handleCanPlay, { once: true });
       video.addEventListener("loadeddata", handleLoadedData, { once: true });
       return () => {
-        video.removeEventListener("canplay", handleCanPlay2);
+        video.removeEventListener("canplay", handleCanPlay);
         video.removeEventListener("loadeddata", handleLoadedData);
       };
     }
@@ -1470,13 +1470,21 @@ function useHls(options) {
     }
     if (hlsRef.current && currentSrcRef.current === src) {
       if (!canPlayFiredRef.current) {
-        const handleCanPlay2 = () => {
+        if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+          canPlayFiredRef.current = true;
+          setIsReady(true);
+          return void 0;
+        }
+        const handleReady2 = () => {
+          if (canPlayFiredRef.current) return;
           canPlayFiredRef.current = true;
           setIsReady(true);
         };
-        video.addEventListener("canplay", handleCanPlay2, { once: true });
+        video.addEventListener("loadeddata", handleReady2, { once: true });
+        video.addEventListener("canplay", handleReady2, { once: true });
         return () => {
-          video.removeEventListener("canplay", handleCanPlay2);
+          video.removeEventListener("loadeddata", handleReady2);
+          video.removeEventListener("canplay", handleReady2);
         };
       }
       return void 0;
@@ -1513,15 +1521,18 @@ function useHls(options) {
       const mapped = mapHlsError(data);
       onErrorRef.current?.(mapped.code, mapped.message);
     });
-    const handleCanPlay = () => {
+    const handleReady = () => {
+      if (canPlayFiredRef.current) return;
       canPlayFiredRef.current = true;
       setIsReady(true);
     };
-    video.addEventListener("canplay", handleCanPlay, { once: true });
+    video.addEventListener("loadeddata", handleReady, { once: true });
+    video.addEventListener("canplay", handleReady, { once: true });
     hls.attachMedia(video);
     hls.loadSource(src);
     return () => {
-      video.removeEventListener("canplay", handleCanPlay);
+      video.removeEventListener("loadeddata", handleReady);
+      video.removeEventListener("canplay", handleReady);
       if (hlsRef.current === hls) {
         hls.destroy();
         hlsRef.current = null;
@@ -1892,11 +1903,18 @@ function VideoSlotInner({
     };
     if (isActive && !isManuallyPaused) {
       wasActiveRef.current = true;
-      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+      if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
         attemptPlay();
       } else {
-        onReady = attemptPlay;
-        video.addEventListener("canplay", onReady, { once: true });
+        let consumed = false;
+        const handler = () => {
+          if (consumed) return;
+          consumed = true;
+          attemptPlay();
+        };
+        onReady = handler;
+        video.addEventListener("loadeddata", handler, { once: true });
+        video.addEventListener("canplay", handler, { once: true });
       }
     } else if (isActive && isManuallyPaused) {
       wasActiveRef.current = true;
@@ -1912,7 +1930,10 @@ function VideoSlotInner({
     }
     return () => {
       cancelled = true;
-      if (onReady) video.removeEventListener("canplay", onReady);
+      if (onReady) {
+        video.removeEventListener("loadeddata", onReady);
+        video.removeEventListener("canplay", onReady);
+      }
     };
   }, [isActive, isMuted, hasPlayedAhead, isManuallyPaused, onAutoplayBlocked]);
   react.useEffect(() => {
@@ -2052,7 +2073,7 @@ function VideoSlotInner({
               inset: 0,
               backgroundImage: `url(${item.poster})`,
               backgroundSize: "cover",
-              backgroundPosition: "center center",
+              backgroundPosition: "center",
               opacity: showPosterOverlay ? 1 : 0,
               transition: "opacity 0.15s ease",
               pointerEvents: "none"
@@ -2919,12 +2940,16 @@ function transformVideoItem(raw) {
   const stats = transformStats(obj);
   const interaction = transformInteraction(obj);
   let poster;
-  let duration = 0;
-  const mediaArr = obj["media"];
-  if (Array.isArray(mediaArr) && mediaArr.length > 0) {
-    const first = mediaArr[0];
-    poster = toStr(first["poster"], "") || void 0;
-    duration = toNum(first["duration"], 0);
+  const thumbnailObj = obj["thumbnail"];
+  if (thumbnailObj && thumbnailObj["url"]) {
+    poster = toStr(thumbnailObj["url"], "") || void 0;
+  }
+  if (!poster) {
+    const mediaArr2 = obj["media"];
+    if (Array.isArray(mediaArr2) && mediaArr2.length > 0) {
+      const first = mediaArr2[0];
+      poster = toStr(first["poster"], "") || void 0;
+    }
   }
   if (!poster) {
     poster = toStr(
@@ -2932,11 +2957,11 @@ function transformVideoItem(raw) {
       void 0
     ) || void 0;
   }
-  if (!poster) {
-    const thumbnailObj = obj["thumbnail"];
-    if (thumbnailObj && thumbnailObj["url"]) {
-      poster = toStr(thumbnailObj["url"], "") || void 0;
-    }
+  let duration = 0;
+  const mediaArr = obj["media"];
+  if (Array.isArray(mediaArr) && mediaArr.length > 0) {
+    const first = mediaArr[0];
+    duration = toNum(first["duration"], 0);
   }
   if (duration === 0) {
     duration = toNum(tryFields(obj, "duration", "duration_seconds", "length", "video_duration"), 0);

package/dist/index.js

@@ -1441,7 +1441,7 @@ function useHls(options) {
       setIsReady(false);
       canPlayFiredRef.current = false;
       currentSrcRef.current = src;
-      const handleCanPlay2 = () => {
+      const handleCanPlay = () => {
         canPlayFiredRef.current = true;
         setIsReady(true);
       };
@@ -1451,10 +1451,10 @@ function useHls(options) {
           setIsReady(true);
         }
       };
-      video.addEventListener("canplay", handleCanPlay2, { once: true });
+      video.addEventListener("canplay", handleCanPlay, { once: true });
       video.addEventListener("loadeddata", handleLoadedData, { once: true });
       return () => {
-        video.removeEventListener("canplay", handleCanPlay2);
+        video.removeEventListener("canplay", handleCanPlay);
         video.removeEventListener("loadeddata", handleLoadedData);
       };
     }
@@ -1464,13 +1464,21 @@ function useHls(options) {
     }
     if (hlsRef.current && currentSrcRef.current === src) {
       if (!canPlayFiredRef.current) {
-        const handleCanPlay2 = () => {
+        if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+          canPlayFiredRef.current = true;
+          setIsReady(true);
+          return void 0;
+        }
+        const handleReady2 = () => {
+          if (canPlayFiredRef.current) return;
           canPlayFiredRef.current = true;
           setIsReady(true);
         };
-        video.addEventListener("canplay", handleCanPlay2, { once: true });
+        video.addEventListener("loadeddata", handleReady2, { once: true });
+        video.addEventListener("canplay", handleReady2, { once: true });
         return () => {
-          video.removeEventListener("canplay", handleCanPlay2);
+          video.removeEventListener("loadeddata", handleReady2);
+          video.removeEventListener("canplay", handleReady2);
         };
       }
       return void 0;
@@ -1507,15 +1515,18 @@ function useHls(options) {
       const mapped = mapHlsError(data);
       onErrorRef.current?.(mapped.code, mapped.message);
     });
-    const handleCanPlay = () => {
+    const handleReady = () => {
+      if (canPlayFiredRef.current) return;
       canPlayFiredRef.current = true;
       setIsReady(true);
     };
-    video.addEventListener("canplay", handleCanPlay, { once: true });
+    video.addEventListener("loadeddata", handleReady, { once: true });
+    video.addEventListener("canplay", handleReady, { once: true });
     hls.attachMedia(video);
     hls.loadSource(src);
     return () => {
-      video.removeEventListener("canplay", handleCanPlay);
+      video.removeEventListener("loadeddata", handleReady);
+      video.removeEventListener("canplay", handleReady);
       if (hlsRef.current === hls) {
         hls.destroy();
         hlsRef.current = null;
@@ -1886,11 +1897,18 @@ function VideoSlotInner({
     };
     if (isActive && !isManuallyPaused) {
       wasActiveRef.current = true;
-      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+      if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
         attemptPlay();
       } else {
-        onReady = attemptPlay;
-        video.addEventListener("canplay", onReady, { once: true });
+        let consumed = false;
+        const handler = () => {
+          if (consumed) return;
+          consumed = true;
+          attemptPlay();
+        };
+        onReady = handler;
+        video.addEventListener("loadeddata", handler, { once: true });
+        video.addEventListener("canplay", handler, { once: true });
       }
     } else if (isActive && isManuallyPaused) {
       wasActiveRef.current = true;
@@ -1906,7 +1924,10 @@ function VideoSlotInner({
     }
     return () => {
       cancelled = true;
-      if (onReady) video.removeEventListener("canplay", onReady);
+      if (onReady) {
+        video.removeEventListener("loadeddata", onReady);
+        video.removeEventListener("canplay", onReady);
+      }
     };
   }, [isActive, isMuted, hasPlayedAhead, isManuallyPaused, onAutoplayBlocked]);
   useEffect(() => {
@@ -2046,7 +2067,7 @@ function VideoSlotInner({
               inset: 0,
               backgroundImage: `url(${item.poster})`,
               backgroundSize: "cover",
-              backgroundPosition: "center center",
+              backgroundPosition: "center",
               opacity: showPosterOverlay ? 1 : 0,
               transition: "opacity 0.15s ease",
               pointerEvents: "none"
@@ -2913,12 +2934,16 @@ function transformVideoItem(raw) {
   const stats = transformStats(obj);
   const interaction = transformInteraction(obj);
   let poster;
-  let duration = 0;
-  const mediaArr = obj["media"];
-  if (Array.isArray(mediaArr) && mediaArr.length > 0) {
-    const first = mediaArr[0];
-    poster = toStr(first["poster"], "") || void 0;
-    duration = toNum(first["duration"], 0);
+  const thumbnailObj = obj["thumbnail"];
+  if (thumbnailObj && thumbnailObj["url"]) {
+    poster = toStr(thumbnailObj["url"], "") || void 0;
+  }
+  if (!poster) {
+    const mediaArr2 = obj["media"];
+    if (Array.isArray(mediaArr2) && mediaArr2.length > 0) {
+      const first = mediaArr2[0];
+      poster = toStr(first["poster"], "") || void 0;
+    }
   }
   if (!poster) {
     poster = toStr(
@@ -2926,11 +2951,11 @@ function transformVideoItem(raw) {
       void 0
     ) || void 0;
   }
-  if (!poster) {
-    const thumbnailObj = obj["thumbnail"];
-    if (thumbnailObj && thumbnailObj["url"]) {
-      poster = toStr(thumbnailObj["url"], "") || void 0;
-    }
+  let duration = 0;
+  const mediaArr = obj["media"];
+  if (Array.isArray(mediaArr) && mediaArr.length > 0) {
+    const first = mediaArr[0];
+    duration = toNum(first["duration"], 0);
   }
   if (duration === 0) {
     duration = toNum(tryFields(obj, "duration", "duration_seconds", "length", "video_duration"), 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhub-reels/sdk",
-  "version": "0.1.22",
+  "version": "0.2.5",
   "description": "High-performance Short Video / Reels SDK for React — optimized for Flutter WebView",
   "license": "MIT",
   "type": "module",