@videojs/html 10.0.0-beta.8 → 10.0.0-beta.9

package/cdn/{player-CztIlNio.js → player-DVYGAHSo.js}

@@ -1,2 +1,2 @@
-import{I as e,a as t,i as n,t as r}from"./create-player-QjiNZlh7.js";import{t as i}from"./safe-define-GrHW3P9e.js";const{ProviderMixin:a}=r({features:e});i(class extends a(t){static{this.tagName=`audio-player`}}),i(n);
-//# sourceMappingURL=player-CztIlNio.js.map
+import{I as e,a as t,i as n,t as r}from"./create-player-DxN4WCxY.js";import{t as i}from"./safe-define-GrHW3P9e.js";const{ProviderMixin:a}=r({features:e});i(class extends a(t){static{this.tagName=`audio-player`}}),i(n);
+//# sourceMappingURL=player-DVYGAHSo.js.map

package/cdn/{player-CztIlNio.js.map → player-DVYGAHSo.js.map}

@@ -1 +1 @@
-{"version":3,"file":"player-CztIlNio.js","names":[],"sources":["../src/define/audio/player.ts"],"sourcesContent":["import { audioFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n  features: audioFeatures,\n});\n\nexport class AudioPlayerElement extends ProviderMixin(MediaElement) {\n  static readonly tagName = 'audio-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(AudioPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioPlayerElement.tagName]: AudioPlayerElement;\n  }\n}\n"],"mappings":"mHAMA,KAAM,CAAE,iBAAkB,EAAa,CACrC,SAAU,EACX,CAAC,CAOF,EALA,cAAwC,EAAc,EAAa,AAAC,qBACxC,iBAIE,CAC9B,EAAW,EAAsB"}
+{"version":3,"file":"player-DVYGAHSo.js","names":[],"sources":["../src/define/audio/player.ts"],"sourcesContent":["import { audioFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n  features: audioFeatures,\n});\n\nexport class AudioPlayerElement extends ProviderMixin(MediaElement) {\n  static readonly tagName = 'audio-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(AudioPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioPlayerElement.tagName]: AudioPlayerElement;\n  }\n}\n"],"mappings":"mHAMA,KAAM,CAAE,iBAAkB,EAAa,CACrC,SAAU,EACX,CAAC,CAOF,EALA,cAAwC,EAAc,EAAa,AAAC,qBACxC,iBAIE,CAC9B,EAAW,EAAsB"}

package/cdn/{player-Dvj38jlr.js → player-u-bvetUg.js}

@@ -1,4 +1,4 @@
-import { L as audioFeatures, a as MediaElement, i as MediaContainerElement, t as createPlayer } from "./create-player-Dv7K1Ezk.js";
+import { L as audioFeatures, a as MediaElement, i as MediaContainerElement, t as createPlayer } from "./create-player-4kACDl5S.js";
 import { t as safeDefine } from "./safe-define-B8lHgj_K.js";
 
 //#region src/define/audio/player.ts
@@ -12,4 +12,4 @@ safeDefine(AudioPlayerElement);
 safeDefine(MediaContainerElement);
 
 //#endregion
-//# sourceMappingURL=player-Dvj38jlr.js.map
+//# sourceMappingURL=player-u-bvetUg.js.map

package/cdn/{player-Dvj38jlr.js.map → player-u-bvetUg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"player-Dvj38jlr.js","names":[],"sources":["../src/define/audio/player.ts"],"sourcesContent":["import { audioFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n  features: audioFeatures,\n});\n\nexport class AudioPlayerElement extends ProviderMixin(MediaElement) {\n  static readonly tagName = 'audio-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(AudioPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioPlayerElement.tagName]: AudioPlayerElement;\n  }\n}\n"],"mappings":";;;;AAMA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,eACX,CAAC;AAEF,IAAa,qBAAb,cAAwC,cAAc,aAAa,CAAC;;iBACxC;;;AAI5B,WAAW,mBAAmB;AAC9B,WAAW,sBAAsB"}
+{"version":3,"file":"player-u-bvetUg.js","names":[],"sources":["../src/define/audio/player.ts"],"sourcesContent":["import { audioFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n  features: audioFeatures,\n});\n\nexport class AudioPlayerElement extends ProviderMixin(MediaElement) {\n  static readonly tagName = 'audio-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(AudioPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioPlayerElement.tagName]: AudioPlayerElement;\n  }\n}\n"],"mappings":";;;;AAMA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,eACX,CAAC;AAEF,IAAa,qBAAb,cAAwC,cAAc,aAAa,CAAC;;iBACxC;;;AAI5B,WAAW,mBAAmB;AAC9B,WAAW,sBAAsB"}

package/cdn/{poster-O0SI05LC.js → poster-BoF67sLZ.js}

@@ -1,5 +1,5 @@
-import { A as selectFullscreen, M as selectPlayback, a as MediaElement, c as ContextConsumer, i as MediaContainerElement, j as selectPiP, k as selectControls, l as applyStateDataAttrs, n as PlayerController, s as ContextProvider, t as createPlayer, u as logMissingFeature, z as videoFeatures } from "./create-player-Dv7K1Ezk.js";
-import { a as PiPButtonDataAttrs, c as FullscreenButtonCore, i as PosterCore, l as ControlsDataAttrs, m as BufferingIndicatorCore, n as MediaButtonElement, o as PiPButtonCore, p as BufferingIndicatorDataAttrs, r as PosterDataAttrs, s as FullscreenButtonDataAttrs, t as ContextPartElement, u as ControlsCore } from "./volume-slider-CfhOO9RM.js";
+import { A as selectFullscreen, M as selectPlayback, a as MediaElement, c as ContextConsumer, i as MediaContainerElement, j as selectPiP, k as selectControls, l as applyStateDataAttrs, n as PlayerController, s as ContextProvider, t as createPlayer, u as logMissingFeature, z as videoFeatures } from "./create-player-4kACDl5S.js";
+import { a as PiPButtonDataAttrs, c as FullscreenButtonCore, i as PosterCore, l as ControlsDataAttrs, m as BufferingIndicatorCore, n as MediaButtonElement, o as PiPButtonCore, p as BufferingIndicatorDataAttrs, r as PosterDataAttrs, s as FullscreenButtonDataAttrs, t as ContextPartElement, u as ControlsCore } from "./volume-slider-DYG1mki7.js";
 import { i as createContext, r as playerContext } from "./context-DTY0nOpS.js";
 import { t as safeDefine } from "./safe-define-B8lHgj_K.js";
 
@@ -192,4 +192,4 @@ var PosterElement = class extends MediaUIElement {
 safeDefine(PosterElement);
 
 //#endregion
-//# sourceMappingURL=poster-O0SI05LC.js.map
+//# sourceMappingURL=poster-BoF67sLZ.js.map

package/cdn/{poster-O0SI05LC.js.map → poster-BoF67sLZ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"poster-O0SI05LC.js","names":["#core","#state","#disconnect","#core","#mediaState","#provider"],"sources":["../src/define/video/player.ts","../src/ui/buffering-indicator/buffering-indicator-element.ts","../src/define/ui/buffering-indicator.ts","../src/ui/controls/context.ts","../src/ui/controls/controls-element.ts","../src/ui/controls/controls-group-element.ts","../src/define/ui/controls.ts","../src/ui/fullscreen-button/fullscreen-button-element.ts","../src/define/ui/fullscreen-button.ts","../src/ui/pip-button/pip-button-element.ts","../src/define/ui/pip-button.ts","../src/ui/media-ui-element.ts","../src/ui/poster/poster-element.ts","../src/define/ui/poster.ts"],"sourcesContent":["import { videoFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n  features: videoFeatures,\n});\n\nexport class VideoPlayerElement extends ProviderMixin(MediaElement) {\n  static readonly tagName = 'video-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(VideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoPlayerElement.tagName]: VideoPlayerElement;\n  }\n}\n","import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class BufferingIndicatorElement extends MediaElement {\n  static readonly tagName = 'media-buffering-indicator';\n\n  static override properties = {\n    delay: { type: Number },\n  } satisfies PropertyDeclarationMap<keyof BufferingIndicatorCore.Props>;\n\n  delay = BufferingIndicatorCore.defaultProps.delay;\n\n  readonly #core = new BufferingIndicatorCore();\n  readonly #state = new PlayerController(this, playerContext, selectPlayback);\n\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#disconnect = new AbortController();\n\n    this.#core.state.subscribe(() => this.requestUpdate(), {\n      signal: this.#disconnect.signal,\n    });\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.#state.value;\n\n    if (!media) return;\n\n    this.#core.update(media);\n    applyStateDataAttrs(this, this.#core.state.current, BufferingIndicatorDataAttrs);\n  }\n}\n","import { BufferingIndicatorElement } from '../../ui/buffering-indicator/buffering-indicator-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(BufferingIndicatorElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BufferingIndicatorElement.tagName]: BufferingIndicatorElement;\n  }\n}\n","import type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext } from '@videojs/element/context';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst CONTROLS_CONTEXT_KEY = Symbol('@videojs/controls');\n\nexport const controlsContext = createContext<ControlsContextValue>(CONTROLS_CONTEXT_KEY);\n","import { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { controlsContext } from './context';\n\nexport class ControlsElement extends MediaElement {\n  static readonly tagName = 'media-controls';\n\n  readonly #core = new ControlsCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: controlsContext });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const media = this.#mediaState.value;\n    if (!media) return;\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, ControlsDataAttrs);\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: ControlsDataAttrs,\n    });\n  }\n}\n","import type { ControlsState } from '@videojs/core';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { controlsContext } from './context';\n\nexport class ControlsGroupElement extends ContextPartElement<ControlsState> {\n  static readonly tagName = 'media-controls-group';\n\n  protected readonly consumer = new ContextConsumer(this, { context: controlsContext, subscribe: true });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby')) {\n      this.setAttribute('role', 'group');\n    }\n  }\n}\n","import { ControlsElement } from '../../ui/controls/controls-element';\nimport { ControlsGroupElement } from '../../ui/controls/controls-group-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(ControlsElement);\nsafeDefine(ControlsGroupElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ControlsElement.tagName]: ControlsElement;\n  }\n}\n","import { FullscreenButtonCore, FullscreenButtonDataAttrs, type MediaFullscreenState } from '@videojs/core';\nimport { selectFullscreen } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class FullscreenButtonElement extends MediaButtonElement<FullscreenButtonCore> {\n  static readonly tagName = 'media-fullscreen-button';\n\n  protected readonly core = new FullscreenButtonCore();\n  protected readonly stateAttrMap = FullscreenButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectFullscreen);\n\n  protected activate(state: MediaFullscreenState): void {\n    this.core.toggle(state);\n  }\n}\n","import { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(FullscreenButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [FullscreenButtonElement.tagName]: FullscreenButtonElement;\n  }\n}\n","import { type MediaPictureInPictureState, PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PiPButtonElement extends MediaButtonElement<PiPButtonCore> {\n  static readonly tagName = 'media-pip-button';\n\n  protected readonly core = new PiPButtonCore();\n  protected readonly stateAttrMap = PiPButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPiP);\n\n  protected activate(state: MediaPictureInPictureState): void {\n    this.core.toggle(state);\n  }\n}\n","import { PiPButtonElement } from '../../ui/pip-button/pip-button-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(PiPButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [PiPButtonElement.tagName]: PiPButtonElement;\n  }\n}\n","import type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport type { PlayerController } from '../player/player-controller';\nimport { MediaElement } from './media-element';\n\n/** Abstract base for HTML custom elements that display media state with data attributes. */\nexport abstract class MediaUIElement<Core extends MediaUIComponent> extends MediaElement {\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n","import { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaUIElement } from '../media-ui-element';\n\nexport class PosterElement extends MediaUIElement<PosterCore> {\n  static readonly tagName = 'media-poster';\n\n  protected readonly core = new PosterCore();\n  protected readonly stateAttrMap = PosterDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlayback);\n}\n","import { PosterElement } from '../../ui/poster/poster-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(PosterElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [PosterElement.tagName]: PosterElement;\n  }\n}\n"],"mappings":";;;;;;AAMA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,eACX,CAAC;AAEF,IAAa,qBAAb,cAAwC,cAAc,aAAa,CAAC;;iBACxC;;;AAI5B,WAAW,mBAAmB;AAC9B,WAAW,sBAAsB;;;;ACRjC,IAAa,4BAAb,cAA+C,aAAa;;;eAOlD,uBAAuB,aAAa;;;iBANlB;;;oBAEG,EAC3B,OAAO,EAAE,MAAM,QAAQ,EACxB;;CAID,CAASA,OAAQ,IAAI,wBAAwB;CAC7C,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAE3E,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;AAExC,QAAKF,KAAM,MAAM,gBAAgB,KAAK,eAAe,EAAE,EACrD,QAAQ,MAAKE,WAAY,QAC1B,CAAC;AAEF,MAAe,CAAC,MAAKD,MAAO,MAC1B,mBAAkB,KAAK,WAAW,MAAKA,MAAO,YAAa;;CAI/D,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKC,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAKF,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAKC,MAAO;AAE1B,MAAI,CAAC,MAAO;AAEZ,QAAKD,KAAM,OAAO,MAAM;AACxB,sBAAoB,MAAM,MAAKA,KAAM,MAAM,SAAS,4BAA4B;;;;;;ACpDpF,WAAW,0BAA0B;;;;ACKrC,MAAM,uBAAuB,OAAO,oBAAoB;AAExD,MAAa,kBAAkB,cAAoC,qBAAqB;;;;ACAxF,IAAa,kBAAb,cAAqC,aAAa;;iBACtB;;CAE1B,CAASG,OAAQ,IAAI,cAAc;CACnC,CAASC,aAAc,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAChF,CAASC,WAAY,IAAI,gBAAgB,MAAM,EAAE,SAAS,iBAAiB,CAAC;CAE5E,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,MAAKD,WAAY,SAAS,MAAKA,WAAY,YACzD,mBAAkB,KAAK,WAAW,MAAKA,WAAY,YAAY;;CAInE,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,QAAQ,MAAKA,WAAY;AAC/B,MAAI,CAAC,MAAO;AAEZ,QAAKD,KAAM,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAKA,KAAM,UAAU;AAEnC,sBAAoB,MAAM,OAAO,kBAAkB;AAEnD,QAAKE,SAAU,SAAS;GACtB;GACA,cAAc;GACf,CAAC;;;;;;ACjCN,IAAa,uBAAb,cAA0C,mBAAkC;;;kBAG5C,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAiB,WAAW;GAAM,CAAC;;;iBAF5E;;CAI1B,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAI,KAAK,aAAa,aAAa,IAAI,KAAK,aAAa,kBAAkB,CACzE,MAAK,aAAa,QAAQ,QAAQ;;;;;;ACXxC,WAAW,gBAAgB;AAC3B,WAAW,qBAAqB;;;;ACEhC,IAAa,0BAAb,cAA6C,mBAAyC;;;cAG1D,IAAI,sBAAsB;sBAClB;oBACF,IAAI,iBAAiB,MAAM,eAAe,iBAAiB;;;iBAJjE;;CAM1B,AAAU,SAAS,OAAmC;AACpD,OAAK,KAAK,OAAO,MAAM;;;;;;ACZ3B,WAAW,wBAAwB;;;;ACInC,IAAa,mBAAb,cAAsC,mBAAkC;;;cAG5C,IAAI,eAAe;sBACX;oBACF,IAAI,iBAAiB,MAAM,eAAe,UAAU;;;iBAJ1D;;CAM1B,AAAU,SAAS,OAAyC;AAC1D,OAAK,KAAK,OAAO,MAAM;;;;;;ACZ3B,WAAW,iBAAiB;;;;;ACK5B,IAAsB,iBAAtB,cAA4E,aAAa;CAKvF,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,KAAK,WAAW,SAAS,KAAK,WAAW,YACvD,mBAAkB,KAAK,WAAW,KAAK,WAAW,YAAY;;CAIlE,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,KAAK,WAAW;AAE9B,MAAI,CAAC,MAAO;AAEZ,OAAK,KAAK,SAAS,MAAM;EACzB,MAAM,QAAQ,KAAK,KAAK,UAAU;AAClC,sBAAoB,MAAM,OAAO,KAAK,aAAa;;;;;;ACvBvD,IAAa,gBAAb,cAAmC,eAA2B;;;cAGlC,IAAI,YAAY;sBACR;oBACF,IAAI,iBAAiB,MAAM,eAAe,eAAe;;;iBAJ/D;;;;;;ACL5B,WAAW,cAAc"}
+{"version":3,"file":"poster-BoF67sLZ.js","names":["#core","#state","#disconnect","#core","#mediaState","#provider"],"sources":["../src/define/video/player.ts","../src/ui/buffering-indicator/buffering-indicator-element.ts","../src/define/ui/buffering-indicator.ts","../src/ui/controls/context.ts","../src/ui/controls/controls-element.ts","../src/ui/controls/controls-group-element.ts","../src/define/ui/controls.ts","../src/ui/fullscreen-button/fullscreen-button-element.ts","../src/define/ui/fullscreen-button.ts","../src/ui/pip-button/pip-button-element.ts","../src/define/ui/pip-button.ts","../src/ui/media-ui-element.ts","../src/ui/poster/poster-element.ts","../src/define/ui/poster.ts"],"sourcesContent":["import { videoFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n  features: videoFeatures,\n});\n\nexport class VideoPlayerElement extends ProviderMixin(MediaElement) {\n  static readonly tagName = 'video-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(VideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoPlayerElement.tagName]: VideoPlayerElement;\n  }\n}\n","import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class BufferingIndicatorElement extends MediaElement {\n  static readonly tagName = 'media-buffering-indicator';\n\n  static override properties = {\n    delay: { type: Number },\n  } satisfies PropertyDeclarationMap<keyof BufferingIndicatorCore.Props>;\n\n  delay = BufferingIndicatorCore.defaultProps.delay;\n\n  readonly #core = new BufferingIndicatorCore();\n  readonly #state = new PlayerController(this, playerContext, selectPlayback);\n\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#disconnect = new AbortController();\n\n    this.#core.state.subscribe(() => this.requestUpdate(), {\n      signal: this.#disconnect.signal,\n    });\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.#state.value;\n\n    if (!media) return;\n\n    this.#core.update(media);\n    applyStateDataAttrs(this, this.#core.state.current, BufferingIndicatorDataAttrs);\n  }\n}\n","import { BufferingIndicatorElement } from '../../ui/buffering-indicator/buffering-indicator-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(BufferingIndicatorElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BufferingIndicatorElement.tagName]: BufferingIndicatorElement;\n  }\n}\n","import type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext } from '@videojs/element/context';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst CONTROLS_CONTEXT_KEY = Symbol('@videojs/controls');\n\nexport const controlsContext = createContext<ControlsContextValue>(CONTROLS_CONTEXT_KEY);\n","import { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { controlsContext } from './context';\n\nexport class ControlsElement extends MediaElement {\n  static readonly tagName = 'media-controls';\n\n  readonly #core = new ControlsCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: controlsContext });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const media = this.#mediaState.value;\n    if (!media) return;\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, ControlsDataAttrs);\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: ControlsDataAttrs,\n    });\n  }\n}\n","import type { ControlsState } from '@videojs/core';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { controlsContext } from './context';\n\nexport class ControlsGroupElement extends ContextPartElement<ControlsState> {\n  static readonly tagName = 'media-controls-group';\n\n  protected readonly consumer = new ContextConsumer(this, { context: controlsContext, subscribe: true });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby')) {\n      this.setAttribute('role', 'group');\n    }\n  }\n}\n","import { ControlsElement } from '../../ui/controls/controls-element';\nimport { ControlsGroupElement } from '../../ui/controls/controls-group-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(ControlsElement);\nsafeDefine(ControlsGroupElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ControlsElement.tagName]: ControlsElement;\n  }\n}\n","import { FullscreenButtonCore, FullscreenButtonDataAttrs, type MediaFullscreenState } from '@videojs/core';\nimport { selectFullscreen } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class FullscreenButtonElement extends MediaButtonElement<FullscreenButtonCore> {\n  static readonly tagName = 'media-fullscreen-button';\n\n  protected readonly core = new FullscreenButtonCore();\n  protected readonly stateAttrMap = FullscreenButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectFullscreen);\n\n  protected activate(state: MediaFullscreenState): void {\n    this.core.toggle(state);\n  }\n}\n","import { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(FullscreenButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [FullscreenButtonElement.tagName]: FullscreenButtonElement;\n  }\n}\n","import { type MediaPictureInPictureState, PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PiPButtonElement extends MediaButtonElement<PiPButtonCore> {\n  static readonly tagName = 'media-pip-button';\n\n  protected readonly core = new PiPButtonCore();\n  protected readonly stateAttrMap = PiPButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPiP);\n\n  protected activate(state: MediaPictureInPictureState): void {\n    this.core.toggle(state);\n  }\n}\n","import { PiPButtonElement } from '../../ui/pip-button/pip-button-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(PiPButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [PiPButtonElement.tagName]: PiPButtonElement;\n  }\n}\n","import type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport type { PlayerController } from '../player/player-controller';\nimport { MediaElement } from './media-element';\n\n/** Abstract base for HTML custom elements that display media state with data attributes. */\nexport abstract class MediaUIElement<Core extends MediaUIComponent> extends MediaElement {\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n","import { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaUIElement } from '../media-ui-element';\n\nexport class PosterElement extends MediaUIElement<PosterCore> {\n  static readonly tagName = 'media-poster';\n\n  protected readonly core = new PosterCore();\n  protected readonly stateAttrMap = PosterDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlayback);\n}\n","import { PosterElement } from '../../ui/poster/poster-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(PosterElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [PosterElement.tagName]: PosterElement;\n  }\n}\n"],"mappings":";;;;;;AAMA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,eACX,CAAC;AAEF,IAAa,qBAAb,cAAwC,cAAc,aAAa,CAAC;;iBACxC;;;AAI5B,WAAW,mBAAmB;AAC9B,WAAW,sBAAsB;;;;ACRjC,IAAa,4BAAb,cAA+C,aAAa;;;eAOlD,uBAAuB,aAAa;;;iBANlB;;;oBAEG,EAC3B,OAAO,EAAE,MAAM,QAAQ,EACxB;;CAID,CAASA,OAAQ,IAAI,wBAAwB;CAC7C,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAE3E,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;AAExC,QAAKF,KAAM,MAAM,gBAAgB,KAAK,eAAe,EAAE,EACrD,QAAQ,MAAKE,WAAY,QAC1B,CAAC;AAEF,MAAe,CAAC,MAAKD,MAAO,MAC1B,mBAAkB,KAAK,WAAW,MAAKA,MAAO,YAAa;;CAI/D,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKC,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAKF,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAKC,MAAO;AAE1B,MAAI,CAAC,MAAO;AAEZ,QAAKD,KAAM,OAAO,MAAM;AACxB,sBAAoB,MAAM,MAAKA,KAAM,MAAM,SAAS,4BAA4B;;;;;;ACpDpF,WAAW,0BAA0B;;;;ACKrC,MAAM,uBAAuB,OAAO,oBAAoB;AAExD,MAAa,kBAAkB,cAAoC,qBAAqB;;;;ACAxF,IAAa,kBAAb,cAAqC,aAAa;;iBACtB;;CAE1B,CAASG,OAAQ,IAAI,cAAc;CACnC,CAASC,aAAc,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAChF,CAASC,WAAY,IAAI,gBAAgB,MAAM,EAAE,SAAS,iBAAiB,CAAC;CAE5E,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,MAAKD,WAAY,SAAS,MAAKA,WAAY,YACzD,mBAAkB,KAAK,WAAW,MAAKA,WAAY,YAAY;;CAInE,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,QAAQ,MAAKA,WAAY;AAC/B,MAAI,CAAC,MAAO;AAEZ,QAAKD,KAAM,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAKA,KAAM,UAAU;AAEnC,sBAAoB,MAAM,OAAO,kBAAkB;AAEnD,QAAKE,SAAU,SAAS;GACtB;GACA,cAAc;GACf,CAAC;;;;;;ACjCN,IAAa,uBAAb,cAA0C,mBAAkC;;;kBAG5C,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAiB,WAAW;GAAM,CAAC;;;iBAF5E;;CAI1B,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAI,KAAK,aAAa,aAAa,IAAI,KAAK,aAAa,kBAAkB,CACzE,MAAK,aAAa,QAAQ,QAAQ;;;;;;ACXxC,WAAW,gBAAgB;AAC3B,WAAW,qBAAqB;;;;ACEhC,IAAa,0BAAb,cAA6C,mBAAyC;;;cAG1D,IAAI,sBAAsB;sBAClB;oBACF,IAAI,iBAAiB,MAAM,eAAe,iBAAiB;;;iBAJjE;;CAM1B,AAAU,SAAS,OAAmC;AACpD,OAAK,KAAK,OAAO,MAAM;;;;;;ACZ3B,WAAW,wBAAwB;;;;ACInC,IAAa,mBAAb,cAAsC,mBAAkC;;;cAG5C,IAAI,eAAe;sBACX;oBACF,IAAI,iBAAiB,MAAM,eAAe,UAAU;;;iBAJ1D;;CAM1B,AAAU,SAAS,OAAyC;AAC1D,OAAK,KAAK,OAAO,MAAM;;;;;;ACZ3B,WAAW,iBAAiB;;;;;ACK5B,IAAsB,iBAAtB,cAA4E,aAAa;CAKvF,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,KAAK,WAAW,SAAS,KAAK,WAAW,YACvD,mBAAkB,KAAK,WAAW,KAAK,WAAW,YAAY;;CAIlE,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,KAAK,WAAW;AAE9B,MAAI,CAAC,MAAO;AAEZ,OAAK,KAAK,SAAS,MAAM;EACzB,MAAM,QAAQ,KAAK,KAAK,UAAU;AAClC,sBAAoB,MAAM,OAAO,KAAK,aAAa;;;;;;ACvBvD,IAAa,gBAAb,cAAmC,eAA2B;;;cAGlC,IAAI,YAAY;sBACR;oBACF,IAAI,iBAAiB,MAAM,eAAe,eAAe;;;iBAJ/D;;;;;;ACL5B,WAAW,cAAc"}

package/cdn/{poster-C4WHg3BH.js → poster-CkKPGKQ1.js}

@@ -1,2 +1,2 @@
-import{A as e,O as t,R as n,a as r,c as i,i as a,j as o,k as s,l as c,n as l,s as u,t as d}from"./create-player-QjiNZlh7.js";import{a as f,c as p,i as m,l as h,m as g,n as _,o as v,p as y,r as b,s as x,t as S,u as C}from"./volume-slider-BqzTytgB.js";import{i as w,r as T}from"./context-C_e06fGU.js";import{t as E}from"./safe-define-GrHW3P9e.js";const{ProviderMixin:D}=d({features:n});E(class extends D(r){static{this.tagName=`video-player`}}),E(a),E(class extends r{constructor(...e){super(...e),this.delay=g.defaultProps.delay}static{this.tagName=`media-buffering-indicator`}static{this.properties={delay:{type:Number}}}#e=new g;#t=new l(this,T,o);#n=null;connectedCallback(){super.connectedCallback(),this.#n=new AbortController,this.#e.state.subscribe(()=>this.requestUpdate(),{signal:this.#n.signal})}disconnectedCallback(){super.disconnectedCallback(),this.#n?.abort(),this.#n=null}willUpdate(e){super.willUpdate(e),this.#e.setProps(this)}update(e){super.update(e);let t=this.#t.value;t&&(this.#e.update(t),c(this,this.#e.state.current,y))}});const O=w(Symbol(`@videojs/controls`));var k=class extends r{static{this.tagName=`media-controls`}#e=new C;#t=new l(this,T,t);#n=new u(this,{context:O});connectedCallback(){super.connectedCallback()}update(e){super.update(e);let t=this.#t.value;if(!t)return;this.#e.setMedia(t);let n=this.#e.getState();c(this,n,h),this.#n.setValue({state:n,stateAttrMap:h})}},A=class extends S{constructor(...e){super(...e),this.consumer=new i(this,{context:O,subscribe:!0})}static{this.tagName=`media-controls-group`}connectedCallback(){super.connectedCallback(),(this.hasAttribute(`aria-label`)||this.hasAttribute(`aria-labelledby`))&&this.setAttribute(`role`,`group`)}};E(k),E(A),E(class extends _{constructor(...e){super(...e),this.core=new p,this.stateAttrMap=x,this.mediaState=new l(this,T,s)}static{this.tagName=`media-fullscreen-button`}activate(e){this.core.toggle(e)}}),E(class extends _{constructor(...t){super(...t),this.core=new v,this.stateAttrMap=f,this.mediaState=new l(this,T,e)}static{this.tagName=`media-pip-button`}activate(e){this.core.toggle(e)}});var j=class extends r{connectedCallback(){super.connectedCallback()}update(e){super.update(e);let t=this.mediaState.value;if(!t)return;this.core.setMedia(t);let n=this.core.getState();c(this,n,this.stateAttrMap)}};E(class extends j{constructor(...e){super(...e),this.core=new m,this.stateAttrMap=b,this.mediaState=new l(this,T,o)}static{this.tagName=`media-poster`}});
-//# sourceMappingURL=poster-C4WHg3BH.js.map
+import{A as e,O as t,R as n,a as r,c as i,i as a,j as o,k as s,l as c,n as l,s as u,t as d}from"./create-player-DxN4WCxY.js";import{a as f,c as p,i as m,l as h,m as g,n as _,o as v,p as y,r as b,s as x,t as S,u as C}from"./volume-slider-Bv1urvub.js";import{i as w,r as T}from"./context-C_e06fGU.js";import{t as E}from"./safe-define-GrHW3P9e.js";const{ProviderMixin:D}=d({features:n});E(class extends D(r){static{this.tagName=`video-player`}}),E(a),E(class extends r{constructor(...e){super(...e),this.delay=g.defaultProps.delay}static{this.tagName=`media-buffering-indicator`}static{this.properties={delay:{type:Number}}}#e=new g;#t=new l(this,T,o);#n=null;connectedCallback(){super.connectedCallback(),this.#n=new AbortController,this.#e.state.subscribe(()=>this.requestUpdate(),{signal:this.#n.signal})}disconnectedCallback(){super.disconnectedCallback(),this.#n?.abort(),this.#n=null}willUpdate(e){super.willUpdate(e),this.#e.setProps(this)}update(e){super.update(e);let t=this.#t.value;t&&(this.#e.update(t),c(this,this.#e.state.current,y))}});const O=w(Symbol(`@videojs/controls`));var k=class extends r{static{this.tagName=`media-controls`}#e=new C;#t=new l(this,T,t);#n=new u(this,{context:O});connectedCallback(){super.connectedCallback()}update(e){super.update(e);let t=this.#t.value;if(!t)return;this.#e.setMedia(t);let n=this.#e.getState();c(this,n,h),this.#n.setValue({state:n,stateAttrMap:h})}},A=class extends S{constructor(...e){super(...e),this.consumer=new i(this,{context:O,subscribe:!0})}static{this.tagName=`media-controls-group`}connectedCallback(){super.connectedCallback(),(this.hasAttribute(`aria-label`)||this.hasAttribute(`aria-labelledby`))&&this.setAttribute(`role`,`group`)}};E(k),E(A),E(class extends _{constructor(...e){super(...e),this.core=new p,this.stateAttrMap=x,this.mediaState=new l(this,T,s)}static{this.tagName=`media-fullscreen-button`}activate(e){this.core.toggle(e)}}),E(class extends _{constructor(...t){super(...t),this.core=new v,this.stateAttrMap=f,this.mediaState=new l(this,T,e)}static{this.tagName=`media-pip-button`}activate(e){this.core.toggle(e)}});var j=class extends r{connectedCallback(){super.connectedCallback()}update(e){super.update(e);let t=this.mediaState.value;if(!t)return;this.core.setMedia(t);let n=this.core.getState();c(this,n,this.stateAttrMap)}};E(class extends j{constructor(...e){super(...e),this.core=new m,this.stateAttrMap=b,this.mediaState=new l(this,T,o)}static{this.tagName=`media-poster`}});
+//# sourceMappingURL=poster-CkKPGKQ1.js.map

package/cdn/{poster-C4WHg3BH.js.map → poster-CkKPGKQ1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"poster-C4WHg3BH.js","names":["#core","#state","#disconnect","createContext","#core","#mediaState","#provider","ContextProvider","ContextConsumer"],"sources":["../src/define/video/player.ts","../src/ui/buffering-indicator/buffering-indicator-element.ts","../src/define/ui/buffering-indicator.ts","../src/ui/controls/context.ts","../src/ui/controls/controls-element.ts","../src/ui/controls/controls-group-element.ts","../src/define/ui/controls.ts","../src/ui/fullscreen-button/fullscreen-button-element.ts","../src/define/ui/fullscreen-button.ts","../src/ui/pip-button/pip-button-element.ts","../src/define/ui/pip-button.ts","../src/ui/media-ui-element.ts","../src/ui/poster/poster-element.ts","../src/define/ui/poster.ts"],"sourcesContent":["import { videoFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n  features: videoFeatures,\n});\n\nexport class VideoPlayerElement extends ProviderMixin(MediaElement) {\n  static readonly tagName = 'video-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(VideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoPlayerElement.tagName]: VideoPlayerElement;\n  }\n}\n","import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class BufferingIndicatorElement extends MediaElement {\n  static readonly tagName = 'media-buffering-indicator';\n\n  static override properties = {\n    delay: { type: Number },\n  } satisfies PropertyDeclarationMap<keyof BufferingIndicatorCore.Props>;\n\n  delay = BufferingIndicatorCore.defaultProps.delay;\n\n  readonly #core = new BufferingIndicatorCore();\n  readonly #state = new PlayerController(this, playerContext, selectPlayback);\n\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#disconnect = new AbortController();\n\n    this.#core.state.subscribe(() => this.requestUpdate(), {\n      signal: this.#disconnect.signal,\n    });\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.#state.value;\n\n    if (!media) return;\n\n    this.#core.update(media);\n    applyStateDataAttrs(this, this.#core.state.current, BufferingIndicatorDataAttrs);\n  }\n}\n","import { BufferingIndicatorElement } from '../../ui/buffering-indicator/buffering-indicator-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(BufferingIndicatorElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BufferingIndicatorElement.tagName]: BufferingIndicatorElement;\n  }\n}\n","import type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext } from '@videojs/element/context';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst CONTROLS_CONTEXT_KEY = Symbol('@videojs/controls');\n\nexport const controlsContext = createContext<ControlsContextValue>(CONTROLS_CONTEXT_KEY);\n","import { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { controlsContext } from './context';\n\nexport class ControlsElement extends MediaElement {\n  static readonly tagName = 'media-controls';\n\n  readonly #core = new ControlsCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: controlsContext });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const media = this.#mediaState.value;\n    if (!media) return;\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, ControlsDataAttrs);\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: ControlsDataAttrs,\n    });\n  }\n}\n","import type { ControlsState } from '@videojs/core';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { controlsContext } from './context';\n\nexport class ControlsGroupElement extends ContextPartElement<ControlsState> {\n  static readonly tagName = 'media-controls-group';\n\n  protected readonly consumer = new ContextConsumer(this, { context: controlsContext, subscribe: true });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby')) {\n      this.setAttribute('role', 'group');\n    }\n  }\n}\n","import { ControlsElement } from '../../ui/controls/controls-element';\nimport { ControlsGroupElement } from '../../ui/controls/controls-group-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(ControlsElement);\nsafeDefine(ControlsGroupElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ControlsElement.tagName]: ControlsElement;\n  }\n}\n","import { FullscreenButtonCore, FullscreenButtonDataAttrs, type MediaFullscreenState } from '@videojs/core';\nimport { selectFullscreen } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class FullscreenButtonElement extends MediaButtonElement<FullscreenButtonCore> {\n  static readonly tagName = 'media-fullscreen-button';\n\n  protected readonly core = new FullscreenButtonCore();\n  protected readonly stateAttrMap = FullscreenButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectFullscreen);\n\n  protected activate(state: MediaFullscreenState): void {\n    this.core.toggle(state);\n  }\n}\n","import { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(FullscreenButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [FullscreenButtonElement.tagName]: FullscreenButtonElement;\n  }\n}\n","import { type MediaPictureInPictureState, PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PiPButtonElement extends MediaButtonElement<PiPButtonCore> {\n  static readonly tagName = 'media-pip-button';\n\n  protected readonly core = new PiPButtonCore();\n  protected readonly stateAttrMap = PiPButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPiP);\n\n  protected activate(state: MediaPictureInPictureState): void {\n    this.core.toggle(state);\n  }\n}\n","import { PiPButtonElement } from '../../ui/pip-button/pip-button-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(PiPButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [PiPButtonElement.tagName]: PiPButtonElement;\n  }\n}\n","import type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport type { PlayerController } from '../player/player-controller';\nimport { MediaElement } from './media-element';\n\n/** Abstract base for HTML custom elements that display media state with data attributes. */\nexport abstract class MediaUIElement<Core extends MediaUIComponent> extends MediaElement {\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n","import { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaUIElement } from '../media-ui-element';\n\nexport class PosterElement extends MediaUIElement<PosterCore> {\n  static readonly tagName = 'media-poster';\n\n  protected readonly core = new PosterCore();\n  protected readonly stateAttrMap = PosterDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlayback);\n}\n","import { PosterElement } from '../../ui/poster/poster-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(PosterElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [PosterElement.tagName]: PosterElement;\n  }\n}\n"],"mappings":"yVAMA,KAAM,CAAE,iBAAkB,EAAa,CACrC,SAAU,EACX,CAAC,CAOF,EALA,cAAwC,EAAc,EAAa,AAAC,qBACxC,iBAIE,CAC9B,EAAW,EAAsB,CEbjC,EDKA,cAA+C,CAAa,0CAOlD,EAAuB,aAAa,0BANlB,mDAEG,CAC3B,MAAO,CAAE,KAAM,OAAQ,CACxB,CAID,GAAiB,IAAI,EACrB,GAAkB,IAAI,EAAiB,KAAM,EAAe,EAAe,CAE3E,GAAsC,KAEtC,mBAAmC,CACjC,MAAM,mBAAmB,CAEzB,MAAA,EAAmB,IAAI,gBAEvB,MAAA,EAAW,MAAM,cAAgB,KAAK,eAAe,CAAE,CACrD,OAAQ,MAAA,EAAiB,OAC1B,CAAC,CAOJ,sBAAsC,CACpC,MAAM,sBAAsB,CAC5B,MAAA,GAAkB,OAAO,CACzB,MAAA,EAAmB,KAGrB,WAA8B,EAA+B,CAC3D,MAAM,WAAW,EAAQ,CACzB,MAAA,EAAW,SAAS,KAAK,CAG3B,OAA0B,EAA+B,CACvD,MAAM,OAAO,EAAQ,CAErB,IAAM,EAAQ,MAAA,EAAY,MAErB,IAEL,MAAA,EAAW,OAAO,EAAM,CACxB,EAAoB,KAAM,MAAA,EAAW,MAAM,QAAS,EAA4B,ICpD/C,CCOrC,MAAa,EAAkBG,EAFF,OAAO,oBAAoB,CAEgC,CCAxF,IAAa,EAAb,cAAqC,CAAa,qBACtB,iBAE1B,GAAiB,IAAI,EACrB,GAAuB,IAAI,EAAiB,KAAM,EAAe,EAAe,CAChF,GAAqB,IAAII,EAAgB,KAAM,CAAE,QAAS,EAAiB,CAAC,CAE5E,mBAAmC,CACjC,MAAM,mBAAmB,CAO3B,OAA0B,EAAgC,CACxD,MAAM,OAAO,EAAS,CAEtB,IAAM,EAAQ,MAAA,EAAiB,MAC/B,GAAI,CAAC,EAAO,OAEZ,MAAA,EAAW,SAAS,EAAM,CAC1B,IAAM,EAAQ,MAAA,EAAW,UAAU,CAEnC,EAAoB,KAAM,EAAO,EAAkB,CAEnD,MAAA,EAAe,SAAS,CACtB,QACA,aAAc,EACf,CAAC,GCjCO,EAAb,cAA0C,CAAkC,6CAG5C,IAAIC,EAAgB,KAAM,CAAE,QAAS,EAAiB,UAAW,GAAM,CAAC,qBAF5E,uBAI1B,mBAAmC,CACjC,MAAM,mBAAmB,EAErB,KAAK,aAAa,aAAa,EAAI,KAAK,aAAa,kBAAkB,GACzE,KAAK,aAAa,OAAQ,QAAQ,GCXxC,EAAW,EAAgB,CAC3B,EAAW,EAAqB,CEFhC,EDIA,cAA6C,CAAyC,yCAG1D,IAAI,oBACI,kBACF,IAAI,EAAiB,KAAM,EAAe,EAAiB,qBAJjE,0BAM1B,SAAmB,EAAmC,CACpD,KAAK,KAAK,OAAO,EAAM,GCZQ,CEAnC,EDIA,cAAsC,CAAkC,yCAG5C,IAAI,oBACI,kBACF,IAAI,EAAiB,KAAM,EAAe,EAAU,qBAJ1D,mBAM1B,SAAmB,EAAyC,CAC1D,KAAK,KAAK,OAAO,EAAM,GCZC,CCK5B,IAAsB,EAAtB,cAA4E,CAAa,CAKvF,mBAAmC,CACjC,MAAM,mBAAmB,CAO3B,OAA0B,EAA+B,CACvD,MAAM,OAAO,EAAQ,CAErB,IAAM,EAAQ,KAAK,WAAW,MAE9B,GAAI,CAAC,EAAO,OAEZ,KAAK,KAAK,SAAS,EAAM,CACzB,IAAM,EAAQ,KAAK,KAAK,UAAU,CAClC,EAAoB,KAAM,EAAO,KAAK,aAAa,GE3BvD,EDIA,cAAmC,CAA2B,yCAGlC,IAAI,oBACI,kBACF,IAAI,EAAiB,KAAM,EAAe,EAAe,qBAJ/D,iBCLH"}
+{"version":3,"file":"poster-CkKPGKQ1.js","names":["#core","#state","#disconnect","createContext","#core","#mediaState","#provider","ContextProvider","ContextConsumer"],"sources":["../src/define/video/player.ts","../src/ui/buffering-indicator/buffering-indicator-element.ts","../src/define/ui/buffering-indicator.ts","../src/ui/controls/context.ts","../src/ui/controls/controls-element.ts","../src/ui/controls/controls-group-element.ts","../src/define/ui/controls.ts","../src/ui/fullscreen-button/fullscreen-button-element.ts","../src/define/ui/fullscreen-button.ts","../src/ui/pip-button/pip-button-element.ts","../src/define/ui/pip-button.ts","../src/ui/media-ui-element.ts","../src/ui/poster/poster-element.ts","../src/define/ui/poster.ts"],"sourcesContent":["import { videoFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n  features: videoFeatures,\n});\n\nexport class VideoPlayerElement extends ProviderMixin(MediaElement) {\n  static readonly tagName = 'video-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(VideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoPlayerElement.tagName]: VideoPlayerElement;\n  }\n}\n","import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class BufferingIndicatorElement extends MediaElement {\n  static readonly tagName = 'media-buffering-indicator';\n\n  static override properties = {\n    delay: { type: Number },\n  } satisfies PropertyDeclarationMap<keyof BufferingIndicatorCore.Props>;\n\n  delay = BufferingIndicatorCore.defaultProps.delay;\n\n  readonly #core = new BufferingIndicatorCore();\n  readonly #state = new PlayerController(this, playerContext, selectPlayback);\n\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#disconnect = new AbortController();\n\n    this.#core.state.subscribe(() => this.requestUpdate(), {\n      signal: this.#disconnect.signal,\n    });\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.#state.value;\n\n    if (!media) return;\n\n    this.#core.update(media);\n    applyStateDataAttrs(this, this.#core.state.current, BufferingIndicatorDataAttrs);\n  }\n}\n","import { BufferingIndicatorElement } from '../../ui/buffering-indicator/buffering-indicator-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(BufferingIndicatorElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BufferingIndicatorElement.tagName]: BufferingIndicatorElement;\n  }\n}\n","import type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext } from '@videojs/element/context';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst CONTROLS_CONTEXT_KEY = Symbol('@videojs/controls');\n\nexport const controlsContext = createContext<ControlsContextValue>(CONTROLS_CONTEXT_KEY);\n","import { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { controlsContext } from './context';\n\nexport class ControlsElement extends MediaElement {\n  static readonly tagName = 'media-controls';\n\n  readonly #core = new ControlsCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: controlsContext });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const media = this.#mediaState.value;\n    if (!media) return;\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, ControlsDataAttrs);\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: ControlsDataAttrs,\n    });\n  }\n}\n","import type { ControlsState } from '@videojs/core';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { controlsContext } from './context';\n\nexport class ControlsGroupElement extends ContextPartElement<ControlsState> {\n  static readonly tagName = 'media-controls-group';\n\n  protected readonly consumer = new ContextConsumer(this, { context: controlsContext, subscribe: true });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby')) {\n      this.setAttribute('role', 'group');\n    }\n  }\n}\n","import { ControlsElement } from '../../ui/controls/controls-element';\nimport { ControlsGroupElement } from '../../ui/controls/controls-group-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(ControlsElement);\nsafeDefine(ControlsGroupElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ControlsElement.tagName]: ControlsElement;\n  }\n}\n","import { FullscreenButtonCore, FullscreenButtonDataAttrs, type MediaFullscreenState } from '@videojs/core';\nimport { selectFullscreen } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class FullscreenButtonElement extends MediaButtonElement<FullscreenButtonCore> {\n  static readonly tagName = 'media-fullscreen-button';\n\n  protected readonly core = new FullscreenButtonCore();\n  protected readonly stateAttrMap = FullscreenButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectFullscreen);\n\n  protected activate(state: MediaFullscreenState): void {\n    this.core.toggle(state);\n  }\n}\n","import { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(FullscreenButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [FullscreenButtonElement.tagName]: FullscreenButtonElement;\n  }\n}\n","import { type MediaPictureInPictureState, PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PiPButtonElement extends MediaButtonElement<PiPButtonCore> {\n  static readonly tagName = 'media-pip-button';\n\n  protected readonly core = new PiPButtonCore();\n  protected readonly stateAttrMap = PiPButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPiP);\n\n  protected activate(state: MediaPictureInPictureState): void {\n    this.core.toggle(state);\n  }\n}\n","import { PiPButtonElement } from '../../ui/pip-button/pip-button-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(PiPButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [PiPButtonElement.tagName]: PiPButtonElement;\n  }\n}\n","import type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport type { PlayerController } from '../player/player-controller';\nimport { MediaElement } from './media-element';\n\n/** Abstract base for HTML custom elements that display media state with data attributes. */\nexport abstract class MediaUIElement<Core extends MediaUIComponent> extends MediaElement {\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n","import { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaUIElement } from '../media-ui-element';\n\nexport class PosterElement extends MediaUIElement<PosterCore> {\n  static readonly tagName = 'media-poster';\n\n  protected readonly core = new PosterCore();\n  protected readonly stateAttrMap = PosterDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlayback);\n}\n","import { PosterElement } from '../../ui/poster/poster-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(PosterElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [PosterElement.tagName]: PosterElement;\n  }\n}\n"],"mappings":"yVAMA,KAAM,CAAE,iBAAkB,EAAa,CACrC,SAAU,EACX,CAAC,CAOF,EALA,cAAwC,EAAc,EAAa,AAAC,qBACxC,iBAIE,CAC9B,EAAW,EAAsB,CEbjC,EDKA,cAA+C,CAAa,0CAOlD,EAAuB,aAAa,0BANlB,mDAEG,CAC3B,MAAO,CAAE,KAAM,OAAQ,CACxB,CAID,GAAiB,IAAI,EACrB,GAAkB,IAAI,EAAiB,KAAM,EAAe,EAAe,CAE3E,GAAsC,KAEtC,mBAAmC,CACjC,MAAM,mBAAmB,CAEzB,MAAA,EAAmB,IAAI,gBAEvB,MAAA,EAAW,MAAM,cAAgB,KAAK,eAAe,CAAE,CACrD,OAAQ,MAAA,EAAiB,OAC1B,CAAC,CAOJ,sBAAsC,CACpC,MAAM,sBAAsB,CAC5B,MAAA,GAAkB,OAAO,CACzB,MAAA,EAAmB,KAGrB,WAA8B,EAA+B,CAC3D,MAAM,WAAW,EAAQ,CACzB,MAAA,EAAW,SAAS,KAAK,CAG3B,OAA0B,EAA+B,CACvD,MAAM,OAAO,EAAQ,CAErB,IAAM,EAAQ,MAAA,EAAY,MAErB,IAEL,MAAA,EAAW,OAAO,EAAM,CACxB,EAAoB,KAAM,MAAA,EAAW,MAAM,QAAS,EAA4B,ICpD/C,CCOrC,MAAa,EAAkBG,EAFF,OAAO,oBAAoB,CAEgC,CCAxF,IAAa,EAAb,cAAqC,CAAa,qBACtB,iBAE1B,GAAiB,IAAI,EACrB,GAAuB,IAAI,EAAiB,KAAM,EAAe,EAAe,CAChF,GAAqB,IAAII,EAAgB,KAAM,CAAE,QAAS,EAAiB,CAAC,CAE5E,mBAAmC,CACjC,MAAM,mBAAmB,CAO3B,OAA0B,EAAgC,CACxD,MAAM,OAAO,EAAS,CAEtB,IAAM,EAAQ,MAAA,EAAiB,MAC/B,GAAI,CAAC,EAAO,OAEZ,MAAA,EAAW,SAAS,EAAM,CAC1B,IAAM,EAAQ,MAAA,EAAW,UAAU,CAEnC,EAAoB,KAAM,EAAO,EAAkB,CAEnD,MAAA,EAAe,SAAS,CACtB,QACA,aAAc,EACf,CAAC,GCjCO,EAAb,cAA0C,CAAkC,6CAG5C,IAAIC,EAAgB,KAAM,CAAE,QAAS,EAAiB,UAAW,GAAM,CAAC,qBAF5E,uBAI1B,mBAAmC,CACjC,MAAM,mBAAmB,EAErB,KAAK,aAAa,aAAa,EAAI,KAAK,aAAa,kBAAkB,GACzE,KAAK,aAAa,OAAQ,QAAQ,GCXxC,EAAW,EAAgB,CAC3B,EAAW,EAAqB,CEFhC,EDIA,cAA6C,CAAyC,yCAG1D,IAAI,oBACI,kBACF,IAAI,EAAiB,KAAM,EAAe,EAAiB,qBAJjE,0BAM1B,SAAmB,EAAmC,CACpD,KAAK,KAAK,OAAO,EAAM,GCZQ,CEAnC,EDIA,cAAsC,CAAkC,yCAG5C,IAAI,oBACI,kBACF,IAAI,EAAiB,KAAM,EAAe,EAAU,qBAJ1D,mBAM1B,SAAmB,EAAyC,CAC1D,KAAK,KAAK,OAAO,EAAM,GCZC,CCK5B,IAAsB,EAAtB,cAA4E,CAAa,CAKvF,mBAAmC,CACjC,MAAM,mBAAmB,CAO3B,OAA0B,EAA+B,CACvD,MAAM,OAAO,EAAQ,CAErB,IAAM,EAAQ,KAAK,WAAW,MAE9B,GAAI,CAAC,EAAO,OAEZ,KAAK,KAAK,SAAS,EAAM,CACzB,IAAM,EAAQ,KAAK,KAAK,UAAU,CAClC,EAAoB,KAAM,EAAO,KAAK,aAAa,GE3BvD,EDIA,cAAmC,CAA2B,yCAGlC,IAAI,oBACI,kBACF,IAAI,EAAiB,KAAM,EAAe,EAAe,qBAJ/D,iBCLH"}

package/cdn/video-minimal.dev.js

@@ -1,11 +1,11 @@
-import { o as ReactiveElement } from "./create-player-Dv7K1Ezk.js";
-import { g as createStyles, h as SkinMixin } from "./volume-slider-CfhOO9RM.js";
+import { o as ReactiveElement } from "./create-player-4kACDl5S.js";
+import { g as createStyles, h as SkinMixin } from "./volume-slider-DYG1mki7.js";
 import "./safe-define-B8lHgj_K.js";
-import "./poster-O0SI05LC.js";
+import "./poster-BoF67sLZ.js";
 import { t as renderIcon } from "./minimal-DBMdC_0I.js";
 
 //#region inline-css:src/define/video/minimal-skin.js
-var minimal_skin_default = "/* ==========================================================================\n   Icon State Visibility for Video Skins\n\n   Data-attribute-driven visibility rules for multi-state icon buttons.\n   Uses :is() with both element selectors (for HTML custom element wrappers)\n   and class selectors (for React rendered SVG elements).\n   ========================================================================== */\n\n/* --- All icons hidden by default --- */\n\n.media-button--play .media-icon--restart,\n.media-button--play .media-icon--play,\n.media-button--play .media-icon--pause,\n.media-button--mute .media-icon--volume-off,\n.media-button--mute .media-icon--volume-low,\n.media-button--mute .media-icon--volume-high,\n.media-button--fullscreen .media-icon--fullscreen-enter,\n.media-button--fullscreen .media-icon--fullscreen-exit,\n.media-button--pip .media-icon--pip-enter,\n.media-button--pip .media-icon--pip-exit,\n.media-button--captions .media-icon--captions-off,\n.media-button--captions .media-icon--captions-on {\n  display: none;\n  opacity: 0;\n}\n\n/* --- Active icon per state --- */\n\n/* Play: ended → restart */\n.media-button--play[data-ended] .media-icon--restart,\n/* Play: paused (not ended) → play */\n.media-button--play:not([data-ended])[data-paused] .media-icon--play,\n/* Play: playing (not paused, not ended) → pause */\n.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,\n/* Mute: muted → volume off */\n.media-button--mute[data-muted] .media-icon--volume-off,\n/* Mute: volume low (not muted) → volume low */\n.media-button--mute:not([data-muted])[data-volume-level=\"low\"] .media-icon--volume-low,\n/* Mute: volume high (not muted, not low) → volume high */\n.media-button--mute:not([data-muted]):not([data-volume-level=\"low\"]) .media-icon--volume-high,\n/* Fullscreen: not fullscreen → enter */\n.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,\n/* Fullscreen: fullscreen → exit */\n.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,\n/* Picture-in-Picture: not active → enter */\n.media-button--pip:not([data-pip]) .media-icon--pip-enter,\n/* Picture-in-Picture: active → exit */\n.media-button--pip[data-pip] .media-icon--pip-exit,\n/* Captions: not active → captions off */\n.media-button--captions:not([data-active]) .media-icon--captions-off,\n/* Captions: active → captions on */\n.media-button--captions[data-active] .media-icon--captions-on {\n  display: block;\n  opacity: 1;\n}\n\n/* ==========================================================================\n   Tooltip Label State Visibility for Video Skins\n\n   Data-attribute-driven visibility rules for multi-state tooltip labels.\n   Uses adjacent sibling selectors to match button state → tooltip content.\n   ========================================================================== */\n\n/* --- All multi-state labels hidden by default --- */\n\n.media-tooltip-label {\n  display: none;\n}\n\n/* --- Active label per state --- */\n\n/* Play: ended → replay */\n.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,\n/* Play: paused (not ended) → play */\n  .media-button--play:not([data-ended])[data-paused] + .media-tooltip\n  .media-tooltip-label--play,\n/* Play: playing (not paused, not ended) → pause */\n  .media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip\n  .media-tooltip-label--pause,\n/* Fullscreen: not fullscreen → enter */\n  .media-button--fullscreen:not([data-fullscreen]) + .media-tooltip\n  .media-tooltip-label--enter-fullscreen,\n/* Fullscreen: fullscreen → exit */\n  .media-button--fullscreen[data-fullscreen] + .media-tooltip\n  .media-tooltip-label--exit-fullscreen,\n/* Captions: not active → enable */\n  .media-button--captions:not([data-active]) + .media-tooltip\n  .media-tooltip-label--enable-captions,\n/* Captions: active → disable */\n  .media-button--captions[data-active] + .media-tooltip\n  .media-tooltip-label--disable-captions,\n/* PiP: not in pip → enter */\n  .media-button--pip:not([data-pip]) + .media-tooltip\n  .media-tooltip-label--enter-pip,\n/* PiP: in pip → exit */\n  .media-button--pip[data-pip] + .media-tooltip\n  .media-tooltip-label--exit-pip {\n  display: block;\n}\n\n/* ==========================================================================\n   Reset\n   ========================================================================== */\n\n.media-minimal-skin *,\n.media-minimal-skin *::before,\n.media-minimal-skin *::after {\n  box-sizing: border-box;\n}\n.media-minimal-skin img,\n.media-minimal-skin video,\n.media-minimal-skin svg {\n  display: block;\n  max-width: 100%;\n}\n.media-minimal-skin button {\n  font: inherit;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .media-minimal-skin {\n    interpolate-size: allow-keywords;\n  }\n}\n\n/* ==========================================================================\n   Root Container\n   ========================================================================== */\n\n.media-minimal-skin {\n  position: relative;\n  isolation: isolate;\n  display: block;\n  height: 100%;\n  width: 100%;\n  container: media-root / inline-size;\n  border-radius: var(--media-border-radius, 0.75rem);\n  font-family:\n    Inter Variable,\n    Inter,\n    ui-sans-serif,\n    system-ui,\n    sans-serif;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  letter-spacing: normal;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\n\n/* ==========================================================================\n   Media Element\n   ========================================================================== */\n\n.media-minimal-skin ::slotted(video),\n.media-minimal-skin video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--media-object-fit, contain);\n  object-position: var(--media-object-position, center);\n}\n.media-minimal-skin ::slotted(video) {\n  border-radius: var(--media-video-border-radius);\n}\n.media-minimal-skin video {\n  border-radius: inherit;\n}\n\n.media-minimal-skin:fullscreen ::slotted(video),\n.media-minimal-skin:fullscreen video {\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Overlay / Scrim\n   ========================================================================== */\n\n.media-minimal-skin .media-overlay {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  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));\n  backdrop-filter: blur(0) saturate(1.5);\n  opacity: 0;\n  pointer-events: none;\n\n  @media (pointer: fine) {\n    transition-property: opacity, backdrop-filter;\n    transition-duration: 500ms;\n    transition-delay: 500ms;\n    transition-timing-function: ease-out;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 100ms;\n    }\n  }\n}\n\n.media-minimal-skin .media-controls[data-visible] ~ .media-overlay,\n.media-minimal-skin .media-error[data-open] ~ .media-overlay {\n  opacity: 1;\n\n  @media (pointer: fine) {\n    transition-duration: 150ms;\n    transition-delay: 0ms;\n  }\n}\n\n.media-minimal-skin .media-error[data-open] ~ .media-overlay {\n  backdrop-filter: blur(16px) saturate(1.5);\n}\n\n/* ==========================================================================\n   Buffering Indicator\n   ========================================================================== */\n\n.media-minimal-skin .media-buffering-indicator {\n  position: absolute;\n  inset: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  color: oklch(1 0 0);\n  pointer-events: none;\n\n  &[data-visible] {\n    display: flex;\n  }\n}\n\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-minimal-skin .media-error {\n  position: absolute;\n  inset: 0;\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.media-minimal-skin .media-error__dialog {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  max-width: 16rem;\n  padding: 1rem;\n  color: oklch(1 0 0);\n  font-size: 0.875rem;\n  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);\n  transition-property: opacity, scale;\n  transition-duration: 500ms;\n  transition-delay: 100ms;\n  transition-timing-function: linear(\n    0,\n    0.034 1.5%,\n    0.763 9.7%,\n    1.066 13.9%,\n    1.198 19.9%,\n    1.184 21.8%,\n    0.963 37.5%,\n    0.997 50.9%,\n    1\n  );\n\n  /* Simple, fast transition for reduced motion users */\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 100ms;\n    transition-delay: 0ms;\n    transition-timing-function: ease-out;\n  }\n}\n\n.media-minimal-skin .media-error[data-starting-style] .media-error__dialog,\n.media-minimal-skin .media-error[data-ending-style] .media-error__dialog {\n  opacity: 0;\n  scale: 0.5;\n}\n\n.media-minimal-skin .media-error__content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.375rem 0;\n}\n\n.media-minimal-skin .media-error__title {\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.media-minimal-skin .media-error__description {\n  opacity: 0.7;\n  overflow-wrap: anywhere;\n}\n\n.media-minimal-skin .media-error__actions {\n  display: flex;\n  gap: 0.5rem;\n\n  & > * {\n    flex: 1;\n  }\n}\n\n/* ==========================================================================\n   Controls\n   ========================================================================== */\n\n.media-minimal-skin .media-controls {\n  container: media-controls / inline-size;\n  display: flex;\n  align-items: center;\n  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));\n  --media-controls-current-shadow-color-subtle: oklch(\n    from var(--media-controls-current-shadow-color) l c h /\n    calc(alpha * 0.4)\n  );\n  text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);\n}\n\n/* ==========================================================================\n   Time Controls & Display\n   ========================================================================== */\n\n.media-minimal-skin .media-time-controls {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  flex: 1;\n  gap: 0.75rem;\n}\n.media-minimal-skin .media-time {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.media-minimal-skin .media-time__value {\n  font-variant-numeric: tabular-nums;\n}\n.media-minimal-skin .media-time__value--current,\n.media-minimal-skin .media-time__separator {\n  display: none;\n}\n@container media-controls (width > 28rem) {\n  .media-minimal-skin .media-time-controls {\n    flex-direction: row;\n  }\n  .media-minimal-skin .media-time__value--duration,\n  .media-minimal-skin .media-time__separator {\n    color: oklch(from currentColor l c h / 0.6);\n  }\n  .media-minimal-skin .media-time__value--current,\n  .media-minimal-skin .media-time__separator {\n    display: inline;\n  }\n}\n\n/* ==========================================================================\n   Button Groups\n   ========================================================================== */\n\n.media-minimal-skin .media-button-group {\n  display: flex;\n  align-items: center;\n  gap: 0.075rem;\n\n  @container media-root (width > 40rem) {\n    gap: 0.125rem;\n  }\n}\n\n/* ==========================================================================\n   Buttons\n   ========================================================================== */\n\n/* Base button */\n.media-minimal-skin .media-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 0.5rem 1rem;\n  background: oklch(1 0 0);\n  border: none;\n  border-radius: 0.5rem;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  color: oklch(0 0 0);\n  font-weight: 500;\n  text-align: center;\n  text-shadow: inherit;\n  transition-property: background-color, color, outline-offset, scale;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  cursor: pointer;\n  user-select: none;\n  touch-action: manipulation;\n\n  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n\n  &[disabled] {\n    opacity: 0.5;\n    filter: grayscale(1);\n    cursor: not-allowed;\n  }\n\n  &[data-availability=\"unavailable\"] {\n    display: none;\n  }\n}\n\n/* Icon button variant */\n.media-minimal-skin .media-button--icon {\n  display: grid;\n  width: 2.375rem;\n  padding: 0;\n  aspect-ratio: 1;\n  background: transparent;\n  color: inherit;\n\n  &:hover,\n  &:focus-visible,\n  &[aria-expanded=\"true\"] {\n    color: oklch(from currentColor l c h / 0.8);\n    text-decoration: none;\n  }\n\n  &:active {\n    scale: 0.9;\n  }\n\n  & .media-icon {\n    filter: drop-shadow(0 1px 0 var(--media-controls-current-shadow-color, oklch(0 0 0 / 0.25)));\n  }\n}\n\n/* Seek button */\n.media-minimal-skin .media-button--seek {\n  & .media-icon__label {\n    position: absolute;\n    right: -1px;\n    bottom: -3px;\n    font-size: 0.75em;\n    font-weight: 480;\n    font-variant-numeric: tabular-nums;\n  }\n\n  &:has(.media-icon--flipped) .media-icon__label {\n    right: unset;\n    left: -1px;\n  }\n\n  @container media-controls (width < 28rem) {\n    display: none;\n  }\n}\n\n/* Playback rate button */\n.media-minimal-skin .media-button--playback-rate {\n  padding: 0;\n\n  &::after {\n    content: attr(data-rate) \"\\00D7\";\n    width: 4ch;\n    font-variant-numeric: tabular-nums;\n  }\n}\n\n/* ==========================================================================\n   Icons\n   ========================================================================== */\n\n.media-minimal-skin .media-icon__container {\n  position: relative;\n}\n.media-minimal-skin .media-icon {\n  display: block;\n  flex-shrink: 0;\n  grid-area: 1 / 1;\n  width: 18px;\n  height: 18px;\n  transition-behavior: allow-discrete;\n  transition-property: display, opacity;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.media-minimal-skin .media-icon--flipped {\n  scale: -1 1;\n}\n\n/* ==========================================================================\n   Poster Image\n   ========================================================================== */\n\n.media-minimal-skin media-poster,\n.media-minimal-skin > img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  transition: opacity 0.25s;\n  pointer-events: none;\n}\n.media-minimal-skin media-poster:not([data-visible]),\n.media-minimal-skin > img:not([data-visible]) {\n  opacity: 0;\n}\n.media-minimal-skin media-poster ::slotted(img) {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--media-object-fit, contain);\n  object-position: var(--media-object-position, center);\n  border-radius: var(--media-video-border-radius);\n}\n.media-minimal-skin > img {\n  object-fit: var(--media-object-fit, contain);\n  object-position: var(--media-object-position, center);\n  border-radius: inherit;\n}\n\n.media-minimal-skin:fullscreen media-poster ::slotted(img),\n.media-minimal-skin:fullscreen > img {\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Media preview\n   ========================================================================== */\n.media-minimal-skin .media-preview {\n  & .media-preview__thumbnail-wrapper {\n    position: relative;\n    border-radius: 0.5rem;\n    background-color: oklch(0 0 0 / 0.9);\n  }\n  & .media-preview__thumbnail {\n    display: block;\n    border-radius: inherit;\n  }\n\n  & .media-preview__timestamp {\n    display: block;\n    font-variant-numeric: tabular-nums;\n    text-align: center;\n    margin-top: 0.5rem;\n  }\n\n  & .media-overlay {\n    opacity: 1;\n  }\n\n  & .media-preview__spinner {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    translate: -50% -50%;\n    opacity: 0;\n  }\n\n  & .media-preview__thumbnail,\n  & .media-preview__spinner {\n    transition: opacity 150ms ease-out;\n  }\n\n  &:has(.media-preview__thumbnail[data-loading]) {\n    & .media-preview__thumbnail {\n      opacity: 0;\n    }\n    & .media-preview__spinner {\n      opacity: 1;\n    }\n  }\n}\n\n/* ==========================================================================\n   Slider\n   ========================================================================== */\n\n.media-minimal-skin .media-slider {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  border-radius: calc(infinity * 1px);\n  outline: none;\n  cursor: pointer;\n\n  &[data-orientation=\"horizontal\"] {\n    min-width: 5rem;\n    width: 100%;\n    height: 1.25rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 1.25rem;\n    height: 4.5rem;\n  }\n}\n\n/* Track */\n.media-minimal-skin .media-slider__track {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  border-radius: inherit;\n  user-select: none;\n  background-color: oklch(from currentColor l c h / 0.2);\n\n  &[data-orientation=\"horizontal\"] {\n    width: 100%;\n    height: 0.1875rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 0.1875rem;\n    height: 100%;\n  }\n}\n\n/* Thumb */\n.media-minimal-skin .media-slider__thumb {\n  position: absolute;\n  translate: -50% -50%;\n  z-index: 10;\n  width: 0.75rem;\n  height: 0.75rem;\n  background-color: currentColor;\n  border-radius: calc(infinity * 1px);\n  box-shadow:\n    0 0 0 1px var(--media-controls-current-shadow-color-subtle, oklch(0 0 0 / 0.1)),\n    0 1px 3px 0 oklch(0 0 0 / 0.15),\n    0 1px 2px -1px oklch(0 0 0 / 0.15);\n  opacity: 0;\n  scale: 0.7;\n  transform-origin: center;\n  transition-property: opacity, scale, outline-offset;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n\n  &[data-orientation=\"horizontal\"] {\n    top: 50%;\n    left: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    left: 50%;\n    top: calc(100% - var(--media-slider-fill));\n  }\n\n  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n}\n\n.media-minimal-skin .media-slider:hover .media-slider__thumb,\n.media-minimal-skin .media-slider:focus-within .media-slider__thumb,\n.media-minimal-skin .media-slider__thumb--persistent {\n  opacity: 1;\n  scale: 1;\n}\n\n/* Shared track fills */\n.media-minimal-skin .media-slider__buffer,\n.media-minimal-skin .media-slider__fill {\n  position: absolute;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"horizontal\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"horizontal\"] {\n  inset-block: 0;\n  left: 0;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"vertical\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"vertical\"] {\n  inset-inline: 0;\n  bottom: 0;\n}\n\n/* Buffer */\n.media-minimal-skin .media-slider__buffer {\n  background-color: oklch(from currentColor l c h / 0.2);\n  transition-duration: 0.25s;\n  transition-timing-function: ease-out;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-buffer);\n    transition-property: width;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-buffer);\n    transition-property: height;\n  }\n}\n\n/* Fill */\n.media-minimal-skin .media-slider__fill {\n  background-color: currentColor;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-fill);\n  }\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin .media-popover,\n.media-minimal-skin .media-tooltip {\n  margin: 0;\n  border: 0;\n  color: inherit;\n  overflow: visible;\n  transition-property: scale, opacity, filter;\n  transition-duration: 150ms;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    scale: 0.5;\n    filter: blur(8px);\n  }\n\n  &[data-instant] {\n    transition-duration: 0ms;\n  }\n\n  &[data-side=\"top\"] {\n    transform-origin: bottom;\n  }\n  &[data-side=\"bottom\"] {\n    transform-origin: top;\n  }\n  &[data-side=\"left\"] {\n    transform-origin: right;\n  }\n  &[data-side=\"right\"] {\n    transform-origin: left;\n  }\n\n  /* Safe area between trigger and popup */\n  &::before {\n    content: \"\";\n    position: absolute;\n    pointer-events: inherit;\n  }\n\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    width: 100%;\n    inset-inline: 0;\n  }\n  &[data-side=\"top\"]::before {\n    top: 100%;\n  }\n  &[data-side=\"bottom\"]::before {\n    bottom: 100%;\n  }\n\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    height: 100%;\n    inset-block: 0;\n  }\n  &[data-side=\"left\"]::before {\n    left: 100%;\n  }\n  &[data-side=\"right\"]::before {\n    right: 100%;\n  }\n}\n\n.media-minimal-skin .media-popover {\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    height: var(--media-popover-side-offset);\n  }\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    width: var(--media-popover-side-offset);\n  }\n}\n\n.media-minimal-skin .media-tooltip {\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.25rem;\n  background-color: oklch(1 0 0 / 0.1);\n  backdrop-filter: blur(16px) saturate(1.5);\n  box-shadow:\n    0 4px 6px -1px oklch(0 0 0 / 0.1),\n    0 2px 4px -2px oklch(0 0 0 / 0.1);\n  font-size: 0.75rem;\n  white-space: nowrap;\n  --media-tooltip-side-offset: 0.75rem;\n\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    height: var(--media-tooltip-side-offset);\n  }\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    width: var(--media-tooltip-side-offset);\n  }\n\n  @media (prefers-reduced-transparency: reduce) {\n    background-color: oklch(0 0 0 / 0.7);\n  }\n\n  @media (prefers-contrast: more) {\n    background-color: oklch(0 0 0 / 0.9);\n  }\n}\n\n.media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability=\"unsupported\"]) {\n  display: none;\n}\n\n/* ==========================================================================\n   Native Caption Track\n   ========================================================================== */\n\n.media-minimal-skin {\n  --media-caption-track-duration: var(--media-controls-transition-duration);\n  --media-caption-track-delay: calc(var(--media-controls-transition-delay) + 25ms);\n  --media-caption-track-y: -0.5rem;\n\n  &:has(.media-controls[data-visible]) {\n    --media-caption-track-y: -3rem;\n  }\n}\n\n.media-minimal-skin video::-webkit-media-text-track-container {\n  transition: translate var(--media-caption-track-duration) ease-out;\n  transition-delay: var(--media-caption-track-delay);\n  translate: 0 var(--media-caption-track-y);\n  scale: 0.98;\n  z-index: 1;\n  font-family: inherit;\n}\n\n\n/* ==========================================================================\n   Root\n   ========================================================================== */\n\n.media-minimal-skin--video {\n  overflow: clip;\n  background: oklch(0 0 0);\n  --media-border-color: oklch(0 0 0 / 0.15);\n  --media-video-border-radius: var(--media-border-radius, 0.75rem);\n  --media-controls-transition-duration: 100ms;\n  --media-controls-transition-delay: 0ms;\n\n  @media (prefers-color-scheme: dark) {\n    --media-border-color: oklch(1 0 0 / 0.15);\n  }\n\n  &:has(.media-controls:not([data-visible])) {\n    /* Slight delay to hide controls on non-touch devices after interaction */\n    @media (pointer: fine) {\n      --media-controls-transition-delay: 500ms;\n      --media-controls-transition-duration: 300ms;\n    }\n    @media (pointer: coarse) {\n      --media-controls-transition-duration: 150ms;\n    }\n    @media (prefers-reduced-motion: reduce) {\n      --media-controls-transition-duration: 100ms;\n    }\n  }\n\n  /* Inner border ring */\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n    border-radius: inherit;\n    box-shadow: inset 0 0 0 1px var(--media-border-color);\n    pointer-events: none;\n  }\n\n  /* Fullscreen */\n  &:fullscreen {\n    --media-border-radius: 0;\n  }\n}\n\n/* ==========================================================================\n  Controls (hide/show behavior)\n  ========================================================================== */\n\n.media-minimal-skin--video .media-controls {\n  position: absolute;\n  bottom: 0;\n  inset-inline: 0;\n  z-index: 10;\n  gap: 0.5rem;\n  padding: 2rem 0.375rem 0.375rem 0.375rem;\n  color: var(--media-color-primary, oklch(1 0 0));\n  transition-duration: var(--media-controls-transition-duration);\n  transition-delay: var(--media-controls-transition-delay);\n  transition-timing-function: ease-out;\n\n  @media (pointer: fine) {\n    will-change: translate, filter, opacity;\n    transition-property: translate, filter, opacity;\n  }\n\n  @media (pointer: coarse) {\n    will-change: translate, opacity;\n    transition-property: translate, opacity;\n  }\n\n  &:not([data-visible]) {\n    opacity: 0;\n    pointer-events: none;\n    translate: 0 100%;\n\n    @media (pointer: fine) {\n      filter: blur(8px);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      translate: 0 0;\n      filter: blur(0);\n    }\n  }\n\n  @container media-root (width > 40rem) {\n    gap: 0.875rem;\n    padding: 2.5rem 0.75rem 0.75rem 0.75rem;\n  }\n}\n\n/* Hide cursor when controls are hidden in fullscreen */\n.media-minimal-skin--video:fullscreen:has(.media-controls:not([data-visible])) {\n  cursor: none;\n}\n\n/* ==========================================================================\n   Sliders\n   ========================================================================== */\n\n.media-minimal-skin--video .media-slider__track {\n  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin--video .media-popover--volume {\n  --media-popover-side-offset: 0.5rem;\n  background: transparent;\n  padding: 0.25rem;\n}\n\n/* ==========================================================================\n   Slider preview\n   ========================================================================== */\n\n.media-minimal-skin .media-slider__preview {\n  position: absolute;\n  left: var(--media-slider-pointer);\n  bottom: calc(100% + 0.5rem);\n  translate: -50%;\n  opacity: 0;\n  scale: 0.8;\n  filter: blur(8px);\n  transition-property: scale, opacity, filter;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  transform-origin: bottom;\n\n  & .media-preview__thumbnail-wrapper {\n    position: relative;\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      box-shadow:\n        0 0 0 1px oklch(0 0 0 / 0.05),\n        0 1px 3px 0 oklch(0 0 0 / 0.2),\n        0 1px 2px -1px oklch(0 0 0 / 0.2);\n    }\n  }\n\n  & .media-preview__thumbnail {\n    max-width: 11rem;\n  }\n\n  &:has(.media-preview__thumbnail[data-loading]) {\n    max-height: 6rem;\n  }\n}\n.media-minimal-skin .media-slider[data-pointing] .media-slider__preview:has([role=\"img\"]:not([data-hidden])) {\n  opacity: 1;\n  scale: 1;\n  filter: blur(0);\n}\n\n";
+var minimal_skin_default = "/* ==========================================================================\n   Reset\n   ========================================================================== */\n\n.media-minimal-skin *,\n.media-minimal-skin *::before,\n.media-minimal-skin *::after {\n  box-sizing: border-box;\n}\n.media-minimal-skin img,\n.media-minimal-skin video,\n.media-minimal-skin svg {\n  display: block;\n  max-width: 100%;\n}\n.media-minimal-skin button {\n  font: inherit;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .media-minimal-skin {\n    interpolate-size: allow-keywords;\n  }\n}\n\n/* ==========================================================================\n   Root Container\n   ========================================================================== */\n\n.media-minimal-skin {\n  position: relative;\n  isolation: isolate;\n  display: block;\n  height: 100%;\n  width: 100%;\n  container: media-root / inline-size;\n  border-radius: var(--media-border-radius, 0.75rem);\n  font-family:\n    Inter Variable,\n    Inter,\n    ui-sans-serif,\n    system-ui,\n    sans-serif;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  letter-spacing: normal;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n\n  --media-controls-radius: var(--media-border-radius, 1rem);\n}\n\n/* ==========================================================================\n   Media Element\n   ========================================================================== */\n\n.media-minimal-skin ::slotted(video),\n.media-minimal-skin video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--media-object-fit, contain);\n  object-position: var(--media-object-position, center);\n}\n.media-minimal-skin ::slotted(video) {\n  border-radius: var(--media-video-border-radius);\n}\n.media-minimal-skin video {\n  border-radius: inherit;\n}\n\n.media-minimal-skin:fullscreen ::slotted(video),\n.media-minimal-skin:fullscreen video {\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Overlay / Scrim\n   ========================================================================== */\n\n.media-minimal-skin .media-overlay {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  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));\n  backdrop-filter: blur(0) saturate(1.5);\n  opacity: 0;\n  pointer-events: none;\n  transition-property: opacity, backdrop-filter;\n  transition-duration: var(--media-controls-transition-duration);\n  transition-delay: var(--media-controls-transition-delay);\n  transition-timing-function: ease-out;\n}\n\n.media-minimal-skin .media-error ~ .media-overlay {\n  transition-duration: var(--media-error-dialog-transition-duration);\n  transition-delay: var(--media-error-dialog-transition-delay);\n}\n\n.media-minimal-skin .media-controls[data-visible] ~ .media-overlay,\n.media-minimal-skin .media-error[data-open] ~ .media-overlay {\n  opacity: 1;\n}\n\n.media-minimal-skin .media-error[data-open] ~ .media-overlay {\n  backdrop-filter: blur(16px) saturate(1.5);\n}\n\n/* ==========================================================================\n   Buffering Indicator\n   ========================================================================== */\n\n.media-minimal-skin .media-buffering-indicator {\n  position: absolute;\n  inset: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  color: oklch(1 0 0);\n  pointer-events: none;\n\n  &[data-visible] {\n    display: flex;\n  }\n}\n\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-minimal-skin .media-error__title {\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.media-minimal-skin .media-error__description {\n  opacity: 0.7;\n  overflow-wrap: anywhere;\n}\n\n.media-minimal-skin .media-error__actions {\n  display: flex;\n  gap: 0.5rem;\n\n  & > * {\n    flex: 1;\n  }\n}\n\n.media-minimal-skin .media-error[data-open] ~ .media-controls * {\n  visibility: hidden;\n}\n\n/* ==========================================================================\n   Controls\n   ========================================================================== */\n\n.media-minimal-skin .media-controls {\n  container: media-controls / inline-size;\n  display: flex;\n  align-items: center;\n  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));\n  --media-controls-current-shadow-color-subtle: oklch(\n    from var(--media-controls-current-shadow-color) l c h /\n    calc(alpha * 0.4)\n  );\n  text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);\n}\n\n/* ==========================================================================\n   Time Controls & Display\n   ========================================================================== */\n\n.media-minimal-skin .media-time-controls {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  flex: 1;\n  gap: 0.75rem;\n}\n.media-minimal-skin .media-time {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.media-minimal-skin .media-time__value {\n  font-variant-numeric: tabular-nums;\n}\n.media-minimal-skin .media-time__value--current,\n.media-minimal-skin .media-time__separator {\n  display: none;\n}\n@container media-controls (width > 28rem) {\n  .media-minimal-skin .media-time-controls {\n    flex-direction: row;\n  }\n  .media-minimal-skin .media-time__value--duration,\n  .media-minimal-skin .media-time__separator {\n    color: oklch(from currentColor l c h / 0.6);\n  }\n  .media-minimal-skin .media-time__value--current,\n  .media-minimal-skin .media-time__separator {\n    display: inline;\n  }\n}\n\n/* ==========================================================================\n   Button Groups\n   ========================================================================== */\n\n.media-minimal-skin .media-button-group {\n  display: flex;\n  align-items: center;\n  gap: 0.075rem;\n\n  @container media-root (width > 40rem) {\n    gap: 0.125rem;\n  }\n}\n\n/* ==========================================================================\n   Buttons\n   ========================================================================== */\n\n/* Base button */\n.media-minimal-skin .media-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 0.5rem 1rem;\n  border: none;\n  border-radius: calc(var(--media-controls-radius) - var(--media-controls-padding));\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  transition-property: background-color, outline-offset, scale;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  cursor: pointer;\n  user-select: none;\n  touch-action: manipulation;\n\n  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n\n  &:active {\n    scale: 0.98;\n  }\n\n  &[disabled] {\n    opacity: 0.5;\n    filter: grayscale(1);\n    cursor: not-allowed;\n  }\n\n  &[data-availability=\"unavailable\"] {\n    display: none;\n  }\n}\n\n/* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */\n@supports (corner-shape: squircle) {\n  .media-minimal-skin .media-button {\n    border-radius: var(--media-controls-radius);\n    /* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */\n    corner-shape: squircle;\n  }\n}\n\n/* Primary button variant */\n.media-minimal-skin .media-button--primary {\n  background: oklch(1 0 0);\n  color: oklch(0 0 0);\n  font-weight: 500;\n  text-align: center;\n}\n\n/* Subtle button variant */\n.media-minimal-skin .media-button--subtle {\n  background: transparent;\n  color: inherit;\n  text-shadow: inherit;\n\n  &:hover,\n  &:focus-visible,\n  &[aria-expanded=\"true\"] {\n    background: oklch(from currentColor l c h / 0.1);\n  }\n}\n\n/* Icon button variant */\n.media-minimal-skin .media-button--icon {\n  display: grid;\n  width: 2.375rem;\n  padding: 0;\n  aspect-ratio: 1;\n\n  &:active {\n    scale: 0.9;\n  }\n\n  & .media-icon {\n    filter: drop-shadow(0 1px 0 var(--media-controls-current-shadow-color, oklch(0 0 0 / 0.25)));\n  }\n}\n\n/* Seek button */\n.media-minimal-skin .media-button--seek {\n  & .media-icon__label {\n    position: absolute;\n    right: -1px;\n    bottom: -3px;\n    font-size: 10px;\n    font-weight: 480;\n    font-variant-numeric: tabular-nums;\n  }\n\n  &:has(.media-icon--flipped) .media-icon__label {\n    right: unset;\n    left: -1px;\n  }\n\n  @container media-controls (width < 28rem) {\n    display: none;\n  }\n}\n\n/* Playback rate button */\n.media-minimal-skin .media-button--playback-rate {\n  padding: 0;\n\n  &::after {\n    content: attr(data-rate) \"\\00D7\";\n    width: 4ch;\n    font-variant-numeric: tabular-nums;\n  }\n}\n\n/* ==========================================================================\n   Icons\n   ========================================================================== */\n\n.media-minimal-skin .media-icon__container {\n  position: relative;\n}\n.media-minimal-skin .media-icon {\n  display: block;\n  flex-shrink: 0;\n  grid-area: 1 / 1;\n  width: 18px;\n  height: 18px;\n  transition-behavior: allow-discrete;\n  transition-property: display, opacity;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.media-minimal-skin .media-icon--flipped {\n  scale: -1 1;\n}\n\n/* ==========================================================================\n   Poster Image\n   ========================================================================== */\n\n.media-minimal-skin media-poster,\n.media-minimal-skin > img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  transition: opacity 0.25s;\n  pointer-events: none;\n}\n.media-minimal-skin media-poster:not([data-visible]),\n.media-minimal-skin > img:not([data-visible]) {\n  opacity: 0;\n}\n.media-minimal-skin media-poster ::slotted(img) {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--media-object-fit, contain);\n  object-position: var(--media-object-position, center);\n  border-radius: var(--media-video-border-radius);\n}\n.media-minimal-skin > img {\n  object-fit: var(--media-object-fit, contain);\n  object-position: var(--media-object-position, center);\n  border-radius: inherit;\n}\n\n.media-minimal-skin:fullscreen media-poster ::slotted(img),\n.media-minimal-skin:fullscreen > img {\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Media preview\n   ========================================================================== */\n.media-minimal-skin .media-preview {\n  & .media-preview__thumbnail-wrapper {\n    position: relative;\n    border-radius: 0.5rem;\n    background-color: oklch(0 0 0 / 0.9);\n  }\n  & .media-preview__thumbnail {\n    display: block;\n    border-radius: inherit;\n  }\n\n  & .media-preview__timestamp {\n    display: block;\n    font-variant-numeric: tabular-nums;\n    text-align: center;\n    margin-top: 0.5rem;\n  }\n\n  & .media-overlay {\n    opacity: 1;\n  }\n\n  & .media-preview__spinner {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    translate: -50% -50%;\n    opacity: 0;\n  }\n\n  & .media-preview__thumbnail,\n  & .media-preview__spinner {\n    transition: opacity 150ms ease-out;\n  }\n\n  &:has(.media-preview__thumbnail[data-loading]) {\n    & .media-preview__thumbnail {\n      opacity: 0;\n    }\n    & .media-preview__spinner {\n      opacity: 1;\n    }\n  }\n}\n\n/* ==========================================================================\n   Slider\n   ========================================================================== */\n\n.media-minimal-skin .media-slider {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  border-radius: calc(infinity * 1px);\n  outline: none;\n  cursor: pointer;\n\n  &[data-orientation=\"horizontal\"] {\n    min-width: 5rem;\n    width: 100%;\n    height: 1.25rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 1.25rem;\n    height: 4.5rem;\n  }\n}\n\n/* Track */\n.media-minimal-skin .media-slider__track {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  border-radius: inherit;\n  user-select: none;\n  background-color: oklch(from currentColor l c h / 0.2);\n\n  &[data-orientation=\"horizontal\"] {\n    width: 100%;\n    height: 0.1875rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 0.1875rem;\n    height: 100%;\n  }\n}\n\n/* Thumb */\n.media-minimal-skin .media-slider__thumb {\n  position: absolute;\n  translate: -50% -50%;\n  z-index: 10;\n  width: 0.75rem;\n  height: 0.75rem;\n  background-color: currentColor;\n  border-radius: calc(infinity * 1px);\n  box-shadow:\n    0 0 0 1px var(--media-controls-current-shadow-color-subtle, oklch(0 0 0 / 0.1)),\n    0 1px 3px 0 oklch(0 0 0 / 0.15),\n    0 1px 2px -1px oklch(0 0 0 / 0.15);\n  opacity: 0;\n  scale: 0.7;\n  transform-origin: center;\n  transition-property: opacity, scale, outline-offset;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n\n  &[data-orientation=\"horizontal\"] {\n    top: 50%;\n    left: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    left: 50%;\n    top: calc(100% - var(--media-slider-fill));\n  }\n\n  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n}\n\n.media-minimal-skin .media-slider:hover .media-slider__thumb,\n.media-minimal-skin .media-slider:focus-within .media-slider__thumb,\n.media-minimal-skin .media-slider__thumb--persistent {\n  opacity: 1;\n  scale: 1;\n}\n\n/* Shared track fills */\n.media-minimal-skin .media-slider__buffer,\n.media-minimal-skin .media-slider__fill {\n  position: absolute;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"horizontal\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"horizontal\"] {\n  inset-block: 0;\n  left: 0;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"vertical\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"vertical\"] {\n  inset-inline: 0;\n  bottom: 0;\n}\n\n/* Buffer */\n.media-minimal-skin .media-slider__buffer {\n  background-color: oklch(from currentColor l c h / 0.2);\n  transition-duration: 0.25s;\n  transition-timing-function: ease-out;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-buffer);\n    transition-property: width;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-buffer);\n    transition-property: height;\n  }\n}\n\n/* Fill */\n.media-minimal-skin .media-slider__fill {\n  background-color: currentColor;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-fill);\n  }\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin .media-popover,\n.media-minimal-skin .media-tooltip {\n  margin: 0;\n  border: 0;\n  color: inherit;\n  overflow: visible;\n  transition-property: scale, opacity, filter;\n  transition-duration: var(--media-popup-transition-duration);\n  transition-timing-function: var(--media-popup-transition-timing-function);\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    scale: 0.5;\n    filter: blur(8px);\n  }\n\n  &[data-instant] {\n    transition-duration: 0ms;\n  }\n\n  &[data-side=\"top\"] {\n    transform-origin: bottom;\n  }\n  &[data-side=\"bottom\"] {\n    transform-origin: top;\n  }\n  &[data-side=\"left\"] {\n    transform-origin: right;\n  }\n  &[data-side=\"right\"] {\n    transform-origin: left;\n  }\n\n  /* Safe area between trigger and popup */\n  &::before {\n    content: \"\";\n    position: absolute;\n    pointer-events: inherit;\n  }\n\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    width: 100%;\n    inset-inline: 0;\n  }\n  &[data-side=\"top\"]::before {\n    top: 100%;\n  }\n  &[data-side=\"bottom\"]::before {\n    bottom: 100%;\n  }\n\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    height: 100%;\n    inset-block: 0;\n  }\n  &[data-side=\"left\"]::before {\n    left: 100%;\n  }\n  &[data-side=\"right\"]::before {\n    right: 100%;\n  }\n}\n\n.media-minimal-skin .media-popover {\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    height: var(--media-popover-side-offset);\n  }\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    width: var(--media-popover-side-offset);\n  }\n}\n\n.media-minimal-skin .media-tooltip {\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.25rem;\n  background-color: oklch(1 0 0 / 0.1);\n  backdrop-filter: blur(16px) saturate(1.5);\n  box-shadow:\n    0 4px 6px -1px oklch(0 0 0 / 0.1),\n    0 2px 4px -2px oklch(0 0 0 / 0.1);\n  font-size: 0.75rem;\n  white-space: nowrap;\n  --media-tooltip-side-offset: 0.75rem;\n\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    height: var(--media-tooltip-side-offset);\n  }\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    width: var(--media-tooltip-side-offset);\n  }\n\n  @media (prefers-reduced-transparency: reduce) {\n    background-color: oklch(0 0 0 / 0.7);\n  }\n\n  @media (prefers-contrast: more) {\n    background-color: oklch(0 0 0 / 0.9);\n  }\n}\n\n.media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability=\"unsupported\"]) {\n  display: none;\n}\n\n/* ==========================================================================\n   Native Caption Track\n   ========================================================================== */\n\n.media-minimal-skin {\n  --media-caption-track-duration: var(--media-controls-transition-duration);\n  --media-caption-track-delay: calc(var(--media-controls-transition-delay) + 25ms);\n  --media-caption-track-y: -0.5rem;\n\n  &:has(.media-controls[data-visible]) {\n    --media-caption-track-y: -3rem;\n  }\n}\n\n.media-minimal-skin video::-webkit-media-text-track-container {\n  transition: translate var(--media-caption-track-duration) ease-out;\n  transition-delay: var(--media-caption-track-delay);\n  translate: 0 var(--media-caption-track-y);\n  scale: 0.98;\n  z-index: 1;\n  font-family: inherit;\n}\n\n/* ==========================================================================\n   Icon State Visibility for Video Skins\n\n   Data-attribute-driven visibility rules for multi-state icon buttons.\n   Uses :is() with both element selectors (for HTML custom element wrappers)\n   and class selectors (for React rendered SVG elements).\n   ========================================================================== */\n\n/* --- All icons hidden by default --- */\n\n.media-button--play .media-icon--restart,\n.media-button--play .media-icon--play,\n.media-button--play .media-icon--pause,\n.media-button--mute .media-icon--volume-off,\n.media-button--mute .media-icon--volume-low,\n.media-button--mute .media-icon--volume-high,\n.media-button--fullscreen .media-icon--fullscreen-enter,\n.media-button--fullscreen .media-icon--fullscreen-exit,\n.media-button--pip .media-icon--pip-enter,\n.media-button--pip .media-icon--pip-exit,\n.media-button--captions .media-icon--captions-off,\n.media-button--captions .media-icon--captions-on {\n  display: none;\n  opacity: 0;\n}\n\n/* --- Active icon per state --- */\n\n/* Play: ended → restart */\n.media-button--play[data-ended] .media-icon--restart,\n/* Play: paused (not ended) → play */\n.media-button--play:not([data-ended])[data-paused] .media-icon--play,\n/* Play: playing (not paused, not ended) → pause */\n.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,\n/* Mute: muted → volume off */\n.media-button--mute[data-muted] .media-icon--volume-off,\n/* Mute: volume low (not muted) → volume low */\n.media-button--mute:not([data-muted])[data-volume-level=\"low\"] .media-icon--volume-low,\n/* Mute: volume high (not muted, not low) → volume high */\n.media-button--mute:not([data-muted]):not([data-volume-level=\"low\"]) .media-icon--volume-high,\n/* Fullscreen: not fullscreen → enter */\n.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,\n/* Fullscreen: fullscreen → exit */\n.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,\n/* Picture-in-Picture: not active → enter */\n.media-button--pip:not([data-pip]) .media-icon--pip-enter,\n/* Picture-in-Picture: active → exit */\n.media-button--pip[data-pip] .media-icon--pip-exit,\n/* Captions: not active → captions off */\n.media-button--captions:not([data-active]) .media-icon--captions-off,\n/* Captions: active → captions on */\n.media-button--captions[data-active] .media-icon--captions-on {\n  display: block;\n  opacity: 1;\n}\n\n/* ==========================================================================\n   Tooltip Label State Visibility for Video Skins\n\n   Data-attribute-driven visibility rules for multi-state tooltip labels.\n   Uses adjacent sibling selectors to match button state → tooltip content.\n   ========================================================================== */\n\n/* --- All multi-state labels hidden by default --- */\n\n.media-tooltip-label {\n  display: none;\n}\n\n/* --- Active label per state --- */\n\n/* Play: ended → replay */\n.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,\n/* Play: paused (not ended) → play */\n  .media-button--play:not([data-ended])[data-paused] + .media-tooltip\n  .media-tooltip-label--play,\n/* Play: playing (not paused, not ended) → pause */\n  .media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip\n  .media-tooltip-label--pause,\n/* Fullscreen: not fullscreen → enter */\n  .media-button--fullscreen:not([data-fullscreen]) + .media-tooltip\n  .media-tooltip-label--enter-fullscreen,\n/* Fullscreen: fullscreen → exit */\n  .media-button--fullscreen[data-fullscreen] + .media-tooltip\n  .media-tooltip-label--exit-fullscreen,\n/* Captions: not active → enable */\n  .media-button--captions:not([data-active]) + .media-tooltip\n  .media-tooltip-label--enable-captions,\n/* Captions: active → disable */\n  .media-button--captions[data-active] + .media-tooltip\n  .media-tooltip-label--disable-captions,\n/* PiP: not in pip → enter */\n  .media-button--pip:not([data-pip]) + .media-tooltip\n  .media-tooltip-label--enter-pip,\n/* PiP: in pip → exit */\n  .media-button--pip[data-pip] + .media-tooltip\n  .media-tooltip-label--exit-pip {\n  display: block;\n}\n\n\n/* ==========================================================================\n   Root\n   ========================================================================== */\n\n.media-minimal-skin--video {\n  overflow: clip;\n  background: oklch(0 0 0);\n  --media-border-color: oklch(0 0 0 / 0.15);\n  --media-video-border-radius: var(--media-border-radius, 0.75rem);\n  --media-controls-padding: 0.375rem;\n  --media-controls-transition-duration: 100ms;\n  --media-controls-transition-delay: 0ms;\n  --media-controls-transition-timing-function: ease-out;\n  --media-error-dialog-transition-duration: 250ms;\n  --media-error-dialog-transition-delay: 100ms;\n  --media-error-dialog-transition-timing-function: ease-out;\n  --media-popup-transition-duration: 100ms;\n  --media-popup-transition-timing-function: ease-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    --media-error-dialog-transition-duration: 50ms;\n    --media-error-dialog-transition-delay: 0ms;\n    --media-popup-transition-duration: 0ms;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    --media-border-color: oklch(1 0 0 / 0.15);\n  }\n\n  &:has(.media-controls:not([data-visible])) {\n    /* Slight delay to hide controls on non-touch devices after interaction */\n    @media (pointer: fine) {\n      --media-controls-transition-delay: 500ms;\n      --media-controls-transition-duration: 300ms;\n    }\n    @media (pointer: coarse) {\n      --media-controls-transition-duration: 150ms;\n    }\n    @media (prefers-reduced-motion: reduce) {\n      --media-controls-transition-duration: 50ms;\n    }\n  }\n\n  /* Inner border ring */\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n    border-radius: inherit;\n    box-shadow: inset 0 0 0 1px var(--media-border-color);\n    pointer-events: none;\n  }\n\n  /* Fullscreen */\n  &:fullscreen {\n    --media-border-radius: 0;\n  }\n}\n\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-minimal-skin--video .media-error {\n  position: absolute;\n  inset: 0;\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  outline: none;\n}\n\n.media-minimal-skin--video .media-error__dialog {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  max-width: 16rem;\n  padding: 1rem;\n  color: oklch(1 0 0);\n  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);\n  transition-property: opacity, scale;\n  transition-duration: var(--media-error-dialog-transition-duration);\n  transition-delay: var(--media-error-dialog-transition-delay);\n  transition-timing-function: var(--media-error-dialog-transition-timing-function);\n  pointer-events: auto;\n}\n\n.media-minimal-skin--video .media-error[data-starting-style] .media-error__dialog,\n.media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog {\n  opacity: 0;\n  scale: 0.5;\n}\n.media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog {\n  transition-delay: 0ms;\n}\n\n.media-minimal-skin--video .media-error__content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.375rem 0;\n}\n\n.media-minimal-skin--video .media-error__title {\n  font-size: 1.125rem;\n}\n\n.media-minimal-skin--video .media-error[data-open] ~ .media-controls {\n  display: none;\n}\n\n/* ==========================================================================\n  Controls (hide/show behavior)\n  ========================================================================== */\n\n.media-minimal-skin--video .media-controls {\n  position: absolute;\n  bottom: 0;\n  inset-inline: 0;\n  z-index: 10;\n  gap: 0.5rem;\n  padding: 2rem var(--media-controls-padding) var(--media-controls-padding) var(--media-controls-padding);\n  color: var(--media-color-primary, oklch(1 0 0));\n  transition-duration: var(--media-controls-transition-duration);\n  transition-delay: var(--media-controls-transition-delay);\n  transition-timing-function: var(--media-controls-transition-timing-function);\n\n  @media (pointer: fine) {\n    will-change: translate, filter, opacity;\n    transition-property: translate, filter, opacity;\n  }\n\n  @media (pointer: coarse) {\n    will-change: translate, opacity;\n    transition-property: translate, opacity;\n  }\n\n  &:not([data-visible]) {\n    opacity: 0;\n    pointer-events: none;\n    translate: 0 100%;\n\n    @media (pointer: fine) {\n      filter: blur(8px);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      translate: 0 0;\n      filter: blur(0);\n    }\n  }\n\n  @container media-root (width > 40rem) {\n    gap: 0.875rem;\n    padding: 2.5rem 0.75rem 0.75rem 0.75rem;\n  }\n}\n\n/* Hide cursor when controls are hidden in fullscreen */\n.media-minimal-skin--video:fullscreen:has(.media-controls:not([data-visible])) {\n  cursor: none;\n}\n\n/* ==========================================================================\n   Sliders\n   ========================================================================== */\n\n.media-minimal-skin--video .media-slider__track {\n  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin--video .media-popover--volume {\n  --media-popover-side-offset: 0.5rem;\n  background: transparent;\n  padding: 0.25rem;\n}\n\n/* ==========================================================================\n   Slider preview\n   ========================================================================== */\n\n.media-minimal-skin--video .media-slider__preview {\n  position: absolute;\n  left: var(--media-slider-pointer);\n  bottom: calc(100% + 0.5rem);\n  translate: -50%;\n  opacity: 0;\n  scale: 0.8;\n  filter: blur(8px);\n  transition-property: scale, opacity, filter;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  transform-origin: bottom;\n\n  & .media-preview__thumbnail-wrapper {\n    position: relative;\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      box-shadow:\n        0 0 0 1px oklch(0 0 0 / 0.05),\n        0 1px 3px 0 oklch(0 0 0 / 0.2),\n        0 1px 2px -1px oklch(0 0 0 / 0.2);\n    }\n  }\n\n  & .media-preview__thumbnail {\n    max-width: 11rem;\n  }\n\n  &:has(.media-preview__thumbnail[data-loading]) {\n    max-height: 6rem;\n  }\n}\n.media-minimal-skin--video .media-slider[data-pointing] .media-slider__preview:has([role=\"img\"]:not([data-hidden])) {\n  opacity: 1;\n  scale: 1;\n  filter: blur(0);\n}\n\n";
 
 //#endregion
 //#region src/define/video/minimal-skin.ts
@@ -28,7 +28,7 @@ function getTemplateHTML() {
       <media-controls class="media-controls">
         <media-tooltip-group>
           <div class="media-button-group">
-            <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
+            <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon("restart", { class: "media-icon media-icon--restart" })}
               ${renderIcon("play", { class: "media-icon media-icon--play" })}
               ${renderIcon("pause", { class: "media-icon media-icon--pause" })}
@@ -39,7 +39,7 @@ function getTemplateHTML() {
               <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
             </media-tooltip>
 
-            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
               <span class="media-icon__container">
                 ${renderIcon("seek", { class: "media-icon media-icon--flipped" })}
                 <span class="media-icon__label">${SEEK_TIME}</span>
@@ -49,7 +49,7 @@ function getTemplateHTML() {
               Seek backward ${SEEK_TIME} seconds
             </media-tooltip>
 
-            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
               <span class="media-icon__container">
                 ${renderIcon("seek", { class: "media-icon" })}
                 <span class="media-icon__label">${SEEK_TIME}</span>
@@ -85,12 +85,12 @@ function getTemplateHTML() {
           </div>
 
           <div class="media-button-group">
-            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
+            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
             <media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
               Toggle playback rate
             </media-tooltip>
 
-            <media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
+            <media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
               ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
               ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
               ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
@@ -105,7 +105,7 @@ function getTemplateHTML() {
               </media-volume-slider>
             </media-popover>
 
-            <media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
+            <media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions">
               ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })}
               ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })}
             </media-captions-button>
@@ -113,7 +113,7 @@ function getTemplateHTML() {
               Toggle captions
             </media-tooltip>
 
-            <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip">
+            <media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
               ${renderIcon("pip-enter", { class: "media-icon media-icon--pip-enter" })}
               ${renderIcon("pip-exit", { class: "media-icon media-icon--pip-exit" })}
             </media-pip-button>
@@ -122,7 +122,7 @@ function getTemplateHTML() {
               <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
             </media-tooltip>
 
-            <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
+            <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
               ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })}
               ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })}
             </media-fullscreen-button>