@videojs/react 10.0.0-beta.6 → 10.0.0-beta.8

package/dist/dev/icons/dist/react/minimal/restart.js.map

@@ -1 +1 @@
-{"version":3,"file":"restart.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/restart.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst RestartIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M9 17a8 8 0 0 1-8-8h1.5a6.5 6.5 0 1 0 1.43-4.07l1.643 1.643A.25.25 0 0 1 5.396 7H1.25A.25.25 0 0 1 1 6.75V2.604a.25.25 0 0 1 .427-.177l1.438 1.438A8 8 0 1 1 9 17\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"m11.61 9.639-3.331 2.07a.826.826 0 0 1-1.15-.266.86.86 0 0 1-.129-.452V6.849C7 6.38 7.374 6 7.834 6c.158 0 .312.045.445.13l3.331 2.071a.858.858 0 0 1 0 1.438\" })\n] });\nexport default RestartIcon;\n"],"mappings":";;;AACA,MAAM,eAAe,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU,CACtL,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAqK,CAAC,EAC7M,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAiK,CAAC,CAC1N;CAAE,CAAC"}
+{"version":3,"file":"restart.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/restart.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst RestartIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M9 17a8 8 0 0 1-8-8h1.5a6.5 6.5 0 1 0 1.43-4.07l1.643 1.643A.25.25 0 0 1 5.396 7H1.25A.25.25 0 0 1 1 6.75V2.604a.25.25 0 0 1 .427-.177l1.438 1.438A8 8 0 1 1 9 17\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"m11.61 9.639-3.331 2.07a.826.826 0 0 1-1.15-.266.86.86 0 0 1-.129-.452V6.849C7 6.38 7.374 6 7.834 6c.158 0 .312.045.445.13l3.331 2.071a.858.858 0 0 1 0 1.438\" })\n] });\nexport default RestartIcon;\n"],"mappings":";;;AACA,MAAM,eAAe,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,GAAG;CAAO,UAAU,CAChK,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAqK,CAAC,EAC7M,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAiK,CAAC,CAC1N;CAAE,CAAC"}

package/dist/dev/icons/dist/react/minimal/seek.js

@@ -7,7 +7,6 @@ const SeekIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	height: 18,
 	fill: "none",
 	"aria-hidden": "true",
-	viewBox: "0 0 18 18",
 	...props,
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",

package/dist/dev/icons/dist/react/minimal/seek.js.map

@@ -1 +1 @@
-{"version":3,"file":"seek.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/seek.js"],"sourcesContent":["import { jsx } from \"react/jsx-runtime\";\nconst SeekIcon = (props) => /* @__PURE__ */ jsx(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", viewBox: \"0 0 18 18\", ...props, children: /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M1 9c0 2.21.895 4.21 2.343 5.657l1.06-1.06a6.5 6.5 0 1 1 9.665-8.665l-1.641 1.641a.25.25 0 0 0 .177.427h4.146a.25.25 0 0 0 .25-.25V2.604a.25.25 0 0 0-.427-.177l-1.438 1.438A8 8 0 0 0 1 9\" }) });\nexport default SeekIcon;\n"],"mappings":";;;AACA,MAAM,YAAY,UAA0B,oBAAI,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,SAAS;CAAa,GAAG;CAAO,UAA0B,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAA8L,CAAC;CAAE,CAAC"}
+{"version":3,"file":"seek.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/seek.js"],"sourcesContent":["import { jsx } from \"react/jsx-runtime\";\nconst SeekIcon = (props) => /* @__PURE__ */ jsx(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", ...props, children: /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M1 9c0 2.21.895 4.21 2.343 5.657l1.06-1.06a6.5 6.5 0 1 1 9.665-8.665l-1.641 1.641a.25.25 0 0 0 .177.427h4.146a.25.25 0 0 0 .25-.25V2.604a.25.25 0 0 0-.427-.177l-1.438 1.438A8 8 0 0 0 1 9\" }) });\nexport default SeekIcon;\n"],"mappings":";;;AACA,MAAM,YAAY,UAA0B,oBAAI,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,GAAG;CAAO,UAA0B,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAA8L,CAAC;CAAE,CAAC"}

package/dist/dev/icons/dist/react/minimal/spinner.js

@@ -7,7 +7,6 @@ const SpinnerIcon = (props) => /* @__PURE__ */ jsxs("svg", {
 	height: 18,
 	fill: "currentColor",
 	"aria-hidden": "true",
-	viewBox: "0 0 18 18",
 	...props,
 	children: [
 		/* @__PURE__ */ jsx("rect", {

package/dist/dev/icons/dist/react/minimal/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/spinner.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst SpinnerIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"currentColor\", \"aria-hidden\": \"true\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"rect\", { width: 2, height: 5, x: 8, y: 0.5, opacity: 0.5, rx: 1, children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 2, height: 5, x: 12.243, y: 2.257, opacity: 0.45, rx: 1, transform: \"rotate(45 13.243 4.757)\", children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0.125s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 5, height: 2, x: 12.5, y: 8, opacity: 0.4, rx: 1, children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0.25s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 5, height: 2, x: 10.743, y: 12.243, opacity: 0.35, rx: 1, transform: \"rotate(45 13.243 13.243)\", children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0.375s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 2, height: 5, x: 8, y: 12.5, opacity: 0.3, rx: 1, children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0.5s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 2, height: 5, x: 3.757, y: 10.743, opacity: 0.25, rx: 1, transform: \"rotate(45 4.757 13.243)\", children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0.625s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 5, height: 2, x: 0.5, y: 8, opacity: 0.15, rx: 1, children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0.75s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 5, height: 2, x: 2.257, y: 3.757, opacity: 0.1, rx: 1, transform: \"rotate(45 4.757 4.757)\", children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0.875s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) })\n] });\nexport default SpinnerIcon;\n"],"mappings":";;;AACA,MAAM,eAAe,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAgB,eAAe;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU;EAC9L,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAG,GAAG;GAAK,SAAS;GAAK,IAAI;GAAG,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAM,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACrO,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAQ,GAAG;GAAO,SAAS;GAAM,IAAI;GAAG,WAAW;GAA2B,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAU,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACvR,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAM,GAAG;GAAG,SAAS;GAAK,IAAI;GAAG,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAS,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACzO,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAQ,GAAG;GAAQ,SAAS;GAAM,IAAI;GAAG,WAAW;GAA4B,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAU,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACzR,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAG,GAAG;GAAM,SAAS;GAAK,IAAI;GAAG,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAQ,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACxO,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAO,GAAG;GAAQ,SAAS;GAAM,IAAI;GAAG,WAAW;GAA2B,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAU,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACvR,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAK,GAAG;GAAG,SAAS;GAAM,IAAI;GAAG,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAS,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACzO,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAO,GAAG;GAAO,SAAS;GAAK,IAAI;GAAG,WAAW;GAA0B,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAU,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACrS;CAAE,CAAC"}
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/spinner.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst SpinnerIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"currentColor\", \"aria-hidden\": \"true\", ...props, children: [\n  /* @__PURE__ */ jsx(\"rect\", { width: 2, height: 5, x: 8, y: 0.5, opacity: 0.5, rx: 1, children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 2, height: 5, x: 12.243, y: 2.257, opacity: 0.45, rx: 1, transform: \"rotate(45 13.243 4.757)\", children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0.125s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 5, height: 2, x: 12.5, y: 8, opacity: 0.4, rx: 1, children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0.25s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 5, height: 2, x: 10.743, y: 12.243, opacity: 0.35, rx: 1, transform: \"rotate(45 13.243 13.243)\", children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0.375s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 2, height: 5, x: 8, y: 12.5, opacity: 0.3, rx: 1, children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0.5s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 2, height: 5, x: 3.757, y: 10.743, opacity: 0.25, rx: 1, transform: \"rotate(45 4.757 13.243)\", children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0.625s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 5, height: 2, x: 0.5, y: 8, opacity: 0.15, rx: 1, children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0.75s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 5, height: 2, x: 2.257, y: 3.757, opacity: 0.1, rx: 1, transform: \"rotate(45 4.757 4.757)\", children: /* @__PURE__ */ jsx(\"animate\", { attributeName: \"opacity\", begin: \"0.875s\", calcMode: \"linear\", dur: \"1s\", repeatCount: \"indefinite\", values: \"1;0\" }) })\n] });\nexport default SpinnerIcon;\n"],"mappings":";;;AACA,MAAM,eAAe,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAgB,eAAe;CAAQ,GAAG;CAAO,UAAU;EACxK,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAG,GAAG;GAAK,SAAS;GAAK,IAAI;GAAG,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAM,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACrO,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAQ,GAAG;GAAO,SAAS;GAAM,IAAI;GAAG,WAAW;GAA2B,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAU,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACvR,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAM,GAAG;GAAG,SAAS;GAAK,IAAI;GAAG,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAS,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACzO,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAQ,GAAG;GAAQ,SAAS;GAAM,IAAI;GAAG,WAAW;GAA4B,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAU,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACzR,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAG,GAAG;GAAM,SAAS;GAAK,IAAI;GAAG,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAQ,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACxO,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAO,GAAG;GAAQ,SAAS;GAAM,IAAI;GAAG,WAAW;GAA2B,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAU,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACvR,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAK,GAAG;GAAG,SAAS;GAAM,IAAI;GAAG,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAS,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACzO,oBAAI,QAAQ;GAAE,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAO,GAAG;GAAO,SAAS;GAAK,IAAI;GAAG,WAAW;GAA0B,UAA0B,oBAAI,WAAW;IAAE,eAAe;IAAW,OAAO;IAAU,UAAU;IAAU,KAAK;IAAM,aAAa;IAAc,QAAQ;IAAO,CAAC;GAAE,CAAC;EACrS;CAAE,CAAC"}

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

@@ -7,7 +7,6 @@ const VolumeHighIcon = (props) => /* @__PURE__ */ jsxs("svg", {
 	height: 18,
 	fill: "none",
 	"aria-hidden": "true",
-	viewBox: "0 0 18 18",
 	...props,
 	children: [/* @__PURE__ */ jsx("path", {
 		fill: "currentColor",

package/dist/dev/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, jsxs } from \"react/jsx-runtime\";\nconst VolumeHighIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", 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\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", 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,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU,CACzL,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAmK,CAAC,EAC3M,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAya,CAAC,CACle;CAAE,CAAC"}
+{"version":3,"file":"volume-high.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/volume-high.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst VolumeHighIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", 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\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", 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,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,GAAG;CAAO,UAAU,CACnK,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAmK,CAAC,EAC3M,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAya,CAAC,CACle;CAAE,CAAC"}

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

@@ -7,7 +7,6 @@ const VolumeLowIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	height: 18,
 	fill: "none",
 	"aria-hidden": "true",
-	viewBox: "0 0 18 18",
 	...props,
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",

package/dist/dev/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 } from \"react/jsx-runtime\";\nconst VolumeLowIcon = (props) => /* @__PURE__ */ jsx(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", viewBox: \"0 0 18 18\", ...props, children: /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", 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\" }) });\nexport default VolumeLowIcon;\n"],"mappings":";;;AACA,MAAM,iBAAiB,UAA0B,oBAAI,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,SAAS;CAAa,GAAG;CAAO,UAA0B,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAya,CAAC;CAAE,CAAC"}
+{"version":3,"file":"volume-low.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/volume-low.js"],"sourcesContent":["import { jsx } from \"react/jsx-runtime\";\nconst VolumeLowIcon = (props) => /* @__PURE__ */ jsx(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", ...props, children: /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", 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\" }) });\nexport default VolumeLowIcon;\n"],"mappings":";;;AACA,MAAM,iBAAiB,UAA0B,oBAAI,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,GAAG;CAAO,UAA0B,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAya,CAAC;CAAE,CAAC"}

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

@@ -7,7 +7,6 @@ const VolumeOffIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	height: 18,
 	fill: "none",
 	"aria-hidden": "true",
-	viewBox: "0 0 18 18",
 	...props,
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",

package/dist/dev/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 } from \"react/jsx-runtime\";\nconst VolumeOffIcon = (props) => /* @__PURE__ */ jsx(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", viewBox: \"0 0 18 18\", ...props, children: /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", 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\" }) });\nexport default VolumeOffIcon;\n"],"mappings":";;;AACA,MAAM,iBAAiB,UAA0B,oBAAI,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,SAAS;CAAa,GAAG;CAAO,UAA0B,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAyV,CAAC;CAAE,CAAC"}
+{"version":3,"file":"volume-off.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/volume-off.js"],"sourcesContent":["import { jsx } from \"react/jsx-runtime\";\nconst VolumeOffIcon = (props) => /* @__PURE__ */ jsx(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", ...props, children: /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", 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\" }) });\nexport default VolumeOffIcon;\n"],"mappings":";;;AACA,MAAM,iBAAiB,UAA0B,oBAAI,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,GAAG;CAAO,UAA0B,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAyV,CAAC;CAAE,CAAC"}

package/dist/dev/index.d.ts

@@ -1,4 +1,4 @@
-import { Container, ContainerProps, PlayerContextValue, useMedia, useMediaRegistration, usePlayer, usePlayerContext } from "./player/context.js";
+import { Container, ContainerProps, PlayerContextValue, useContainer, useContainerAttach, useMedia, useMediaAttach, usePlayer, usePlayerContext } from "./player/context.js";
 import { CreatePlayerConfig, CreatePlayerResult, ProviderProps, createPlayer } from "./player/create-player.js";
 import { AlertDialogContextValue, useAlertDialogContext } from "./ui/alert-dialog/context.js";
 import { HTMLProps, RenderFunction, RenderProp, UIComponentProps } from "./utils/types.js";
@@ -38,4 +38,4 @@ import { renderElement } from "./utils/use-render.js";
 import { Comparator, Selector, createSelector, shallowEqual } from "@videojs/store";
 import { useSelector, useStore } from "@videojs/store/react";
 export * from "@videojs/core/dom";
-export { index_parts_d_exports as AlertDialog, type AlertDialogContextValue, BufferingIndicator, type BufferingIndicatorProps, CaptionsButton, type CaptionsButtonProps, type Comparator, Container, type ContainerProps, index_parts_d_exports$1 as Controls, type ControlsGroupProps, type ControlsRootProps, type CreatePlayerConfig, type CreatePlayerResult, FullscreenButton, type FullscreenButtonProps, type HTMLProps, MuteButton, type MuteButtonProps, PiPButton, type PiPButtonProps, PlayButton, type PlayButtonProps, PlaybackRateButton, type PlaybackRateButtonProps, type PlayerContextValue, index_parts_d_exports$2 as Popover, type PopoverContextValue, Poster, type PosterProps, type ProviderProps, type RenderFunction, type RenderProp, SeekButton, type SeekButtonProps, type Selector, index_parts_d_exports$3 as Slider, type SliderBufferProps, type SliderFillProps, type SliderRootProps, type SliderThumbProps, type SliderThumbnailProps, type SliderTrackProps, type SliderValueProps, Thumbnail, type ThumbnailProps, index_parts_d_exports$4 as Time, index_parts_d_exports$5 as TimeSlider, index_parts_d_exports$6 as Tooltip, type TooltipContextValue, type UIComponentProps, index_parts_d_exports$7 as VolumeSlider, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useAlertDialogContext, useButton, useMedia, useMediaRegistration, usePlayer, usePlayerContext, usePopoverContext, useSelector, useSlider, useStore, useTooltipContext };
+export { index_parts_d_exports as AlertDialog, type AlertDialogContextValue, BufferingIndicator, type BufferingIndicatorProps, CaptionsButton, type CaptionsButtonProps, type Comparator, Container, type ContainerProps, index_parts_d_exports$1 as Controls, type ControlsGroupProps, type ControlsRootProps, type CreatePlayerConfig, type CreatePlayerResult, FullscreenButton, type FullscreenButtonProps, type HTMLProps, MuteButton, type MuteButtonProps, PiPButton, type PiPButtonProps, PlayButton, type PlayButtonProps, PlaybackRateButton, type PlaybackRateButtonProps, type PlayerContextValue, index_parts_d_exports$2 as Popover, type PopoverContextValue, Poster, type PosterProps, type ProviderProps, type RenderFunction, type RenderProp, SeekButton, type SeekButtonProps, type Selector, index_parts_d_exports$3 as Slider, type SliderBufferProps, type SliderFillProps, type SliderRootProps, type SliderThumbProps, type SliderThumbnailProps, type SliderTrackProps, type SliderValueProps, Thumbnail, type ThumbnailProps, index_parts_d_exports$4 as Time, index_parts_d_exports$5 as TimeSlider, index_parts_d_exports$6 as Tooltip, type TooltipContextValue, type UIComponentProps, index_parts_d_exports$7 as VolumeSlider, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useAlertDialogContext, useButton, useContainer, useContainerAttach, useMedia, useMediaAttach, usePlayer, usePlayerContext, usePopoverContext, useSelector, useSlider, useStore, useTooltipContext };

package/dist/dev/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { Container, useMedia, useMediaRegistration, usePlayer, usePlayerContext } from "./player/context.js";
+import { Container, useContainer, useContainerAttach, useMedia, useMediaAttach, usePlayer, usePlayerContext } from "./player/context.js";
 import { createPlayer } from "./player/create-player.js";
 import { useAlertDialogContext } from "./ui/alert-dialog/context.js";
 import { mergeProps } from "./utils/merge-props.js";
@@ -32,4 +32,4 @@ import { useSelector, useStore } from "@videojs/store/react";
 
 export * from "@videojs/core/dom"
 
-export { index_parts_exports as AlertDialog, BufferingIndicator, CaptionsButton, Container, index_parts_exports$1 as Controls, FullscreenButton, MuteButton, PiPButton, PlayButton, PlaybackRateButton, index_parts_exports$2 as Popover, Poster, SeekButton, index_parts_exports$3 as Slider, Thumbnail, index_parts_exports$4 as Time, index_parts_exports$5 as TimeSlider, index_parts_exports$6 as Tooltip, index_parts_exports$7 as VolumeSlider, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useAlertDialogContext, useButton, useMedia, useMediaRegistration, usePlayer, usePlayerContext, usePopoverContext, useSelector, useSlider, useStore, useTooltipContext };
+export { index_parts_exports as AlertDialog, BufferingIndicator, CaptionsButton, Container, index_parts_exports$1 as Controls, FullscreenButton, MuteButton, PiPButton, PlayButton, PlaybackRateButton, index_parts_exports$2 as Popover, Poster, SeekButton, index_parts_exports$3 as Slider, Thumbnail, index_parts_exports$4 as Time, index_parts_exports$5 as TimeSlider, index_parts_exports$6 as Tooltip, index_parts_exports$7 as VolumeSlider, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useAlertDialogContext, useButton, useContainer, useContainerAttach, useMedia, useMediaAttach, usePlayer, usePlayerContext, usePopoverContext, useSelector, useSlider, useStore, useTooltipContext };

package/dist/dev/media/audio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"audio.d.ts","names":[],"sources":["../../../src/media/audio.tsx"],"mappings":";;;;UAQiB,UAAA,SAAmB,mBAAA,CAAoB,gBAAA;AAAA,cAE3C,KAAA,EAAK,KAAA,CAAA,yBAAA,CAAA,UAAA,GAAA,KAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAmBD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;AAAA"}
+{"version":3,"file":"audio.d.ts","names":[],"sources":["../../../src/media/audio.tsx"],"mappings":";;;;UAQiB,UAAA,SAAmB,mBAAA,CAAoB,gBAAA;AAAA,cAE3C,KAAA,EAAK,KAAA,CAAA,yBAAA,CAAA,UAAA,GAAA,KAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAWD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;AAAA"}

package/dist/dev/media/audio.js

@@ -1,17 +1,14 @@
 'use client';
 
 import { useComposedRefs } from "../utils/use-composed-refs.js";
-import { useMediaRegistration } from "../player/context.js";
-import { forwardRef, useCallback } from "react";
+import { useMediaAttach } from "../player/context.js";
+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 = useMediaRegistration();
 	return /* @__PURE__ */ jsx("audio", {
-		ref: useComposedRefs(ref, useCallback((el) => {
-			setMedia?.(el);
-		}, [setMedia])),
+		ref: useComposedRefs(ref, useMediaAttach()),
 		...props,
 		children
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"audio.js","names":[],"sources":["../../../src/media/audio.tsx"],"sourcesContent":["'use client';\n\nimport type { AudioHTMLAttributes } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMediaRegistration } 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 = useMediaRegistration();\n\n  const mediaRef = useCallback(\n    (el: HTMLAudioElement | null) => {\n      setMedia?.(el);\n    },\n    [setMedia]\n  );\n\n  const composedRef = useComposedRefs(ref, mediaRef);\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":";;;;;;;;AAUA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;CACxG,MAAM,WAAW,sBAAsB;AAWvC,QACE,oBAAC;EAAM,KAHW,gBAAgB,KAPnB,aACd,OAAgC;AAC/B,cAAW,GAAG;KAEhB,CAAC,SAAS,CACX,CAEiD;EAGvB,GAAI;EAC1B;GACK;EAEV"}
+{"version":3,"file":"audio.js","names":[],"sources":["../../../src/media/audio.tsx"],"sourcesContent":["'use client';\n\nimport 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":";;;;;;;;AAUA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;AAIxG,QACE,oBAAC;EAAM,KAHW,gBAAgB,KADnB,gBAAgB,CACiB;EAGvB,GAAI;EAC1B;GACK;EAEV"}

package/dist/dev/media/background-video/index.js

@@ -1,13 +1,13 @@
 'use client';
 
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
-import { useMediaRegistration } from "../../player/context.js";
+import { useMediaAttach } from "../../player/context.js";
 import { forwardRef, useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/media/background-video/index.tsx
 const BackgroundVideo = forwardRef(function BackgroundVideo({ children, ...props }, ref) {
-	const setMedia = useMediaRegistration();
+	const setMedia = useMediaAttach();
 	return /* @__PURE__ */ jsx("video", {
 		ref: useComposedRefs(ref, useCallback((el) => {
 			setMedia?.(el);

package/dist/dev/media/background-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMediaRegistration } 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 = useMediaRegistration();\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,sBAAsB;AAWvC,QACE,oBAAC;EAAM,KAHW,gBAAgB,KAPnB,aACd,OAAgC;AAC/B,cAAW,GAAG;KAEhB,CAAC,SAAS,CACX,CAEiD;EAGvB;EAAM;EAAS;EAAK;EAAY;EAAsB;EAAwB,GAAI;EACxG;GACK;EAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.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,gBAAgB;AAWjC,QACE,oBAAC;EAAM,KAHW,gBAAgB,KAPnB,aACd,OAAgC;AAC/B,cAAW,GAAG;KAEhB,CAAC,SAAS,CACX,CAEiD;EAGvB;EAAM;EAAS;EAAK;EAAY;EAAsB;EAAwB,GAAI;EACxG;GACK;EAEV"}

package/dist/dev/media/dash-video/index.d.ts

@@ -0,0 +1,11 @@
+import * as react from "react";
+import { PropsWithChildren, VideoHTMLAttributes } from "react";
+
+//#region src/media/dash-video/index.d.ts
+type DashVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;
+declare const DashVideo: react.ForwardRefExoticComponent<VideoHTMLAttributes<HTMLVideoElement> & {
+  children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLVideoElement>>;
+//#endregion
+export { DashVideo, DashVideo as default, DashVideoProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/dev/media/dash-video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/dash-video/index.tsx"],"mappings":";;;;KASY,cAAA,GAAiB,iBAAA,CAAkB,mBAAA,CAAoB,gBAAA;AAAA,cAEtD,SAAA,QAAS,yBAAA,CAAA,mBAAA,CAAA,gBAAA;aAAA,KAAA,CAAA,SAAA;AAAA"}

package/dist/dev/media/dash-video/index.js

@@ -0,0 +1,26 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useMediaAttach } from "../../player/context.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { attachMediaElement } from "../../utils/attach-media-element.js";
+import { mediaProps } from "../../utils/media-props.js";
+import { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { DashMedia } from "@videojs/core/dom/media/dash";
+
+//#region src/media/dash-video/index.tsx
+const DashVideo = forwardRef(({ children, ...props }, ref) => {
+	const mediaApi = useMemo(() => new DashMedia(), []);
+	const setMedia = useMediaAttach();
+	useDestroy(mediaApi, () => {
+		setMedia?.(mediaApi);
+	});
+	return /* @__PURE__ */ jsx("video", {
+		ref: useComposedRefs(attachMediaElement(mediaApi), ref),
+		...mediaProps(mediaApi, props),
+		children
+	});
+});
+
+//#endregion
+export { DashVideo, DashVideo as default };
+//# sourceMappingURL=index.js.map

package/dist/dev/media/dash-video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/dash-video/index.tsx"],"sourcesContent":["import { DashMedia } from '@videojs/core/dom/media/dash';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef, useMemo } from 'react';\nimport { useMediaAttach } from '../../player/context';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useDestroy } from '../../utils/use-destroy';\n\nexport type DashVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;\n\nexport const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(({ children, ...props }, ref) => {\n  const mediaApi = useMemo(() => new DashMedia(), []);\n  const setMedia = useMediaAttach();\n\n  useDestroy(mediaApi, () => {\n    setMedia?.(mediaApi);\n  });\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport default DashVideo;\n"],"mappings":";;;;;;;;;;AAWA,MAAa,YAAY,YAA8C,EAAE,UAAU,GAAG,SAAS,QAAQ;CACrG,MAAM,WAAW,cAAc,IAAI,WAAW,EAAE,EAAE,CAAC;CACnD,MAAM,WAAW,gBAAgB;AAEjC,YAAW,gBAAgB;AACzB,aAAW,SAAS;GACpB;AAIF,QACE,oBAAC;EAAM,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,MAAM;EACrD;GACK;EAEV"}

package/dist/dev/media/hls-video/index.js

@@ -1,5 +1,5 @@
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
-import { useMediaRegistration } from "../../player/context.js";
+import { useMediaAttach } from "../../player/context.js";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { attachMediaElement } from "../../utils/attach-media-element.js";
 import { mediaProps } from "../../utils/media-props.js";
@@ -10,7 +10,7 @@ import { HlsMedia } from "@videojs/core/dom/media/hls";
 //#region src/media/hls-video/index.tsx
 const HlsVideo = forwardRef(({ children, ...props }, ref) => {
 	const mediaApi = useMemo(() => new HlsMedia(), []);
-	const setMedia = useMediaRegistration();
+	const setMedia = useMediaAttach();
 	useDestroy(mediaApi, () => {
 		setMedia?.(mediaApi);
 	});

package/dist/dev/media/hls-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/hls-video/index.tsx"],"sourcesContent":["import { HlsMedia } from '@videojs/core/dom/media/hls';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef, useMemo } from 'react';\nimport { useMediaRegistration } from '../../player/context';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useDestroy } from '../../utils/use-destroy';\n\nexport type HlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;\n\nexport const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(({ children, ...props }, ref) => {\n  const mediaApi = useMemo(() => new HlsMedia(), []);\n  const setMedia = useMediaRegistration();\n\n  useDestroy(mediaApi, () => {\n    setMedia?.(mediaApi);\n  });\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport default HlsVideo;\n"],"mappings":";;;;;;;;;;AAWA,MAAa,WAAW,YAA6C,EAAE,UAAU,GAAG,SAAS,QAAQ;CACnG,MAAM,WAAW,cAAc,IAAI,UAAU,EAAE,EAAE,CAAC;CAClD,MAAM,WAAW,sBAAsB;AAEvC,YAAW,gBAAgB;AACzB,aAAW,SAAS;GACpB;AAGF,QACE,oBAAC;EAAM,KAFW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAE3C,GAAI,WAAW,UAAU,MAAM;EACrD;GACK;EAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/hls-video/index.tsx"],"sourcesContent":["import { HlsMedia } from '@videojs/core/dom/media/hls';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef, useMemo } from 'react';\nimport { useMediaAttach } from '../../player/context';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useDestroy } from '../../utils/use-destroy';\n\nexport type HlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;\n\nexport const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(({ children, ...props }, ref) => {\n  const mediaApi = useMemo(() => new HlsMedia(), []);\n  const setMedia = useMediaAttach();\n\n  useDestroy(mediaApi, () => {\n    setMedia?.(mediaApi);\n  });\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport default HlsVideo;\n"],"mappings":";;;;;;;;;;AAWA,MAAa,WAAW,YAA6C,EAAE,UAAU,GAAG,SAAS,QAAQ;CACnG,MAAM,WAAW,cAAc,IAAI,UAAU,EAAE,EAAE,CAAC;CAClD,MAAM,WAAW,gBAAgB;AAEjC,YAAW,gBAAgB;AACzB,aAAW,SAAS;GACpB;AAIF,QACE,oBAAC;EAAM,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,MAAM;EACrD;GACK;EAEV"}

package/dist/dev/media/simple-hls-video/index.js

@@ -1,5 +1,5 @@
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
-import { useMediaRegistration } from "../../player/context.js";
+import { useMediaAttach } from "../../player/context.js";
 import { attachMediaElement } from "../../utils/attach-media-element.js";
 import { mediaProps } from "../../utils/media-props.js";
 import { forwardRef, useEffect, useMemo } from "react";
@@ -9,7 +9,7 @@ import { SimpleHlsMedia } from "@videojs/core/dom/media/simple-hls";
 //#region src/media/simple-hls-video/index.tsx
 const SimpleHlsVideo = forwardRef(({ children, ...props }, ref) => {
 	const mediaApi = useMemo(() => new SimpleHlsMedia(), []);
-	const setMedia = useMediaRegistration();
+	const setMedia = useMediaAttach();
 	useEffect(() => {
 		setMedia?.(mediaApi);
 	}, [mediaApi, setMedia]);

package/dist/dev/media/simple-hls-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/simple-hls-video/index.tsx"],"sourcesContent":["import { SimpleHlsMedia } from '@videojs/core/dom/media/simple-hls';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useMemo } from 'react';\nimport { useMediaRegistration } from '../../player/context';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\n\n// TODO: mediaProps uses media.preload which SimpleHlsMedia does not yet expose.\n// Add preload getter/setter to SimpleHlsMedia as a follow-up.\nexport type SimpleHlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;\n\nexport const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(({ children, ...props }, ref) => {\n  const mediaApi = useMemo(() => new SimpleHlsMedia(), []);\n  const setMedia = useMediaRegistration();\n\n  useEffect(() => {\n    setMedia?.(mediaApi);\n  }, [mediaApi, setMedia]);\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport default SimpleHlsVideo;\n"],"mappings":";;;;;;;;;AAYA,MAAa,iBAAiB,YAAmD,EAAE,UAAU,GAAG,SAAS,QAAQ;CAC/G,MAAM,WAAW,cAAc,IAAI,gBAAgB,EAAE,EAAE,CAAC;CACxD,MAAM,WAAW,sBAAsB;AAEvC,iBAAgB;AACd,aAAW,SAAS;IACnB,CAAC,UAAU,SAAS,CAAC;AAGxB,QACE,oBAAC;EAAM,KAFW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAE3C,GAAI,WAAW,UAAU,MAAM;EACrD;GACK;EAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/simple-hls-video/index.tsx"],"sourcesContent":["import { SimpleHlsMedia } from '@videojs/core/dom/media/simple-hls';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useMemo } from 'react';\nimport { useMediaAttach } from '../../player/context';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\n\n// TODO: mediaProps uses media.preload which SimpleHlsMedia does not yet expose.\n// Add preload getter/setter to SimpleHlsMedia as a follow-up.\nexport type SimpleHlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;\n\nexport const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(({ children, ...props }, ref) => {\n  const mediaApi = useMemo(() => new SimpleHlsMedia(), []);\n  const setMedia = useMediaAttach();\n\n  useEffect(() => {\n    setMedia?.(mediaApi);\n  }, [mediaApi, setMedia]);\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport default SimpleHlsVideo;\n"],"mappings":";;;;;;;;;AAYA,MAAa,iBAAiB,YAAmD,EAAE,UAAU,GAAG,SAAS,QAAQ;CAC/G,MAAM,WAAW,cAAc,IAAI,gBAAgB,EAAE,EAAE,CAAC;CACxD,MAAM,WAAW,gBAAgB;AAEjC,iBAAgB;AACd,aAAW,SAAS;IACnB,CAAC,UAAU,SAAS,CAAC;AAIxB,QACE,oBAAC;EAAM,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,MAAM;EACrD;GACK;EAEV"}

package/dist/dev/media/video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video.d.ts","names":[],"sources":["../../../src/media/video.tsx"],"mappings":";;;;UAQiB,UAAA,SAAmB,mBAAA,CAAoB,gBAAA;AAAA,cAE3C,KAAA,EAAK,KAAA,CAAA,yBAAA,CAAA,UAAA,GAAA,KAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAmBD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;AAAA"}
+{"version":3,"file":"video.d.ts","names":[],"sources":["../../../src/media/video.tsx"],"mappings":";;;;UAQiB,UAAA,SAAmB,mBAAA,CAAoB,gBAAA;AAAA,cAE3C,KAAA,EAAK,KAAA,CAAA,yBAAA,CAAA,UAAA,GAAA,KAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAWD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;AAAA"}

package/dist/dev/media/video.js

@@ -1,17 +1,14 @@
 'use client';
 
 import { useComposedRefs } from "../utils/use-composed-refs.js";
-import { useMediaRegistration } from "../player/context.js";
-import { forwardRef, useCallback } from "react";
+import { useMediaAttach } from "../player/context.js";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/media/video.tsx
 const Video = forwardRef(function Video({ children, ...props }, ref) {
-	const setMedia = useMediaRegistration();
 	return /* @__PURE__ */ jsx("video", {
-		ref: useComposedRefs(ref, useCallback((el) => {
-			setMedia?.(el);
-		}, [setMedia])),
+		ref: useComposedRefs(ref, useMediaAttach()),
 		...props,
 		children
 	});

package/dist/dev/media/video.js.map

@@ -1 +1 @@
-{"version":3,"file":"video.js","names":[],"sources":["../../../src/media/video.tsx"],"sourcesContent":["'use client';\n\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMediaRegistration } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport const Video = forwardRef<HTMLVideoElement, VideoProps>(function Video({ children, ...props }, ref) {\n  const setMedia = useMediaRegistration();\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} {...props}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace Video {\n  export type Props = VideoProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;CACxG,MAAM,WAAW,sBAAsB;AAWvC,QACE,oBAAC;EAAM,KAHW,gBAAgB,KAPnB,aACd,OAAgC;AAC/B,cAAW,GAAG;KAEhB,CAAC,SAAS,CACX,CAEiD;EAGvB,GAAI;EAC1B;GACK;EAEV"}
+{"version":3,"file":"video.js","names":[],"sources":["../../../src/media/video.tsx"],"sourcesContent":["'use client';\n\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport const Video = forwardRef<HTMLVideoElement, VideoProps>(function Video({ children, ...props }, ref) {\n  const setMedia = useMediaAttach();\n  const composedRef = useComposedRefs(ref, setMedia);\n\n  return (\n    <video ref={composedRef} {...props}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace Video {\n  export type Props = VideoProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;AAIxG,QACE,oBAAC;EAAM,KAHW,gBAAgB,KADnB,gBAAgB,CACiB;EAGvB,GAAI;EAC1B;GACK;EAEV"}

package/dist/dev/player/context.d.ts

@@ -1,4 +1,4 @@
-import { Media } from "@videojs/core/dom";
+import { Media, MediaContainer } from "@videojs/core/dom";
 import { UnknownState, UnknownStore } from "@videojs/store";
 import * as react from "react";
 import { Dispatch, HTMLAttributes, ReactNode, SetStateAction } from "react";
@@ -8,6 +8,8 @@ interface PlayerContextValue {
   store: UnknownStore;
   media: Media | null;
   setMedia: Dispatch<SetStateAction<Media | null>>;
+  container: MediaContainer | null;
+  setContainer: Dispatch<SetStateAction<HTMLElement | null>>;
 }
 /** Access the full player context value. Throws if used outside a Player Provider. */
 declare function usePlayerContext(): PlayerContextValue;
@@ -26,8 +28,12 @@ declare function usePlayer(): UnknownStore;
 declare function usePlayer<R>(selector: (state: UnknownState) => R): R;
 /** Access the media element from within a Player Provider. */
 declare function useMedia(): Media | null;
-/** Access the media registration setter for connecting a media element to the player. */
-declare function useMediaRegistration(): Dispatch<SetStateAction<Media | null>> | undefined;
+/** Access the container element from within a Player Provider. */
+declare function useContainer(): MediaContainer | null;
+/** Access the media attach setter for connecting a media element to the player. */
+declare function useMediaAttach(): Dispatch<SetStateAction<Media | null>> | undefined;
+/** Access the container attach setter for connecting a container element to the player. */
+declare function useContainerAttach(): Dispatch<SetStateAction<HTMLElement | null>> | undefined;
 interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
 }
@@ -36,5 +42,5 @@ declare namespace Container {
   type Props = ContainerProps;
 }
 //#endregion
-export { Container, ContainerProps, PlayerContextValue, useMedia, useMediaRegistration, usePlayer, usePlayerContext };
+export { Container, ContainerProps, PlayerContextValue, useContainer, useContainerAttach, useMedia, useMediaAttach, usePlayer, usePlayerContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/dev/player/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.tsx"],"mappings":";;;;;;UAUiB,kBAAA;EACf,KAAA,EAAO,YAAA;EACP,KAAA,EAAO,KAAA;EACP,QAAA,EAAU,QAAA,CAAS,cAAA,CAAe,KAAA;AAAA;;iBAqBpB,gBAAA,CAAA,GAAoB,kBAAA;;;;;;iBAWpB,SAAA,CAAA,GAAa,YAAA;;;;;;;iBAOb,SAAA,GAAA,CAAa,QAAA,GAAW,KAAA,EAAO,YAAA,KAAiB,CAAA,GAAI,CAAA;;iBAwBpD,QAAA,CAAA,GAAY,KAAA;;iBAMZ,oBAAA,CAAA,GAAwB,QAAA,CAAS,cAAA,CAAe,KAAA;AAAA,UAK/C,cAAA,SAAuB,cAAA,CAAe,cAAA;EACrD,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAiBL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;AAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.tsx"],"mappings":";;;;;;UAUiB,kBAAA;EACf,KAAA,EAAO,YAAA;EACP,KAAA,EAAO,KAAA;EACP,QAAA,EAAU,QAAA,CAAS,cAAA,CAAe,KAAA;EAClC,SAAA,EAAW,cAAA;EACX,YAAA,EAAc,QAAA,CAAS,cAAA,CAAe,WAAA;AAAA;;iBAqBxB,gBAAA,CAAA,GAAoB,kBAAA;;;;;;iBAWpB,SAAA,CAAA,GAAa,YAAA;;;;;;;iBAOb,SAAA,GAAA,CAAa,QAAA,GAAW,KAAA,EAAO,YAAA,KAAiB,CAAA,GAAI,CAAA;;iBAwBpD,QAAA,CAAA,GAAY,KAAA;AA/B5B;AAAA,iBAqCgB,YAAA,CAAA,GAAgB,cAAA;;iBAMhB,cAAA,CAAA,GAAkB,QAAA,CAAS,cAAA,CAAe,KAAA;;iBAM1C,kBAAA,CAAA,GAAsB,QAAA,CAAS,cAAA,CAAe,WAAA;AAAA,UAK7C,cAAA,SAAuB,cAAA,CAAe,cAAA;EACrD,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAiBL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;AAAA"}

package/dist/dev/player/context.js

@@ -38,21 +38,27 @@ function useMedia() {
 	const { media } = usePlayerContext();
 	return media;
 }
-/** Access the media registration setter for connecting a media element to the player. */
-function useMediaRegistration() {
+/** Access the container element from within a Player Provider. */
+function useContainer() {
+	const { container } = usePlayerContext();
+	return container;
+}
+/** Access the media attach setter for connecting a media element to the player. */
+function useMediaAttach() {
 	return useContext(PlayerContext)?.setMedia;
 }
+/** Access the container attach setter for connecting a container element to the player. */
+function useContainerAttach() {
+	return useContext(PlayerContext)?.setContainer;
+}
 const Container = forwardRef(function Container({ children, ...props }, ref) {
-	const { store, media } = usePlayerContext();
+	const setContainer = useContainerAttach();
 	const internalRef = useRef(null);
 	const composedRef = useComposedRefs(ref, internalRef);
 	useEffect(() => {
-		if (!media) return;
-		return store.attach({
-			media,
-			container: internalRef.current
-		});
-	}, [media, store]);
+		setContainer?.(internalRef.current);
+		return () => setContainer?.(null);
+	}, [setContainer]);
 	return /* @__PURE__ */ jsx("div", {
 		ref: composedRef,
 		...props,
@@ -61,5 +67,5 @@ const Container = forwardRef(function Container({ children, ...props }, ref) {
 });
 
 //#endregion
-export { Container, PlayerContextProvider, useMedia, useMediaRegistration, useOptionalPlayer, usePlayer, usePlayerContext };
+export { Container, PlayerContextProvider, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalPlayer, usePlayer, usePlayerContext };
 //# sourceMappingURL=context.js.map

package/dist/dev/player/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["'use client';\n\nimport type { Media } from '@videojs/core/dom';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, HTMLAttributes, ReactNode, SetStateAction } from 'react';\nimport { createContext, forwardRef, useContext, useEffect, useRef } from 'react';\n\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface PlayerContextValue {\n  store: UnknownStore;\n  media: Media | null;\n  setMedia: Dispatch<SetStateAction<Media | null>>;\n}\n\nconst PlayerContext = createContext<PlayerContextValue | null>(null);\nconst EMPTY_UNSUBSCRIBE = () => {};\nconst EMPTY_STORE = {\n  state: {} as UnknownState,\n  subscribe: () => EMPTY_UNSUBSCRIBE,\n} as Pick<UnknownStore, 'state' | 'subscribe'>;\n\nexport function PlayerContextProvider({\n  value,\n  children,\n}: {\n  value: PlayerContextValue;\n  children: ReactNode;\n}): ReactNode {\n  return <PlayerContext.Provider value={value}>{children}</PlayerContext.Provider>;\n}\n\n/** Access the full player context value. Throws if used outside a Player Provider. */\nexport function usePlayerContext(): PlayerContextValue {\n  const ctx = useContext(PlayerContext);\n  if (!ctx) throw new Error('usePlayerContext must be used within a Player Provider');\n  return ctx;\n}\n\n/**\n * Access the player store from within a Player Provider.\n *\n * @label Without Selector\n */\nexport function usePlayer(): UnknownStore;\n/**\n * Select a value from the player store. Re-renders when the selected value changes.\n *\n * @label With Selector\n * @param selector - Derives a value from the player store state.\n */\nexport function usePlayer<R>(selector: (state: UnknownState) => R): R;\nexport function usePlayer<R>(selector?: (state: UnknownState) => R) {\n  const { store } = usePlayerContext();\n  return useStore(store, selector as any);\n}\n\n/**\n * Access player state when available, but return `undefined` outside Provider.\n *\n * This is useful for components that can operate without player context\n * (e.g. they accept fully explicit props as a fallback).\n */\n/** @label Without Selector */\nexport function useOptionalPlayer(): UnknownStore | undefined;\n/** @label With Selector */\nexport function useOptionalPlayer<R>(selector: (state: UnknownState) => R): R | undefined;\nexport function useOptionalPlayer<R>(selector?: (state: UnknownState) => R) {\n  const ctx = useContext(PlayerContext);\n  const store = (ctx?.store ?? (EMPTY_STORE as unknown as UnknownStore)) as UnknownStore;\n  const value = useStore(store, (ctx ? selector : undefined) as any);\n  return ctx ? value : undefined;\n}\n\n/** Access the media element from within a Player Provider. */\nexport function useMedia(): Media | null {\n  const { media } = usePlayerContext();\n  return media;\n}\n\n/** Access the media registration setter for connecting a media element to the player. */\nexport function useMediaRegistration(): Dispatch<SetStateAction<Media | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setMedia;\n}\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container({ children, ...props }, ref) {\n  const { store, media } = usePlayerContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n  const composedRef = useComposedRefs(ref, internalRef);\n\n  useEffect(() => {\n    if (!media) return;\n    return store.attach({ media, container: internalRef.current });\n  }, [media, store]);\n\n  return (\n    <div ref={composedRef} {...props}>\n      {children}\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;;;AAgBA,MAAM,gBAAgB,cAAyC,KAAK;AACpE,MAAM,0BAA0B;AAChC,MAAM,cAAc;CAClB,OAAO,EAAE;CACT,iBAAiB;CAClB;AAED,SAAgB,sBAAsB,EACpC,OACA,YAIY;AACZ,QAAO,oBAAC,cAAc;EAAgB;EAAQ;GAAkC;;;AAIlF,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,cAAc;AACrC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yDAAyD;AACnF,QAAO;;AAgBT,SAAgB,UAAa,UAAuC;CAClE,MAAM,EAAE,UAAU,kBAAkB;AACpC,QAAO,SAAS,OAAO,SAAgB;;AAazC,SAAgB,kBAAqB,UAAuC;CAC1E,MAAM,MAAM,WAAW,cAAc;CAErC,MAAM,QAAQ,SADC,KAAK,SAAU,aACC,MAAM,WAAW,OAAkB;AAClE,QAAO,MAAM,QAAQ;;;AAIvB,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,kBAAkB;AACpC,QAAO;;;AAIT,SAAgB,uBAA2E;AAEzF,QADY,WAAW,cAAc,EACzB;;AAOd,MAAa,YAAY,WAA2C,SAAS,UAAU,EAAE,UAAU,GAAG,SAAS,KAAK;CAClH,MAAM,EAAE,OAAO,UAAU,kBAAkB;CAC3C,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,cAAc,gBAAgB,KAAK,YAAY;AAErD,iBAAgB;AACd,MAAI,CAAC,MAAO;AACZ,SAAO,MAAM,OAAO;GAAE;GAAO,WAAW,YAAY;GAAS,CAAC;IAC7D,CAAC,OAAO,MAAM,CAAC;AAElB,QACE,oBAAC;EAAI,KAAK;EAAa,GAAI;EACxB;GACG;EAER"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["'use client';\n\nimport type { Media, MediaContainer } from '@videojs/core/dom';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, HTMLAttributes, ReactNode, SetStateAction } from 'react';\nimport { createContext, forwardRef, useContext, useEffect, useRef } from 'react';\n\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface PlayerContextValue {\n  store: UnknownStore;\n  media: Media | null;\n  setMedia: Dispatch<SetStateAction<Media | null>>;\n  container: MediaContainer | null;\n  setContainer: Dispatch<SetStateAction<HTMLElement | null>>;\n}\n\nconst PlayerContext = createContext<PlayerContextValue | null>(null);\nconst EMPTY_UNSUBSCRIBE = () => {};\nconst EMPTY_STORE = {\n  state: {} as UnknownState,\n  subscribe: () => EMPTY_UNSUBSCRIBE,\n} as Pick<UnknownStore, 'state' | 'subscribe'>;\n\nexport function PlayerContextProvider({\n  value,\n  children,\n}: {\n  value: PlayerContextValue;\n  children: ReactNode;\n}): ReactNode {\n  return <PlayerContext.Provider value={value}>{children}</PlayerContext.Provider>;\n}\n\n/** Access the full player context value. Throws if used outside a Player Provider. */\nexport function usePlayerContext(): PlayerContextValue {\n  const ctx = useContext(PlayerContext);\n  if (!ctx) throw new Error('usePlayerContext must be used within a Player Provider');\n  return ctx;\n}\n\n/**\n * Access the player store from within a Player Provider.\n *\n * @label Without Selector\n */\nexport function usePlayer(): UnknownStore;\n/**\n * Select a value from the player store. Re-renders when the selected value changes.\n *\n * @label With Selector\n * @param selector - Derives a value from the player store state.\n */\nexport function usePlayer<R>(selector: (state: UnknownState) => R): R;\nexport function usePlayer<R>(selector?: (state: UnknownState) => R) {\n  const { store } = usePlayerContext();\n  return useStore(store, selector as any);\n}\n\n/**\n * Access player state when available, but return `undefined` outside Provider.\n *\n * This is useful for components that can operate without player context\n * (e.g. they accept fully explicit props as a fallback).\n */\n/** @label Without Selector */\nexport function useOptionalPlayer(): UnknownStore | undefined;\n/** @label With Selector */\nexport function useOptionalPlayer<R>(selector: (state: UnknownState) => R): R | undefined;\nexport function useOptionalPlayer<R>(selector?: (state: UnknownState) => R) {\n  const ctx = useContext(PlayerContext);\n  const store = (ctx?.store ?? (EMPTY_STORE as unknown as UnknownStore)) as UnknownStore;\n  const value = useStore(store, (ctx ? selector : undefined) as any);\n  return ctx ? value : undefined;\n}\n\n/** Access the media element from within a Player Provider. */\nexport function useMedia(): Media | null {\n  const { media } = usePlayerContext();\n  return media;\n}\n\n/** Access the container element from within a Player Provider. */\nexport function useContainer(): MediaContainer | null {\n  const { container } = usePlayerContext();\n  return container;\n}\n\n/** Access the media attach setter for connecting a media element to the player. */\nexport function useMediaAttach(): Dispatch<SetStateAction<Media | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setMedia;\n}\n\n/** Access the container attach setter for connecting a container element to the player. */\nexport function useContainerAttach(): Dispatch<SetStateAction<HTMLElement | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setContainer;\n}\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container({ children, ...props }, ref) {\n  const setContainer = useContainerAttach();\n  const internalRef = useRef<HTMLDivElement>(null);\n  const composedRef = useComposedRefs(ref, internalRef);\n\n  useEffect(() => {\n    setContainer?.(internalRef.current);\n    return () => setContainer?.(null);\n  }, [setContainer]);\n\n  return (\n    <div ref={composedRef} {...props}>\n      {children}\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;;;AAkBA,MAAM,gBAAgB,cAAyC,KAAK;AACpE,MAAM,0BAA0B;AAChC,MAAM,cAAc;CAClB,OAAO,EAAE;CACT,iBAAiB;CAClB;AAED,SAAgB,sBAAsB,EACpC,OACA,YAIY;AACZ,QAAO,oBAAC,cAAc;EAAgB;EAAQ;GAAkC;;;AAIlF,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,cAAc;AACrC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yDAAyD;AACnF,QAAO;;AAgBT,SAAgB,UAAa,UAAuC;CAClE,MAAM,EAAE,UAAU,kBAAkB;AACpC,QAAO,SAAS,OAAO,SAAgB;;AAazC,SAAgB,kBAAqB,UAAuC;CAC1E,MAAM,MAAM,WAAW,cAAc;CAErC,MAAM,QAAQ,SADC,KAAK,SAAU,aACC,MAAM,WAAW,OAAkB;AAClE,QAAO,MAAM,QAAQ;;;AAIvB,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,kBAAkB;AACpC,QAAO;;;AAIT,SAAgB,eAAsC;CACpD,MAAM,EAAE,cAAc,kBAAkB;AACxC,QAAO;;;AAIT,SAAgB,iBAAqE;AAEnF,QADY,WAAW,cAAc,EACzB;;;AAId,SAAgB,qBAA+E;AAE7F,QADY,WAAW,cAAc,EACzB;;AAOd,MAAa,YAAY,WAA2C,SAAS,UAAU,EAAE,UAAU,GAAG,SAAS,KAAK;CAClH,MAAM,eAAe,oBAAoB;CACzC,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,cAAc,gBAAgB,KAAK,YAAY;AAErD,iBAAgB;AACd,iBAAe,YAAY,QAAQ;AACnC,eAAa,eAAe,KAAK;IAChC,CAAC,aAAa,CAAC;AAElB,QACE,oBAAC;EAAI,KAAK;EAAa,GAAI;EACxB;GACG;EAER"}

package/dist/dev/player/create-player.js

@@ -4,7 +4,7 @@ import { Container, PlayerContextProvider, useMedia, usePlayerContext } from "./
 import { useDestroy } from "../utils/use-destroy.js";
 import { combine, createStore } from "@videojs/store";
 import { useStore } from "@videojs/store/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/player/create-player.tsx
@@ -12,12 +12,26 @@ function createPlayer(config) {
 	function Provider({ children }) {
 		const [store] = useState(() => createStore()(combine(...config.features)));
 		const [media, setMedia] = useState(null);
+		const [container, setContainer] = useState(null);
 		useDestroy(store);
+		useEffect(() => {
+			if (!media) return;
+			return store.attach({
+				media,
+				container
+			});
+		}, [
+			media,
+			container,
+			store
+		]);
 		return /* @__PURE__ */ jsx(PlayerContextProvider, {
 			value: {
 				store,
 				media,
-				setMedia
+				setMedia,
+				container,
+				setContainer
 			},
 			children
 		});

package/dist/dev/player/create-player.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  AnyPlayerFeature,\n  AnyPlayerStore,\n  AudioFeatures,\n  AudioPlayerStore,\n  Media,\n  PlayerStore,\n  PlayerTarget,\n  VideoFeatures,\n  VideoPlayerStore,\n} from '@videojs/core/dom';\nimport type { InferStoreState } from '@videojs/store';\nimport { combine, createStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { FC, ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { useDestroy } from '../utils/use-destroy';\nimport { Container, PlayerContextProvider, useMedia, usePlayerContext } from './context';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n  displayName?: string;\n}\n\nexport interface ProviderProps {\n  children: ReactNode;\n}\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  Provider: FC<ProviderProps>;\n  Container: typeof Container;\n  usePlayer: UsePlayerHook<Store>;\n  useMedia: () => Media | null;\n}\n\nexport type UsePlayerHook<Store extends PlayerStore> = {\n  (): Store;\n  <R>(selector: (state: InferStoreState<Store>) => R): R;\n};\n\n/**\n * Create a player instance with typed store, Provider component, Container, and hooks.\n *\n * @label Video\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Create a player for audio media.\n *\n * @label Audio\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Create a player with custom features.\n *\n * @label Generic\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<AnyPlayerStore> {\n  function Provider({ children }: ProviderProps): ReactNode {\n    const [store] = useState(() => createStore<PlayerTarget>()(combine(...config.features)));\n    const [media, setMedia] = useState<Media | null>(null);\n\n    useDestroy(store);\n\n    return <PlayerContextProvider value={{ store, media, setMedia }}>{children}</PlayerContextProvider>;\n  }\n\n  if (__DEV__ && config.displayName) {\n    Provider.displayName = `${config.displayName}.Provider`;\n  }\n\n  function usePlayer<R>(selector?: (state: object) => R): AnyPlayerStore | R {\n    const { store } = usePlayerContext();\n    return useStore(store, selector as any);\n  }\n\n  return {\n    Provider,\n    Container,\n    usePlayer,\n    useMedia,\n  };\n}\n"],"mappings":";;;;;;;;;;AAqEA,SAAgB,aAAa,QAAoF;CAC/G,SAAS,SAAS,EAAE,YAAsC;EACxD,MAAM,CAAC,SAAS,eAAe,aAA2B,CAAC,QAAQ,GAAG,OAAO,SAAS,CAAC,CAAC;EACxF,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;AAEtD,aAAW,MAAM;AAEjB,SAAO,oBAAC;GAAsB,OAAO;IAAE;IAAO;IAAO;IAAU;GAAG;IAAiC;;AAGrG,KAAe,OAAO,YACpB,UAAS,cAAc,GAAG,OAAO,YAAY;CAG/C,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,kBAAkB;AACpC,SAAO,SAAS,OAAO,SAAgB;;AAGzC,QAAO;EACL;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  AnyPlayerFeature,\n  AnyPlayerStore,\n  AudioFeatures,\n  AudioPlayerStore,\n  Media,\n  PlayerStore,\n  PlayerTarget,\n  VideoFeatures,\n  VideoPlayerStore,\n} from '@videojs/core/dom';\nimport type { InferStoreState } from '@videojs/store';\nimport { combine, createStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { FC, ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useDestroy } from '../utils/use-destroy';\nimport { Container, PlayerContextProvider, useMedia, usePlayerContext } from './context';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n  displayName?: string;\n}\n\nexport interface ProviderProps {\n  children: ReactNode;\n}\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  Provider: FC<ProviderProps>;\n  Container: typeof Container;\n  usePlayer: UsePlayerHook<Store>;\n  useMedia: () => Media | null;\n}\n\nexport type UsePlayerHook<Store extends PlayerStore> = {\n  (): Store;\n  <R>(selector: (state: InferStoreState<Store>) => R): R;\n};\n\n/**\n * Create a player instance with typed store, Provider component, Container, and hooks.\n *\n * @label Video\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Create a player for audio media.\n *\n * @label Audio\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Create a player with custom features.\n *\n * @label Generic\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<AnyPlayerStore> {\n  function Provider({ children }: ProviderProps): ReactNode {\n    const [store] = useState(() => createStore<PlayerTarget>()(combine(...config.features)));\n    const [media, setMedia] = useState<Media | null>(null);\n    const [container, setContainer] = useState<HTMLElement | null>(null);\n\n    useDestroy(store);\n\n    useEffect(() => {\n      if (!media) return;\n      return store.attach({ media, container });\n    }, [media, container, store]);\n\n    return (\n      <PlayerContextProvider value={{ store, media, setMedia, container, setContainer }}>\n        {children}\n      </PlayerContextProvider>\n    );\n  }\n\n  if (__DEV__ && config.displayName) {\n    Provider.displayName = `${config.displayName}.Provider`;\n  }\n\n  function usePlayer<R>(selector?: (state: object) => R): AnyPlayerStore | R {\n    const { store } = usePlayerContext();\n    return useStore(store, selector as any);\n  }\n\n  return {\n    Provider,\n    Container,\n    usePlayer,\n    useMedia,\n  };\n}\n"],"mappings":";;;;;;;;;;AAqEA,SAAgB,aAAa,QAAoF;CAC/G,SAAS,SAAS,EAAE,YAAsC;EACxD,MAAM,CAAC,SAAS,eAAe,aAA2B,CAAC,QAAQ,GAAG,OAAO,SAAS,CAAC,CAAC;EACxF,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;EACtD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;AAEpE,aAAW,MAAM;AAEjB,kBAAgB;AACd,OAAI,CAAC,MAAO;AACZ,UAAO,MAAM,OAAO;IAAE;IAAO;IAAW,CAAC;KACxC;GAAC;GAAO;GAAW;GAAM,CAAC;AAE7B,SACE,oBAAC;GAAsB,OAAO;IAAE;IAAO;IAAO;IAAU;IAAW;IAAc;GAC9E;IACqB;;AAI5B,KAAe,OAAO,YACpB,UAAS,cAAc,GAAG,OAAO,YAAY;CAG/C,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,kBAAkB;AACpC,SAAO,SAAS,OAAO,SAAgB;;AAGzC,QAAO;EACL;EACA;EACA;EACA;EACD"}