@drawbridge/components 0.0.63 → 0.0.65

package/dist/video.js

@@ -141,6 +141,7 @@ var Video = ({
   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 [videoPaintable, setVideoPaintable] = (0, import_react.useState)(false);
   const [failed, setFailed] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(
     () => {
@@ -232,7 +233,18 @@ var Video = ({
             onError();
           },
           onReady: (instance) => {
+            var _a2;
             setPlayer(instance.player);
+            const element = (_a2 = instance.getInternalPlayer) == null ? void 0 : _a2.call(instance);
+            if (!element || typeof element.readyState !== "number") {
+              setVideoPaintable(true);
+              return;
+            }
+            if (element.readyState >= 2) {
+              setVideoPaintable(true);
+              return;
+            }
+            element.addEventListener("loadeddata", () => setVideoPaintable(true), { once: true });
           },
           playing: Boolean(playing),
           playsinline: true,
@@ -241,7 +253,7 @@ var Video = ({
         }
       }
     ),
-    !player && poster && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    !videoPaintable && poster && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "img",
       {
         ...{
@@ -262,7 +274,7 @@ var Video = ({
         }
       }
     ),
-    !player && !poster && !failed && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    !videoPaintable && !poster && !failed && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
         ...{
@@ -270,7 +282,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,
@@ -289,7 +301,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,
@@ -311,7 +323,7 @@ var Video = ({
     "div",
     {
       ...{
-        className
+        className: "relative " + className
       },
       children: inner
     }

package/dist/video.mjs

@@ -45,6 +45,7 @@ var Video = ({
   const [videoUrl, setVideoUrl] = useState(hls ? hls : mp4);
   const [mountPlayer, setMountPlayer] = useState(!defer);
   const [posterPainted, setPosterPainted] = useState(false);
+  const [videoPaintable, setVideoPaintable] = useState(false);
   const [failed, setFailed] = useState(false);
   useEffect(
     () => {
@@ -136,7 +137,18 @@ var Video = ({
             onError();
           },
           onReady: (instance) => {
+            var _a2;
             setPlayer(instance.player);
+            const element = (_a2 = instance.getInternalPlayer) == null ? void 0 : _a2.call(instance);
+            if (!element || typeof element.readyState !== "number") {
+              setVideoPaintable(true);
+              return;
+            }
+            if (element.readyState >= 2) {
+              setVideoPaintable(true);
+              return;
+            }
+            element.addEventListener("loadeddata", () => setVideoPaintable(true), { once: true });
           },
           playing: Boolean(playing),
           playsinline: true,
@@ -145,7 +157,7 @@ var Video = ({
         }
       }
     ),
-    !player && poster && /* @__PURE__ */ jsx(
+    !videoPaintable && poster && /* @__PURE__ */ jsx(
       "img",
       {
         ...{
@@ -166,7 +178,7 @@ var Video = ({
         }
       }
     ),
-    !player && !poster && !failed && /* @__PURE__ */ jsx(
+    !videoPaintable && !poster && !failed && /* @__PURE__ */ jsx(
       "div",
       {
         ...{
@@ -174,7 +186,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,
@@ -193,7 +205,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,
@@ -215,7 +227,7 @@ var Video = ({
     "div",
     {
       ...{
-        className
+        className: "relative " + className
       },
       children: inner
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@drawbridge/components",
-	"version": "0.0.63",
+	"version": "0.0.65",
 	"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.25"
 	},
 	"dependencies": {
 		"embla-carousel-fade": "8.6.0",