@drawbridge/components 0.0.62 → 0.0.64

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
         }
       }
@@ -264,7 +270,7 @@ var Video = ({
           // borrows the reserved gallery box's height and collapses to 0
           // when the video is ready = a ~0.65 CLS. Overlaying it (the box
           // already reserves its height) means removing it shifts nothing.
-          className: "absolute inset-0 flex justify-center items-center"
+          className: "absolute inset-0 flex justify-center items-center pointer-events-none"
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           loader_default,
@@ -283,7 +289,7 @@ var Video = ({
       "div",
       {
         ...{
-          className: "absolute inset-0 flex justify-center items-center"
+          className: "absolute inset-0 flex justify-center items-center pointer-events-none"
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           warning_default,
@@ -305,7 +311,7 @@ var Video = ({
     "div",
     {
       ...{
-        className
+        className: "relative " + className
       },
       children: inner
     }

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
         }
       }
@@ -168,7 +174,7 @@ var Video = ({
           // borrows the reserved gallery box's height and collapses to 0
           // when the video is ready = a ~0.65 CLS. Overlaying it (the box
           // already reserves its height) means removing it shifts nothing.
-          className: "absolute inset-0 flex justify-center items-center"
+          className: "absolute inset-0 flex justify-center items-center pointer-events-none"
         },
         children: /* @__PURE__ */ jsx(
           loader_default,
@@ -187,7 +193,7 @@ var Video = ({
       "div",
       {
         ...{
-          className: "absolute inset-0 flex justify-center items-center"
+          className: "absolute inset-0 flex justify-center items-center pointer-events-none"
         },
         children: /* @__PURE__ */ jsx(
           warning_default,
@@ -209,7 +215,7 @@ var Video = ({
     "div",
     {
       ...{
-        className
+        className: "relative " + className
       },
       children: inner
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@drawbridge/components",
-	"version": "0.0.62",
+	"version": "0.0.64",
 	"exports": {
 		"./advertisement": {
 			"types": "./types/advertisement.d.ts",
@@ -355,7 +355,7 @@
 	"devDependencies": {
 		"@types/react": "18.0.0",
 		"tsup": "8.5.1",
-		"@drawbridge/drawbridge-agents": "0.1.16"
+		"@drawbridge/drawbridge-agents": "0.1.24"
 	},
 	"dependencies": {
 		"embla-carousel-fade": "8.6.0",