@videojs/react 10.0.0-beta.28 → 10.0.0-beta.29

package/dist/default/__generated__/skins/minimal-video/styles/theme.css

@@ -0,0 +1,7 @@
+@layer videojs.theme.variant {
+  .media-theme-minimal {
+    --media-video-border-radius: var(--media-border-radius, 0.75rem);
+    --media-control-radius: calc(var(--media-spacing) * 2);
+    --media-surface-radius: calc(var(--media-spacing) * 2.5);
+  }
+}

package/dist/default/__generated__/skins/minimal-video/styles/video.css

@@ -0,0 +1,29 @@
+@layer videojs.theme.base, videojs.theme.variant, videojs.theme.preferences;
+
+@layer videojs.theme.base {
+  :is(.media-theme-default, .media-theme-minimal) {
+    --media-controls-transition-duration: 100ms;
+    --media-scale: 1;
+    --media-spacing: calc(var(--media-scale-unit, 16px) * var(--media-scale) / 4);
+  }
+}
+
+@layer videojs.theme.preferences {
+  @media (pointer: fine) {
+    :is(.media-theme-default, .media-theme-minimal):has([data-controls]:not([data-visible])) {
+      --media-controls-transition-duration: 300ms;
+    }
+  }
+
+  @media (pointer: coarse) {
+    :is(.media-theme-default, .media-theme-minimal):has([data-controls]:not([data-visible])) {
+      --media-controls-transition-duration: 150ms;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :is(.media-theme-default, .media-theme-minimal) {
+      --media-controls-transition-duration: 50ms;
+    }
+  }
+}

package/dist/default/i18n/index.js

@@ -1,5 +1,6 @@
 "use client";
 import { I18nContext, useLocale, useTranslator } from "./context.js";
 import { I18nProvider, createI18n } from "./create-i18n.js";
+import { Text } from "./text.js";
 import { LOCALES, createTranslator, findLocaleKeys, getI18nTranslations, hasRegisteredLocale, isText, onI18nRegistryChange, registerI18n } from "@videojs/core/i18n";
-export { I18nContext, I18nProvider, LOCALES, createI18n, createTranslator, findLocaleKeys, getI18nTranslations, hasRegisteredLocale, isText, onI18nRegistryChange, registerI18n, useLocale, useTranslator };
+export { I18nContext, I18nProvider, LOCALES, Text, createI18n, createTranslator, findLocaleKeys, getI18nTranslations, hasRegisteredLocale, isText, onI18nRegistryChange, registerI18n, useLocale, useTranslator };

package/dist/default/i18n/text.js

@@ -0,0 +1,20 @@
+"use client";
+import { useTranslator } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/i18n/text.tsx
+/** Renders translated compiler text through a native React span. */
+function Text({ children, token, ...props }) {
+	const t = useTranslator();
+	const fallback = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		children: token ? t({
+			key: token,
+			text: fallback ?? token
+		}) : children
+	});
+}
+//#endregion
+export { Text };
+
+//# sourceMappingURL=text.js.map

package/dist/default/i18n/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":[],"sources":["../../../src/i18n/text.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useTranslator } from './context';\n\nexport interface TextProps extends Omit<ComponentProps<'span'>, 'children'> {\n  children?: ReactNode;\n  token?: string | undefined;\n}\n\n/** Renders translated compiler text through a native React span. */\nexport function Text({ children, token, ...props }: TextProps) {\n  const t = useTranslator();\n  const fallback = typeof children === 'string' || typeof children === 'number' ? String(children) : undefined;\n\n  return <span {...props}>{token ? t({ key: token, text: fallback ?? token }) : children}</span>;\n}\n"],"mappings":";;;;;AAWA,SAAgB,KAAK,EAAE,UAAU,OAAO,GAAG,SAAoB;CAC7D,MAAM,IAAI,cAAc;CACxB,MAAM,WAAW,OAAO,aAAa,YAAY,OAAO,aAAa,WAAW,OAAO,QAAQ,IAAI,KAAA;CAEnG,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAQ,UAAA,QAAQ,EAAE;GAAE,KAAK;GAAO,MAAM,YAAY;EAAM,CAAC,IAAI;CAAe,CAAA;AAC/F"}

package/dist/default/icons/dist/react/default/airplay-exit.js

@@ -9,15 +9,15 @@ const AirPlayExitIcon = (props) => /* @__PURE__ */ jsxs("svg", {
 	viewBox: "0 0 18 18",
 	...props,
 	children: [
-		/* @__PURE__ */ jsx("style", { children: "@keyframes media-icon--airplay__triangle{0%{translate:0 0}to{translate:0-2px}}@keyframes media-icon--airplay__fill{0%{opacity:0}to{opacity:.2}}@media (prefers-reduced-motion:reduce){:root{--media-icon--airplay__fill-animation:none;--media-icon--airplay__triangle-animation:none}}" }),
+		/* @__PURE__ */ jsx("style", { children: "@keyframes media-icon-airplay-triangle{0%{translate:0 0}to{translate:0-2px}}@keyframes media-icon-airplay-fill{0%{opacity:0}to{opacity:.2}}@media (prefers-reduced-motion:reduce){:root{--media-icon-airplay-fill-animation:none;--media-icon-airplay-triangle-animation:none}}" }),
 		/* @__PURE__ */ jsx("path", {
 			d: "M14.5 2A3.5 3.5 0 0 1 18 5.5v5a3.5 3.5 0 0 1-3.032 3.468L9.354 8.354a.5.5 0 0 0-.708 0l-5.615 5.614A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z",
-			style: { animation: "var(--media-icon--airplay__fill-animation, media-icon--airplay__fill 1s ease-in-out infinite alternate)" }
+			style: { animation: "var(--media-icon-airplay-fill-animation, media-icon-airplay-fill 1s ease-in-out infinite alternate)" }
 		}),
 		/* @__PURE__ */ jsx("path", { d: "M14.5 2A3.5 3.5 0 0 1 18 5.5v5l-.005.18a3.5 3.5 0 0 1-3.027 3.288L13 12h1.5a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 14.5 4h-11A1.5 1.5 0 0 0 2 5.5v5A1.5 1.5 0 0 0 3.5 12H5l-1.968 1.967A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z" }),
 		/* @__PURE__ */ jsx("path", {
 			d: "M8.631 10.902a.5.5 0 0 1 .738 0l4.363 4.76a.5.5 0 0 1-.369.838H4.637a.5.5 0 0 1-.369-.838z",
-			style: { animation: "var(--media-icon--airplay__triangle-animation, media-icon--airplay__triangle 1s ease-in-out infinite alternate)" }
+			style: { animation: "var(--media-icon-airplay-triangle-animation, media-icon-airplay-triangle 1s ease-in-out infinite alternate)" }
 		})
 	]
 });

package/dist/default/icons/dist/react/default/airplay-exit.js.map

@@ -1 +1 @@
-{"version":3,"file":"airplay-exit.js","names":[],"sources":["../../../../../../../icons/dist/react/default/airplay-exit.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst AirPlayExitIcon = (props) => /* @__PURE__ */ _jsxs(\"svg\", {\n\txmlns: \"http://www.w3.org/2000/svg\",\n\twidth: 18,\n\theight: 18,\n\tfill: \"currentColor\",\n\t\"aria-hidden\": \"true\",\n\tviewBox: \"0 0 18 18\",\n\t...props,\n\tchildren: [\n\t\t/* @__PURE__ */ _jsx(\"style\", { children: \"@keyframes media-icon--airplay__triangle{0%{translate:0 0}to{translate:0-2px}}@keyframes media-icon--airplay__fill{0%{opacity:0}to{opacity:.2}}@media (prefers-reduced-motion:reduce){:root{--media-icon--airplay__fill-animation:none;--media-icon--airplay__triangle-animation:none}}\" }),\n\t\t/* @__PURE__ */ _jsx(\"path\", {\n\t\t\td: \"M14.5 2A3.5 3.5 0 0 1 18 5.5v5a3.5 3.5 0 0 1-3.032 3.468L9.354 8.354a.5.5 0 0 0-.708 0l-5.615 5.614A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z\",\n\t\t\tstyle: { animation: \"var(--media-icon--airplay__fill-animation, media-icon--airplay__fill 1s ease-in-out infinite alternate)\" }\n\t\t}),\n\t\t/* @__PURE__ */ _jsx(\"path\", { d: \"M14.5 2A3.5 3.5 0 0 1 18 5.5v5l-.005.18a3.5 3.5 0 0 1-3.027 3.288L13 12h1.5a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 14.5 4h-11A1.5 1.5 0 0 0 2 5.5v5A1.5 1.5 0 0 0 3.5 12H5l-1.968 1.967A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z\" }),\n\t\t/* @__PURE__ */ _jsx(\"path\", {\n\t\t\td: \"M8.631 10.902a.5.5 0 0 1 .738 0l4.363 4.76a.5.5 0 0 1-.369.838H4.637a.5.5 0 0 1-.369-.838z\",\n\t\t\tstyle: { animation: \"var(--media-icon--airplay__triangle-animation, media-icon--airplay__triangle 1s ease-in-out infinite alternate)\" }\n\t\t})\n\t]\n});\nexport default AirPlayExitIcon;\n"],"mappings":";;AACA,MAAM,mBAAmB,UAA0B,qBAAM,OAAO;CAC/D,OAAO;CACP,OAAO;CACP,QAAQ;CACR,MAAM;CACN,eAAe;CACf,SAAS;CACT,GAAG;CACH,UAAU;EACO,oBAAK,SAAS,EAAE,UAAU,0RAA0R,CAAC;EACrT,oBAAK,QAAQ;GAC5B,GAAG;GACH,OAAO,EAAE,WAAW,0GAA0G;EAC/H,CAAC;EACe,oBAAK,QAAQ,EAAE,GAAG,uOAAuO,CAAC;EAC1P,oBAAK,QAAQ;GAC5B,GAAG;GACH,OAAO,EAAE,WAAW,kHAAkH;EACvI,CAAC;CACF;AACD,CAAC"}
+{"version":3,"file":"airplay-exit.js","names":[],"sources":["../../../../../../../icons/dist/react/default/airplay-exit.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst AirPlayExitIcon = (props) => /* @__PURE__ */ _jsxs(\"svg\", {\n\txmlns: \"http://www.w3.org/2000/svg\",\n\twidth: 18,\n\theight: 18,\n\tfill: \"currentColor\",\n\t\"aria-hidden\": \"true\",\n\tviewBox: \"0 0 18 18\",\n\t...props,\n\tchildren: [\n\t\t/* @__PURE__ */ _jsx(\"style\", { children: \"@keyframes media-icon-airplay-triangle{0%{translate:0 0}to{translate:0-2px}}@keyframes media-icon-airplay-fill{0%{opacity:0}to{opacity:.2}}@media (prefers-reduced-motion:reduce){:root{--media-icon-airplay-fill-animation:none;--media-icon-airplay-triangle-animation:none}}\" }),\n\t\t/* @__PURE__ */ _jsx(\"path\", {\n\t\t\td: \"M14.5 2A3.5 3.5 0 0 1 18 5.5v5a3.5 3.5 0 0 1-3.032 3.468L9.354 8.354a.5.5 0 0 0-.708 0l-5.615 5.614A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z\",\n\t\t\tstyle: { animation: \"var(--media-icon-airplay-fill-animation, media-icon-airplay-fill 1s ease-in-out infinite alternate)\" }\n\t\t}),\n\t\t/* @__PURE__ */ _jsx(\"path\", { d: \"M14.5 2A3.5 3.5 0 0 1 18 5.5v5l-.005.18a3.5 3.5 0 0 1-3.027 3.288L13 12h1.5a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 14.5 4h-11A1.5 1.5 0 0 0 2 5.5v5A1.5 1.5 0 0 0 3.5 12H5l-1.968 1.967A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z\" }),\n\t\t/* @__PURE__ */ _jsx(\"path\", {\n\t\t\td: \"M8.631 10.902a.5.5 0 0 1 .738 0l4.363 4.76a.5.5 0 0 1-.369.838H4.637a.5.5 0 0 1-.369-.838z\",\n\t\t\tstyle: { animation: \"var(--media-icon-airplay-triangle-animation, media-icon-airplay-triangle 1s ease-in-out infinite alternate)\" }\n\t\t})\n\t]\n});\nexport default AirPlayExitIcon;\n"],"mappings":";;AACA,MAAM,mBAAmB,UAA0B,qBAAM,OAAO;CAC/D,OAAO;CACP,OAAO;CACP,QAAQ;CACR,MAAM;CACN,eAAe;CACf,SAAS;CACT,GAAG;CACH,UAAU;EACO,oBAAK,SAAS,EAAE,UAAU,kRAAkR,CAAC;EAC7S,oBAAK,QAAQ;GAC5B,GAAG;GACH,OAAO,EAAE,WAAW,sGAAsG;EAC3H,CAAC;EACe,oBAAK,QAAQ,EAAE,GAAG,uOAAuO,CAAC;EAC1P,oBAAK,QAAQ;GAC5B,GAAG;GACH,OAAO,EAAE,WAAW,8GAA8G;EACnI,CAAC;CACF;AACD,CAAC"}

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

@@ -9,15 +9,15 @@ const AirPlayExitIcon = (props) => /* @__PURE__ */ jsxs("svg", {
 	viewBox: "0 0 18 18",
 	...props,
 	children: [
-		/* @__PURE__ */ jsx("style", { children: "@keyframes media-icon--airplay__triangle{0%{translate:0 0}to{translate:0-2px}}@keyframes media-icon--airplay__fill{0%{opacity:0}to{opacity:.2}}@media (prefers-reduced-motion:reduce){:root{--media-icon--airplay__fill-animation:none;--media-icon--airplay__triangle-animation:none}}" }),
+		/* @__PURE__ */ jsx("style", { children: "@keyframes media-icon-airplay-triangle{0%{translate:0 0}to{translate:0-2px}}@keyframes media-icon-airplay-fill{0%{opacity:0}to{opacity:.2}}@media (prefers-reduced-motion:reduce){:root{--media-icon-airplay-fill-animation:none;--media-icon-airplay-triangle-animation:none}}" }),
 		/* @__PURE__ */ jsx("path", {
 			d: "M14.5 2A3.5 3.5 0 0 1 18 5.5v5a3.5 3.5 0 0 1-3.032 3.468L9.354 8.354a.5.5 0 0 0-.708 0l-5.615 5.614A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z",
-			style: { animation: "var(--media-icon--airplay__fill-animation, media-icon--airplay__fill 1s ease-in-out infinite alternate)" }
+			style: { animation: "var(--media-icon-airplay-fill-animation, media-icon-airplay-fill 1s ease-in-out infinite alternate)" }
 		}),
 		/* @__PURE__ */ jsx("path", { d: "M14.5 2A3.5 3.5 0 0 1 18 5.5v5l-.005.18a3.5 3.5 0 0 1-3.027 3.288L13.5 12.5h1a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2h-11a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h1l-1.468 1.467A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z" }),
 		/* @__PURE__ */ jsx("path", {
 			d: "M8.631 10.902a.5.5 0 0 1 .738 0l4.363 4.76a.5.5 0 0 1-.369.838H4.637a.5.5 0 0 1-.369-.838z",
-			style: { animation: "var(--media-icon--airplay__triangle-animation, media-icon--airplay__triangle 1s ease-in-out infinite alternate)" }
+			style: { animation: "var(--media-icon-airplay-triangle-animation, media-icon-airplay-triangle 1s ease-in-out infinite alternate)" }
 		})
 	]
 });

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

@@ -1 +1 @@
-{"version":3,"file":"airplay-exit.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/airplay-exit.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst AirPlayExitIcon = (props) => /* @__PURE__ */ _jsxs(\"svg\", {\n\txmlns: \"http://www.w3.org/2000/svg\",\n\twidth: 18,\n\theight: 18,\n\tfill: \"currentColor\",\n\t\"aria-hidden\": \"true\",\n\tviewBox: \"0 0 18 18\",\n\t...props,\n\tchildren: [\n\t\t/* @__PURE__ */ _jsx(\"style\", { children: \"@keyframes media-icon--airplay__triangle{0%{translate:0 0}to{translate:0-2px}}@keyframes media-icon--airplay__fill{0%{opacity:0}to{opacity:.2}}@media (prefers-reduced-motion:reduce){:root{--media-icon--airplay__fill-animation:none;--media-icon--airplay__triangle-animation:none}}\" }),\n\t\t/* @__PURE__ */ _jsx(\"path\", {\n\t\t\td: \"M14.5 2A3.5 3.5 0 0 1 18 5.5v5a3.5 3.5 0 0 1-3.032 3.468L9.354 8.354a.5.5 0 0 0-.708 0l-5.615 5.614A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z\",\n\t\t\tstyle: { animation: \"var(--media-icon--airplay__fill-animation, media-icon--airplay__fill 1s ease-in-out infinite alternate)\" }\n\t\t}),\n\t\t/* @__PURE__ */ _jsx(\"path\", { d: \"M14.5 2A3.5 3.5 0 0 1 18 5.5v5l-.005.18a3.5 3.5 0 0 1-3.027 3.288L13.5 12.5h1a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2h-11a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h1l-1.468 1.467A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z\" }),\n\t\t/* @__PURE__ */ _jsx(\"path\", {\n\t\t\td: \"M8.631 10.902a.5.5 0 0 1 .738 0l4.363 4.76a.5.5 0 0 1-.369.838H4.637a.5.5 0 0 1-.369-.838z\",\n\t\t\tstyle: { animation: \"var(--media-icon--airplay__triangle-animation, media-icon--airplay__triangle 1s ease-in-out infinite alternate)\" }\n\t\t})\n\t]\n});\nexport default AirPlayExitIcon;\n"],"mappings":";;AACA,MAAM,mBAAmB,UAA0B,qBAAM,OAAO;CAC/D,OAAO;CACP,OAAO;CACP,QAAQ;CACR,MAAM;CACN,eAAe;CACf,SAAS;CACT,GAAG;CACH,UAAU;EACO,oBAAK,SAAS,EAAE,UAAU,0RAA0R,CAAC;EACrT,oBAAK,QAAQ;GAC5B,GAAG;GACH,OAAO,EAAE,WAAW,0GAA0G;EAC/H,CAAC;EACe,oBAAK,QAAQ,EAAE,GAAG,6MAA6M,CAAC;EAChO,oBAAK,QAAQ;GAC5B,GAAG;GACH,OAAO,EAAE,WAAW,kHAAkH;EACvI,CAAC;CACF;AACD,CAAC"}
+{"version":3,"file":"airplay-exit.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/airplay-exit.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst AirPlayExitIcon = (props) => /* @__PURE__ */ _jsxs(\"svg\", {\n\txmlns: \"http://www.w3.org/2000/svg\",\n\twidth: 18,\n\theight: 18,\n\tfill: \"currentColor\",\n\t\"aria-hidden\": \"true\",\n\tviewBox: \"0 0 18 18\",\n\t...props,\n\tchildren: [\n\t\t/* @__PURE__ */ _jsx(\"style\", { children: \"@keyframes media-icon-airplay-triangle{0%{translate:0 0}to{translate:0-2px}}@keyframes media-icon-airplay-fill{0%{opacity:0}to{opacity:.2}}@media (prefers-reduced-motion:reduce){:root{--media-icon-airplay-fill-animation:none;--media-icon-airplay-triangle-animation:none}}\" }),\n\t\t/* @__PURE__ */ _jsx(\"path\", {\n\t\t\td: \"M14.5 2A3.5 3.5 0 0 1 18 5.5v5a3.5 3.5 0 0 1-3.032 3.468L9.354 8.354a.5.5 0 0 0-.708 0l-5.615 5.614A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z\",\n\t\t\tstyle: { animation: \"var(--media-icon-airplay-fill-animation, media-icon-airplay-fill 1s ease-in-out infinite alternate)\" }\n\t\t}),\n\t\t/* @__PURE__ */ _jsx(\"path\", { d: \"M14.5 2A3.5 3.5 0 0 1 18 5.5v5l-.005.18a3.5 3.5 0 0 1-3.027 3.288L13.5 12.5h1a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2h-11a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h1l-1.468 1.467A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z\" }),\n\t\t/* @__PURE__ */ _jsx(\"path\", {\n\t\t\td: \"M8.631 10.902a.5.5 0 0 1 .738 0l4.363 4.76a.5.5 0 0 1-.369.838H4.637a.5.5 0 0 1-.369-.838z\",\n\t\t\tstyle: { animation: \"var(--media-icon-airplay-triangle-animation, media-icon-airplay-triangle 1s ease-in-out infinite alternate)\" }\n\t\t})\n\t]\n});\nexport default AirPlayExitIcon;\n"],"mappings":";;AACA,MAAM,mBAAmB,UAA0B,qBAAM,OAAO;CAC/D,OAAO;CACP,OAAO;CACP,QAAQ;CACR,MAAM;CACN,eAAe;CACf,SAAS;CACT,GAAG;CACH,UAAU;EACO,oBAAK,SAAS,EAAE,UAAU,kRAAkR,CAAC;EAC7S,oBAAK,QAAQ;GAC5B,GAAG;GACH,OAAO,EAAE,WAAW,sGAAsG;EAC3H,CAAC;EACe,oBAAK,QAAQ,EAAE,GAAG,6MAA6M,CAAC;EAChO,oBAAK,QAAQ;GAC5B,GAAG;GACH,OAAO,EAAE,WAAW,8GAA8G;EACnI,CAAC;CACF;AACD,CAAC"}

package/dist/default/index.js

@@ -1,6 +1,7 @@
 "use client";
 import { I18nContext, useLocale, useTranslator } from "./i18n/context.js";
 import { I18nProvider, createI18n } from "./i18n/create-i18n.js";
+import { Text } from "./i18n/text.js";
 import { createTranslator, findLocaleKeys, getI18nTranslations, hasRegisteredLocale, onI18nRegistryChange, registerI18n } from "./i18n/index.js";
 import { composeRefs, useComposedRefs } from "./utils/use-composed-refs.js";
 import { useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalContainer, useOptionalPlayer, usePlayer, usePlayerContext } from "./player/context.js";
@@ -66,4 +67,4 @@ import { createSelector, shallowEqual } from "@videojs/store";
 import { useSelector, useStore } from "@videojs/store/react";
 export * from "@videojs/core/dom";
 export * from "@videojs/media/dom";
-export { AirPlayButton, index_parts_exports as AlertDialog, AudioTrackRadioGroup, BufferingIndicator, CaptionsButton, CaptionsRadioGroup, CastButton, Container, index_parts_exports$1 as Controls, index_parts_exports$2 as ErrorDialog, FullscreenButton, Gesture, Hotkey, I18nContext, I18nProvider, LiveButton, MediaGesture, MediaHotkey, index_parts_exports$3 as Menu, MuteButton, PiPButton, PlayButton, PlaybackRateButton, PlaybackRateRadioGroup, index_parts_exports$4 as Popover, Poster, QualityRadioGroup, SeekButton, index_parts_exports$5 as SeekIndicator, index_parts_exports$6 as Slider, StatusAnnouncer, index_parts_exports$7 as StatusIndicator, Thumbnail, index_parts_exports$8 as Time, index_parts_exports$9 as TimeSlider, index_parts_exports$10 as Tooltip, index_parts_exports$11 as VolumeIndicator, index_parts_exports$12 as VolumeSlider, composeRefs, createI18n, createPlayer, createSelector, createTranslator, findLocaleKeys, getI18nTranslations, hasMetadata, hasRegisteredLocale, isMediaAudioTrackCapable, isMediaBufferCapable, isMediaErrorCapable, isMediaLiveCapable, isMediaPauseCapable, isMediaPlaybackRateCapable, isMediaRemotePlaybackCapable, isMediaSeekCapable, isMediaSourceCapable, isMediaStreamTypeCapable, isMediaTextTrackCapable, isMediaVideoDimensionsCapable, isMediaVideoRenditionCapable, isMediaVolumeCapable, isQuerySelectorAllCapable, mergeProps, onI18nRegistryChange, registerI18n, renderElement, shallowEqual, useAlertDialogContext, useAttachMedia, useAudioTrackOptions, useButton, useCaptionsOptions, useComposedRefs, useContainer, useContainerAttach, useDestroy, useDoubleTapGesture, useErrorDialogContext, useHotkey, useHotkeyShortcut, useLatestRef, useLocale, useMedia, useMediaAttach, useMediaComponent, useMediaInstance, useMenuContext, useOptionalContainer, useOptionalMenuContext, useOptionalPlayer, usePlaybackRateOptions, usePlayer, usePlayerContext, usePopoverContext, useQualityOptions, useSelector, useSlider, useStore, useTapGesture, useTooltipContext, useTranslator };
+export { AirPlayButton, index_parts_exports as AlertDialog, AudioTrackRadioGroup, BufferingIndicator, CaptionsButton, CaptionsRadioGroup, CastButton, Container, index_parts_exports$1 as Controls, index_parts_exports$2 as ErrorDialog, FullscreenButton, Gesture, Hotkey, I18nContext, I18nProvider, LiveButton, MediaGesture, MediaHotkey, index_parts_exports$3 as Menu, MuteButton, PiPButton, PlayButton, PlaybackRateButton, PlaybackRateRadioGroup, index_parts_exports$4 as Popover, Poster, QualityRadioGroup, SeekButton, index_parts_exports$5 as SeekIndicator, index_parts_exports$6 as Slider, StatusAnnouncer, index_parts_exports$7 as StatusIndicator, Text, Thumbnail, index_parts_exports$8 as Time, index_parts_exports$9 as TimeSlider, index_parts_exports$10 as Tooltip, index_parts_exports$11 as VolumeIndicator, index_parts_exports$12 as VolumeSlider, composeRefs, createI18n, createPlayer, createSelector, createTranslator, findLocaleKeys, getI18nTranslations, hasMetadata, hasRegisteredLocale, isMediaAudioTrackCapable, isMediaBufferCapable, isMediaErrorCapable, isMediaLiveCapable, isMediaPauseCapable, isMediaPlaybackRateCapable, isMediaRemotePlaybackCapable, isMediaSeekCapable, isMediaSourceCapable, isMediaStreamTypeCapable, isMediaTextTrackCapable, isMediaVideoDimensionsCapable, isMediaVideoRenditionCapable, isMediaVolumeCapable, isQuerySelectorAllCapable, mergeProps, onI18nRegistryChange, registerI18n, renderElement, shallowEqual, useAlertDialogContext, useAttachMedia, useAudioTrackOptions, useButton, useCaptionsOptions, useComposedRefs, useContainer, useContainerAttach, useDestroy, useDoubleTapGesture, useErrorDialogContext, useHotkey, useHotkeyShortcut, useLatestRef, useLocale, useMedia, useMediaAttach, useMediaComponent, useMediaInstance, useMenuContext, useOptionalContainer, useOptionalMenuContext, useOptionalPlayer, usePlaybackRateOptions, usePlayer, usePlayerContext, usePopoverContext, useQualityOptions, useSelector, useSlider, useStore, useTapGesture, useTooltipContext, useTranslator };

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

@@ -3,7 +3,7 @@ import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { useAttachMedia } from "../../utils/use-attach-media.js";
 import { useMediaInstance } from "../../utils/use-media-instance.js";
 import { useSyncProps } from "../../utils/use-sync-props.js";
-import { forwardRef } from "react";
+import { forwardRef, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { HlsBackgroundVideoMedia, hlsBackgroundVideoMediaDefaultProps } from "@videojs/spf/hls-background-video";
 //#region src/media/hls-background-video/media.tsx
@@ -21,14 +21,29 @@ import { HlsBackgroundVideoMedia, hlsBackgroundVideoMediaDefaultProps } from "@v
 * storyboard belong to `MuxVideo`, since none of them mean anything without
 * controls to hang them on.
 *
+* `onError` fires for an unplayable source, which it could not do on its own:
+* nothing about one reaches the media element, so the `<video>`'s own `error`
+* stays null at `readyState 0`. The engine reports the condition, the Media
+* promotes the fatal one, and this component re-fires it on the `<video>` — where
+* a handler already listening for a failed source receives it. Which condition it
+* was is on the console and `engine.state.errors`; the handler gets "this source
+* won't play", which is the decision a background video actually has to make.
+*
 * `MuxBackgroundVideo` is this same component under the name the package it
 * replaces used — an alias, not a variant.
 */
 const HlsBackgroundVideo = forwardRef(function HlsBackgroundVideo({ children, ...props }, ref) {
 	const media = useMediaInstance(HlsBackgroundVideoMedia);
-	const composedRef = useComposedRefs(useAttachMedia(media), ref);
+	const videoRef = useRef(null);
+	const composedRef = useComposedRefs(useAttachMedia(media), videoRef, ref);
+	const htmlProps = useSyncProps(media, props, hlsBackgroundVideoMediaDefaultProps);
+	useEffect(() => {
+		const forward = () => videoRef.current?.dispatchEvent(new Event("error"));
+		media.addEventListener("error", forward);
+		return () => media.removeEventListener("error", forward);
+	}, [media]);
 	return /* @__PURE__ */ jsx("video", {
-		...useSyncProps(media, props, hlsBackgroundVideoMediaDefaultProps),
+		...htmlProps,
 		ref: composedRef,
 		muted: true,
 		autoPlay: true,

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

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

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

@@ -444,9 +444,13 @@
 }
 
 .media-minimal-skin .media-slider {
+  --track-size: calc(var(--spacing) * 1);
+  --track-highlighted-size: calc(var(--spacing) * 1.75);
+  --track-border-radius: 99px;
   --thumb-size: calc(var(--spacing) * 3);
-  --thumb-active-size: calc(var(--spacing) * 3);
-  --track-border-radius: calc(Infinity * 1px);
+  --chapter-gap: calc(var(--spacing) * 1);
+  --chapter-inset-start: calc(var(--chapter-gap) / 2);
+  --chapter-inset-end: calc(var(--chapter-gap) / 2);
 
   position: relative;
   display: flex;
@@ -478,68 +482,14 @@
 
     &[data-orientation="horizontal"] {
       width: 100%;
-      height: calc(var(--spacing) * 0.75);
+      height: var(--track-size);
     }
     &[data-orientation="vertical"] {
-      width: calc(var(--spacing) * 0.75);
+      width: var(--track-size);
       height: 100%;
     }
   }
 
-  /* Thumb */
-  .media-slider__thumb {
-    position: absolute;
-    z-index: 10;
-    width: var(--thumb-size);
-    height: var(--thumb-size);
-    user-select: none;
-    outline: 2px solid transparent;
-    outline-offset: -2px;
-    background-color: currentColor;
-    border-radius: calc(Infinity * 1px);
-    box-shadow:
-      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
-      0 1px 3px 0 oklch(0 0 0 / 0.15),
-      0 1px 2px -1px oklch(0 0 0 / 0.15);
-    opacity: 0;
-    transform-origin: center;
-    scale: 0.7;
-    translate: -50% -50%;
-    transition-timing-function: ease-out;
-    transition-duration: 150ms;
-
-    &[data-orientation="horizontal"] {
-      top: 50%;
-      left: var(--media-slider-fill);
-    }
-    &[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-fill));
-      left: 50%;
-    }
-
-    &:focus-visible {
-      outline-color: var(--focus-ring-color);
-      outline-offset: 2px;
-    }
-  }
-
-  &:focus-within .media-slider__thumb,
-  .media-slider__thumb--persistent {
-    width: var(--thumb-active-size);
-    height: var(--thumb-active-size);
-    opacity: 1;
-    scale: 1;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    &:hover .media-slider__thumb {
-      width: var(--thumb-active-size);
-      height: var(--thumb-active-size);
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
   /* Shared track fills */
   .media-slider__buffer,
   .media-slider__fill {
@@ -551,13 +501,22 @@
       inset-block: 0;
       left: 0;
       width: 100%;
-      transition-property: clip-path;
     }
     &[data-orientation="vertical"] {
       inset-inline: 0;
       bottom: 0;
       height: 100%;
-      transition-property: clip-path;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: clip-path 200ms ease-out;
+    }
+  }
+  &[data-dragging],
+  &[data-seeking] {
+    .media-slider__fill,
+    .media-slider__buffer {
+      transition-duration: 0ms;
     }
   }
 
@@ -584,6 +543,14 @@
       clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));
     }
   }
+  &[data-dragging] {
+    .media-slider__fill[data-orientation="horizontal"] {
+      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+    }
+    .media-slider__fill[data-orientation="vertical"] {
+      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    }
+  }
 
   /* Chapters */
   .media-slider__chapters {
@@ -607,9 +574,6 @@
   }
 
   .media-slider__chapter {
-    --chapter-gap: calc(var(--spacing) * 1);
-    --chapter-inset-start: calc(var(--chapter-gap) / 2);
-    --chapter-inset-end: calc(var(--chapter-gap) / 2);
     position: absolute;
     inset: 0;
     display: flex;
@@ -626,8 +590,6 @@
     }
 
     .media-slider__chapter-track {
-      --chapter-track-size: calc(var(--spacing) * 0.75);
-      --chapter-track-highlighted-size: calc(var(--spacing) * 1.25);
       border-radius: var(--track-border-radius);
 
       @media (prefers-reduced-motion: no-preference) {
@@ -640,7 +602,7 @@
       clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));
 
       .media-slider__chapter-track {
-        height: var(--chapter-track-size);
+        height: var(--track-size);
         clip-path: inset(
           0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
             calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
@@ -648,7 +610,7 @@
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        height: var(--chapter-track-highlighted-size);
+        height: var(--track-highlighted-size);
       }
     }
 
@@ -656,7 +618,7 @@
       clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);
 
       .media-slider__chapter-track {
-        width: var(--chapter-track-size);
+        width: var(--track-size);
         clip-path: inset(
           calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
             calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
@@ -664,63 +626,102 @@
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        width: var(--chapter-track-highlighted-size);
+        width: var(--track-highlighted-size);
       }
     }
   }
 
-  /* Dragging — thumb and fill follow the pointer position */
-  &[data-dragging] {
-    .media-slider__thumb[data-orientation="horizontal"] {
-      left: var(--media-slider-pointer);
-    }
-    .media-slider__thumb[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-pointer));
-    }
-    .media-slider__fill[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+  /* Thumb */
+  .media-slider__thumb {
+    position: absolute;
+    z-index: 10;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    user-select: none;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    background-color: currentColor;
+    border-radius: calc(Infinity * 1px);
+    box-shadow:
+      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
+      0 1px 3px 0 oklch(0 0 0 / 0.15),
+      0 1px 2px -1px oklch(0 0 0 / 0.15);
+    opacity: 0;
+    transform-origin: center;
+    scale: 0.7;
+    translate: -50% -50%;
+
+    &[data-orientation="horizontal"] {
+      top: 50%;
+      left: var(--media-slider-fill);
     }
-    .media-slider__fill[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-fill));
+      left: 50%;
     }
-  }
 
-  @media (prefers-reduced-motion: no-preference) {
-    .media-slider__thumb {
-      transition-property: opacity, scale, height, width, outline-offset, left, top;
+    &:focus-visible {
+      outline-color: var(--focus-ring-color);
+      outline-offset: 2px;
     }
-    .media-slider__fill {
-      transition-timing-function: linear;
-      transition-duration: 200ms;
+
+    &:focus-visible,
+    &.media-slider__thumb--persistent {
+      opacity: 1;
+      scale: 1;
     }
-    .media-slider__buffer {
+
+    @media (prefers-reduced-motion: no-preference) {
       transition-timing-function: ease-out;
-      transition-duration: 250ms;
+      transition-duration: 150ms;
+      transition-property: opacity, outline-offset, left, top, scale;
     }
   }
 
-  &[data-dragging],
-  &[data-seeking] {
-    .media-slider__thumb,
-    .media-slider__fill,
-    .media-slider__buffer {
-      transition-duration: 0ms;
+  @media (hover: hover) and (pointer: fine) {
+    &:hover .media-slider__thumb {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  &[data-dragging] .media-slider__thumb {
+    opacity: 1;
+    scale: 0.9;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: opacity, outline-offset, scale;
+    }
+
+    &[data-orientation="horizontal"] {
+      left: var(--media-slider-pointer);
+    }
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-pointer));
     }
   }
 
   /* Preview */
   .media-slider__preview {
-    --max-width: min(calc(var(--spacing) * 48), 100cqi);
-    --max-height: calc(var(--spacing) * 32);
+    --max-size-factor: 28;
+    --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);
 
     min-width: 100%;
     height: calc(var(--spacing) * 1);
 
+    @container media-root (width > 32rem) {
+      --max-size-factor: 36;
+    }
+
+    @container media-root (width > 42rem) {
+      --max-size-factor: 48;
+    }
+
     .media-slider__thumbnail,
     .media-slider__value {
       position: absolute;
       left: var(--preview-left, var(--media-slider-pointer));
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       opacity: 0;
       filter: blur(8px);
       transform-origin: bottom;
@@ -732,8 +733,9 @@
     }
 
     .media-slider__thumbnail {
-      --thumbnail-max-width: var(--max-width);
-      bottom: calc(100% + (var(--spacing) * 12));
+      --thumbnail-max-width: var(--max-size);
+      --thumbnail-max-height: var(--max-size);
+      bottom: calc(100% + (var(--spacing) * 11));
     }
 
     .media-slider__value {

package/dist/default/presets/audio/minimal-skin.js

@@ -52,8 +52,8 @@ import VolumeLowIcon from "../../icons/dist/react/minimal/volume-low.js";
 import VolumeOffIcon from "../../icons/dist/react/minimal/volume-off.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { playbackRateText } from "@videojs/core/i18n/text/menu";
 import { cn } from "@videojs/utils/style";
+import { playbackRateText } from "@videojs/core/i18n/text/menu";
 //#region src/presets/audio/minimal-skin.tsx
 const SEEK_TIME = 10;
 const Button = forwardRef(function Button({ className, ...props }, ref) {

package/dist/default/presets/audio/minimal-skin.tailwind.js

@@ -61,8 +61,8 @@ import { time } from "../../skins/dist/default/minimal/tailwind/components/time.
 import { container, controls, error, playButton, popup, slider } from "../../skins/dist/default/minimal/tailwind/audio.tailwind.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { playbackRateText } from "@videojs/core/i18n/text/menu";
 import { cn } from "@videojs/utils/style";
+import { playbackRateText } from "@videojs/core/i18n/text/menu";
 //#region src/presets/audio/minimal-skin.tailwind.tsx
 const SEEK_TIME = 10;
 const Button = forwardRef(function Button({ className, ...props }, ref) {