@videojs/html 10.0.0-beta.11 → 10.0.0-beta.12

package/cdn/{poster-odJ4iwIv.js.map → poster-DqjXzMK_.js.map}

@@ -1 +1 @@
-{"version":3,"file":"poster-odJ4iwIv.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-DqjXzMK_.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":"sTAMA,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/{context-Be8C5kVd.js → safe-define-D26LrTu4.js}

@@ -1,7 +1,7 @@
 //#region ../core/dist/dev/core/utils/define-class-prop-hooks.js
 function defineClassPropHooks(Class, BaseClassProto) {
 	for (const prop of Object.getOwnPropertyNames(BaseClassProto)) {
-		if (prop in Class.prototype) continue;
+		if (prop in Class.prototype || prop.startsWith("_")) continue;
 		const descriptor = Object.getOwnPropertyDescriptor(BaseClassProto, prop);
 		if (!descriptor) continue;
 		const config = {};
@@ -34,7 +34,7 @@ function defineClassPropHooks(Class, BaseClassProto) {
 * The `get`, `set`, and `call` methods can be overridden to provide catch-all custom behavior.
 */
 const ProxyMixin = (PrimaryClass, ...AdditionalClasses) => {
-	class MediaProxy {
+	class MediaProxy extends EventTarget {
 		#target = null;
 		get target() {
 			return this.#target;
@@ -63,7 +63,7 @@ const ProxyMixin = (PrimaryClass, ...AdditionalClasses) => {
 
 //#endregion
 //#region ../core/dist/dev/dom/media/proxy.js
-const MediaProxyMixin = ProxyMixin(globalThis.HTMLVideoElement ?? class {}, globalThis.HTMLMediaElement ?? class {}, globalThis.EventTarget ?? class {});
+const VideoProxy = ProxyMixin(globalThis.HTMLVideoElement ?? class {}, globalThis.HTMLMediaElement ?? class {}, globalThis.EventTarget ?? class {});
 
 //#endregion
 //#region ../../node_modules/.pnpm/@lit+context@1.1.6/node_modules/@lit/context/development/lib/context-request-event.js
@@ -162,5 +162,14 @@ const CONTAINER_CONTEXT_KEY = Symbol.for("@videojs/container");
 const containerContext = createContext(CONTAINER_CONTEXT_KEY);
 
 //#endregion
-export { ContextRequestEvent as a, createContext as i, mediaContext as n, defineClassPropHooks as o, playerContext as r, containerContext as t };
-//# sourceMappingURL=context-Be8C5kVd.js.map
+//#region src/define/safe-define.ts
+/** Define a custom element only if not already registered. */
+function safeDefine(element) {
+	const registry = globalThis.customElements;
+	if (!registry || registry.get(element.tagName)) return;
+	registry.define(element.tagName, element);
+}
+
+//#endregion
+export { createContext as a, playerContext as i, containerContext as n, ContextRequestEvent as o, mediaContext as r, defineClassPropHooks as s, safeDefine as t };
+//# sourceMappingURL=safe-define-D26LrTu4.js.map

package/cdn/safe-define-D26LrTu4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"safe-define-D26LrTu4.js","names":["#target"],"sources":["../../core/dist/dev/core/utils/define-class-prop-hooks.js","../../core/dist/dev/core/media/proxy.js","../../core/dist/dev/dom/media/proxy.js","../../../node_modules/.pnpm/@lit+context@1.1.6/node_modules/@lit/context/development/lib/context-request-event.js","../../../node_modules/.pnpm/@lit+context@1.1.6/node_modules/@lit/context/development/lib/create-context.js","../src/player/context.ts","../src/define/safe-define.ts"],"sourcesContent":["//#region src/core/utils/define-class-prop-hooks.ts\nfunction defineClassPropHooks(Class, BaseClassProto) {\n\tfor (const prop of Object.getOwnPropertyNames(BaseClassProto)) {\n\t\tif (prop in Class.prototype || prop.startsWith(\"_\")) continue;\n\t\tconst descriptor = Object.getOwnPropertyDescriptor(BaseClassProto, prop);\n\t\tif (!descriptor) continue;\n\t\tconst config = {};\n\t\tif (typeof descriptor.value === \"function\") config.value = function(...args) {\n\t\t\treturn this.call?.(prop, ...args);\n\t\t};\n\t\telse if (descriptor.get) {\n\t\t\tconfig.get = function() {\n\t\t\t\treturn this.get?.(prop);\n\t\t\t};\n\t\t\tif (descriptor.set) config.set = function(val) {\n\t\t\t\tthis.set?.(prop, val);\n\t\t\t};\n\t\t}\n\t\tObject.defineProperty(Class.prototype, prop, config);\n\t}\n}\n//#endregion\nexport { defineClassPropHooks };\n\n//# sourceMappingURL=define-class-prop-hooks.js.map","import { defineClassPropHooks } from \"../utils/define-class-prop-hooks.js\";\n//#region src/core/media/proxy.ts\n/**\n* This mixin creates an API from the passed classes and proxies the methods and properties to the attached target.\n*\n* Many methods and properties will need no translation and are proxied directly to the attached target.\n* For example, the `play` and `pause` methods are proxied directly to the attached target.\n*\n* Child classes can override the proxied methods and properties to provide custom behavior.\n* For example, the `src` property for HLS media is proxied to the HLS engine, not the target itself.\n*\n* The `get`, `set`, and `call` methods can be overridden to provide catch-all custom behavior.\n*/\nconst ProxyMixin = (PrimaryClass, ...AdditionalClasses) => {\n\tclass MediaProxy extends EventTarget {\n\t\t#target = null;\n\t\tget target() {\n\t\t\treturn this.#target;\n\t\t}\n\t\tget(prop) {\n\t\t\treturn this.target?.[prop];\n\t\t}\n\t\tset(prop, val) {\n\t\t\tif (this.target) this.target[prop] = val;\n\t\t}\n\t\tcall(prop, ...args) {\n\t\t\treturn (this.target?.[prop])?.apply(this.target, args);\n\t\t}\n\t\tattach(target) {\n\t\t\tif (!target || this.#target === target) return;\n\t\t\tthis.#target = target;\n\t\t}\n\t\tdetach() {\n\t\t\tif (!this.#target) return;\n\t\t\tthis.#target = null;\n\t\t}\n\t}\n\tfor (const Class of [PrimaryClass, ...AdditionalClasses]) defineClassPropHooks(MediaProxy, Class.prototype);\n\treturn MediaProxy;\n};\n//#endregion\nexport { ProxyMixin };\n\n//# sourceMappingURL=proxy.js.map","import { ProxyMixin } from \"../../core/media/proxy.js\";\n//#region src/dom/media/proxy.ts\nconst VideoProxy = ProxyMixin(globalThis.HTMLVideoElement ?? class {}, globalThis.HTMLMediaElement ?? class {}, globalThis.EventTarget ?? class {});\n//#endregion\nexport { VideoProxy };\n\n//# sourceMappingURL=proxy.js.map","/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n/**\n * An event fired by a context requester to signal it desires a specified context with the given key.\n *\n * A provider should inspect the `context` property of the event to determine if it has a value that can\n * satisfy the request, calling the `callback` with the requested value if so.\n *\n * If the requested context event contains a truthy `subscribe` value, then a provider can call the callback\n * multiple times if the value is changed, if this is the case the provider should pass an `unsubscribe`\n * method to the callback which consumers can invoke to indicate they no longer wish to receive these updates.\n *\n * If no `subscribe` value is present in the event, then the provider can assume that this is a 'one time'\n * request for the context and can therefore not track the consumer.\n */\nexport class ContextRequestEvent extends Event {\n    /**\n     *\n     * @param context the context key to request\n     * @param contextTarget the original context target of the requester\n     * @param callback the callback that should be invoked when the context with the specified key is available\n     * @param subscribe when, true indicates we want to subscribe to future updates\n     */\n    constructor(context, contextTarget, callback, subscribe) {\n        super('context-request', { bubbles: true, composed: true });\n        this.context = context;\n        this.contextTarget = contextTarget;\n        this.callback = callback;\n        this.subscribe = subscribe ?? false;\n    }\n}\n//# sourceMappingURL=context-request-event.js.map","/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n/**\n * Creates a typed Context.\n *\n * Contexts are compared with strict equality.\n *\n * If you want two separate `createContext()` calls to referer to the same\n * context, then use a key that will by equal under strict equality like a\n * string for `Symbol.for()`:\n *\n * ```ts\n * // true\n * createContext('my-context') === createContext('my-context')\n * // true\n * createContext(Symbol.for('my-context')) === createContext(Symbol.for('my-context'))\n * ```\n *\n * If you want a context to be unique so that it's guaranteed to not collide\n * with other contexts, use a key that's unique under strict equality, like\n * a `Symbol()` or object.:\n *\n * ```\n * // false\n * createContext({}) === createContext({})\n * // false\n * createContext(Symbol('my-context')) === createContext(Symbol('my-context'))\n * ```\n *\n * @param key a context key value\n * @template ValueType the type of value that can be provided by this context.\n * @returns the context key value cast to `Context<K, ValueType>`\n */\nexport function createContext(key) {\n    return key;\n}\n//# sourceMappingURL=create-context.js.map","import type { AnyPlayerStore, Media, MediaContainer, PlayerStore } from '@videojs/core/dom';\nimport { type Context, createContext } from '@videojs/element/context';\n\n// ----------------------------------------\n// Player Context\n// ----------------------------------------\n\nexport const PLAYER_CONTEXT_KEY = Symbol.for('@videojs/player');\n\nexport type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;\n\nexport type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<\n  typeof PLAYER_CONTEXT_KEY,\n  PlayerContextValue<Store>\n>;\n\n/**\n * The default player context instance for consuming the player store in controllers.\n *\n * @public\n */\nexport const playerContext = createContext<PlayerContextValue, typeof PLAYER_CONTEXT_KEY>(PLAYER_CONTEXT_KEY);\n\n// ----------------------------------------\n// Media Context\n// ----------------------------------------\n\nexport const MEDIA_CONTEXT_KEY = Symbol.for('@videojs/media');\n\nexport interface MediaContextValue {\n  media: Media | null;\n  setMedia: (media: Media | null) => void;\n}\n\nexport type MediaContext = Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;\n\nexport const mediaContext = createContext<MediaContextValue, typeof MEDIA_CONTEXT_KEY>(MEDIA_CONTEXT_KEY);\n\n// ----------------------------------------\n// Container Context\n// ----------------------------------------\n\nexport const CONTAINER_CONTEXT_KEY = Symbol.for('@videojs/container');\n\nexport interface ContainerContextValue {\n  container: MediaContainer | null;\n  setContainer: (container: MediaContainer | null) => void;\n}\n\nexport type ContainerContext = Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;\n\nexport const containerContext = createContext<ContainerContextValue, typeof CONTAINER_CONTEXT_KEY>(\n  CONTAINER_CONTEXT_KEY\n);\n","type DefinableElement = CustomElementConstructor & { tagName: string };\n\n/** Define a custom element only if not already registered. */\nexport function safeDefine(element: DefinableElement): void {\n  const registry = globalThis.customElements;\n  if (!registry || registry.get(element.tagName)) return;\n\n  registry.define(element.tagName, element);\n}\n"],"x_google_ignoreList":[3,4],"mappings":";AACA,SAAS,qBAAqB,OAAO,gBAAgB;AACpD,MAAK,MAAM,QAAQ,OAAO,oBAAoB,eAAe,EAAE;AAC9D,MAAI,QAAQ,MAAM,aAAa,KAAK,WAAW,IAAI,CAAE;EACrD,MAAM,aAAa,OAAO,yBAAyB,gBAAgB,KAAK;AACxE,MAAI,CAAC,WAAY;EACjB,MAAM,SAAS,EAAE;AACjB,MAAI,OAAO,WAAW,UAAU,WAAY,QAAO,QAAQ,SAAS,GAAG,MAAM;AAC5E,UAAO,KAAK,OAAO,MAAM,GAAG,KAAK;;WAEzB,WAAW,KAAK;AACxB,UAAO,MAAM,WAAW;AACvB,WAAO,KAAK,MAAM,KAAK;;AAExB,OAAI,WAAW,IAAK,QAAO,MAAM,SAAS,KAAK;AAC9C,SAAK,MAAM,MAAM,IAAI;;;AAGvB,SAAO,eAAe,MAAM,WAAW,MAAM,OAAO;;;;;;;;;;;;;;;;;ACLtD,MAAM,cAAc,cAAc,GAAG,sBAAsB;CAC1D,MAAM,mBAAmB,YAAY;EACpC,UAAU;EACV,IAAI,SAAS;AACZ,UAAO,MAAKA;;EAEb,IAAI,MAAM;AACT,UAAO,KAAK,SAAS;;EAEtB,IAAI,MAAM,KAAK;AACd,OAAI,KAAK,OAAQ,MAAK,OAAO,QAAQ;;EAEtC,KAAK,MAAM,GAAG,MAAM;AACnB,WAAQ,KAAK,SAAS,QAAQ,MAAM,KAAK,QAAQ,KAAK;;EAEvD,OAAO,QAAQ;AACd,OAAI,CAAC,UAAU,MAAKA,WAAY,OAAQ;AACxC,SAAKA,SAAU;;EAEhB,SAAS;AACR,OAAI,CAAC,MAAKA,OAAS;AACnB,SAAKA,SAAU;;;AAGjB,MAAK,MAAM,SAAS,CAAC,cAAc,GAAG,kBAAkB,CAAE,sBAAqB,YAAY,MAAM,UAAU;AAC3G,QAAO;;;;;ACpCR,MAAM,aAAa,WAAW,WAAW,oBAAoB,MAAM,IAAI,WAAW,oBAAoB,MAAM,IAAI,WAAW,eAAe,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;ACgBnJ,IAAa,sBAAb,cAAyC,MAAM;;;;;;;;CAQ3C,YAAY,SAAS,eAAe,UAAU,WAAW;AACrD,QAAM,mBAAmB;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC;AAC3D,OAAK,UAAU;AACf,OAAK,gBAAgB;AACrB,OAAK,WAAW;AAChB,OAAK,YAAY,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACKtC,SAAgB,cAAc,KAAK;AAC/B,QAAO;;;;;AC9BX,MAAa,qBAAqB,OAAO,IAAI,kBAAkB;;;;;;AAc/D,MAAa,gBAAgB,cAA6D,mBAAmB;AAM7G,MAAa,oBAAoB,OAAO,IAAI,iBAAiB;AAS7D,MAAa,eAAe,cAA2D,kBAAkB;AAMzG,MAAa,wBAAwB,OAAO,IAAI,qBAAqB;AASrE,MAAa,mBAAmB,cAC9B,sBACD;;;;;AClDD,SAAgB,WAAW,SAAiC;CAC1D,MAAM,WAAW,WAAW;AAC5B,KAAI,CAAC,YAAY,SAAS,IAAI,QAAQ,QAAQ,CAAE;AAEhD,UAAS,OAAO,QAAQ,SAAS,QAAQ"}

package/cdn/safe-define-EEn8NTOG.js

@@ -0,0 +1,14 @@
+function e(e,t){for(let n of Object.getOwnPropertyNames(t)){if(n in e.prototype||n.startsWith(`_`))continue;let r=Object.getOwnPropertyDescriptor(t,n);if(!r)continue;let i={};typeof r.value==`function`?i.value=function(...e){return this.call?.(n,...e)}:r.get&&(i.get=function(){return this.get?.(n)},r.set&&(i.set=function(e){this.set?.(n,e)})),Object.defineProperty(e.prototype,n,i)}}((t,...n)=>{class r extends EventTarget{#e=null;get target(){return this.#e}get(e){return this.target?.[e]}set(e,t){this.target&&(this.target[e]=t)}call(e,...t){return(this.target?.[e])?.apply(this.target,t)}attach(e){!e||this.#e===e||(this.#e=e)}detach(){this.#e&&=null}}for(let i of[t,...n])e(r,i.prototype);return r})(globalThis.HTMLVideoElement??class{},globalThis.HTMLMediaElement??class{},globalThis.EventTarget??class{});
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var t=class extends Event{constructor(e,t,n,r){super(`context-request`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t,this.callback=n,this.subscribe=r??!1}};
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+function n(e){return e}const r=n(Symbol.for(`@videojs/player`)),i=n(Symbol.for(`@videojs/media`)),a=n(Symbol.for(`@videojs/container`));function o(e){let t=globalThis.customElements;!t||t.get(e.tagName)||t.define(e.tagName,e)}export{n as a,r as i,a as n,t as o,i as r,e as s,o as t};
+//# sourceMappingURL=safe-define-EEn8NTOG.js.map

package/cdn/safe-define-EEn8NTOG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"safe-define-EEn8NTOG.js","names":["#target","createContext"],"sources":["../../core/dist/default/core/utils/define-class-prop-hooks.js","../../core/dist/default/core/media/proxy.js","../../core/dist/default/dom/media/proxy.js","../../../node_modules/.pnpm/@lit+context@1.1.6/node_modules/@lit/context/lib/context-request-event.js","../../../node_modules/.pnpm/@lit+context@1.1.6/node_modules/@lit/context/lib/create-context.js","../src/player/context.ts","../src/define/safe-define.ts"],"sourcesContent":["//#region src/core/utils/define-class-prop-hooks.ts\nfunction defineClassPropHooks(Class, BaseClassProto) {\n\tfor (const prop of Object.getOwnPropertyNames(BaseClassProto)) {\n\t\tif (prop in Class.prototype || prop.startsWith(\"_\")) continue;\n\t\tconst descriptor = Object.getOwnPropertyDescriptor(BaseClassProto, prop);\n\t\tif (!descriptor) continue;\n\t\tconst config = {};\n\t\tif (typeof descriptor.value === \"function\") config.value = function(...args) {\n\t\t\treturn this.call?.(prop, ...args);\n\t\t};\n\t\telse if (descriptor.get) {\n\t\t\tconfig.get = function() {\n\t\t\t\treturn this.get?.(prop);\n\t\t\t};\n\t\t\tif (descriptor.set) config.set = function(val) {\n\t\t\t\tthis.set?.(prop, val);\n\t\t\t};\n\t\t}\n\t\tObject.defineProperty(Class.prototype, prop, config);\n\t}\n}\n//#endregion\nexport { defineClassPropHooks };\n\n//# sourceMappingURL=define-class-prop-hooks.js.map","import { defineClassPropHooks } from \"../utils/define-class-prop-hooks.js\";\n//#region src/core/media/proxy.ts\n/**\n* This mixin creates an API from the passed classes and proxies the methods and properties to the attached target.\n*\n* Many methods and properties will need no translation and are proxied directly to the attached target.\n* For example, the `play` and `pause` methods are proxied directly to the attached target.\n*\n* Child classes can override the proxied methods and properties to provide custom behavior.\n* For example, the `src` property for HLS media is proxied to the HLS engine, not the target itself.\n*\n* The `get`, `set`, and `call` methods can be overridden to provide catch-all custom behavior.\n*/\nconst ProxyMixin = (PrimaryClass, ...AdditionalClasses) => {\n\tclass MediaProxy extends EventTarget {\n\t\t#target = null;\n\t\tget target() {\n\t\t\treturn this.#target;\n\t\t}\n\t\tget(prop) {\n\t\t\treturn this.target?.[prop];\n\t\t}\n\t\tset(prop, val) {\n\t\t\tif (this.target) this.target[prop] = val;\n\t\t}\n\t\tcall(prop, ...args) {\n\t\t\treturn (this.target?.[prop])?.apply(this.target, args);\n\t\t}\n\t\tattach(target) {\n\t\t\tif (!target || this.#target === target) return;\n\t\t\tthis.#target = target;\n\t\t}\n\t\tdetach() {\n\t\t\tif (!this.#target) return;\n\t\t\tthis.#target = null;\n\t\t}\n\t}\n\tfor (const Class of [PrimaryClass, ...AdditionalClasses]) defineClassPropHooks(MediaProxy, Class.prototype);\n\treturn MediaProxy;\n};\n//#endregion\nexport { ProxyMixin };\n\n//# sourceMappingURL=proxy.js.map","import { ProxyMixin } from \"../../core/media/proxy.js\";\n//#region src/dom/media/proxy.ts\nconst VideoProxy = ProxyMixin(globalThis.HTMLVideoElement ?? class {}, globalThis.HTMLMediaElement ?? class {}, globalThis.EventTarget ?? class {});\n//#endregion\nexport { VideoProxy };\n\n//# sourceMappingURL=proxy.js.map","/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nclass s extends Event{constructor(s,t,e,o){super(\"context-request\",{bubbles:!0,composed:!0}),this.context=s,this.contextTarget=t,this.callback=e,this.subscribe=o??!1}}export{s as ContextRequestEvent};\n//# sourceMappingURL=context-request-event.js.map\n","/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nfunction n(n){return n}export{n as createContext};\n//# sourceMappingURL=create-context.js.map\n","import type { AnyPlayerStore, Media, MediaContainer, PlayerStore } from '@videojs/core/dom';\nimport { type Context, createContext } from '@videojs/element/context';\n\n// ----------------------------------------\n// Player Context\n// ----------------------------------------\n\nexport const PLAYER_CONTEXT_KEY = Symbol.for('@videojs/player');\n\nexport type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;\n\nexport type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<\n  typeof PLAYER_CONTEXT_KEY,\n  PlayerContextValue<Store>\n>;\n\n/**\n * The default player context instance for consuming the player store in controllers.\n *\n * @public\n */\nexport const playerContext = createContext<PlayerContextValue, typeof PLAYER_CONTEXT_KEY>(PLAYER_CONTEXT_KEY);\n\n// ----------------------------------------\n// Media Context\n// ----------------------------------------\n\nexport const MEDIA_CONTEXT_KEY = Symbol.for('@videojs/media');\n\nexport interface MediaContextValue {\n  media: Media | null;\n  setMedia: (media: Media | null) => void;\n}\n\nexport type MediaContext = Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;\n\nexport const mediaContext = createContext<MediaContextValue, typeof MEDIA_CONTEXT_KEY>(MEDIA_CONTEXT_KEY);\n\n// ----------------------------------------\n// Container Context\n// ----------------------------------------\n\nexport const CONTAINER_CONTEXT_KEY = Symbol.for('@videojs/container');\n\nexport interface ContainerContextValue {\n  container: MediaContainer | null;\n  setContainer: (container: MediaContainer | null) => void;\n}\n\nexport type ContainerContext = Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;\n\nexport const containerContext = createContext<ContainerContextValue, typeof CONTAINER_CONTEXT_KEY>(\n  CONTAINER_CONTEXT_KEY\n);\n","type DefinableElement = CustomElementConstructor & { tagName: string };\n\n/** Define a custom element only if not already registered. */\nexport function safeDefine(element: DefinableElement): void {\n  const registry = globalThis.customElements;\n  if (!registry || registry.get(element.tagName)) return;\n\n  registry.define(element.tagName, element);\n}\n"],"x_google_ignoreList":[3,4],"mappings":"AACA,SAAS,EAAqB,EAAO,EAAgB,CACpD,IAAK,IAAM,KAAQ,OAAO,oBAAoB,EAAe,CAAE,CAC9D,GAAI,KAAQ,EAAM,WAAa,EAAK,WAAW,IAAI,CAAE,SACrD,IAAM,EAAa,OAAO,yBAAyB,EAAgB,EAAK,CACxE,GAAI,CAAC,EAAY,SACjB,IAAM,EAAS,EAAE,CACb,OAAO,EAAW,OAAU,WAAY,EAAO,MAAQ,SAAS,GAAG,EAAM,CAC5E,OAAO,KAAK,OAAO,EAAM,GAAG,EAAK,EAEzB,EAAW,MACnB,EAAO,IAAM,UAAW,CACvB,OAAO,KAAK,MAAM,EAAK,EAEpB,EAAW,MAAK,EAAO,IAAM,SAAS,EAAK,CAC9C,KAAK,MAAM,EAAM,EAAI,IAGvB,OAAO,eAAe,EAAM,UAAW,EAAM,EAAO,ICLlC,EAAc,GAAG,IAAsB,CAC1D,MAAM,UAAmB,WAAY,CACpC,GAAU,KACV,IAAI,QAAS,CACZ,OAAO,MAAA,EAER,IAAI,EAAM,CACT,OAAO,KAAK,SAAS,GAEtB,IAAI,EAAM,EAAK,CACV,KAAK,SAAQ,KAAK,OAAO,GAAQ,GAEtC,KAAK,EAAM,GAAG,EAAM,CACnB,OAAQ,KAAK,SAAS,KAAQ,MAAM,KAAK,OAAQ,EAAK,CAEvD,OAAO,EAAQ,CACV,CAAC,GAAU,MAAA,IAAiB,IAChC,MAAA,EAAe,GAEhB,QAAS,CACH,AACL,MAAA,IAAe,MAGjB,IAAK,IAAM,IAAS,CAAC,EAAc,GAAG,EAAkB,CAAE,EAAqB,EAAY,EAAM,UAAU,CAC3G,OAAO,ICpCsB,WAAW,kBAAoB,KAAM,GAAI,WAAW,kBAAoB,KAAM,GAAI,WAAW,aAAe,KAAM,GAAG;;;;;;ACGnJ,IAAM,EAAN,cAAgB,KAAK,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,GAAG,CAAC;;;;;;ACApK,SAAS,EAAE,EAAE,CAAC,OAAO,ECgBrB,MAAa,EAAgBC,EAdK,OAAO,IAAI,kBAAkB,CAc8C,CAehG,EAAeA,EATK,OAAO,IAAI,iBAAiB,CAS4C,CAe5F,EAAmBA,EATK,OAAO,IAAI,qBAAqB,CAWpE,CClDD,SAAgB,EAAW,EAAiC,CAC1D,IAAM,EAAW,WAAW,eACxB,CAAC,GAAY,EAAS,IAAI,EAAQ,QAAQ,EAE9C,EAAS,OAAO,EAAQ,QAAS,EAAQ"}

package/cdn/shallow-equal-CaIo44Co.js

@@ -0,0 +1,15 @@
+//#region ../utils/dist/object/shallow-equal.js
+const hasOwn = Object.prototype.hasOwnProperty;
+function shallowEqual(a, b) {
+	if (Object.is(a, b)) return true;
+	if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) return false;
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	for (const key of keysA) if (!hasOwn.call(b, key) || !Object.is(a[key], b[key])) return false;
+	return true;
+}
+
+//#endregion
+export { shallowEqual as t };
+//# sourceMappingURL=shallow-equal-CaIo44Co.js.map

package/cdn/shallow-equal-CaIo44Co.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shallow-equal-CaIo44Co.js","names":[],"sources":["../../utils/dist/object/shallow-equal.js"],"sourcesContent":["//#region src/object/shallow-equal.ts\nconst hasOwn = Object.prototype.hasOwnProperty;\nfunction shallowEqual(a, b) {\n\tif (Object.is(a, b)) return true;\n\tif (typeof a !== \"object\" || a === null || typeof b !== \"object\" || b === null) return false;\n\tconst keysA = Object.keys(a);\n\tconst keysB = Object.keys(b);\n\tif (keysA.length !== keysB.length) return false;\n\tfor (const key of keysA) if (!hasOwn.call(b, key) || !Object.is(a[key], b[key])) return false;\n\treturn true;\n}\n//#endregion\nexport { shallowEqual };\n\n//# sourceMappingURL=shallow-equal.js.map"],"mappings":";AACA,MAAM,SAAS,OAAO,UAAU;AAChC,SAAS,aAAa,GAAG,GAAG;AAC3B,KAAI,OAAO,GAAG,GAAG,EAAE,CAAE,QAAO;AAC5B,KAAI,OAAO,MAAM,YAAY,MAAM,QAAQ,OAAO,MAAM,YAAY,MAAM,KAAM,QAAO;CACvF,MAAM,QAAQ,OAAO,KAAK,EAAE;CAC5B,MAAM,QAAQ,OAAO,KAAK,EAAE;AAC5B,KAAI,MAAM,WAAW,MAAM,OAAQ,QAAO;AAC1C,MAAK,MAAM,OAAO,MAAO,KAAI,CAAC,OAAO,KAAK,GAAG,IAAI,IAAI,CAAC,OAAO,GAAG,EAAE,MAAM,EAAE,KAAK,CAAE,QAAO;AACxF,QAAO"}

package/cdn/shallow-equal-zo2IZwso.js

@@ -0,0 +1,2 @@
+const e=Object.prototype.hasOwnProperty;function t(t,n){if(Object.is(t,n))return!0;if(typeof t!=`object`||!t||typeof n!=`object`||!n)return!1;let r=Object.keys(t),i=Object.keys(n);if(r.length!==i.length)return!1;for(let i of r)if(!e.call(n,i)||!Object.is(t[i],n[i]))return!1;return!0}export{t};
+//# sourceMappingURL=shallow-equal-zo2IZwso.js.map

package/cdn/shallow-equal-zo2IZwso.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shallow-equal-zo2IZwso.js","names":[],"sources":["../../utils/dist/object/shallow-equal.js"],"sourcesContent":["//#region src/object/shallow-equal.ts\nconst hasOwn = Object.prototype.hasOwnProperty;\nfunction shallowEqual(a, b) {\n\tif (Object.is(a, b)) return true;\n\tif (typeof a !== \"object\" || a === null || typeof b !== \"object\" || b === null) return false;\n\tconst keysA = Object.keys(a);\n\tconst keysB = Object.keys(b);\n\tif (keysA.length !== keysB.length) return false;\n\tfor (const key of keysA) if (!hasOwn.call(b, key) || !Object.is(a[key], b[key])) return false;\n\treturn true;\n}\n//#endregion\nexport { shallowEqual };\n\n//# sourceMappingURL=shallow-equal.js.map"],"mappings":"AACA,MAAM,EAAS,OAAO,UAAU,eAChC,SAAS,EAAa,EAAG,EAAG,CAC3B,GAAI,OAAO,GAAG,EAAG,EAAE,CAAE,MAAO,GAC5B,GAAI,OAAO,GAAM,WAAY,GAAc,OAAO,GAAM,WAAY,EAAY,MAAO,GACvF,IAAM,EAAQ,OAAO,KAAK,EAAE,CACtB,EAAQ,OAAO,KAAK,EAAE,CAC5B,GAAI,EAAM,SAAW,EAAM,OAAQ,MAAO,GAC1C,IAAK,IAAM,KAAO,EAAO,GAAI,CAAC,EAAO,KAAK,EAAG,EAAI,EAAI,CAAC,OAAO,GAAG,EAAE,GAAM,EAAE,GAAK,CAAE,MAAO,GACxF,MAAO"}

package/cdn/video-minimal.dev.js

@@ -1,12 +1,11 @@
-import { o as ReactiveElement } from "./create-player-AcfnN3li.js";
-import { g as createStyles, h as SkinMixin } from "./volume-slider-D7BOdSDF.js";
-import "./context-Be8C5kVd.js";
-import "./safe-define-B8lHgj_K.js";
-import "./poster-Olv5zDI_.js";
-import { t as renderIcon } from "./minimal-DBMdC_0I.js";
+import { o as ReactiveElement } from "./create-player-BoPlCSNw.js";
+import { g as createStyles, h as SkinMixin } from "./volume-slider-BEXiB6_j.js";
+import { t as safeDefine } from "./safe-define-D26LrTu4.js";
+import "./poster-BPMPXyn3.js";
+import { t as renderIcon } from "./minimal-fA2p2Jrn.js";
 
 //#region inline-css:src/define/video/minimal-skin.js
-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  text-align: center;\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-shadow: none;\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";
+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  container: media-root / inline-size;\n  position: relative;\n  isolation: isolate;\n  display: block;\n  height: 100%;\n  width: 100%;\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  line-height: 1.5;\n  letter-spacing: normal;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n\n  & > * {\n    font-size: 0.75rem; /* 12px at 100% font size */\n  }\n\n  @container media-root (width > 48rem) {\n    & > * {\n      font-size: 0.875rem; /* 14px at 100% font size */\n    }\n  }\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);\n  opacity: 0;\n  pointer-events: none;\n  transition-property: opacity, backdrop-filter;\n  transition-duration: var(--media-controls-transition-duration);\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.2);\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:not([data-open]) {\n  display: none;\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  background-color: var(--media-controls-background-color);\n  backdrop-filter: var(--media-controls-backdrop-filter);\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  container: media-time-controls / inline-size;\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  flex: 1;\n  gap: 0.75rem;\n}\n\n.media-minimal-skin .media-time-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.media-minimal-skin .media-time {\n  font-variant-numeric: tabular-nums;\n}\n\n.media-minimal-skin .media-time--current,\n.media-minimal-skin .media-time-separator {\n  display: none;\n}\n\n@container media-root (width > 42rem) {\n  .media-minimal-skin .media-time-controls {\n    flex-direction: row;\n  }\n\n  .media-minimal-skin .media-time--duration,\n  .media-minimal-skin .media-time-separator {\n    color: oklch(from currentColor l c h / 0.6);\n  }\n\n  .media-minimal-skin .media-time--current,\n  .media-minimal-skin .media-time-separator {\n    display: inline;\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: 0.5rem;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  transition-property: background-color, outline-offset, scale;\n  /* Fix weird jumping when clicking on the buttons in Safari. */\n  will-change: scale;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  cursor: pointer;\n  user-select: none;\n  text-align: center;\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: 1rem;\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-shadow: none;\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; /* Hard coded due to size limitations. */\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\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   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 > 42rem) {\n    gap: 0.125rem;\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  pointer-events: none;\n\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__time {\n    display: block;\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: 2rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 2rem;\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.5rem;\n  background-color: var(--media-tooltip-background-color);\n  backdrop-filter: var(--media-tooltip-backdrop-filter);\n  box-shadow:\n    0 0 0 1px var(--media-tooltip-border-color),\n    0 4px 6px -1px oklch(0 0 0 / 0.1),\n    0 2px 4px -2px oklch(0 0 0 / 0.1);\n  color: var(--media-tooltip-text-color);\n  font-size: 0.75rem; /* 12px at 100% font size */\n  white-space: nowrap;\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\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: 25ms;\n  --media-caption-track-y: -0.5rem;\n\n  &:has(.media-controls[data-visible]) {\n    --media-caption-track-y: -5rem;\n  }\n\n  @container media-root (width > 42rem) {\n    &:has(.media-controls[data-visible]) > * {\n      --media-caption-track-y: -3rem;\n    }\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-background-color: transparent;\n  --media-controls-transition-duration: 100ms;\n  --media-controls-transition-timing-function: ease-out;\n  --media-error-dialog-transition-duration: 150ms;\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  --media-tooltip-background-color: oklch(1 0 0 / 0.1);\n  --media-tooltip-border-color: transparent;\n  --media-tooltip-backdrop-filter: blur(16px) saturate(1.5);\n  --media-tooltip-text-color: currentColor;\n  --media-tooltip-side-offset: 0.5rem;\n  --media-popover-side-offset: 1.5rem;\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  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {\n    --media-controls-background-color: oklch(0 0 0);\n    --media-tooltip-background-color: oklch(0 0 0);\n  }\n\n  @container media-root (width > 42rem) {\n    & > * {\n      --media-popover-side-offset: 0rem;\n    }\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-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  padding: 0.25rem;\n  column-gap: 0.5rem;\n  flex-wrap: wrap;\n  position: absolute;\n  bottom: 0.25rem;\n  inset-inline: 0.25rem;\n  z-index: 10;\n  color: oklch(1 0 0);\n  border-radius: 0.75rem;\n  transition-duration: var(--media-controls-transition-duration);\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  & .media-time-controls {\n    order: -1;\n    flex: 0 0 100%;\n    padding-inline: 0.625rem;\n  }\n\n  & .media-button-group:first-child {\n    flex: 1;\n    text-align: left;\n  }\n\n  & .media-button-group:last-child {\n    flex: 1;\n    justify-content: end;\n  }\n\n  @container media-root (width > 42rem) {\n    flex-wrap: nowrap;\n    bottom: 0.5rem;\n    inset-inline: 0.5rem;\n\n    & .media-time-controls {\n      order: unset;\n      flex: 1;\n    }\n\n    & .media-button-group:first-child,\n    & .media-button-group:last-child {\n      flex: 0 0 auto;\n    }\n  }\n}\n\n/* Hide cursor when controls are hidden */\n.media-minimal-skin--video: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  background: transparent;\n  padding-block: 0.75rem;\n  border-radius: 0.75rem;\n\n  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {\n    background: var(--media-controls-background-color);\n  }\n}\n\n/* ==========================================================================\n   Slider preview\n   ========================================================================== */\n\n.media-minimal-skin--video .media-slider__preview {\n  --media-preview-max-width: 11rem;\n  --media-preview-padding: -0.5rem;\n  /**\n    Inset is the difference between the container width and the slider (100%) width.\n    We only add to the end as we render the time there.\n  */\n  --media-preview-inset: calc(100cqi - 100%);\n\n  position: absolute;\n  left: clamp(\n    calc(var(--media-preview-max-width) / 2 + var(--media-preview-padding)),\n    var(--media-slider-pointer),\n    calc(100% - var(--media-preview-max-width) / 2 - var(--media-preview-padding) + var(--media-preview-inset))\n  );\n  bottom: 100%;\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  @container media-root (width > 42rem) {\n    bottom: calc(100% + 0.25rem);\n    left: var(--media-slider-pointer);\n  }\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: var(--media-preview-max-width);\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
@@ -26,6 +25,18 @@ function getTemplateHTML() {
         ${renderIcon("spinner", { class: "media-icon" })}
       </media-buffering-indicator>
 
+      <media-error-dialog class="media-error">
+        <div class="media-error__dialog">
+          <div class="media-error__content">
+            <media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title>
+            <media-alert-dialog-description class="media-error__description"></media-alert-dialog-description>
+          </div>
+          <div class="media-error__actions">
+            <media-alert-dialog-close class="media-button media-button--primary">OK</media-alert-dialog-close>
+          </div>
+        </div>
+      </media-error-dialog>
+
       <media-controls class="media-controls">
         <media-tooltip-group>
           <div class="media-button-group">
@@ -62,10 +73,10 @@ function getTemplateHTML() {
           </div>
 
           <div class="media-time-controls">
-            <media-time-group class="media-time">
-              <media-time type="current" class="media-time__value media-time__value--current"></media-time>
-              <media-time-separator class="media-time__separator"></media-time-separator>
-              <media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
+            <media-time-group class="media-time-group">
+              <media-time type="current" class="media-time media-time--current"></media-time>
+              <media-time-separator class="media-time-separator"></media-time-separator>
+              <media-time type="duration" class="media-time media-time--duration"></media-time>
             </media-time-group>
 
             <media-time-slider class="media-slider">
@@ -79,7 +90,7 @@ function getTemplateHTML() {
                 <div class="media-preview__thumbnail-wrapper">
                   <media-slider-thumbnail class="media-preview__thumbnail"></media-slider-thumbnail>
                 </div>
-                <media-slider-value type="pointer" class="media-preview__timestamp"></media-slider-value>
+                <media-slider-value type="pointer" class="media-time media-preview__time"></media-slider-value>
                 ${renderIcon("spinner", { class: "media-preview__spinner media-icon" })}
               </div>
             </media-time-slider>
@@ -150,7 +161,7 @@ var MinimalVideoSkinElement = class extends SkinMixin(ReactiveElement) {
 		this.getTemplateHTML = getTemplateHTML;
 	}
 };
-customElements.define(MinimalVideoSkinElement.tagName, MinimalVideoSkinElement);
+safeDefine(MinimalVideoSkinElement);
 
 //#endregion
 //# sourceMappingURL=video-minimal.dev.js.map