@drawbridge/components 0.0.61 → 0.0.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/video.js +92 -8
  2. package/dist/video.mjs +63 -2
  3. package/package.json +1 -1
package/dist/video.js CHANGED
@@ -78,17 +78,45 @@ var Loader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime
78
78
  );
79
79
  var loader_default = Loader;
80
80
 
81
- // components/video.js
81
+ // components/icons/warning.js
82
82
  var import_jsx_runtime2 = require("react/jsx-runtime");
83
+ var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
84
+ "svg",
85
+ {
86
+ ...{
87
+ fill: "none",
88
+ stroke: "currentColor",
89
+ strokeWidth: 1.5,
90
+ viewBox: "0 0 24 24",
91
+ ...props
92
+ },
93
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
94
+ "path",
95
+ {
96
+ ...{
97
+ 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",
98
+ strokeLinecap: "round",
99
+ strokeLinejoin: "round"
100
+ }
101
+ }
102
+ )
103
+ }
104
+ );
105
+ var warning_default = Warning;
106
+
107
+ // components/video.js
108
+ var import_jsx_runtime3 = require("react/jsx-runtime");
83
109
  var ReactPlayer = (0, import_dynamic.default)(
84
110
  () => import("react-player/lazy"),
85
111
  {
86
112
  ssr: false
87
113
  }
88
114
  );
115
+ var DEFER_MS = 2500;
89
116
  var Video = ({
90
117
  className,
91
118
  controls = false,
119
+ defer = false,
92
120
  loop = false,
93
121
  onEnded = () => {
94
122
  },
@@ -101,15 +129,17 @@ var Video = ({
101
129
  onPlay,
102
130
  playing = false,
103
131
  poster,
132
+ priority = false,
104
133
  reset = false,
105
134
  style = {},
106
135
  hls,
107
136
  mp4
108
137
  }) => {
109
- var _a, _b;
138
+ var _a, _b, _c, _d;
110
139
  const durationFired = (0, import_react.useRef)(false);
111
140
  const [player, setPlayer] = (0, import_react.useState)();
112
141
  const [videoUrl, setVideoUrl] = (0, import_react.useState)(hls ? hls : mp4);
142
+ const [mountPlayer, setMountPlayer] = (0, import_react.useState)(!defer);
113
143
  const [failed, setFailed] = (0, import_react.useState)(false);
114
144
  (0, import_react.useEffect)(
115
145
  () => {
@@ -119,8 +149,39 @@ var Video = ({
119
149
  },
120
150
  [player, reset]
121
151
  );
122
- const inner = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
123
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
152
+ (0, import_react.useEffect)(
153
+ () => {
154
+ if (!defer || mountPlayer || typeof window === "undefined") return;
155
+ let timer;
156
+ let idle;
157
+ const start = () => setMountPlayer(true);
158
+ const afterLoad = () => {
159
+ timer = setTimeout(
160
+ () => {
161
+ if ("requestIdleCallback" in window) {
162
+ idle = window.requestIdleCallback(start, { timeout: 2e3 });
163
+ } else {
164
+ timer = setTimeout(start, 500);
165
+ }
166
+ },
167
+ DEFER_MS
168
+ );
169
+ };
170
+ if (document.readyState === "complete") {
171
+ afterLoad();
172
+ } else {
173
+ window.addEventListener("load", afterLoad, { once: true });
174
+ }
175
+ return () => {
176
+ window.removeEventListener("load", afterLoad);
177
+ clearTimeout(timer);
178
+ if (idle) window.cancelIdleCallback(idle);
179
+ };
180
+ },
181
+ [defer, mountPlayer]
182
+ );
183
+ const inner = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react.Fragment, { children: [
184
+ mountPlayer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
124
185
  ReactPlayer,
125
186
  {
126
187
  ...{
@@ -182,18 +243,20 @@ var Video = ({
182
243
  }
183
244
  }
184
245
  ),
185
- !player && poster && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
246
+ !player && poster && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
186
247
  "img",
187
248
  {
188
249
  ...{
189
250
  alt: "",
190
251
  "aria-hidden": true,
191
252
  className: "absolute inset-0 w-full h-full object-cover pointer-events-none",
253
+ decoding: "async",
254
+ ...priority ? { fetchpriority: "high", loading: "eager" } : { loading: "lazy" },
192
255
  src: poster
193
256
  }
194
257
  }
195
258
  ),
196
- !player && !poster && !failed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
259
+ !player && !poster && !failed && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
197
260
  "div",
198
261
  {
199
262
  ...{
@@ -203,7 +266,7 @@ var Video = ({
203
266
  // already reserves its height) means removing it shifts nothing.
204
267
  className: "absolute inset-0 flex justify-center items-center"
205
268
  },
206
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
269
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
207
270
  loader_default,
208
271
  {
209
272
  ...{
@@ -215,9 +278,30 @@ var Video = ({
215
278
  }
216
279
  )
217
280
  }
281
+ ),
282
+ failed && !poster && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
283
+ "div",
284
+ {
285
+ ...{
286
+ className: "absolute inset-0 flex justify-center items-center"
287
+ },
288
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
289
+ warning_default,
290
+ {
291
+ ...{
292
+ "aria-label": "Video unavailable",
293
+ className: "w-10 h-10 opacity-40",
294
+ role: "img",
295
+ style: {
296
+ color: (_d = (_c = style == null ? void 0 : style.background) == null ? void 0 : _c.color) == null ? void 0 : _d.hex
297
+ }
298
+ }
299
+ }
300
+ )
301
+ }
218
302
  )
219
303
  ] });
220
- return className ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
304
+ return className ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
221
305
  "div",
222
306
  {
223
307
  ...{
package/dist/video.mjs CHANGED
@@ -2,6 +2,9 @@
2
2
  import {
3
3
  loader_default
4
4
  } from "./chunk-2ZYGRSSA.mjs";
5
+ import {
6
+ warning_default
7
+ } from "./chunk-Q3UIVGPQ.mjs";
5
8
 
6
9
  // components/video.js
7
10
  import dynamic from "next/dynamic";
@@ -13,9 +16,11 @@ var ReactPlayer = dynamic(
13
16
  ssr: false
14
17
  }
15
18
  );
19
+ var DEFER_MS = 2500;
16
20
  var Video = ({
17
21
  className,
18
22
  controls = false,
23
+ defer = false,
19
24
  loop = false,
20
25
  onEnded = () => {
21
26
  },
@@ -28,15 +33,17 @@ var Video = ({
28
33
  onPlay,
29
34
  playing = false,
30
35
  poster,
36
+ priority = false,
31
37
  reset = false,
32
38
  style = {},
33
39
  hls,
34
40
  mp4
35
41
  }) => {
36
- var _a, _b;
42
+ var _a, _b, _c, _d;
37
43
  const durationFired = useRef(false);
38
44
  const [player, setPlayer] = useState();
39
45
  const [videoUrl, setVideoUrl] = useState(hls ? hls : mp4);
46
+ const [mountPlayer, setMountPlayer] = useState(!defer);
40
47
  const [failed, setFailed] = useState(false);
41
48
  useEffect(
42
49
  () => {
@@ -46,8 +53,39 @@ var Video = ({
46
53
  },
47
54
  [player, reset]
48
55
  );
56
+ useEffect(
57
+ () => {
58
+ if (!defer || mountPlayer || typeof window === "undefined") return;
59
+ let timer;
60
+ let idle;
61
+ const start = () => setMountPlayer(true);
62
+ const afterLoad = () => {
63
+ timer = setTimeout(
64
+ () => {
65
+ if ("requestIdleCallback" in window) {
66
+ idle = window.requestIdleCallback(start, { timeout: 2e3 });
67
+ } else {
68
+ timer = setTimeout(start, 500);
69
+ }
70
+ },
71
+ DEFER_MS
72
+ );
73
+ };
74
+ if (document.readyState === "complete") {
75
+ afterLoad();
76
+ } else {
77
+ window.addEventListener("load", afterLoad, { once: true });
78
+ }
79
+ return () => {
80
+ window.removeEventListener("load", afterLoad);
81
+ clearTimeout(timer);
82
+ if (idle) window.cancelIdleCallback(idle);
83
+ };
84
+ },
85
+ [defer, mountPlayer]
86
+ );
49
87
  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
50
- /* @__PURE__ */ jsx(
88
+ mountPlayer && /* @__PURE__ */ jsx(
51
89
  ReactPlayer,
52
90
  {
53
91
  ...{
@@ -116,6 +154,8 @@ var Video = ({
116
154
  alt: "",
117
155
  "aria-hidden": true,
118
156
  className: "absolute inset-0 w-full h-full object-cover pointer-events-none",
157
+ decoding: "async",
158
+ ...priority ? { fetchpriority: "high", loading: "eager" } : { loading: "lazy" },
119
159
  src: poster
120
160
  }
121
161
  }
@@ -142,6 +182,27 @@ var Video = ({
142
182
  }
143
183
  )
144
184
  }
185
+ ),
186
+ failed && !poster && /* @__PURE__ */ jsx(
187
+ "div",
188
+ {
189
+ ...{
190
+ className: "absolute inset-0 flex justify-center items-center"
191
+ },
192
+ children: /* @__PURE__ */ jsx(
193
+ warning_default,
194
+ {
195
+ ...{
196
+ "aria-label": "Video unavailable",
197
+ className: "w-10 h-10 opacity-40",
198
+ role: "img",
199
+ style: {
200
+ color: (_d = (_c = style == null ? void 0 : style.background) == null ? void 0 : _c.color) == null ? void 0 : _d.hex
201
+ }
202
+ }
203
+ }
204
+ )
205
+ }
145
206
  )
146
207
  ] });
147
208
  return className ? /* @__PURE__ */ jsx(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drawbridge/components",
3
- "version": "0.0.61",
3
+ "version": "0.0.62",
4
4
  "exports": {
5
5
  "./advertisement": {
6
6
  "types": "./types/advertisement.d.ts",