@drawbridge/components 0.0.61 → 0.0.63

package/dist/video.js

@@ -78,17 +78,45 @@ var Loader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime
 );
 var loader_default = Loader;
 
-// components/video.js
+// components/icons/warning.js
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "0 0 24 24",
+      ...props
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        ...{
+          d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var warning_default = Warning;
+
+// components/video.js
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var ReactPlayer = (0, import_dynamic.default)(
   () => import("react-player/lazy"),
   {
     ssr: false
   }
 );
+var DEFER_FALLBACK_MS = 5e3;
 var Video = ({
   className,
   controls = false,
+  defer = false,
   loop = false,
   onEnded = () => {
   },
@@ -101,15 +129,18 @@ var Video = ({
   onPlay,
   playing = false,
   poster,
+  priority = false,
   reset = false,
   style = {},
   hls,
   mp4
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const durationFired = (0, import_react.useRef)(false);
   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)(
     () => {
@@ -119,8 +150,36 @@ var Video = ({
     },
     [player, reset]
   );
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  (0, import_react.useEffect)(
+    () => {
+      if (!defer || mountPlayer || typeof window === "undefined") return;
+      if (!poster) {
+        setMountPlayer(true);
+        return;
+      }
+      let idle;
+      const start = () => setMountPlayer(true);
+      const soon = () => {
+        if ("requestIdleCallback" in window) {
+          idle = window.requestIdleCallback(start, { timeout: 300 });
+        } else {
+          idle = setTimeout(start, 100);
+        }
+      };
+      if (posterPainted) {
+        soon();
+        return () => {
+          if (idle && "cancelIdleCallback" in window) window.cancelIdleCallback(idle);
+          clearTimeout(idle);
+        };
+      }
+      const fallback = setTimeout(start, DEFER_FALLBACK_MS);
+      return () => clearTimeout(fallback);
+    },
+    [defer, mountPlayer, poster, posterPainted]
+  );
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react.Fragment, { children: [
+    mountPlayer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ReactPlayer,
       {
         ...{
@@ -182,18 +241,28 @@ var Video = ({
         }
       }
     ),
-    !player && poster && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    !player && poster && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "img",
       {
         ...{
           alt: "",
           "aria-hidden": true,
           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
         }
       }
     ),
-    !player && !poster && !failed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    !player && !poster && !failed && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
         ...{
@@ -203,7 +272,7 @@ var Video = ({
           // already reserves its height) means removing it shifts nothing.
           className: "absolute inset-0 flex justify-center items-center"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           loader_default,
           {
             ...{
@@ -215,9 +284,30 @@ var Video = ({
           }
         )
       }
+    ),
+    failed && !poster && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        ...{
+          className: "absolute inset-0 flex justify-center items-center"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          warning_default,
+          {
+            ...{
+              "aria-label": "Video unavailable",
+              className: "w-10 h-10 opacity-40",
+              role: "img",
+              style: {
+                color: (_d = (_c = style == null ? void 0 : style.background) == null ? void 0 : _c.color) == null ? void 0 : _d.hex
+              }
+            }
+          }
+        )
+      }
     )
   ] });
-  return className ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return className ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
       ...{

package/dist/video.mjs

@@ -2,6 +2,9 @@
 import {
   loader_default
 } from "./chunk-2ZYGRSSA.mjs";
+import {
+  warning_default
+} from "./chunk-Q3UIVGPQ.mjs";
 
 // components/video.js
 import dynamic from "next/dynamic";
@@ -13,9 +16,11 @@ var ReactPlayer = dynamic(
     ssr: false
   }
 );
+var DEFER_FALLBACK_MS = 5e3;
 var Video = ({
   className,
   controls = false,
+  defer = false,
   loop = false,
   onEnded = () => {
   },
@@ -28,15 +33,18 @@ var Video = ({
   onPlay,
   playing = false,
   poster,
+  priority = false,
   reset = false,
   style = {},
   hls,
   mp4
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const durationFired = useRef(false);
   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(
     () => {
@@ -46,8 +54,36 @@ var Video = ({
     },
     [player, reset]
   );
+  useEffect(
+    () => {
+      if (!defer || mountPlayer || typeof window === "undefined") return;
+      if (!poster) {
+        setMountPlayer(true);
+        return;
+      }
+      let idle;
+      const start = () => setMountPlayer(true);
+      const soon = () => {
+        if ("requestIdleCallback" in window) {
+          idle = window.requestIdleCallback(start, { timeout: 300 });
+        } else {
+          idle = setTimeout(start, 100);
+        }
+      };
+      if (posterPainted) {
+        soon();
+        return () => {
+          if (idle && "cancelIdleCallback" in window) window.cancelIdleCallback(idle);
+          clearTimeout(idle);
+        };
+      }
+      const fallback = setTimeout(start, DEFER_FALLBACK_MS);
+      return () => clearTimeout(fallback);
+    },
+    [defer, mountPlayer, poster, posterPainted]
+  );
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    mountPlayer && /* @__PURE__ */ jsx(
       ReactPlayer,
       {
         ...{
@@ -116,6 +152,16 @@ var Video = ({
           alt: "",
           "aria-hidden": true,
           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
         }
       }
@@ -142,6 +188,27 @@ var Video = ({
           }
         )
       }
+    ),
+    failed && !poster && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{
+          className: "absolute inset-0 flex justify-center items-center"
+        },
+        children: /* @__PURE__ */ jsx(
+          warning_default,
+          {
+            ...{
+              "aria-label": "Video unavailable",
+              className: "w-10 h-10 opacity-40",
+              role: "img",
+              style: {
+                color: (_d = (_c = style == null ? void 0 : style.background) == null ? void 0 : _c.color) == null ? void 0 : _d.hex
+              }
+            }
+          }
+        )
+      }
     )
   ] });
   return className ? /* @__PURE__ */ jsx(

package/package.json

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