@videojs/react 10.0.0-alpha.3 → 10.0.0-alpha.5

package/dist/default/icons/dist/react/minimal/fullscreen-enter.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../icons/dist/react/minimal/fullscreen-enter.js
+const FullscreenEnterIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	viewBox: "0 0 18 18",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M15.25 2a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0V3.5h-3.75a.75.75 0 0 1-.743-.648L10 2.75a.75.75 0 0 1 .75-.75z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M14.72 2.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06zM2.75 10a.75.75 0 0 1 .75.75v3.75h3.75a.75.75 0 0 1 .743.648L8 15.25a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 1 .75-.75"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M6.72 10.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06z"
+		})
+	]
+});
+
+//#endregion
+export { FullscreenEnterIcon as default };
+//# sourceMappingURL=fullscreen-enter.js.map

package/dist/default/icons/dist/react/minimal/fullscreen-enter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-enter.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/fullscreen-enter.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst FullscreenEnterIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M15.25 2a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0V3.5h-3.75a.75.75 0 0 1-.743-.648L10 2.75a.75.75 0 0 1 .75-.75z\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M14.72 2.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06zM2.75 10a.75.75 0 0 1 .75.75v3.75h3.75a.75.75 0 0 1 .743.648L8 15.25a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 1 .75-.75\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M6.72 10.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06z\" })\n] });\nexport default FullscreenEnterIcon;\n"],"mappings":";;;AACA,MAAM,uBAAuB,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU;EACvK,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAsH,CAAC;EAC9J,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAmN,CAAC;EAC3P,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAuE,CAAC;EAChI;CAAE,CAAC"}

package/dist/default/icons/dist/react/minimal/fullscreen-exit.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../icons/dist/react/minimal/fullscreen-exit.js
+const FullscreenExitIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	viewBox: "0 0 18 18",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M10.75 2a.75.75 0 0 1 .75.75V6.5h3.75a.75.75 0 0 1 .743.648L16 7.25a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 1 .75-.75"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M14.72 2.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06zM7.25 10a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0V11.5H2.75a.75.75 0 0 1-.743-.648L2 10.75a.75.75 0 0 1 .75-.75z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M6.72 10.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06z"
+		})
+	]
+});
+
+//#endregion
+export { FullscreenExitIcon as default };
+//# sourceMappingURL=fullscreen-exit.js.map

package/dist/default/icons/dist/react/minimal/fullscreen-exit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-exit.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/fullscreen-exit.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst FullscreenExitIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M10.75 2a.75.75 0 0 1 .75.75V6.5h3.75a.75.75 0 0 1 .743.648L16 7.25a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 1 .75-.75\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M14.72 2.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06zM7.25 10a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0V11.5H2.75a.75.75 0 0 1-.743-.648L2 10.75a.75.75 0 0 1 .75-.75z\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M6.72 10.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06z\" })\n] });\nexport default FullscreenExitIcon;\n"],"mappings":";;;AACA,MAAM,sBAAsB,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU;EACtK,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAA+I,CAAC;EACvL,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAyL,CAAC;EACjO,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAuE,CAAC;EAChI;CAAE,CAAC"}

package/dist/default/icons/dist/react/minimal/pause.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../icons/dist/react/minimal/pause.js
+const PauseIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	viewBox: "0 0 18 18",
+	...props,
+	children: [/* @__PURE__ */ jsx("rect", {
+		width: 4,
+		height: 12,
+		x: 3,
+		y: 3,
+		fill: "currentColor",
+		rx: 1.75
+	}), /* @__PURE__ */ jsx("rect", {
+		width: 4,
+		height: 12,
+		x: 11,
+		y: 3,
+		fill: "currentColor",
+		rx: 1.75
+	})]
+});
+
+//#endregion
+export { PauseIcon as default };
+//# sourceMappingURL=pause.js.map

package/dist/default/icons/dist/react/minimal/pause.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pause.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/pause.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst PauseIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"rect\", { width: 4, height: 12, x: 3, y: 3, fill: \"currentColor\", rx: 1.75 }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 4, height: 12, x: 11, y: 3, fill: \"currentColor\", rx: 1.75 })\n] });\nexport default PauseIcon;\n"],"mappings":";;;AACA,MAAM,aAAa,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU,CAC7J,oBAAI,QAAQ;EAAE,OAAO;EAAG,QAAQ;EAAI,GAAG;EAAG,GAAG;EAAG,MAAM;EAAgB,IAAI;EAAM,CAAC,EACjF,oBAAI,QAAQ;EAAE,OAAO;EAAG,QAAQ;EAAI,GAAG;EAAI,GAAG;EAAG,MAAM;EAAgB,IAAI;EAAM,CAAC,CACnG;CAAE,CAAC"}

package/dist/default/icons/dist/react/minimal/pip.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../icons/dist/react/minimal/pip.js
+const PipIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	viewBox: "0 0 18 18",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M13 2a4 4 0 0 1 4 4v2.645a3.5 3.5 0 0 0-1-.145h-.5V6A2.5 2.5 0 0 0 13 3.5H4A2.5 2.5 0 0 0 1.5 6v6A2.5 2.5 0 0 0 4 14.5h2.5v.5c0 .347.05.683.145 1H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"
+	}), /* @__PURE__ */ jsx("rect", {
+		width: 10,
+		height: 7,
+		x: 8,
+		y: 10,
+		fill: "currentColor",
+		rx: 2
+	})]
+});
+
+//#endregion
+export { PipIcon as default };
+//# sourceMappingURL=pip.js.map

package/dist/default/icons/dist/react/minimal/pip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pip.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/pip.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst PipIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M13 2a4 4 0 0 1 4 4v2.645a3.5 3.5 0 0 0-1-.145h-.5V6A2.5 2.5 0 0 0 13 3.5H4A2.5 2.5 0 0 0 1.5 6v6A2.5 2.5 0 0 0 4 14.5h2.5v.5c0 .347.05.683.145 1H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z\" }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 10, height: 7, x: 8, y: 10, fill: \"currentColor\", rx: 2 })\n] });\nexport default PipIcon;\n"],"mappings":";;;AACA,MAAM,WAAW,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU,CAC3J,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAsL,CAAC,EAC9N,oBAAI,QAAQ;EAAE,OAAO;EAAI,QAAQ;EAAG,GAAG;EAAG,GAAG;EAAI,MAAM;EAAgB,IAAI;EAAG,CAAC,CAChG;CAAE,CAAC"}

package/dist/default/icons/dist/react/minimal/play.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region ../icons/dist/react/minimal/play.js
+const PlayIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	viewBox: "0 0 18 18",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "m13.473 10.476-6.845 4.256a1.697 1.697 0 0 1-2.364-.547 1.77 1.77 0 0 1-.264-.93v-8.51C4 3.78 4.768 3 5.714 3c.324 0 .64.093.914.268l6.845 4.255a1.763 1.763 0 0 1 0 2.953"
+	})
+});
+
+//#endregion
+export { PlayIcon as default };
+//# sourceMappingURL=play.js.map

package/dist/default/icons/dist/react/minimal/play.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"play.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/play.js"],"sourcesContent":["import { jsx } from \"react/jsx-runtime\";\nconst PlayIcon = (props) => /* @__PURE__ */ jsx(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", viewBox: \"0 0 18 18\", ...props, children: /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"m13.473 10.476-6.845 4.256a1.697 1.697 0 0 1-2.364-.547 1.77 1.77 0 0 1-.264-.93v-8.51C4 3.78 4.768 3 5.714 3c.324 0 .64.093.914.268l6.845 4.255a1.763 1.763 0 0 1 0 2.953\" }) });\nexport default PlayIcon;\n"],"mappings":";;;AACA,MAAM,YAAY,UAA0B,oBAAI,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,SAAS;CAAa,GAAG;CAAO,UAA0B,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAA8K,CAAC;CAAE,CAAC"}

package/dist/default/icons/dist/react/minimal/restart.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../icons/dist/react/minimal/restart.js
+const RestartIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	viewBox: "0 0 18 18",
+	...props,
+	children: [/* @__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"
+	}), /* @__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"
+	})]
+});
+
+//#endregion
+export { RestartIcon as default };
+//# sourceMappingURL=restart.js.map

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

@@ -0,0 +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\", 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,SAAS;CAAa,GAAG;CAAO,UAAU,CAC/J,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAqK,CAAC,EAC7M,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAiK,CAAC,CAC1N;CAAE,CAAC"}

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

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region ../icons/dist/react/minimal/seek.js
+const SeekIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	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"
+	})
+});
+
+//#endregion
+export { SeekIcon as default };
+//# sourceMappingURL=seek.js.map

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

@@ -0,0 +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\", 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,SAAS;CAAa,GAAG;CAAO,UAA0B,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAA8L,CAAC;CAAE,CAAC"}

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

@@ -0,0 +1,149 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../icons/dist/react/minimal/spinner.js
+const SpinnerIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "currentColor",
+	viewBox: "0 0 18 18",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("rect", {
+			width: 2,
+			height: 5,
+			x: 8,
+			y: .5,
+			opacity: .5,
+			rx: 1,
+			children: /* @__PURE__ */ jsx("animate", {
+				attributeName: "opacity",
+				begin: "0s",
+				calcMode: "linear",
+				dur: "1s",
+				repeatCount: "indefinite",
+				values: "1;0"
+			})
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: 2,
+			height: 5,
+			x: 12.243,
+			y: 2.257,
+			opacity: .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"
+			})
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: 5,
+			height: 2,
+			x: 12.5,
+			y: 8,
+			opacity: .4,
+			rx: 1,
+			children: /* @__PURE__ */ jsx("animate", {
+				attributeName: "opacity",
+				begin: "0.25s",
+				calcMode: "linear",
+				dur: "1s",
+				repeatCount: "indefinite",
+				values: "1;0"
+			})
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: 5,
+			height: 2,
+			x: 10.743,
+			y: 12.243,
+			opacity: .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"
+			})
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: 2,
+			height: 5,
+			x: 8,
+			y: 12.5,
+			opacity: .3,
+			rx: 1,
+			children: /* @__PURE__ */ jsx("animate", {
+				attributeName: "opacity",
+				begin: "0.5s",
+				calcMode: "linear",
+				dur: "1s",
+				repeatCount: "indefinite",
+				values: "1;0"
+			})
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: 2,
+			height: 5,
+			x: 3.757,
+			y: 10.743,
+			opacity: .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"
+			})
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: 5,
+			height: 2,
+			x: .5,
+			y: 8,
+			opacity: .15,
+			rx: 1,
+			children: /* @__PURE__ */ jsx("animate", {
+				attributeName: "opacity",
+				begin: "0.75s",
+				calcMode: "linear",
+				dur: "1s",
+				repeatCount: "indefinite",
+				values: "1;0"
+			})
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: 5,
+			height: 2,
+			x: 2.257,
+			y: 3.757,
+			opacity: .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"
+			})
+		})
+	]
+});
+
+//#endregion
+export { SpinnerIcon as default };
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +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\", 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,SAAS;CAAa,GAAG;CAAO,UAAU;EACvK,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/default/icons/dist/react/minimal/volume-high.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../icons/dist/react/minimal/volume-high.js
+const VolumeHighIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	viewBox: "0 0 18 18",
+	...props,
+	children: [/* @__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"
+	}), /* @__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"
+	})]
+});
+
+//#endregion
+export { VolumeHighIcon as default };
+//# sourceMappingURL=volume-high.js.map

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

@@ -0,0 +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\", 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,SAAS;CAAa,GAAG;CAAO,UAAU,CAClK,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAmK,CAAC,EAC3M,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAya,CAAC,CACle;CAAE,CAAC"}

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

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region ../icons/dist/react/minimal/volume-low.js
+const VolumeLowIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	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"
+	})
+});
+
+//#endregion
+export { VolumeLowIcon as default };
+//# sourceMappingURL=volume-low.js.map

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

@@ -0,0 +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\", 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,SAAS;CAAa,GAAG;CAAO,UAA0B,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAya,CAAC;CAAE,CAAC"}

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

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region ../icons/dist/react/minimal/volume-off.js
+const VolumeOffIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	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"
+	})
+});
+
+//#endregion
+export { VolumeOffIcon as default };
+//# sourceMappingURL=volume-off.js.map

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

@@ -0,0 +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\", 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,SAAS;CAAa,GAAG;CAAO,UAA0B,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAyV,CAAC;CAAE,CAAC"}

package/dist/default/index.js

@@ -8,15 +8,23 @@ import { BufferingIndicator } from "./ui/buffering-indicator/buffering-indicator
 import { index_parts_exports } from "./ui/controls/index.parts.js";
 import { useButton } from "./ui/hooks/use-button.js";
 import { FullscreenButton } from "./ui/fullscreen-button/fullscreen-button.js";
+import { useSlider } from "./ui/hooks/use-slider.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";
+import { PlaybackRateButton } from "./ui/playback-rate-button/playback-rate-button.js";
+import { usePopoverContext } from "./ui/popover/context.js";
+import { index_parts_exports as index_parts_exports$1 } from "./ui/popover/index.parts.js";
 import { Poster } from "./ui/poster/poster.js";
 import { SeekButton } from "./ui/seek-button/seek-button.js";
-import { index_parts_exports as index_parts_exports$1 } from "./ui/time/index.parts.js";
+import { index_parts_exports as index_parts_exports$2 } from "./ui/slider/index.parts.js";
+import { Thumbnail } from "./ui/thumbnail/thumbnail.js";
+import { index_parts_exports as index_parts_exports$3 } from "./ui/time/index.parts.js";
+import { index_parts_exports as index_parts_exports$4 } from "./ui/time-slider/index.parts.js";
+import { index_parts_exports as index_parts_exports$5 } from "./ui/volume-slider/index.parts.js";
 import { createSelector, shallowEqual } from "@videojs/store";
 import { useSelector, useStore } from "@videojs/store/react";
 
 export * from "@videojs/core/dom"
 
-export { BufferingIndicator, Container, index_parts_exports as Controls, FullscreenButton, MuteButton, PiPButton, PlayButton, Poster, SeekButton, index_parts_exports$1 as Time, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useButton, useMedia, useMediaRegistration, usePlayer, usePlayerContext, useSelector, useStore };
+export { BufferingIndicator, Container, index_parts_exports as Controls, FullscreenButton, MuteButton, PiPButton, PlayButton, PlaybackRateButton, index_parts_exports$1 as Popover, Poster, SeekButton, index_parts_exports$2 as Slider, Thumbnail, index_parts_exports$3 as Time, index_parts_exports$4 as TimeSlider, index_parts_exports$5 as VolumeSlider, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useButton, useMedia, useMediaRegistration, usePlayer, usePlayerContext, usePopoverContext, useSelector, useSlider, useStore };

package/dist/default/player/context.js

@@ -7,6 +7,11 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/player/context.tsx
 const PlayerContext = createContext(null);
+const EMPTY_UNSUBSCRIBE = () => {};
+const EMPTY_STORE = {
+	state: {},
+	subscribe: () => EMPTY_UNSUBSCRIBE
+};
 function PlayerContextProvider({ value, children }) {
 	return /* @__PURE__ */ jsx(PlayerContext.Provider, {
 		value,
@@ -23,6 +28,11 @@ function usePlayer(selector) {
 	const { store } = usePlayerContext();
 	return useStore(store, selector);
 }
+function useOptionalPlayer(selector) {
+	const ctx = useContext(PlayerContext);
+	const value = useStore(ctx?.store ?? EMPTY_STORE, ctx ? selector : void 0);
+	return ctx ? value : void 0;
+}
 /** Access the media element from within a Player Provider. */
 function useMedia() {
 	const { media } = usePlayerContext();
@@ -51,5 +61,5 @@ const Container = forwardRef(function Container({ children, ...props }, ref) {
 });
 
 //#endregion
-export { Container, PlayerContextProvider, useMedia, useMediaRegistration, usePlayer, usePlayerContext };
+export { Container, PlayerContextProvider, useMedia, useMediaRegistration, useOptionalPlayer, usePlayer, usePlayerContext };
 //# sourceMappingURL=context.js.map

package/dist/default/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);\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/** 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;AAEpE,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;;;AAIzC,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 } 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"}

package/dist/default/presets/audio/index.js

@@ -1,5 +1,6 @@
 import { Audio } from "../../media/audio.js";
 import { MinimalAudioSkin } from "./minimal-skin.js";
 import { AudioSkin } from "./skin.js";
+import { audioFeatures } from "@videojs/core/dom";
 
-export { Audio, AudioSkin, MinimalAudioSkin };
+export { Audio, AudioSkin, MinimalAudioSkin, audioFeatures };

package/dist/default/presets/audio/skin.css

@@ -1,3 +1,4 @@
 .media-skin {
   color: var(--media-color, red);
 }
+

package/dist/default/presets/background/index.js

@@ -1,4 +1,5 @@
 import { BackgroundVideo } from "../../media/background-video/index.js";
 import { BackgroundVideoSkin } from "./skin.js";
+import { backgroundFeatures } from "@videojs/core/dom";
 
-export { BackgroundVideo, BackgroundVideoSkin };
+export { BackgroundVideo, BackgroundVideoSkin, backgroundFeatures };

package/dist/default/presets/background/skin.css

@@ -1,3 +1,22 @@
-.media-skin {
-  color: var(--media-color, red);
+.media-background-skin {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
+
+.media-background-skin > video,
+.media-background-skin > .media {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: inherit;
+}
+
+.media-background-skin > :where(img, picture) {
+  width: 100%;
+  height: 100%;
+  object-fit: inherit;
+}
+

package/dist/default/presets/background/skin.js

@@ -1,9 +1,14 @@
 import { jsx } from "react/jsx-runtime";
+import { cn } from "@videojs/utils/style";
 
 //#region src/presets/background/skin.tsx
 function BackgroundVideoSkin(props) {
-	const { children } = props;
-	return /* @__PURE__ */ jsx("div", { children });
+	const { children, className, ...rest } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("media-background-skin", className),
+		...rest,
+		children
+	});
 }
 
 //#endregion

package/dist/default/presets/background/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/presets/background/skin.tsx"],"sourcesContent":["import type { BaseSkinProps } from '../types';\n\nexport type BackgroundVideoSkinProps = BaseSkinProps;\n\nexport function BackgroundVideoSkin(props: BackgroundVideoSkinProps) {\n  const { children } = props;\n  return <div>{children}</div>;\n}\n"],"mappings":";;;AAIA,SAAgB,oBAAoB,OAAiC;CACnE,MAAM,EAAE,aAAa;AACrB,QAAO,oBAAC,SAAK,WAAe"}
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/presets/background/skin.tsx"],"sourcesContent":["import { cn } from '@videojs/utils/style';\nimport type { BaseSkinProps } from '../types';\n\nexport type BackgroundVideoSkinProps = BaseSkinProps;\n\nexport function BackgroundVideoSkin(props: BackgroundVideoSkinProps) {\n  const { children, className, ...rest } = props;\n  return (\n    <div className={cn('media-background-skin', className)} {...rest}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;AAKA,SAAgB,oBAAoB,OAAiC;CACnE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AACzC,QACE,oBAAC;EAAI,WAAW,GAAG,yBAAyB,UAAU;EAAE,GAAI;EACzD;GACG"}

package/dist/default/presets/video/index.js

@@ -3,5 +3,6 @@ import { MinimalVideoSkin } from "./minimal-skin.js";
 import { MinimalVideoSkinTailwind } from "./minimal-skin.tailwind.js";
 import { VideoSkin } from "./skin.js";
 import { VideoSkinTailwind } from "./skin.tailwind.js";
+import { videoFeatures } from "@videojs/core/dom";
 
-export { MinimalVideoSkin, MinimalVideoSkinTailwind, Video, VideoSkin, VideoSkinTailwind };
+export { MinimalVideoSkin, MinimalVideoSkinTailwind, Video, VideoSkin, VideoSkinTailwind, videoFeatures };