@drawbridge/components 0.0.62 → 0.0.63

package/dist/video.js

@@ -112,7 +112,7 @@ var ReactPlayer = (0, import_dynamic.default)(
     ssr: false
   }
 );
-var DEFER_MS = 2500;
+var DEFER_FALLBACK_MS = 5e3;
 var Video = ({
   className,
   controls = false,
@@ -140,6 +140,7 @@ var Video = ({
   const [player, setPlayer] = (0, import_react.useState)();
   const [videoUrl, setVideoUrl] = (0, import_react.useState)(hls ? hls : mp4);
   const [mountPlayer, setMountPlayer] = (0, import_react.useState)(!defer);
+  const [posterPainted, setPosterPainted] = (0, import_react.useState)(false);
   const [failed, setFailed] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(
     () => {
@@ -152,33 +153,30 @@ var Video = ({
   (0, import_react.useEffect)(
     () => {
       if (!defer || mountPlayer || typeof window === "undefined") return;
-      let timer;
+      if (!poster) {
+        setMountPlayer(true);
+        return;
+      }
       let idle;
       const start = () => setMountPlayer(true);
-      const afterLoad = () => {
-        timer = setTimeout(
-          () => {
-            if ("requestIdleCallback" in window) {
-              idle = window.requestIdleCallback(start, { timeout: 2e3 });
-            } else {
-              timer = setTimeout(start, 500);
-            }
-          },
-          DEFER_MS
-        );
+      const soon = () => {
+        if ("requestIdleCallback" in window) {
+          idle = window.requestIdleCallback(start, { timeout: 300 });
+        } else {
+          idle = setTimeout(start, 100);
+        }
       };
-      if (document.readyState === "complete") {
-        afterLoad();
-      } else {
-        window.addEventListener("load", afterLoad, { once: true });
+      if (posterPainted) {
+        soon();
+        return () => {
+          if (idle && "cancelIdleCallback" in window) window.cancelIdleCallback(idle);
+          clearTimeout(idle);
+        };
       }
-      return () => {
-        window.removeEventListener("load", afterLoad);
-        clearTimeout(timer);
-        if (idle) window.cancelIdleCallback(idle);
-      };
+      const fallback = setTimeout(start, DEFER_FALLBACK_MS);
+      return () => clearTimeout(fallback);
     },
-    [defer, mountPlayer]
+    [defer, mountPlayer, poster, posterPainted]
   );
   const inner = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react.Fragment, { children: [
     mountPlayer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -252,6 +250,14 @@ var Video = ({
           className: "absolute inset-0 w-full h-full object-cover pointer-events-none",
           decoding: "async",
           ...priority ? { fetchpriority: "high", loading: "eager" } : { loading: "lazy" },
+          onLoad: () => setPosterPainted(true),
+          // A cached poster can finish loading before React attaches
+          // onLoad, so check completeness on attach too — otherwise the
+          // exact case this optimises for (warm revisit) would fall
+          // through to the 5s fallback.
+          ref: (element) => {
+            if ((element == null ? void 0 : element.complete) && element.naturalWidth > 0) setPosterPainted(true);
+          },
           src: poster
         }
       }

package/dist/video.mjs

@@ -16,7 +16,7 @@ var ReactPlayer = dynamic(
     ssr: false
   }
 );
-var DEFER_MS = 2500;
+var DEFER_FALLBACK_MS = 5e3;
 var Video = ({
   className,
   controls = false,
@@ -44,6 +44,7 @@ var Video = ({
   const [player, setPlayer] = useState();
   const [videoUrl, setVideoUrl] = useState(hls ? hls : mp4);
   const [mountPlayer, setMountPlayer] = useState(!defer);
+  const [posterPainted, setPosterPainted] = useState(false);
   const [failed, setFailed] = useState(false);
   useEffect(
     () => {
@@ -56,33 +57,30 @@ var Video = ({
   useEffect(
     () => {
       if (!defer || mountPlayer || typeof window === "undefined") return;
-      let timer;
+      if (!poster) {
+        setMountPlayer(true);
+        return;
+      }
       let idle;
       const start = () => setMountPlayer(true);
-      const afterLoad = () => {
-        timer = setTimeout(
-          () => {
-            if ("requestIdleCallback" in window) {
-              idle = window.requestIdleCallback(start, { timeout: 2e3 });
-            } else {
-              timer = setTimeout(start, 500);
-            }
-          },
-          DEFER_MS
-        );
+      const soon = () => {
+        if ("requestIdleCallback" in window) {
+          idle = window.requestIdleCallback(start, { timeout: 300 });
+        } else {
+          idle = setTimeout(start, 100);
+        }
       };
-      if (document.readyState === "complete") {
-        afterLoad();
-      } else {
-        window.addEventListener("load", afterLoad, { once: true });
+      if (posterPainted) {
+        soon();
+        return () => {
+          if (idle && "cancelIdleCallback" in window) window.cancelIdleCallback(idle);
+          clearTimeout(idle);
+        };
       }
-      return () => {
-        window.removeEventListener("load", afterLoad);
-        clearTimeout(timer);
-        if (idle) window.cancelIdleCallback(idle);
-      };
+      const fallback = setTimeout(start, DEFER_FALLBACK_MS);
+      return () => clearTimeout(fallback);
     },
-    [defer, mountPlayer]
+    [defer, mountPlayer, poster, posterPainted]
   );
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
     mountPlayer && /* @__PURE__ */ jsx(
@@ -156,6 +154,14 @@ var Video = ({
           className: "absolute inset-0 w-full h-full object-cover pointer-events-none",
           decoding: "async",
           ...priority ? { fetchpriority: "high", loading: "eager" } : { loading: "lazy" },
+          onLoad: () => setPosterPainted(true),
+          // A cached poster can finish loading before React attaches
+          // onLoad, so check completeness on attach too — otherwise the
+          // exact case this optimises for (warm revisit) would fall
+          // through to the 5s fallback.
+          ref: (element) => {
+            if ((element == null ? void 0 : element.complete) && element.naturalWidth > 0) setPosterPainted(true);
+          },
           src: poster
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@drawbridge/components",
-	"version": "0.0.62",
+	"version": "0.0.63",
 	"exports": {
 		"./advertisement": {
 			"types": "./types/advertisement.d.ts",