@videojs/react 10.0.0-beta.30 → 10.0.0-beta.32

package/dist/default/icons/dist/react/minimal/volume-high.js

@@ -1,16 +1,19 @@
+import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region ../icons/dist/react/minimal/volume-high.js
-const VolumeHighIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+const VolumeHighIcon = (props, ref) => /* @__PURE__ */ jsxs("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 18,
 	height: 18,
 	fill: "currentColor",
 	"aria-hidden": "true",
 	viewBox: "0 0 18 18",
+	ref,
 	...props,
 	children: [/* @__PURE__ */ jsx("path", { d: "M15.6 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4C15.4 5.9 16 7.4 16 9s-.6 3.1-1.8 4.3c-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7" }), /* @__PURE__ */ jsx("path", { d: "M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752m10.568.59a.91.91 0 0 1 0-1.316.91.91 0 0 1 1.316 0c1.203 1.203 1.47 2.216 1.522 3.208q.012.255.011.51c0 1.16-.358 2.733-1.533 3.803a.7.7 0 0 1-.298.156c-.382.106-.873-.011-1.018-.156a.91.91 0 0 1 0-1.316c.57-.57.995-1.551.995-2.487 0-.944-.26-1.667-.995-2.402" })]
 });
+const ForwardRef = forwardRef(VolumeHighIcon);
 //#endregion
-export { VolumeHighIcon as default };
+export { ForwardRef as default };
 
 //# sourceMappingURL=volume-high.js.map

package/dist/default/icons/dist/react/minimal/volume-high.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-high.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/volume-high.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst VolumeHighIcon = (props) => /* @__PURE__ */ _jsxs(\"svg\", {\n\txmlns: \"http://www.w3.org/2000/svg\",\n\twidth: 18,\n\theight: 18,\n\tfill: \"currentColor\",\n\t\"aria-hidden\": \"true\",\n\tviewBox: \"0 0 18 18\",\n\t...props,\n\tchildren: [/* @__PURE__ */ _jsx(\"path\", { d: \"M15.6 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4C15.4 5.9 16 7.4 16 9s-.6 3.1-1.8 4.3c-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7\" }), /* @__PURE__ */ _jsx(\"path\", { d: \"M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752m10.568.59a.91.91 0 0 1 0-1.316.91.91 0 0 1 1.316 0c1.203 1.203 1.47 2.216 1.522 3.208q.012.255.011.51c0 1.16-.358 2.733-1.533 3.803a.7.7 0 0 1-.298.156c-.382.106-.873-.011-1.018-.156a.91.91 0 0 1 0-1.316c.57-.57.995-1.551.995-2.487 0-.944-.26-1.667-.995-2.402\" })]\n});\nexport default VolumeHighIcon;\n"],"mappings":";;AACA,MAAM,kBAAkB,UAA0B,qBAAM,OAAO;CAC9D,OAAO;CACP,OAAO;CACP,QAAQ;CACR,MAAM;CACN,eAAe;CACf,SAAS;CACT,GAAG;CACH,UAAU,CAAiB,oBAAK,QAAQ,EAAE,GAAG,kKAAkK,CAAC,GAAmB,oBAAK,QAAQ,EAAE,GAAG,waAAwa,CAAC,CAAC;AAChqB,CAAC"}
+{"version":3,"file":"volume-high.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/volume-high.js"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst VolumeHighIcon = (props, ref) => /* @__PURE__ */ _jsxs(\"svg\", {\n\txmlns: \"http://www.w3.org/2000/svg\",\n\twidth: 18,\n\theight: 18,\n\tfill: \"currentColor\",\n\t\"aria-hidden\": \"true\",\n\tviewBox: \"0 0 18 18\",\n\tref,\n\t...props,\n\tchildren: [/* @__PURE__ */ _jsx(\"path\", { d: \"M15.6 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4C15.4 5.9 16 7.4 16 9s-.6 3.1-1.8 4.3c-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7\" }), /* @__PURE__ */ _jsx(\"path\", { d: \"M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752m10.568.59a.91.91 0 0 1 0-1.316.91.91 0 0 1 1.316 0c1.203 1.203 1.47 2.216 1.522 3.208q.012.255.011.51c0 1.16-.358 2.733-1.533 3.803a.7.7 0 0 1-.298.156c-.382.106-.873-.011-1.018-.156a.91.91 0 0 1 0-1.316c.57-.57.995-1.551.995-2.487 0-.944-.26-1.667-.995-2.402\" })]\n});\nconst ForwardRef = forwardRef(VolumeHighIcon);\nexport default ForwardRef;\n"],"mappings":";;;AAEA,MAAM,kBAAkB,OAAO,QAAwB,qBAAM,OAAO;CACnE,OAAO;CACP,OAAO;CACP,QAAQ;CACR,MAAM;CACN,eAAe;CACf,SAAS;CACT;CACA,GAAG;CACH,UAAU,CAAiB,oBAAK,QAAQ,EAAE,GAAG,kKAAkK,CAAC,GAAmB,oBAAK,QAAQ,EAAE,GAAG,waAAwa,CAAC,CAAC;AAChqB,CAAC;AACD,MAAM,aAAa,WAAW,cAAc"}

package/dist/default/icons/dist/react/minimal/volume-low.js

@@ -1,16 +1,19 @@
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region ../icons/dist/react/minimal/volume-low.js
-const VolumeLowIcon = (props) => /* @__PURE__ */ jsx("svg", {
+const VolumeLowIcon = (props, ref) => /* @__PURE__ */ jsx("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 18,
 	height: 18,
 	fill: "currentColor",
 	"aria-hidden": "true",
 	viewBox: "0 0 18 18",
+	ref,
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752m10.568.59a.91.91 0 0 1 0-1.316.91.91 0 0 1 1.316 0c1.203 1.203 1.47 2.216 1.522 3.208q.012.255.011.51c0 1.16-.358 2.733-1.533 3.803a.7.7 0 0 1-.298.156c-.382.106-.873-.011-1.018-.156a.91.91 0 0 1 0-1.316c.57-.57.995-1.551.995-2.487 0-.944-.26-1.667-.995-2.402" })
 });
+const ForwardRef = forwardRef(VolumeLowIcon);
 //#endregion
-export { VolumeLowIcon as default };
+export { ForwardRef as default };
 
 //# sourceMappingURL=volume-low.js.map

package/dist/default/icons/dist/react/minimal/volume-low.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-low.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/volume-low.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nconst VolumeLowIcon = (props) => /* @__PURE__ */ _jsx(\"svg\", {\n\txmlns: \"http://www.w3.org/2000/svg\",\n\twidth: 18,\n\theight: 18,\n\tfill: \"currentColor\",\n\t\"aria-hidden\": \"true\",\n\tviewBox: \"0 0 18 18\",\n\t...props,\n\tchildren: /* @__PURE__ */ _jsx(\"path\", { d: \"M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752m10.568.59a.91.91 0 0 1 0-1.316.91.91 0 0 1 1.316 0c1.203 1.203 1.47 2.216 1.522 3.208q.012.255.011.51c0 1.16-.358 2.733-1.533 3.803a.7.7 0 0 1-.298.156c-.382.106-.873-.011-1.018-.156a.91.91 0 0 1 0-1.316c.57-.57.995-1.551.995-2.487 0-.944-.26-1.667-.995-2.402\" })\n});\nexport default VolumeLowIcon;\n"],"mappings":";;AACA,MAAM,iBAAiB,UAA0B,oBAAK,OAAO;CAC5D,OAAO;CACP,OAAO;CACP,QAAQ;CACR,MAAM;CACN,eAAe;CACf,SAAS;CACT,GAAG;CACH,UAA0B,oBAAK,QAAQ,EAAE,GAAG,waAAwa,CAAC;AACtd,CAAC"}
+{"version":3,"file":"volume-low.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/volume-low.js"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst VolumeLowIcon = (props, ref) => /* @__PURE__ */ _jsx(\"svg\", {\n\txmlns: \"http://www.w3.org/2000/svg\",\n\twidth: 18,\n\theight: 18,\n\tfill: \"currentColor\",\n\t\"aria-hidden\": \"true\",\n\tviewBox: \"0 0 18 18\",\n\tref,\n\t...props,\n\tchildren: /* @__PURE__ */ _jsx(\"path\", { d: \"M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752m10.568.59a.91.91 0 0 1 0-1.316.91.91 0 0 1 1.316 0c1.203 1.203 1.47 2.216 1.522 3.208q.012.255.011.51c0 1.16-.358 2.733-1.533 3.803a.7.7 0 0 1-.298.156c-.382.106-.873-.011-1.018-.156a.91.91 0 0 1 0-1.316c.57-.57.995-1.551.995-2.487 0-.944-.26-1.667-.995-2.402\" })\n});\nconst ForwardRef = forwardRef(VolumeLowIcon);\nexport default ForwardRef;\n"],"mappings":";;;AAEA,MAAM,iBAAiB,OAAO,QAAwB,oBAAK,OAAO;CACjE,OAAO;CACP,OAAO;CACP,QAAQ;CACR,MAAM;CACN,eAAe;CACf,SAAS;CACT;CACA,GAAG;CACH,UAA0B,oBAAK,QAAQ,EAAE,GAAG,waAAwa,CAAC;AACtd,CAAC;AACD,MAAM,aAAa,WAAW,aAAa"}

package/dist/default/icons/dist/react/minimal/volume-off.js

@@ -1,16 +1,19 @@
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region ../icons/dist/react/minimal/volume-off.js
-const VolumeOffIcon = (props) => /* @__PURE__ */ jsx("svg", {
+const VolumeOffIcon = (props, ref) => /* @__PURE__ */ jsx("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 18,
 	height: 18,
 	fill: "currentColor",
 	"aria-hidden": "true",
 	viewBox: "0 0 18 18",
+	ref,
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752M14.5 7.586l-1.768-1.768a1 1 0 1 0-1.414 1.414L13.085 9l-1.767 1.768a1 1 0 0 0 1.414 1.414l1.768-1.768 1.768 1.768a1 1 0 0 0 1.414-1.414L15.914 9l1.768-1.768a1 1 0 0 0-1.414-1.414z" })
 });
+const ForwardRef = forwardRef(VolumeOffIcon);
 //#endregion
-export { VolumeOffIcon as default };
+export { ForwardRef as default };
 
 //# sourceMappingURL=volume-off.js.map

package/dist/default/icons/dist/react/minimal/volume-off.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-off.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/volume-off.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nconst VolumeOffIcon = (props) => /* @__PURE__ */ _jsx(\"svg\", {\n\txmlns: \"http://www.w3.org/2000/svg\",\n\twidth: 18,\n\theight: 18,\n\tfill: \"currentColor\",\n\t\"aria-hidden\": \"true\",\n\tviewBox: \"0 0 18 18\",\n\t...props,\n\tchildren: /* @__PURE__ */ _jsx(\"path\", { d: \"M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752M14.5 7.586l-1.768-1.768a1 1 0 1 0-1.414 1.414L13.085 9l-1.767 1.768a1 1 0 0 0 1.414 1.414l1.768-1.768 1.768 1.768a1 1 0 0 0 1.414-1.414L15.914 9l1.768-1.768a1 1 0 0 0-1.414-1.414z\" })\n});\nexport default VolumeOffIcon;\n"],"mappings":";;AACA,MAAM,iBAAiB,UAA0B,oBAAK,OAAO;CAC5D,OAAO;CACP,OAAO;CACP,QAAQ;CACR,MAAM;CACN,eAAe;CACf,SAAS;CACT,GAAG;CACH,UAA0B,oBAAK,QAAQ,EAAE,GAAG,wVAAwV,CAAC;AACtY,CAAC"}
+{"version":3,"file":"volume-off.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/volume-off.js"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst VolumeOffIcon = (props, ref) => /* @__PURE__ */ _jsx(\"svg\", {\n\txmlns: \"http://www.w3.org/2000/svg\",\n\twidth: 18,\n\theight: 18,\n\tfill: \"currentColor\",\n\t\"aria-hidden\": \"true\",\n\tviewBox: \"0 0 18 18\",\n\tref,\n\t...props,\n\tchildren: /* @__PURE__ */ _jsx(\"path\", { d: \"M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752M14.5 7.586l-1.768-1.768a1 1 0 1 0-1.414 1.414L13.085 9l-1.767 1.768a1 1 0 0 0 1.414 1.414l1.768-1.768 1.768 1.768a1 1 0 0 0 1.414-1.414L15.914 9l1.768-1.768a1 1 0 0 0-1.414-1.414z\" })\n});\nconst ForwardRef = forwardRef(VolumeOffIcon);\nexport default ForwardRef;\n"],"mappings":";;;AAEA,MAAM,iBAAiB,OAAO,QAAwB,oBAAK,OAAO;CACjE,OAAO;CACP,OAAO;CACP,QAAQ;CACR,MAAM;CACN,eAAe;CACf,SAAS;CACT;CACA,GAAG;CACH,UAA0B,oBAAK,QAAQ,EAAE,GAAG,wVAAwV,CAAC;AACtY,CAAC;AACD,MAAM,aAAa,WAAW,aAAa"}

package/dist/default/icons/index.js

@@ -1,26 +1,26 @@
-import AirPlayEnterIcon from "./dist/react/default/airplay-enter.js";
-import AirPlayExitIcon from "./dist/react/default/airplay-exit.js";
-import CaptionsOffIcon from "./dist/react/default/captions-off.js";
-import CaptionsOnIcon from "./dist/react/default/captions-on.js";
-import CastEnterIcon from "./dist/react/default/cast-enter.js";
-import CastExitIcon from "./dist/react/default/cast-exit.js";
-import CheckIcon from "./dist/react/default/check.js";
-import ChevronIcon from "./dist/react/default/chevron.js";
-import FullscreenEnterIcon from "./dist/react/default/fullscreen-enter.js";
-import FullscreenExitIcon from "./dist/react/default/fullscreen-exit.js";
-import GearIcon from "./dist/react/default/gear.js";
-import PauseIcon from "./dist/react/default/pause.js";
-import PipEnterIcon from "./dist/react/default/pip-enter.js";
-import PipExitIcon from "./dist/react/default/pip-exit.js";
-import PlayIcon from "./dist/react/default/play.js";
-import QualityIcon from "./dist/react/default/quality.js";
-import RestartIcon from "./dist/react/default/restart.js";
-import SeekIcon from "./dist/react/default/seek.js";
-import SpeechIcon from "./dist/react/default/speech.js";
-import SpeedIcon from "./dist/react/default/speed.js";
-import SpinnerIcon from "./dist/react/default/spinner.js";
-import SwitchesIcon from "./dist/react/default/switches.js";
-import VolumeHighIcon from "./dist/react/default/volume-high.js";
-import VolumeLowIcon from "./dist/react/default/volume-low.js";
-import VolumeOffIcon from "./dist/react/default/volume-off.js";
-export { AirPlayEnterIcon, AirPlayExitIcon, CaptionsOffIcon, CaptionsOnIcon, CastEnterIcon, CastExitIcon, CheckIcon, ChevronIcon, FullscreenEnterIcon, FullscreenExitIcon, GearIcon, PauseIcon, PipEnterIcon, PipExitIcon, PlayIcon, QualityIcon, RestartIcon, SeekIcon, SpeechIcon, SpeedIcon, SpinnerIcon, SwitchesIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon };
+import ForwardRef from "./dist/react/default/airplay-enter.js";
+import ForwardRef$1 from "./dist/react/default/airplay-exit.js";
+import ForwardRef$2 from "./dist/react/default/captions-off.js";
+import ForwardRef$3 from "./dist/react/default/captions-on.js";
+import ForwardRef$4 from "./dist/react/default/cast-enter.js";
+import ForwardRef$5 from "./dist/react/default/cast-exit.js";
+import ForwardRef$6 from "./dist/react/default/check.js";
+import ForwardRef$7 from "./dist/react/default/chevron.js";
+import ForwardRef$8 from "./dist/react/default/fullscreen-enter.js";
+import ForwardRef$9 from "./dist/react/default/fullscreen-exit.js";
+import ForwardRef$10 from "./dist/react/default/gear.js";
+import ForwardRef$11 from "./dist/react/default/pause.js";
+import ForwardRef$12 from "./dist/react/default/pip-enter.js";
+import ForwardRef$13 from "./dist/react/default/pip-exit.js";
+import ForwardRef$14 from "./dist/react/default/play.js";
+import ForwardRef$15 from "./dist/react/default/quality.js";
+import ForwardRef$16 from "./dist/react/default/restart.js";
+import ForwardRef$17 from "./dist/react/default/seek.js";
+import ForwardRef$18 from "./dist/react/default/speech.js";
+import ForwardRef$19 from "./dist/react/default/speed.js";
+import ForwardRef$20 from "./dist/react/default/spinner.js";
+import ForwardRef$21 from "./dist/react/default/switches.js";
+import ForwardRef$22 from "./dist/react/default/volume-high.js";
+import ForwardRef$23 from "./dist/react/default/volume-low.js";
+import ForwardRef$24 from "./dist/react/default/volume-off.js";
+export { ForwardRef as AirPlayEnterIcon, ForwardRef$1 as AirPlayExitIcon, ForwardRef$2 as CaptionsOffIcon, ForwardRef$3 as CaptionsOnIcon, ForwardRef$4 as CastEnterIcon, ForwardRef$5 as CastExitIcon, ForwardRef$6 as CheckIcon, ForwardRef$7 as ChevronIcon, ForwardRef$8 as FullscreenEnterIcon, ForwardRef$9 as FullscreenExitIcon, ForwardRef$10 as GearIcon, ForwardRef$11 as PauseIcon, ForwardRef$12 as PipEnterIcon, ForwardRef$13 as PipExitIcon, ForwardRef$14 as PlayIcon, ForwardRef$15 as QualityIcon, ForwardRef$16 as RestartIcon, ForwardRef$17 as SeekIcon, ForwardRef$18 as SpeechIcon, ForwardRef$19 as SpeedIcon, ForwardRef$20 as SpinnerIcon, ForwardRef$21 as SwitchesIcon, ForwardRef$22 as VolumeHighIcon, ForwardRef$23 as VolumeLowIcon, ForwardRef$24 as VolumeOffIcon };

package/dist/default/icons/minimal/index.js

@@ -1,26 +1,26 @@
-import AirPlayEnterIcon from "../dist/react/minimal/airplay-enter.js";
-import AirPlayExitIcon from "../dist/react/minimal/airplay-exit.js";
-import CaptionsOffIcon from "../dist/react/minimal/captions-off.js";
-import CaptionsOnIcon from "../dist/react/minimal/captions-on.js";
-import CastEnterIcon from "../dist/react/minimal/cast-enter.js";
-import CastExitIcon from "../dist/react/minimal/cast-exit.js";
-import CheckIcon from "../dist/react/minimal/check.js";
-import ChevronIcon from "../dist/react/minimal/chevron.js";
-import FullscreenEnterIcon from "../dist/react/minimal/fullscreen-enter.js";
-import FullscreenExitIcon from "../dist/react/minimal/fullscreen-exit.js";
-import GearIcon from "../dist/react/minimal/gear.js";
-import PauseIcon from "../dist/react/minimal/pause.js";
-import PipEnterIcon from "../dist/react/minimal/pip-enter.js";
-import PipExitIcon from "../dist/react/minimal/pip-exit.js";
-import PlayIcon from "../dist/react/minimal/play.js";
-import QualityIcon from "../dist/react/minimal/quality.js";
-import RestartIcon from "../dist/react/minimal/restart.js";
-import SeekIcon from "../dist/react/minimal/seek.js";
-import SpeechIcon from "../dist/react/minimal/speech.js";
-import SpeedIcon from "../dist/react/minimal/speed.js";
-import SpinnerIcon from "../dist/react/minimal/spinner.js";
-import SwitchesIcon from "../dist/react/minimal/switches.js";
-import VolumeHighIcon from "../dist/react/minimal/volume-high.js";
-import VolumeLowIcon from "../dist/react/minimal/volume-low.js";
-import VolumeOffIcon from "../dist/react/minimal/volume-off.js";
-export { AirPlayEnterIcon, AirPlayExitIcon, CaptionsOffIcon, CaptionsOnIcon, CastEnterIcon, CastExitIcon, CheckIcon, ChevronIcon, FullscreenEnterIcon, FullscreenExitIcon, GearIcon, PauseIcon, PipEnterIcon, PipExitIcon, PlayIcon, QualityIcon, RestartIcon, SeekIcon, SpeechIcon, SpeedIcon, SpinnerIcon, SwitchesIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon };
+import ForwardRef from "../dist/react/minimal/airplay-enter.js";
+import ForwardRef$1 from "../dist/react/minimal/airplay-exit.js";
+import ForwardRef$2 from "../dist/react/minimal/captions-off.js";
+import ForwardRef$3 from "../dist/react/minimal/captions-on.js";
+import ForwardRef$4 from "../dist/react/minimal/cast-enter.js";
+import ForwardRef$5 from "../dist/react/minimal/cast-exit.js";
+import ForwardRef$6 from "../dist/react/minimal/check.js";
+import ForwardRef$7 from "../dist/react/minimal/chevron.js";
+import ForwardRef$8 from "../dist/react/minimal/fullscreen-enter.js";
+import ForwardRef$9 from "../dist/react/minimal/fullscreen-exit.js";
+import ForwardRef$10 from "../dist/react/minimal/gear.js";
+import ForwardRef$11 from "../dist/react/minimal/pause.js";
+import ForwardRef$12 from "../dist/react/minimal/pip-enter.js";
+import ForwardRef$13 from "../dist/react/minimal/pip-exit.js";
+import ForwardRef$14 from "../dist/react/minimal/play.js";
+import ForwardRef$15 from "../dist/react/minimal/quality.js";
+import ForwardRef$16 from "../dist/react/minimal/restart.js";
+import ForwardRef$17 from "../dist/react/minimal/seek.js";
+import ForwardRef$18 from "../dist/react/minimal/speech.js";
+import ForwardRef$19 from "../dist/react/minimal/speed.js";
+import ForwardRef$20 from "../dist/react/minimal/spinner.js";
+import ForwardRef$21 from "../dist/react/minimal/switches.js";
+import ForwardRef$22 from "../dist/react/minimal/volume-high.js";
+import ForwardRef$23 from "../dist/react/minimal/volume-low.js";
+import ForwardRef$24 from "../dist/react/minimal/volume-off.js";
+export { ForwardRef as AirPlayEnterIcon, ForwardRef$1 as AirPlayExitIcon, ForwardRef$2 as CaptionsOffIcon, ForwardRef$3 as CaptionsOnIcon, ForwardRef$4 as CastEnterIcon, ForwardRef$5 as CastExitIcon, ForwardRef$6 as CheckIcon, ForwardRef$7 as ChevronIcon, ForwardRef$8 as FullscreenEnterIcon, ForwardRef$9 as FullscreenExitIcon, ForwardRef$10 as GearIcon, ForwardRef$11 as PauseIcon, ForwardRef$12 as PipEnterIcon, ForwardRef$13 as PipExitIcon, ForwardRef$14 as PlayIcon, ForwardRef$15 as QualityIcon, ForwardRef$16 as RestartIcon, ForwardRef$17 as SeekIcon, ForwardRef$18 as SpeechIcon, ForwardRef$19 as SpeedIcon, ForwardRef$20 as SpinnerIcon, ForwardRef$21 as SwitchesIcon, ForwardRef$22 as VolumeHighIcon, ForwardRef$23 as VolumeLowIcon, ForwardRef$24 as VolumeOffIcon };

package/dist/default/index.js

@@ -16,7 +16,8 @@ import { useHotkeyShortcut } from "./ui/hotkey/use-hotkey-shortcut.js";
 import { useMenuContext, useOptionalMenuContext } from "./ui/menu/context.js";
 import { useTooltipContext } from "./ui/tooltip/context.js";
 import { AirPlayButton } from "./ui/airplay-button/airplay-button.js";
-import { useAlertDialogContext } from "./ui/alert-dialog/context.js";
+import { useDialogContext } from "./ui/dialog/context.js";
+import { index_parts_exports as index_parts_exports$2 } from "./ui/dialog/index.parts.js";
 import { index_parts_exports } from "./ui/alert-dialog/index.parts.js";
 import { useAudioTrackOptions } from "./ui/audio-track/use-audio-track-options.js";
 import { AudioTrackRadioGroup } from "./ui/audio-track-radio-group/audio-track-radio-group.js";
@@ -27,7 +28,7 @@ import { CaptionsRadioGroup } from "./ui/captions-radio-group/captions-radio-gro
 import { CastButton } from "./ui/cast-button/cast-button.js";
 import { index_parts_exports as index_parts_exports$1 } from "./ui/controls/index.parts.js";
 import { useErrorDialogContext } from "./ui/error-dialog/context.js";
-import { index_parts_exports as index_parts_exports$2 } from "./ui/error-dialog/index.parts.js";
+import { index_parts_exports as index_parts_exports$3 } from "./ui/error-dialog/index.parts.js";
 import { FullscreenButton } from "./ui/fullscreen-button/fullscreen-button.js";
 import { Gesture, MediaGesture } from "./ui/gesture/gesture.js";
 import { useDoubleTapGesture } from "./ui/gesture/use-doubletap-gesture.js";
@@ -36,7 +37,7 @@ import { useSlider } from "./ui/hooks/use-slider.js";
 import { Hotkey, MediaHotkey } from "./ui/hotkey/hotkey.js";
 import { useHotkey } from "./ui/hotkey/use-hotkey.js";
 import { LiveButton } from "./ui/live-button/live-button.js";
-import { index_parts_exports as index_parts_exports$3 } from "./ui/menu/index.parts.js";
+import { index_parts_exports as index_parts_exports$4 } from "./ui/menu/index.parts.js";
 import { MuteButton } from "./ui/mute-button/mute-button.js";
 import { PiPButton } from "./ui/pip-button/pip-button.js";
 import { PlayButton } from "./ui/play-button/play-button.js";
@@ -44,22 +45,23 @@ import { usePlaybackRateOptions } from "./ui/playback-rate/use-playback-rate-opt
 import { PlaybackRateButton } from "./ui/playback-rate-button/playback-rate-button.js";
 import { PlaybackRateRadioGroup } from "./ui/playback-rate-radio-group/playback-rate-radio-group.js";
 import { usePopoverContext } from "./ui/popover/context.js";
-import { index_parts_exports as index_parts_exports$4 } from "./ui/popover/index.parts.js";
+import { index_parts_exports as index_parts_exports$5 } from "./ui/popover/index.parts.js";
 import { Poster } from "./ui/poster/poster.js";
 import { useQualityOptions } from "./ui/quality/use-quality-options.js";
 import { QualityRadioGroup } from "./ui/quality-radio-group/quality-radio-group.js";
 import { SeekButton } from "./ui/seek-button/seek-button.js";
-import { index_parts_exports as index_parts_exports$5 } from "./ui/seek-indicator/index.parts.js";
+import { index_parts_exports as index_parts_exports$6 } from "./ui/seek-indicator/index.parts.js";
 import { Thumbnail } from "./ui/thumbnail/thumbnail.js";
-import { index_parts_exports as index_parts_exports$6 } from "./ui/slider/index.parts.js";
+import { index_parts_exports as index_parts_exports$7 } from "./ui/slider/index.parts.js";
 import { StatusAnnouncer } from "./ui/status-announcer/status-announcer.js";
-import { index_parts_exports as index_parts_exports$7 } from "./ui/status-indicator/index.parts.js";
-import { index_parts_exports as index_parts_exports$8 } from "./ui/time/index.parts.js";
-import { index_parts_exports as index_parts_exports$9 } from "./ui/time-slider/index.parts.js";
+import { index_parts_exports as index_parts_exports$8 } from "./ui/status-indicator/index.parts.js";
+import { index_parts_exports as index_parts_exports$9 } from "./ui/time/index.parts.js";
+import { index_parts_exports as index_parts_exports$10 } from "./ui/time-slider/index.parts.js";
 import { Title } from "./ui/title/title.js";
-import { index_parts_exports as index_parts_exports$10 } from "./ui/tooltip/index.parts.js";
-import { index_parts_exports as index_parts_exports$11 } from "./ui/volume-indicator/index.parts.js";
-import { index_parts_exports as index_parts_exports$12 } from "./ui/volume-slider/index.parts.js";
+import { index_parts_exports as index_parts_exports$11 } from "./ui/tooltip/index.parts.js";
+import { index_parts_exports as index_parts_exports$12 } from "./ui/volume-indicator/index.parts.js";
+import { index_parts_exports as index_parts_exports$13 } from "./ui/volume-popover/index.parts.js";
+import { index_parts_exports as index_parts_exports$14 } from "./ui/volume-slider/index.parts.js";
 import { useAttachMedia } from "./utils/use-attach-media.js";
 import { useMediaComponent } from "./utils/use-media-component.js";
 import { useMediaInstance } from "./utils/use-media-instance.js";
@@ -68,4 +70,4 @@ import { createSelector, shallowEqual } from "@videojs/store";
 import { useSelector, useStore } from "@videojs/store/react";
 export * from "@videojs/core/dom";
 export * from "@videojs/media/dom";
-export { AirPlayButton, index_parts_exports as AlertDialog, AudioTrackRadioGroup, BufferingIndicator, CaptionsButton, CaptionsRadioGroup, CastButton, Container, index_parts_exports$1 as Controls, index_parts_exports$2 as ErrorDialog, FullscreenButton, Gesture, Hotkey, I18nContext, I18nProvider, LiveButton, MediaGesture, MediaHotkey, index_parts_exports$3 as Menu, MuteButton, PiPButton, PlayButton, PlaybackRateButton, PlaybackRateRadioGroup, index_parts_exports$4 as Popover, Poster, QualityRadioGroup, SeekButton, index_parts_exports$5 as SeekIndicator, index_parts_exports$6 as Slider, StatusAnnouncer, index_parts_exports$7 as StatusIndicator, Text, Thumbnail, index_parts_exports$8 as Time, index_parts_exports$9 as TimeSlider, Title, index_parts_exports$10 as Tooltip, index_parts_exports$11 as VolumeIndicator, index_parts_exports$12 as VolumeSlider, composeRefs, createI18n, createPlayer, createSelector, createTranslator, findLocaleKeys, getI18nTranslations, hasMetadata, hasRegisteredLocale, isMediaAudioTrackCapable, isMediaBufferCapable, isMediaErrorCapable, isMediaLiveCapable, isMediaPauseCapable, isMediaPlaybackRateCapable, isMediaRemotePlaybackCapable, isMediaSeekCapable, isMediaSourceCapable, isMediaStreamTypeCapable, isMediaTextTrackCapable, isMediaVideoDimensionsCapable, isMediaVideoRenditionCapable, isMediaVolumeCapable, isQuerySelectorAllCapable, mergeProps, onI18nRegistryChange, registerI18n, renderElement, shallowEqual, useAlertDialogContext, useAttachMedia, useAudioTrackOptions, useButton, useCaptionsOptions, useComposedRefs, useContainer, useContainerAttach, useDestroy, useDoubleTapGesture, useErrorDialogContext, useHotkey, useHotkeyShortcut, useLatestRef, useLocale, useMedia, useMediaAttach, useMediaComponent, useMediaInstance, useMenuContext, useOptionalContainer, useOptionalMenuContext, useOptionalPlayer, usePlaybackRateOptions, usePlayer, usePlayerContext, usePopoverContext, useQualityOptions, useSelector, useSlider, useStore, useTapGesture, useTooltipContext, useTranslator };
+export { AirPlayButton, index_parts_exports as AlertDialog, AudioTrackRadioGroup, BufferingIndicator, CaptionsButton, CaptionsRadioGroup, CastButton, Container, index_parts_exports$1 as Controls, index_parts_exports$2 as Dialog, index_parts_exports$3 as ErrorDialog, FullscreenButton, Gesture, Hotkey, I18nContext, I18nProvider, LiveButton, MediaGesture, MediaHotkey, index_parts_exports$4 as Menu, MuteButton, PiPButton, PlayButton, PlaybackRateButton, PlaybackRateRadioGroup, index_parts_exports$5 as Popover, Poster, QualityRadioGroup, SeekButton, index_parts_exports$6 as SeekIndicator, index_parts_exports$7 as Slider, StatusAnnouncer, index_parts_exports$8 as StatusIndicator, Text, Thumbnail, index_parts_exports$9 as Time, index_parts_exports$10 as TimeSlider, Title, index_parts_exports$11 as Tooltip, index_parts_exports$12 as VolumeIndicator, index_parts_exports$13 as VolumePopover, index_parts_exports$14 as VolumeSlider, composeRefs, createI18n, createPlayer, createSelector, createTranslator, findLocaleKeys, getI18nTranslations, hasMetadata, hasRegisteredLocale, isMediaAudioTrackCapable, isMediaBufferCapable, isMediaErrorCapable, isMediaLiveCapable, isMediaPauseCapable, isMediaPlaybackRateCapable, isMediaRemotePlaybackCapable, isMediaSeekCapable, isMediaSourceCapable, isMediaStreamTypeCapable, isMediaTextTrackCapable, isMediaVideoDimensionsCapable, isMediaVideoRenditionCapable, isMediaVolumeCapable, isQuerySelectorAllCapable, mergeProps, onI18nRegistryChange, registerI18n, renderElement, shallowEqual, useAttachMedia, useAudioTrackOptions, useButton, useCaptionsOptions, useComposedRefs, useContainer, useContainerAttach, useDestroy, useDialogContext, useDoubleTapGesture, useErrorDialogContext, useHotkey, useHotkeyShortcut, useLatestRef, useLocale, useMedia, useMediaAttach, useMediaComponent, useMediaInstance, useMenuContext, useOptionalContainer, useOptionalMenuContext, useOptionalPlayer, usePlaybackRateOptions, usePlayer, usePlayerContext, usePopoverContext, useQualityOptions, useSelector, useSlider, useStore, useTapGesture, useTooltipContext, useTranslator };

package/dist/default/media/audio.js

@@ -4,8 +4,10 @@ import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/media/audio.tsx
 const Audio = forwardRef(function Audio({ children, ...props }, ref) {
+	const setMedia = useMediaAttach();
+	const composedRef = useComposedRefs(ref, setMedia);
 	return /* @__PURE__ */ jsx("audio", {
-		ref: useComposedRefs(ref, useMediaAttach()),
+		ref: composedRef,
 		...props,
 		children
 	});

package/dist/default/media/audio.js.map

@@ -1 +1 @@
-{"version":3,"file":"audio.js","names":[],"sources":["../../../src/media/audio.tsx"],"sourcesContent":["import type { AudioHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface AudioProps extends AudioHTMLAttributes<HTMLAudioElement> {}\n\nexport const Audio = forwardRef<HTMLAudioElement, AudioProps>(function Audio({ children, ...props }, ref) {\n  const setMedia = useMediaAttach();\n  const composedRef = useComposedRefs(ref, setMedia);\n\n  return (\n    <audio ref={composedRef} {...props}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace Audio {\n  export type Props = AudioProps;\n}\n"],"mappings":";;;;;AAQA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;CAIxG,OACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,KADnB,eAC+B,CAGxB;EAAG,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}
+{"version":3,"file":"audio.js","names":[],"sources":["../../../src/media/audio.tsx"],"sourcesContent":["import type { AudioHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface AudioProps extends AudioHTMLAttributes<HTMLAudioElement> {}\n\nexport const Audio = forwardRef<HTMLAudioElement, AudioProps>(function Audio({ children, ...props }, ref) {\n  const setMedia = useMediaAttach();\n  const composedRef = useComposedRefs(ref, setMedia);\n\n  return (\n    <audio ref={composedRef} {...props}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace Audio {\n  export type Props = AudioProps;\n}\n"],"mappings":";;;;;AAQA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;CACxG,MAAM,WAAW,eAAe;CAChC,MAAM,cAAc,gBAAgB,KAAK,QAAQ;CAEjD,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

package/dist/default/media/background-video/media.js

@@ -6,10 +6,12 @@ import { jsx } from "react/jsx-runtime";
 //#region src/media/background-video/media.tsx
 const BackgroundVideo = forwardRef(function BackgroundVideo({ children, ...props }, ref) {
 	const setMedia = useMediaAttach();
+	const mediaRef = useCallback((el) => {
+		setMedia?.(el);
+	}, [setMedia]);
+	const composedRef = useComposedRefs(ref, mediaRef);
 	return /* @__PURE__ */ jsx("video", {
-		ref: useComposedRefs(ref, useCallback((el) => {
-			setMedia?.(el);
-		}, [setMedia])),
+		ref: composedRef,
 		muted: true,
 		autoPlay: true,
 		loop: true,

package/dist/default/media/background-video/media.js.map

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/background-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMediaAttach } from '../../player/context';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\n\nexport interface BackgroundVideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps>(function BackgroundVideo(\n  { children, ...props },\n  ref\n) {\n  const setMedia = useMediaAttach();\n\n  const mediaRef = useCallback(\n    (el: HTMLVideoElement | null) => {\n      setMedia?.(el);\n    },\n    [setMedia]\n  );\n\n  const composedRef = useComposedRefs(ref, mediaRef);\n\n  return (\n    <video ref={composedRef} muted autoPlay loop playsInline disableRemotePlayback disablePictureInPicture {...props}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace BackgroundVideo {\n  export type Props = BackgroundVideoProps;\n}\n"],"mappings":";;;;;;AAUA,MAAa,kBAAkB,WAAmD,SAAS,gBACzF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,WAAW,eAAe;CAWhC,OACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,KAPnB,aACd,OAAgC;GAC/B,WAAW,EAAE;EACf,GACA,CAAC,QAAQ,CAGqC,CAGxB;EAAG,OAAA;EAAM,UAAA;EAAS,MAAA;EAAK,aAAA;EAAY,uBAAA;EAAsB,yBAAA;EAAwB,GAAI;EACxG;CACI,CAAA;AAEX,CAAC"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/background-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMediaAttach } from '../../player/context';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\n\nexport interface BackgroundVideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps>(function BackgroundVideo(\n  { children, ...props },\n  ref\n) {\n  const setMedia = useMediaAttach();\n\n  const mediaRef = useCallback(\n    (el: HTMLVideoElement | null) => {\n      setMedia?.(el);\n    },\n    [setMedia]\n  );\n\n  const composedRef = useComposedRefs(ref, mediaRef);\n\n  return (\n    <video ref={composedRef} muted autoPlay loop playsInline disableRemotePlayback disablePictureInPicture {...props}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace BackgroundVideo {\n  export type Props = BackgroundVideoProps;\n}\n"],"mappings":";;;;;;AAUA,MAAa,kBAAkB,WAAmD,SAAS,gBACzF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,WAAW,eAAe;CAEhC,MAAM,WAAW,aACd,OAAgC;EAC/B,WAAW,EAAE;CACf,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,cAAc,gBAAgB,KAAK,QAAQ;CAEjD,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,OAAA;EAAM,UAAA;EAAS,MAAA;EAAK,aAAA;EAAY,uBAAA;EAAsB,yBAAA;EAAwB,GAAI;EACxG;CACI,CAAA;AAEX,CAAC"}

package/dist/default/media/cloudflare-video/media.js

@@ -10,7 +10,8 @@ import { CloudflareMedia, buildCloudflareIframeSrc, cloudflareMediaDefaultProps
 const CloudflareVideo = forwardRef(function CloudflareVideo({ children, ...rawProps }, ref) {
 	const media = useMediaInstance(CloudflareMedia);
 	const props = { ...rawProps };
-	const composedRef = useComposedRefs(useAttachIframe(media), ref);
+	const attachRef = useAttachIframe(media);
+	const composedRef = useComposedRefs(attachRef, ref);
 	const [initialSrc] = useState(() => buildCloudflareIframeSrc(props.src || props.source?.src || "", {
 		...cloudflareMediaDefaultProps,
 		...props,

package/dist/default/media/cloudflare-video/media.js.map

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/cloudflare-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { CloudflareMediaProps } from '@videojs/media/dom/cloudflare';\nimport { buildCloudflareIframeSrc, CloudflareMedia, cloudflareMediaDefaultProps } from '@videojs/media/dom/cloudflare';\nimport type { ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\nimport { useAttachIframe } from '../../utils/use-attach-iframe';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface CloudflareVideoProps extends Partial<CloudflareMediaProps> {\n  children?: ReactNode;\n}\n\nexport const CloudflareVideo = forwardRef<HTMLIFrameElement, CloudflareVideoProps>(function CloudflareVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(CloudflareMedia);\n  const props: Partial<CloudflareMediaProps> & Record<string, unknown> = { ...rawProps };\n  const attachRef = useAttachIframe(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const [initialSrc] = useState(() =>\n    // `source.src` is the only other way to name a video, so honor it when `src` is absent.\n    buildCloudflareIframeSrc(props.src || props.source?.src || '', {\n      ...cloudflareMediaDefaultProps,\n      ...props,\n      // The embed reads mute once, out of the URL it is rendered with, and either\n      // prop says to start muted. Leaving `muted` out of the URL would leave a\n      // muted autoplay blocked by the browser, since the embed comes up audible.\n      defaultMuted: !!(props.defaultMuted || props.muted),\n    })\n  );\n  const iframeProps = useSyncProps<CloudflareMediaProps, Record<string, unknown>>(\n    media,\n    props,\n    cloudflareMediaDefaultProps\n  );\n\n  return (\n    <iframe\n      title=\"Cloudflare Stream video player\"\n      // Empty means there is no embed to point at yet; React warns about `src=\"\"`,\n      // and the media builds the URL itself once a source resolves.\n      src={initialSrc || undefined}\n      data-cross-origin-frame\n      allow=\"accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n      allowFullScreen\n      frameBorder={0}\n      width=\"100%\"\n      height=\"100%\"\n      referrerPolicy={props.source?.engine?.cloudflare?.referrerPolicy}\n      {...iframeProps}\n      ref={composedRef}\n    >\n      {children}\n    </iframe>\n  );\n});\n\nexport namespace CloudflareVideo {\n  export type Props = CloudflareVideoProps;\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,kBAAkB,WAAoD,SAAS,gBAC1F,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,eAAe;CAC9C,MAAM,QAAiE,EAAE,GAAG,SAAS;CAErF,MAAM,cAAc,gBADF,gBAAgB,KACU,GAAG,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,yBAAyB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAC7D,GAAG;EACH,GAAG;EAIH,cAAc,CAAC,EAAE,MAAM,gBAAgB,MAAM;CAC/C,CAAC,CACH;CACA,MAAM,cAAc,aAClB,OACA,OACA,2BACF;CAEA,OACE,oBAAC,UAAD;EACE,OAAM;EAGN,KAAK,cAAc,KAAA;EACnB,2BAAA;EACA,OAAM;EACN,iBAAA;EACA,aAAa;EACb,OAAM;EACN,QAAO;EACP,gBAAgB,MAAM,QAAQ,QAAQ,YAAY;EAClD,GAAI;EACJ,KAAK;EAEJ;CACK,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/cloudflare-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { CloudflareMediaProps } from '@videojs/media/dom/cloudflare';\nimport { buildCloudflareIframeSrc, CloudflareMedia, cloudflareMediaDefaultProps } from '@videojs/media/dom/cloudflare';\nimport type { ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { useAttachIframe } from '../../utils/use-attach-iframe';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface CloudflareVideoProps extends Partial<CloudflareMediaProps> {\n  children?: ReactNode;\n}\n\nexport const CloudflareVideo = forwardRef<HTMLIFrameElement, CloudflareVideoProps>(function CloudflareVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(CloudflareMedia);\n  const props: Partial<CloudflareMediaProps> & Record<string, unknown> = { ...rawProps };\n  const attachRef = useAttachIframe(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const [initialSrc] = useState(() =>\n    // `source.src` is the only other way to name a video, so honor it when `src` is absent.\n    buildCloudflareIframeSrc(props.src || props.source?.src || '', {\n      ...cloudflareMediaDefaultProps,\n      ...props,\n      // The embed reads mute once, out of the URL it is rendered with, and either\n      // prop says to start muted. Leaving `muted` out of the URL would leave a\n      // muted autoplay blocked by the browser, since the embed comes up audible.\n      defaultMuted: !!(props.defaultMuted || props.muted),\n    })\n  );\n  const iframeProps = useSyncProps<CloudflareMediaProps, Record<string, unknown>>(\n    media,\n    props,\n    cloudflareMediaDefaultProps\n  );\n\n  return (\n    <iframe\n      title=\"Cloudflare Stream video player\"\n      // Empty means there is no embed to point at yet; React warns about `src=\"\"`,\n      // and the media builds the URL itself once a source resolves.\n      src={initialSrc || undefined}\n      data-cross-origin-frame\n      allow=\"accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n      allowFullScreen\n      frameBorder={0}\n      width=\"100%\"\n      height=\"100%\"\n      referrerPolicy={props.source?.engine?.cloudflare?.referrerPolicy}\n      {...iframeProps}\n      ref={composedRef}\n    >\n      {children}\n    </iframe>\n  );\n});\n\nexport namespace CloudflareVideo {\n  export type Props = CloudflareVideoProps;\n}\n"],"mappings":";;;;;;;;;AAgBA,MAAa,kBAAkB,WAAoD,SAAS,gBAC1F,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,eAAe;CAC9C,MAAM,QAAiE,EAAE,GAAG,SAAS;CACrF,MAAM,YAAY,gBAAgB,KAAK;CACvC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,yBAAyB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAC7D,GAAG;EACH,GAAG;EAIH,cAAc,CAAC,EAAE,MAAM,gBAAgB,MAAM;CAC/C,CAAC,CACH;CACA,MAAM,cAAc,aAClB,OACA,OACA,2BACF;CAEA,OACE,oBAAC,UAAD;EACE,OAAM;EAGN,KAAK,cAAc,KAAA;EACnB,2BAAA;EACA,OAAM;EACN,iBAAA;EACA,aAAa;EACb,OAAM;EACN,QAAO;EACP,gBAAgB,MAAM,QAAQ,QAAQ,YAAY;EAClD,GAAI;EACJ,KAAK;EAEJ;CACK,CAAA;AAEZ,CAAC"}

package/dist/default/media/dash-video/media.js

@@ -9,9 +9,12 @@ import { DashMedia, dashMediaDefaultProps } from "@videojs/media/dom/dash";
 //#region src/media/dash-video/media.tsx
 const DashVideo = forwardRef(function DashVideo({ children, ...props }, ref) {
 	const media = useMediaInstance(DashMedia);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, dashMediaDefaultProps);
 	return /* @__PURE__ */ jsx("video", {
-		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, dashMediaDefaultProps),
+		ref: composedRef,
+		...htmlProps,
 		children
 	});
 });

package/dist/default/media/dash-video/media.js.map

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/dash-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { DashMediaProps } from '@videojs/media/dom/dash';\nimport { DashMedia, dashMediaDefaultProps } from '@videojs/media/dom/dash';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface DashVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof DashMediaProps>,\n    Partial<DashMediaProps> {\n  children?: ReactNode;\n}\n\nexport const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(function DashVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(DashMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, dashMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace DashVideo {\n  export type Props = DashVideoProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,YAAY,WAA6C,SAAS,UAAU,EAAE,UAAU,GAAG,SAAS,KAAK;CACpH,MAAM,QAAQ,iBAAiB,SAAS;CAKxC,OACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,KACW,GAAG,GAIvB;EAAG,GAHT,aAAa,OAAO,OAAO,qBAGN;EAClC;CACI,CAAA;AAEX,CAAC"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/dash-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { DashMediaProps } from '@videojs/media/dom/dash';\nimport { DashMedia, dashMediaDefaultProps } from '@videojs/media/dom/dash';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface DashVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof DashMediaProps>, Partial<DashMediaProps> {\n  children?: ReactNode;\n}\n\nexport const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(function DashVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(DashMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, dashMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace DashVideo {\n  export type Props = DashVideoProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,YAAY,WAA6C,SAAS,UAAU,EAAE,UAAU,GAAG,SAAS,KAAK;CACpH,MAAM,QAAQ,iBAAiB,SAAS;CACxC,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,qBAAqB;CAElE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

package/dist/default/media/google-cast/google-cast.js

@@ -6,20 +6,20 @@ import { GoogleCast, googleCastDefaultProps } from "@videojs/media/dom/google-ca
 /**
 * Adds Google Cast support to the surrounding player's media.
 *
-* Renders nothing — place it inside the Player as a sibling of the
-* media component (e.g. `<HlsJsVideo />`) and it registers a `GoogleCast`
-* media component with the active media.
+* Renders nothing — place it inside the Player as a sibling of the media component (e.g. `<HlsJsVideo />`) and it
+* registers a `GoogleCast` media component with the active media.
 *
 * @example
-* ```tsx
-* <Player>
-*   <HlsJsVideo src="https://example.com/stream.m3u8" />
-*   <GoogleCast receiver="YOUR_APP_ID" />
-* </Player>
-* ```
+*   ```tsx
+*   <Player>
+*     <HlsJsVideo src="https://example.com/stream.m3u8" />
+*     <GoogleCast receiver="YOUR_APP_ID" />
+*   </Player>;
+*   ```;
 */
 function GoogleCast$1(props) {
-	useSyncProps(useMediaComponent(GoogleCast), props, googleCastDefaultProps);
+	const component = useMediaComponent(GoogleCast);
+	useSyncProps(component, props, googleCastDefaultProps);
 	return null;
 }
 //#endregion

package/dist/default/media/google-cast/google-cast.js.map

@@ -1 +1 @@
-{"version":3,"file":"google-cast.js","names":["GoogleCast","GoogleCastComponent"],"sources":["../../../../src/media/google-cast/google-cast.tsx"],"sourcesContent":["'use client';\n\nimport type { GoogleCastProps as GoogleCastComponentProps } from '@videojs/media/dom/google-cast';\nimport { GoogleCast as GoogleCastComponent, googleCastDefaultProps } from '@videojs/media/dom/google-cast';\nimport type { ReactNode } from 'react';\n\nimport { useMediaComponent } from '../../utils/use-media-component';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport type GoogleCastProps = Partial<GoogleCastComponentProps>;\n\n/**\n * Adds Google Cast support to the surrounding player's media.\n *\n * Renders nothing — place it inside the Player as a sibling of the\n * media component (e.g. `<HlsJsVideo />`) and it registers a `GoogleCast`\n * media component with the active media.\n *\n * @example\n * ```tsx\n * <Player>\n *   <HlsJsVideo src=\"https://example.com/stream.m3u8\" />\n *   <GoogleCast receiver=\"YOUR_APP_ID\" />\n * </Player>\n * ```\n */\nexport function GoogleCast(props: GoogleCastProps): ReactNode {\n  const component = useMediaComponent(GoogleCastComponent);\n\n  useSyncProps(component, props, googleCastDefaultProps);\n\n  return null;\n}\n\nexport namespace GoogleCast {\n  export type Props = GoogleCastProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,SAAgBA,aAAW,OAAmC;CAG5D,aAFkB,kBAAkBC,UAEf,GAAG,OAAO,sBAAsB;CAErD,OAAO;AACT"}
+{"version":3,"file":"google-cast.js","names":["GoogleCast","GoogleCastComponent"],"sources":["../../../../src/media/google-cast/google-cast.tsx"],"sourcesContent":["'use client';\n\nimport type { GoogleCastProps as GoogleCastComponentProps } from '@videojs/media/dom/google-cast';\nimport { GoogleCast as GoogleCastComponent, googleCastDefaultProps } from '@videojs/media/dom/google-cast';\nimport type { ReactNode } from 'react';\n\nimport { useMediaComponent } from '../../utils/use-media-component';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport type GoogleCastProps = Partial<GoogleCastComponentProps>;\n\n/**\n * Adds Google Cast support to the surrounding player's media.\n *\n * Renders nothing — place it inside the Player as a sibling of the media component (e.g. `<HlsJsVideo />`) and it\n * registers a `GoogleCast` media component with the active media.\n *\n * @example\n *   ```tsx\n *   <Player>\n *     <HlsJsVideo src=\"https://example.com/stream.m3u8\" />\n *     <GoogleCast receiver=\"YOUR_APP_ID\" />\n *   </Player>;\n *   ```;\n */\nexport function GoogleCast(props: GoogleCastProps): ReactNode {\n  const component = useMediaComponent(GoogleCastComponent);\n\n  useSyncProps(component, props, googleCastDefaultProps);\n\n  return null;\n}\n\nexport namespace GoogleCast {\n  export type Props = GoogleCastProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAyBA,SAAgBA,aAAW,OAAmC;CAC5D,MAAM,YAAY,kBAAkBC,UAAmB;CAEvD,aAAa,WAAW,OAAO,sBAAsB;CAErD,OAAO;AACT"}

package/dist/default/media/hls-audio/media.js

@@ -9,9 +9,12 @@ import { HlsAudioMedia, hlsAudioMediaDefaultProps } from "@videojs/spf/hls-audio
 //#region src/media/hls-audio/media.tsx
 const HlsAudio = forwardRef(function HlsAudio({ children, ...props }, ref) {
 	const media = useMediaInstance(HlsAudioMedia);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, hlsAudioMediaDefaultProps);
 	return /* @__PURE__ */ jsx("audio", {
-		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, hlsAudioMediaDefaultProps),
+		ref: composedRef,
+		...htmlProps,
 		children
 	});
 });

package/dist/default/media/hls-audio/media.js.map

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/hls-audio/media.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsAudioMediaProps } from '@videojs/spf/hls-audio';\nimport { HlsAudioMedia, hlsAudioMediaDefaultProps } from '@videojs/spf/hls-audio';\nimport type { AudioHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface HlsAudioProps\n  extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof HlsAudioMediaProps>,\n    Partial<HlsAudioMediaProps> {\n  children?: ReactNode;\n}\n\nexport const HlsAudio = forwardRef<HTMLAudioElement, HlsAudioProps>(function HlsAudio({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsAudioMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsAudioMediaDefaultProps);\n\n  return (\n    <audio ref={composedRef} {...htmlProps}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace HlsAudio {\n  export type Props = HlsAudioProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,aAAa;CAK5C,OACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,KACW,GAAG,GAIvB;EAAG,GAHT,aAAa,OAAO,OAAO,yBAGN;EAClC;CACI,CAAA;AAEX,CAAC"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/hls-audio/media.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsAudioMediaProps } from '@videojs/spf/hls-audio';\nimport { HlsAudioMedia, hlsAudioMediaDefaultProps } from '@videojs/spf/hls-audio';\nimport type { AudioHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface HlsAudioProps\n  extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof HlsAudioMediaProps>, Partial<HlsAudioMediaProps> {\n  children?: ReactNode;\n}\n\nexport const HlsAudio = forwardRef<HTMLAudioElement, HlsAudioProps>(function HlsAudio({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsAudioMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsAudioMediaDefaultProps);\n\n  return (\n    <audio ref={composedRef} {...htmlProps}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace HlsAudio {\n  export type Props = HlsAudioProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,aAAa;CAC5C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,yBAAyB;CAEtE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

package/dist/default/media/hls-background-video/media.js

@@ -8,34 +8,29 @@ import { jsx } from "react/jsx-runtime";
 import { HlsBackgroundVideoMedia, hlsBackgroundVideoMediaDefaultProps } from "@videojs/spf/hls-background-video";
 //#region src/media/hls-background-video/media.tsx
 /**
-* A muted, looping, chrome-less video over the SPF background-video engine — the
-* React counterpart to `<hls-background-video>`, and the replacement for the
-* standalone `mux-background-video` package's component.
+* A muted, looping, chrome-less video over the SPF background-video engine — the React counterpart to
+* `<hls-background-video>`, and the replacement for the standalone `mux-background-video` package's component.
 *
-* `src` is an HLS URL and the whole surface. Capping which rendition is fetched
-* is a param on that URL (`?max_resolution=720p` on a Mux stream, for one) rather
-* than a prop, which keeps the renditions it excludes out of the manifest instead
-* of merely unpicked.
+* `src` is an HLS URL and the whole surface. Capping which rendition is fetched is a param on that URL
+* (`?max_resolution=720p` on a Mux stream, for one) rather than a prop, which keeps the renditions it excludes out of
+* the manifest instead of merely unpicked.
 *
-* There is no structured Mux `source`: playback-ID identity, poster, and
-* storyboard belong to `MuxVideo`, since none of them mean anything without
-* controls to hang them on.
+* There is no structured Mux `source`: playback-ID identity, poster, and storyboard belong to `MuxVideo`, since none of
+* them mean anything without controls to hang them on.
 *
-* `onError` fires for an unplayable source, which it could not do on its own:
-* nothing about one reaches the media element, so the `<video>`'s own `error`
-* stays null at `readyState 0`. The engine reports the condition, the Media
-* promotes the fatal one, and this component re-fires it on the `<video>` — where
-* a handler already listening for a failed source receives it. Which condition it
-* was is on the console and `engine.state.errors`; the handler gets "this source
-* won't play", which is the decision a background video actually has to make.
+* `onError` fires for an unplayable source, which it could not do on its own: nothing about one reaches the media
+* element, so the `<video>`'s own `error` stays null at `readyState 0`. The engine reports the condition, the Media
+* promotes the fatal one, and this component re-fires it on the `<video>` — where a handler already listening for a
+* failed source receives it. Which condition it was is on the console and `engine.state.errors`; the handler gets "this
+* source won't play", which is the decision a background video actually has to make.
 *
-* `MuxBackgroundVideo` is this same component under the name the package it
-* replaces used — an alias, not a variant.
+* `MuxBackgroundVideo` is this same component under the name the package it replaces used — an alias, not a variant.
 */
 const HlsBackgroundVideo = forwardRef(function HlsBackgroundVideo({ children, ...props }, ref) {
 	const media = useMediaInstance(HlsBackgroundVideoMedia);
 	const videoRef = useRef(null);
-	const composedRef = useComposedRefs(useAttachMedia(media), videoRef, ref);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, videoRef, ref);
 	const htmlProps = useSyncProps(media, props, hlsBackgroundVideoMediaDefaultProps);
 	useEffect(() => {
 		const forward = () => videoRef.current?.dispatchEvent(new Event("error"));

package/dist/default/media/hls-background-video/media.js.map

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/hls-background-video/media.tsx"],"sourcesContent":["'use client';\n\nimport {\n  HlsBackgroundVideoMedia,\n  type HlsBackgroundVideoMediaProps,\n  hlsBackgroundVideoMediaDefaultProps,\n} from '@videojs/spf/hls-background-video';\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\n// `src` is the only prop the Media owns, taken from the adapter rather than\n// restated here so the two can't disagree about what the surface is.\nexport interface HlsBackgroundVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsBackgroundVideoMediaProps>,\n    Partial<HlsBackgroundVideoMediaProps> {}\n\n/**\n * A muted, looping, chrome-less video over the SPF background-video engine — the\n * React counterpart to `<hls-background-video>`, and the replacement for the\n * standalone `mux-background-video` package's component.\n *\n * `src` is an HLS URL and the whole surface. Capping which rendition is fetched\n * is a param on that URL (`?max_resolution=720p` on a Mux stream, for one) rather\n * than a prop, which keeps the renditions it excludes out of the manifest instead\n * of merely unpicked.\n *\n * There is no structured Mux `source`: playback-ID identity, poster, and\n * storyboard belong to `MuxVideo`, since none of them mean anything without\n * controls to hang them on.\n *\n * `onError` fires for an unplayable source, which it could not do on its own:\n * nothing about one reaches the media element, so the `<video>`'s own `error`\n * stays null at `readyState 0`. The engine reports the condition, the Media\n * promotes the fatal one, and this component re-fires it on the `<video>` — where\n * a handler already listening for a failed source receives it. Which condition it\n * was is on the console and `engine.state.errors`; the handler gets \"this source\n * won't play\", which is the decision a background video actually has to make.\n *\n * `MuxBackgroundVideo` is this same component under the name the package it\n * replaces used — an alias, not a variant.\n */\nexport const HlsBackgroundVideo = forwardRef<HTMLVideoElement, HlsBackgroundVideoProps>(function HlsBackgroundVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(HlsBackgroundVideoMedia);\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, videoRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsBackgroundVideoMediaDefaultProps);\n\n  // Re-fired on the element rather than handed to `onError` directly, so React's\n  // own event plumbing delivers it: the handler gets the synthetic event it is\n  // typed for, and anything else listening on the node — the consumer's own\n  // `addEventListener`, a testing-library assertion — sees the same failure.\n  useEffect(() => {\n    const forward = () => videoRef.current?.dispatchEvent(new Event('error'));\n    media.addEventListener('error', forward);\n    return () => media.removeEventListener('error', forward);\n  }, [media]);\n\n  return (\n    // The same set `<hls-background-video>` forces onto its inner video, so the\n    // two platforms present the same surface: silent looping playback with no\n    // affordance a UA could hang chrome on — AirPlay, Cast, and picture-in-picture\n    // all being things a background video has nowhere to put.\n    //\n    // Applied after the spread rather than before it, unlike the generic\n    // `BackgroundVideo`: they're what the component is for, and attaching the\n    // Media re-applies its own anyway, so honoring `muted={false}` would only\n    // look like it worked.\n    <video\n      {...htmlProps}\n      ref={composedRef}\n      muted\n      autoPlay\n      loop\n      playsInline\n      disableRemotePlayback\n      disablePictureInPicture\n    >\n      {children}\n    </video>\n  );\n});\n\nexport namespace HlsBackgroundVideo {\n  export type Props = HlsBackgroundVideoProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,qBAAqB,WAAsD,SAAS,mBAC/F,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,uBAAuB;CACtD,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,cAAc,gBADF,eAAe,KACW,GAAG,UAAU,GAAG;CAC5D,MAAM,YAAY,aAAa,OAAO,OAAO,mCAAmC;CAMhF,gBAAgB;EACd,MAAM,gBAAgB,SAAS,SAAS,cAAc,IAAI,MAAM,OAAO,CAAC;EACxE,MAAM,iBAAiB,SAAS,OAAO;EACvC,aAAa,MAAM,oBAAoB,SAAS,OAAO;CACzD,GAAG,CAAC,KAAK,CAAC;CAEV,OAUE,oBAAC,SAAD;EACE,GAAI;EACJ,KAAK;EACL,OAAA;EACA,UAAA;EACA,MAAA;EACA,aAAA;EACA,uBAAA;EACA,yBAAA;EAEC;CACI,CAAA;AAEX,CAAC"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/hls-background-video/media.tsx"],"sourcesContent":["'use client';\n\nimport {\n  HlsBackgroundVideoMedia,\n  type HlsBackgroundVideoMediaProps,\n  hlsBackgroundVideoMediaDefaultProps,\n} from '@videojs/spf/hls-background-video';\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useRef } from 'react';\n\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\n// `src` is the only prop the Media owns, taken from the adapter rather than\n// restated here so the two can't disagree about what the surface is.\nexport interface HlsBackgroundVideoProps\n  extends\n    Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsBackgroundVideoMediaProps>,\n    Partial<HlsBackgroundVideoMediaProps> {}\n\n/**\n * A muted, looping, chrome-less video over the SPF background-video engine — the React counterpart to\n * `<hls-background-video>`, and the replacement for the standalone `mux-background-video` package's component.\n *\n * `src` is an HLS URL and the whole surface. Capping which rendition is fetched is a param on that URL\n * (`?max_resolution=720p` on a Mux stream, for one) rather than a prop, which keeps the renditions it excludes out of\n * the manifest instead of merely unpicked.\n *\n * There is no structured Mux `source`: playback-ID identity, poster, and storyboard belong to `MuxVideo`, since none of\n * them mean anything without controls to hang them on.\n *\n * `onError` fires for an unplayable source, which it could not do on its own: nothing about one reaches the media\n * element, so the `<video>`'s own `error` stays null at `readyState 0`. The engine reports the condition, the Media\n * promotes the fatal one, and this component re-fires it on the `<video>` — where a handler already listening for a\n * failed source receives it. Which condition it was is on the console and `engine.state.errors`; the handler gets \"this\n * source won't play\", which is the decision a background video actually has to make.\n *\n * `MuxBackgroundVideo` is this same component under the name the package it replaces used — an alias, not a variant.\n */\nexport const HlsBackgroundVideo = forwardRef<HTMLVideoElement, HlsBackgroundVideoProps>(function HlsBackgroundVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(HlsBackgroundVideoMedia);\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, videoRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsBackgroundVideoMediaDefaultProps);\n\n  // Re-fired on the element rather than handed to `onError` directly, so React's\n  // own event plumbing delivers it: the handler gets the synthetic event it is\n  // typed for, and anything else listening on the node — the consumer's own\n  // `addEventListener`, a testing-library assertion — sees the same failure.\n  useEffect(() => {\n    const forward = () => videoRef.current?.dispatchEvent(new Event('error'));\n\n    media.addEventListener('error', forward);\n    return () => media.removeEventListener('error', forward);\n  }, [media]);\n\n  return (\n    // The same set `<hls-background-video>` forces onto its inner video, so the\n    // two platforms present the same surface: silent looping playback with no\n    // affordance a UA could hang chrome on — AirPlay, Cast, and picture-in-picture\n    // all being things a background video has nowhere to put.\n    //\n    // Applied after the spread rather than before it, unlike the generic\n    // `BackgroundVideo`: they're what the component is for, and attaching the\n    // Media re-applies its own anyway, so honoring `muted={false}` would only\n    // look like it worked.\n    <video\n      {...htmlProps}\n      ref={composedRef}\n      muted\n      autoPlay\n      loop\n      playsInline\n      disableRemotePlayback\n      disablePictureInPicture\n    >\n      {children}\n    </video>\n  );\n});\n\nexport namespace HlsBackgroundVideo {\n  export type Props = HlsBackgroundVideoProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,qBAAqB,WAAsD,SAAS,mBAC/F,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,uBAAuB;CACtD,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,UAAU,GAAG;CAC5D,MAAM,YAAY,aAAa,OAAO,OAAO,mCAAmC;CAMhF,gBAAgB;EACd,MAAM,gBAAgB,SAAS,SAAS,cAAc,IAAI,MAAM,OAAO,CAAC;EAExE,MAAM,iBAAiB,SAAS,OAAO;EACvC,aAAa,MAAM,oBAAoB,SAAS,OAAO;CACzD,GAAG,CAAC,KAAK,CAAC;CAEV,OAUE,oBAAC,SAAD;EACE,GAAI;EACJ,KAAK;EACL,OAAA;EACA,UAAA;EACA,MAAA;EACA,aAAA;EACA,uBAAA;EACA,yBAAA;EAEC;CACI,CAAA;AAEX,CAAC"}

package/dist/default/media/hls-video/media.js

@@ -9,9 +9,12 @@ import { HlsVideoMedia, hlsVideoMediaDefaultProps } from "@videojs/spf/hls-video
 //#region src/media/hls-video/media.tsx
 const HlsVideo = forwardRef(function HlsVideo({ children, ...props }, ref) {
 	const media = useMediaInstance(HlsVideoMedia);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, hlsVideoMediaDefaultProps);
 	return /* @__PURE__ */ jsx("video", {
-		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, hlsVideoMediaDefaultProps),
+		ref: composedRef,
+		...htmlProps,
 		children
 	});
 });

package/dist/default/media/hls-video/media.js.map

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/hls-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsVideoMediaProps } from '@videojs/spf/hls-video';\nimport { HlsVideoMedia, hlsVideoMediaDefaultProps } from '@videojs/spf/hls-video';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface HlsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsVideoMediaProps>,\n    Partial<HlsVideoMediaProps> {\n  children?: ReactNode;\n}\n\nexport const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(function HlsVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsVideoMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsVideoMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace HlsVideo {\n  export type Props = HlsVideoProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,aAAa;CAK5C,OACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,KACW,GAAG,GAIvB;EAAG,GAHT,aAAa,OAAO,OAAO,yBAGN;EAClC;CACI,CAAA;AAEX,CAAC"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/hls-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsVideoMediaProps } from '@videojs/spf/hls-video';\nimport { HlsVideoMedia, hlsVideoMediaDefaultProps } from '@videojs/spf/hls-video';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface HlsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsVideoMediaProps>, Partial<HlsVideoMediaProps> {\n  children?: ReactNode;\n}\n\nexport const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(function HlsVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsVideoMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsVideoMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace HlsVideo {\n  export type Props = HlsVideoProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,aAAa;CAC5C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,yBAAyB;CAEtE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}