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

package/dist/default/_virtual/_rolldown/runtime.js

@@ -1,8 +1,5 @@
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
 	for (var name in all) {
@@ -16,21 +13,6 @@ var __exportAll = (all, no_symbols) => {
 	}
 	return target;
 };
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") {
-		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-			key = keys[i];
-			if (!__hasOwnProp.call(to, key) && key !== except) {
-				__defProp(to, key, {
-					get: ((k) => from[k]).bind(null, key),
-					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-				});
-			}
-		}
-	}
-	return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 
 //#endregion
-export { __exportAll, __reExport };
+export { __exportAll };

package/dist/default/index.js

@@ -1,6 +1,5 @@
 'use client';
 
-import { __exportAll, __reExport } from "./_virtual/_rolldown/runtime.js";
 import { Container, useMedia, useMediaRegistration, usePlayer, usePlayerContext } from "./player/context.js";
 import { createPlayer } from "./player/create-player.js";
 import { mergeProps } from "./utils/merge-props.js";
@@ -9,45 +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"
 
-//#region src/index.ts
-var src_exports = /* @__PURE__ */ __exportAll({
-	BufferingIndicator: () => BufferingIndicator,
-	Container: () => Container,
-	Controls: () => index_parts_exports,
-	FullscreenButton: () => FullscreenButton,
-	MuteButton: () => MuteButton,
-	PiPButton: () => PiPButton,
-	PlayButton: () => PlayButton,
-	Poster: () => Poster,
-	SeekButton: () => SeekButton,
-	Time: () => index_parts_exports$1,
-	createPlayer: () => createPlayer,
-	createSelector: () => createSelector,
-	mergeProps: () => mergeProps,
-	renderElement: () => renderElement,
-	shallowEqual: () => shallowEqual,
-	useButton: () => useButton,
-	useMedia: () => useMedia,
-	useMediaRegistration: () => useMediaRegistration,
-	usePlayer: () => usePlayer,
-	usePlayerContext: () => usePlayerContext,
-	useSelector: () => useSelector,
-	useStore: () => useStore
-});
-import * as import__videojs_core_dom from "@videojs/core/dom";
-__reExport(src_exports, import__videojs_core_dom);
-
-//#endregion
-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, src_exports, useButton, useMedia, useMediaRegistration, usePlayer, usePlayerContext, useSelector, useStore };
-//# sourceMappingURL=index.js.map
+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,12 +1,6 @@
-import { createPlayer } from "../../player/create-player.js";
-import { src_exports } from "../../index.js";
 import { Audio } from "../../media/audio.js";
 import { MinimalAudioSkin } from "./minimal-skin.js";
 import { AudioSkin } from "./skin.js";
+import { audioFeatures } from "@videojs/core/dom";
 
-//#region src/presets/audio/index.ts
-const { Provider: AudioProvider } = createPlayer({ features: src_exports.features.audio });
-
-//#endregion
-export { Audio, AudioProvider, AudioSkin, MinimalAudioSkin };
-//# sourceMappingURL=index.js.map
+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,11 +1,5 @@
-import { createPlayer } from "../../player/create-player.js";
-import { src_exports } from "../../index.js";
 import { BackgroundVideo } from "../../media/background-video/index.js";
 import { BackgroundVideoSkin } from "./skin.js";
+import { backgroundFeatures } from "@videojs/core/dom";
 
-//#region src/presets/background/index.ts
-const { Provider: BackgroundVideoProvider } = createPlayer({ features: src_exports.features.background });
-
-//#endregion
-export { BackgroundVideo, BackgroundVideoProvider, BackgroundVideoSkin };
-//# sourceMappingURL=index.js.map
+export { BackgroundVideo, BackgroundVideoSkin, backgroundFeatures };

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

@@ -19,3 +19,4 @@
   height: 100%;
   object-fit: inherit;
 }
+

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

@@ -1,14 +1,8 @@
-import { createPlayer } from "../../player/create-player.js";
-import { src_exports } from "../../index.js";
 import { Video } from "../../media/video.js";
 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";
 
-//#region src/presets/video/index.ts
-const { Provider: VideoProvider } = createPlayer({ features: src_exports.features.video });
-
-//#endregion
-export { MinimalVideoSkin, MinimalVideoSkinTailwind, Video, VideoProvider, VideoSkin, VideoSkinTailwind };
-//# sourceMappingURL=index.js.map
+export { MinimalVideoSkin, MinimalVideoSkinTailwind, Video, VideoSkin, VideoSkinTailwind, videoFeatures };

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

@@ -1,3 +1,54 @@
+/* ==========================================================================
+   Icon State Visibility
+
+   Data-attribute-driven visibility rules for multi-state icon buttons.
+   Uses :is() with both element selectors (for HTML custom element wrappers)
+   and class selectors (for React rendered SVG elements).
+   ========================================================================== */
+
+/* --- All icons hidden by default --- */
+
+.media-button--play .media-icon--restart,
+.media-button--play .media-icon--play,
+.media-button--play .media-icon--pause,
+.media-button--mute .media-icon--volume-off,
+.media-button--mute .media-icon--volume-low,
+.media-button--mute .media-icon--volume-high,
+.media-button--fullscreen .media-icon--fullscreen-enter,
+.media-button--fullscreen .media-icon--fullscreen-exit,
+.media-button--captions .media-icon--captions-off,
+.media-button--captions .media-icon--captions-on {
+  display: none;
+  opacity: 0;
+}
+
+/* --- Active icon per state --- */
+
+/* Play: ended → restart */
+.media-button--play[data-ended] .media-icon--restart,
+/* Play: paused (not ended) → play */
+.media-button--play:not([data-ended])[data-paused] .media-icon--play,
+/* Play: playing (not paused, not ended) → pause */
+.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,
+/* Mute: muted → volume off */
+.media-button--mute[data-muted] .media-icon--volume-off,
+/* Mute: volume low (not muted) → volume low */
+.media-button--mute:not([data-muted])[data-volume-level="low"] .media-icon--volume-low,
+/* Mute: volume high (not muted, not low) → volume high */
+.media-button--mute:not([data-muted]):not([data-volume-level="low"]) .media-icon--volume-high,
+/* Fullscreen: not fullscreen → enter */
+.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,
+/* Fullscreen: fullscreen → exit */
+.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,
+/* Captions: not active → captions off */
+.media-button--captions:not([data-active]) .media-icon--captions-off,
+/* Captions: active → captions on */
+.media-button--captions[data-active] .media-icon--captions-on {
+  display: block;
+  opacity: 1;
+}
+
+
 /* ==========================================================================
    Reset
    ========================================================================== */
@@ -30,6 +81,7 @@
 .media-minimal-skin {
   position: relative;
   isolation: isolate;
+  display: block;
   container: media-root / inline-size;
   overflow: clip;
   border-radius: var(--media-border-radius, 0.75rem);
@@ -75,6 +127,7 @@
 .media-minimal-skin > video {
   width: 100%;
   height: 100%;
+  border-radius: inherit;
 }
 
 /* ==========================================================================
@@ -86,6 +139,7 @@
   inset: 0;
   width: 100%;
   height: 100%;
+  border-radius: inherit;
   object-fit: cover;
   transition: opacity 0.25s;
   pointer-events: none;
@@ -101,6 +155,7 @@
 .media-minimal-skin .media-overlay {
   position: absolute;
   inset: 0;
+  z-index: 1;
   border-radius: inherit;
   background-image: linear-gradient(to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) 7.5rem, oklch(0 0 0 / 0));
   backdrop-filter: blur(0) saturate(1.2) brightness(0.9);
@@ -134,12 +189,15 @@
   position: absolute;
   inset: 0;
   z-index: 10;
-  display: flex;
+  display: none;
   align-items: center;
   justify-content: center;
   color: oklch(1 0 0);
   pointer-events: none;
 }
+.media-minimal-skin .media-buffering-indicator[data-visible] {
+  display: flex;
+}
 
 /* ==========================================================================
    Error Dialog
@@ -327,6 +385,7 @@
   outline-offset: -2px;
   color: oklch(0 0 0);
   font-weight: 500;
+  text-align: center;
   transition-property: background-color, color, outline-offset;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
@@ -346,7 +405,9 @@
 /* Icon button variant */
 .media-minimal-skin .media-button--icon {
   display: grid;
-  padding: 0.625rem;
+  width: 2.375rem;
+  padding: 0;
+  aspect-ratio: 1;
   background: transparent;
   color: oklch(1 0 0);
 }
@@ -360,13 +421,35 @@
   filter: drop-shadow(0 1px 0 oklch(0 0 0 / 0.25));
 }
 
-/* Seek button variant — hidden at small sizes */
+/* Seek button */
+.media-minimal-skin .media-button--seek .media-icon__label {
+  position: absolute;
+  right: -1px;
+  bottom: -3px;
+  font-size: 0.75em;
+  font-weight: 480;
+  font-variant-numeric: tabular-nums;
+}
+.media-minimal-skin .media-button--seek:has(.media-icon--flipped) .media-icon__label {
+  right: unset;
+  left: -1px;
+}
 @container media-controls (width < 28rem) {
   .media-minimal-skin .media-button--seek {
     display: none;
   }
 }
 
+/* Playback rate button */
+.media-minimal-skin .media-button--playback-rate {
+  padding: 0;
+}
+.media-minimal-skin .media-button--playback-rate::after {
+  content: attr(data-rate) "\00D7";
+  width: 4ch;
+  font-variant-numeric: tabular-nums;
+}
+
 /* ==========================================================================
    Icons
    ========================================================================== */
@@ -375,6 +458,8 @@
   position: relative;
 }
 .media-minimal-skin .media-icon {
+  display: block;
+  flex-shrink: 0;
   grid-area: 1 / 1;
   width: 18px;
   height: 18px;
@@ -383,28 +468,10 @@
   transition-duration: 150ms;
   transition-timing-function: ease-out;
 }
-.media-minimal-skin .media-icon--hidden {
-  display: none;
-  opacity: 0;
-}
 .media-minimal-skin .media-icon--flipped {
   scale: -1 1;
 }
 
-/* Seek icon label positioning */
-.media-minimal-skin .media-icon--seek ~ .media-icon__label {
-  position: absolute;
-  right: 0;
-  bottom: -3px;
-  font-size: 0.75em;
-  font-weight: 480;
-  font-variant-numeric: tabular-nums;
-}
-.media-minimal-skin .media-icon--seek.media-icon--flipped ~ .media-icon__label {
-  right: unset;
-  left: 0;
-}
-
 /* ==========================================================================
    Slider
    ========================================================================== */
@@ -439,10 +506,7 @@
   overflow: hidden;
   background-color: oklch(1 0 0 / 0.2);
   border-radius: inherit;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
   box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);
-  transition: outline-offset 150ms ease-out;
   user-select: none;
 }
 .media-minimal-skin .media-slider__track[data-orientation="horizontal"] {
@@ -453,13 +517,11 @@
   width: 0.1875rem;
   height: 100%;
 }
-.media-minimal-skin .media-slider:focus-visible .media-slider__track {
-  outline-color: oklch(1 0 0);
-  outline-offset: 6px;
-}
 
 /* Thumb */
 .media-minimal-skin .media-slider__thumb {
+  position: absolute;
+  transform: translate(-50%, -50%);
   z-index: 10;
   width: 0.75rem;
   height: 0.75rem;
@@ -472,32 +534,74 @@
   opacity: 0;
   scale: 0.7;
   transform-origin: center;
-  transition-property: opacity, scale;
+  transition-property: opacity, scale, outline-offset;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
   user-select: none;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+.media-minimal-skin .media-slider__thumb[data-orientation="horizontal"] {
+  top: 50%;
+  left: var(--media-slider-fill);
+}
+.media-minimal-skin .media-slider__thumb[data-orientation="vertical"] {
+  left: 50%;
+  top: calc(100% - var(--media-slider-fill));
+}
+.media-minimal-skin .media-slider__thumb:focus-visible {
+  outline-color: oklch(1 0 0);
+  outline-offset: 2px;
 }
 .media-minimal-skin .media-slider:hover .media-slider__thumb,
-.media-minimal-skin .media-slider:focus-within .media-slider__thumb {
+.media-minimal-skin .media-slider:focus-within .media-slider__thumb,
+.media-minimal-skin .media-slider__thumb--persistent {
   opacity: 1;
   scale: 1;
 }
-.media-minimal-skin .media-slider__track[data-orientation="horizontal"] .media-slider__thumb {
-  cursor: ew-resize;
+
+/* Shared track fills */
+.media-minimal-skin .media-slider__buffer,
+.media-minimal-skin .media-slider__fill {
+  position: absolute;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.media-minimal-skin .media-slider__buffer[data-orientation="horizontal"],
+.media-minimal-skin .media-slider__fill[data-orientation="horizontal"] {
+  inset-block: 0;
+  left: 0;
 }
-.media-minimal-skin .media-slider__track[data-orientation="vertical"] .media-slider__thumb {
-  cursor: ns-resize;
+.media-minimal-skin .media-slider__buffer[data-orientation="vertical"],
+.media-minimal-skin .media-slider__fill[data-orientation="vertical"] {
+  inset-inline: 0;
+  bottom: 0;
 }
 
-/* Pointer (hidden in minimal skin) */
-.media-minimal-skin .media-slider__pointer {
-  display: none;
+/* Buffer */
+.media-minimal-skin .media-slider__buffer {
+  background-color: oklch(1 0 0 / 0.2);
+  transition-duration: 0.25s;
+  transition-timing-function: ease-out;
+}
+.media-minimal-skin .media-slider__buffer[data-orientation="horizontal"] {
+  width: var(--media-slider-buffer);
+  transition-property: width;
+}
+.media-minimal-skin .media-slider__buffer[data-orientation="vertical"] {
+  height: var(--media-slider-buffer);
+  transition-property: height;
 }
 
-/* Progress fill */
-.media-minimal-skin .media-slider__progress {
+/* Fill */
+.media-minimal-skin .media-slider__fill {
   background-color: oklch(1 0 0);
-  border-radius: inherit;
+}
+.media-minimal-skin .media-slider__fill[data-orientation="horizontal"] {
+  width: var(--media-slider-fill);
+}
+.media-minimal-skin .media-slider__fill[data-orientation="vertical"] {
+  height: var(--media-slider-fill);
 }
 
 /* Time display within slider */
@@ -527,11 +631,14 @@
   transition-duration: 0ms;
 }
 
-.media-minimal-skin .media-popover-popup {
+.media-minimal-skin .media-popup {
   margin: 0;
-  padding: 0.5rem;
   border: 0;
   background: transparent;
+  --media-popover-side-offset: 0.5rem;
+}
+.media-minimal-skin .media-popup--volume {
+  padding: 0.25rem;
 }
 
 /* ==========================================================================
@@ -573,16 +680,8 @@
   z-index: 20;
   font-size: 1rem;
   text-wrap: balance;
-  /* The delay must account for the controls delay/duration */
-  transition: transform 150ms ease-out;
-  transition-delay: 600ms;
   pointer-events: none;
 }
-@media (prefers-reduced-motion: reduce) {
-  .media-minimal-skin .media-captions {
-    transition-duration: 50ms;
-  }
-}
 .media-minimal-skin .media-captions__container {
   display: flex;
   flex-direction: column;
@@ -630,8 +729,34 @@
   }
 }
 
-/* Shift captions up when controls visible */
+/* Caption shifting styles (custom and native) */
+.media-minimal-skin {
+  --media-caption-track-delay: 600ms;
+  --media-caption-track-y: -0.5rem;
+}
+.media-minimal-skin:has(.media-controls[data-visible]) {
+  --media-caption-track-delay: 25ms;
+  --media-caption-track-y: -3rem;
+}
+.media-minimal-skin .media-captions,
+.media-minimal-skin video::-webkit-media-text-track-container {
+  /* NOTE: The delay must account for the controls delay/duration */
+  transition: transform 150ms ease-out;
+  transition-delay: var(--media-caption-track-delay);
+}
+.media-minimal-skin video::-webkit-media-text-track-container {
+  transform: translateY(var(--media-caption-track-y)) scale(0.98);
+  z-index: 1;
+  font-family: inherit;
+}
+/* When controls are visible, shift captions up to avoid overlap */
 .media-minimal-skin .media-controls[data-visible] ~ .media-captions {
-  transform: translateY(-2.5rem);
-  transition-delay: 25ms;
+  transform: translateY(calc(var(--media-caption-track-y) - 0.5rem));
 }
+@media (prefers-reduced-motion: reduce) {
+  .media-minimal-skin .media-captions,
+  .media-minimal-skin video::-webkit-media-text-track-container {
+    transition-duration: 50ms;
+  }
+}
+