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

package/cdn/{media-attach-mixin-tFNcHnvo.js → media-attach-mixin-D5_nfJpa.js}

@@ -1,2 +1,2 @@
-import{a as e,n as t}from"./context-C_e06fGU.js";function n(t){return n=>{class r extends n{#e=null;#t=null;getMediaTarget(){return this}connectedCallback(){super.connectedCallback?.(),this.dispatchEvent(new e(t,this,(e,t)=>{t&&(this.#t=t),this.#e=e?.setMedia??null,this.isConnected&&this.#e?.(this.getMediaTarget())},!0))}disconnectedCallback(){super.disconnectedCallback?.(),this.#e?.(null),this.#t?.(),this.#t=null,this.#e=null}}return r}}const r=n(t);export{r as t};
-//# sourceMappingURL=media-attach-mixin-tFNcHnvo.js.map
+import{a as e,n as t}from"./context-CUBywtsB.js";function n(t){return n=>{class r extends n{#e=null;#t=null;getMediaTarget(){return this}connectedCallback(){super.connectedCallback?.(),this.dispatchEvent(new e(t,this,(e,t)=>{t&&(this.#t=t),this.#e=e?.setMedia??null,this.isConnected&&this.#e?.(this.getMediaTarget())},!0))}disconnectedCallback(){super.disconnectedCallback?.(),this.#e?.(null),this.#t?.(),this.#t=null,this.#e=null}}return r}}const r=n(t);export{r as t};
+//# sourceMappingURL=media-attach-mixin-D5_nfJpa.js.map

package/cdn/{media-attach-mixin-tFNcHnvo.js.map → media-attach-mixin-D5_nfJpa.js.map}

@@ -1 +1 @@
-{"version":3,"file":"media-attach-mixin-tFNcHnvo.js","names":["ContextEvent","#unsubscribe","#setMedia"],"sources":["../src/store/media-attach-mixin.ts"],"sourcesContent":["import type { Media } from '@videojs/core/dom';\nimport { ContextEvent } from '@videojs/element/context';\nimport type { CustomElement } from '@videojs/utils/dom';\nimport type { AnyConstructor, Constructor } from '@videojs/utils/types';\nimport { type MediaContext, mediaContext } from '../player/context';\n\nexport type MediaAttachMixin = <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => Class;\n\n/**\n * Create a mixin that consumes `mediaContext` and registers the\n * element as the media with the provider.\n *\n * Uses the raw context-request protocol so it works with any\n * `HTMLElement` subclass — no `ReactiveControllerHost` required.\n *\n * @param context - The media context to consume.\n */\nexport function createMediaAttachMixin(context: MediaContext): MediaAttachMixin {\n  return <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => {\n    class MediaAttachElement extends (BaseClass as unknown as Constructor<CustomElement>) {\n      #setMedia: ((media: Media | null) => void) | null = null;\n      #unsubscribe: (() => void) | null = null;\n\n      getMediaTarget(): Media | null {\n        return this as unknown as Media;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback?.();\n\n        this.dispatchEvent(\n          new ContextEvent(\n            context,\n            this,\n            (value, unsubscribe) => {\n              if (unsubscribe) this.#unsubscribe = unsubscribe;\n              this.#setMedia = value?.setMedia ?? null;\n              if (this.isConnected) {\n                this.#setMedia?.(this.getMediaTarget());\n              }\n            },\n            true\n          )\n        );\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback?.();\n        this.#setMedia?.(null);\n        this.#unsubscribe?.();\n        this.#unsubscribe = null;\n        this.#setMedia = null;\n      }\n    }\n\n    return MediaAttachElement as unknown as Class;\n  };\n}\n\nexport const MediaAttachMixin = createMediaAttachMixin(mediaContext);\n"],"mappings":"iDAiBA,SAAgB,EAAuB,EAAyC,CAC9E,MAAmD,IAAqB,CACtE,MAAM,UAA4B,CAAoD,CACpF,GAAoD,KACpD,GAAoC,KAEpC,gBAA+B,CAC7B,OAAO,KAGT,mBAA6B,CAC3B,MAAM,qBAAqB,CAE3B,KAAK,cACH,IAAIA,EACF,EACA,MACC,EAAO,IAAgB,CAClB,IAAa,MAAA,EAAoB,GACrC,MAAA,EAAiB,GAAO,UAAY,KAChC,KAAK,aACP,MAAA,IAAiB,KAAK,gBAAgB,CAAC,EAG3C,GACD,CACF,CAGH,sBAAgC,CAC9B,MAAM,wBAAwB,CAC9B,MAAA,IAAiB,KAAK,CACtB,MAAA,KAAqB,CACrB,MAAA,EAAoB,KACpB,MAAA,EAAiB,MAIrB,OAAO,GAIX,MAAa,EAAmB,EAAuB,EAAa"}
+{"version":3,"file":"media-attach-mixin-D5_nfJpa.js","names":["ContextEvent","#unsubscribe","#setMedia"],"sources":["../src/store/media-attach-mixin.ts"],"sourcesContent":["import type { Media } from '@videojs/core/dom';\nimport { ContextEvent } from '@videojs/element/context';\nimport type { CustomElement } from '@videojs/utils/dom';\nimport type { AnyConstructor, Constructor } from '@videojs/utils/types';\nimport { type MediaContext, mediaContext } from '../player/context';\n\nexport type MediaAttachMixin = <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => Class;\n\n/**\n * Create a mixin that consumes `mediaContext` and registers the\n * element as the media with the provider.\n *\n * Uses the raw context-request protocol so it works with any\n * `HTMLElement` subclass — no `ReactiveControllerHost` required.\n *\n * @param context - The media context to consume.\n */\nexport function createMediaAttachMixin(context: MediaContext): MediaAttachMixin {\n  return <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => {\n    class MediaAttachElement extends (BaseClass as unknown as Constructor<CustomElement>) {\n      #setMedia: ((media: Media | null) => void) | null = null;\n      #unsubscribe: (() => void) | null = null;\n\n      getMediaTarget(): Media | null {\n        return this as unknown as Media;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback?.();\n\n        this.dispatchEvent(\n          new ContextEvent(\n            context,\n            this,\n            (value, unsubscribe) => {\n              if (unsubscribe) this.#unsubscribe = unsubscribe;\n              this.#setMedia = value?.setMedia ?? null;\n              if (this.isConnected) {\n                this.#setMedia?.(this.getMediaTarget());\n              }\n            },\n            true\n          )\n        );\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback?.();\n        this.#setMedia?.(null);\n        this.#unsubscribe?.();\n        this.#unsubscribe = null;\n        this.#setMedia = null;\n      }\n    }\n\n    return MediaAttachElement as unknown as Class;\n  };\n}\n\nexport const MediaAttachMixin = createMediaAttachMixin(mediaContext);\n"],"mappings":"iDAiBA,SAAgB,EAAuB,EAAyC,CAC9E,MAAmD,IAAqB,CACtE,MAAM,UAA4B,CAAoD,CACpF,GAAoD,KACpD,GAAoC,KAEpC,gBAA+B,CAC7B,OAAO,KAGT,mBAA6B,CAC3B,MAAM,qBAAqB,CAE3B,KAAK,cACH,IAAIA,EACF,EACA,MACC,EAAO,IAAgB,CAClB,IAAa,MAAA,EAAoB,GACrC,MAAA,EAAiB,GAAO,UAAY,KAChC,KAAK,aACP,MAAA,IAAiB,KAAK,gBAAgB,CAAC,EAG3C,GACD,CACF,CAGH,sBAAgC,CAC9B,MAAM,wBAAwB,CAC9B,MAAA,IAAiB,KAAK,CACtB,MAAA,KAAqB,CACrB,MAAA,EAAoB,KACpB,MAAA,EAAiB,MAIrB,OAAO,GAIX,MAAa,EAAmB,EAAuB,EAAa"}

package/cdn/{media-attach-mixin-ChyNp2eK.js → media-attach-mixin-U_KQB_9O.js}

@@ -1,4 +1,4 @@
-import { a as ContextRequestEvent, n as mediaContext } from "./context-DTY0nOpS.js";
+import { a as ContextRequestEvent, n as mediaContext } from "./context-Be8C5kVd.js";
 
 //#region src/store/media-attach-mixin.ts
 /**
@@ -41,4 +41,4 @@ const MediaAttachMixin = createMediaAttachMixin(mediaContext);
 
 //#endregion
 export { MediaAttachMixin as t };
-//# sourceMappingURL=media-attach-mixin-ChyNp2eK.js.map
+//# sourceMappingURL=media-attach-mixin-U_KQB_9O.js.map

package/cdn/{media-attach-mixin-ChyNp2eK.js.map → media-attach-mixin-U_KQB_9O.js.map}

@@ -1 +1 @@
-{"version":3,"file":"media-attach-mixin-ChyNp2eK.js","names":["ContextEvent","#unsubscribe","#setMedia"],"sources":["../src/store/media-attach-mixin.ts"],"sourcesContent":["import type { Media } from '@videojs/core/dom';\nimport { ContextEvent } from '@videojs/element/context';\nimport type { CustomElement } from '@videojs/utils/dom';\nimport type { AnyConstructor, Constructor } from '@videojs/utils/types';\nimport { type MediaContext, mediaContext } from '../player/context';\n\nexport type MediaAttachMixin = <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => Class;\n\n/**\n * Create a mixin that consumes `mediaContext` and registers the\n * element as the media with the provider.\n *\n * Uses the raw context-request protocol so it works with any\n * `HTMLElement` subclass — no `ReactiveControllerHost` required.\n *\n * @param context - The media context to consume.\n */\nexport function createMediaAttachMixin(context: MediaContext): MediaAttachMixin {\n  return <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => {\n    class MediaAttachElement extends (BaseClass as unknown as Constructor<CustomElement>) {\n      #setMedia: ((media: Media | null) => void) | null = null;\n      #unsubscribe: (() => void) | null = null;\n\n      getMediaTarget(): Media | null {\n        return this as unknown as Media;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback?.();\n\n        this.dispatchEvent(\n          new ContextEvent(\n            context,\n            this,\n            (value, unsubscribe) => {\n              if (unsubscribe) this.#unsubscribe = unsubscribe;\n              this.#setMedia = value?.setMedia ?? null;\n              if (this.isConnected) {\n                this.#setMedia?.(this.getMediaTarget());\n              }\n            },\n            true\n          )\n        );\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback?.();\n        this.#setMedia?.(null);\n        this.#unsubscribe?.();\n        this.#unsubscribe = null;\n        this.#setMedia = null;\n      }\n    }\n\n    return MediaAttachElement as unknown as Class;\n  };\n}\n\nexport const MediaAttachMixin = createMediaAttachMixin(mediaContext);\n"],"mappings":";;;;;;;;;;;;AAiBA,SAAgB,uBAAuB,SAAyC;AAC9E,SAAmD,cAAqB;EACtE,MAAM,2BAA4B,UAAoD;GACpF,YAAoD;GACpD,eAAoC;GAEpC,iBAA+B;AAC7B,WAAO;;GAGT,AAAS,oBAAoB;AAC3B,UAAM,qBAAqB;AAE3B,SAAK,cACH,IAAIA,oBACF,SACA,OACC,OAAO,gBAAgB;AACtB,SAAI,YAAa,OAAKC,cAAe;AACrC,WAAKC,WAAY,OAAO,YAAY;AACpC,SAAI,KAAK,YACP,OAAKA,WAAY,KAAK,gBAAgB,CAAC;OAG3C,KACD,CACF;;GAGH,AAAS,uBAAuB;AAC9B,UAAM,wBAAwB;AAC9B,UAAKA,WAAY,KAAK;AACtB,UAAKD,eAAgB;AACrB,UAAKA,cAAe;AACpB,UAAKC,WAAY;;;AAIrB,SAAO;;;AAIX,MAAa,mBAAmB,uBAAuB,aAAa"}
+{"version":3,"file":"media-attach-mixin-U_KQB_9O.js","names":["ContextEvent","#unsubscribe","#setMedia"],"sources":["../src/store/media-attach-mixin.ts"],"sourcesContent":["import type { Media } from '@videojs/core/dom';\nimport { ContextEvent } from '@videojs/element/context';\nimport type { CustomElement } from '@videojs/utils/dom';\nimport type { AnyConstructor, Constructor } from '@videojs/utils/types';\nimport { type MediaContext, mediaContext } from '../player/context';\n\nexport type MediaAttachMixin = <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => Class;\n\n/**\n * Create a mixin that consumes `mediaContext` and registers the\n * element as the media with the provider.\n *\n * Uses the raw context-request protocol so it works with any\n * `HTMLElement` subclass — no `ReactiveControllerHost` required.\n *\n * @param context - The media context to consume.\n */\nexport function createMediaAttachMixin(context: MediaContext): MediaAttachMixin {\n  return <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => {\n    class MediaAttachElement extends (BaseClass as unknown as Constructor<CustomElement>) {\n      #setMedia: ((media: Media | null) => void) | null = null;\n      #unsubscribe: (() => void) | null = null;\n\n      getMediaTarget(): Media | null {\n        return this as unknown as Media;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback?.();\n\n        this.dispatchEvent(\n          new ContextEvent(\n            context,\n            this,\n            (value, unsubscribe) => {\n              if (unsubscribe) this.#unsubscribe = unsubscribe;\n              this.#setMedia = value?.setMedia ?? null;\n              if (this.isConnected) {\n                this.#setMedia?.(this.getMediaTarget());\n              }\n            },\n            true\n          )\n        );\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback?.();\n        this.#setMedia?.(null);\n        this.#unsubscribe?.();\n        this.#unsubscribe = null;\n        this.#setMedia = null;\n      }\n    }\n\n    return MediaAttachElement as unknown as Class;\n  };\n}\n\nexport const MediaAttachMixin = createMediaAttachMixin(mediaContext);\n"],"mappings":";;;;;;;;;;;;AAiBA,SAAgB,uBAAuB,SAAyC;AAC9E,SAAmD,cAAqB;EACtE,MAAM,2BAA4B,UAAoD;GACpF,YAAoD;GACpD,eAAoC;GAEpC,iBAA+B;AAC7B,WAAO;;GAGT,AAAS,oBAAoB;AAC3B,UAAM,qBAAqB;AAE3B,SAAK,cACH,IAAIA,oBACF,SACA,OACC,OAAO,gBAAgB;AACtB,SAAI,YAAa,OAAKC,cAAe;AACrC,WAAKC,WAAY,OAAO,YAAY;AACpC,SAAI,KAAK,YACP,OAAKA,WAAY,KAAK,gBAAgB,CAAC;OAG3C,KACD,CACF;;GAGH,AAAS,uBAAuB;AAC9B,UAAM,wBAAwB;AAC9B,UAAKA,WAAY,KAAK;AACtB,UAAKD,eAAgB;AACrB,UAAKA,cAAe;AACpB,UAAKC,WAAY;;;AAIrB,SAAO;;;AAIX,MAAa,mBAAmB,uBAAuB,aAAa"}

package/cdn/{player-BHhLXO-R.js → player-C46h14iP.js}

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

package/cdn/{player-BHhLXO-R.js.map → player-C46h14iP.js.map}

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

package/cdn/{player-DEfj0RU6.js → player-CvrOeLpy.js}

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

package/cdn/{player-DEfj0RU6.js.map → player-CvrOeLpy.js.map}

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

package/cdn/{poster-Dd0F1rRd.js → poster-Olv5zDI_.js}

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

package/cdn/{poster-Dd0F1rRd.js.map → poster-Olv5zDI_.js.map}

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

package/cdn/{poster-DwQ3RAch.js → poster-odJ4iwIv.js}

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

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

@@ -1 +1 @@
-{"version":3,"file":"poster-DwQ3RAch.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-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"}

package/cdn/video-minimal.dev.js

@@ -1,7 +1,8 @@
-import { o as ReactiveElement } from "./create-player-Cwxvswyv.js";
-import { g as createStyles, h as SkinMixin } from "./volume-slider-DgJ0rAfC.js";
+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-Dd0F1rRd.js";
+import "./poster-Olv5zDI_.js";
 import { t as renderIcon } from "./minimal-DBMdC_0I.js";
 
 //#region inline-css:src/define/video/minimal-skin.js

package/cdn/video-minimal.dev.js.map

@@ -1 +1 @@
-{"version":3,"file":"video-minimal.dev.js","names":["styles"],"sources":["../inline-css:src/define/video/minimal-skin.js","../src/define/video/minimal-skin.ts"],"sourcesContent":["export 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\";","import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/poster';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-minimal-skin media-minimal-skin--video\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster>\n        <slot name=\"poster\"></slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\n      </media-buffering-indicator>\n\n      <media-controls class=\"media-controls\">\n        <media-tooltip-group>\n          <div class=\"media-button-group\">\n            <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n              ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n              ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n              ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n            </media-play-button>\n            <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n              <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n              <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n            </media-tooltip>\n\n            <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n              <span class=\"media-icon__container\">\n                ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}\n                <span class=\"media-icon__label\">${SEEK_TIME}</span>\n              </span>\n            </media-seek-button>\n            <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-tooltip\">\n              Seek backward ${SEEK_TIME} seconds\n            </media-tooltip>\n\n            <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n              <span class=\"media-icon__container\">\n                ${renderIcon('seek', { class: 'media-icon' })}\n                <span class=\"media-icon__label\">${SEEK_TIME}</span>\n              </span>\n            </media-seek-button>\n            <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-tooltip\">\n              Seek forward ${SEEK_TIME} seconds\n            </media-tooltip>\n          </div>\n\n          <div class=\"media-time-controls\">\n            <media-time-group class=\"media-time\">\n              <media-time type=\"current\" class=\"media-time__value media-time__value--current\"></media-time>\n              <media-time-separator class=\"media-time__separator\"></media-time-separator>\n              <media-time type=\"duration\" class=\"media-time__value media-time__value--duration\"></media-time>\n            </media-time-group>\n\n            <media-time-slider class=\"media-slider\">\n              <media-slider-track class=\"media-slider__track\">\n                <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n              </media-slider-track>\n              <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n\n              <div class=\"media-preview media-slider__preview\">\n                <div class=\"media-preview__thumbnail-wrapper\">\n                  <media-slider-thumbnail class=\"media-preview__thumbnail\"></media-slider-thumbnail>\n                </div>\n                <media-slider-value type=\"pointer\" class=\"media-preview__timestamp\"></media-slider-value>\n                ${renderIcon('spinner', { class: 'media-preview__spinner media-icon' })}\n              </div>\n            </media-time-slider>\n          </div>\n\n          <div class=\"media-button-group\">\n            <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"media-button media-button--subtle media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n            <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-tooltip\">\n              Toggle playback rate\n            </media-tooltip>\n\n            <media-mute-button commandfor=\"video-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n              ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n              ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n              ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n            </media-mute-button>\n\n            <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-popover media-popover--volume\">\n              <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n                <media-slider-track class=\"media-slider__track\">\n                  <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                </media-slider-track>\n                <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n              </media-volume-slider>\n            </media-popover>\n\n            <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n              ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n              ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n            </media-captions-button>\n            <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-tooltip\">\n              Toggle captions\n            </media-tooltip>\n\n            <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n              ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n              ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n            </media-pip-button>\n            <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <span class=\"media-tooltip-label media-tooltip-label--enter-pip\">Enter picture-in-picture</span>\n              <span class=\"media-tooltip-label media-tooltip-label--exit-pip\">Exit picture-in-picture</span>\n            </media-tooltip>\n\n            <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n              ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n              ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n            </media-fullscreen-button>\n            <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <span class=\"media-tooltip-label media-tooltip-label--enter-fullscreen\">Enter fullscreen</span>\n              <span class=\"media-tooltip-label media-tooltip-label--exit-fullscreen\">Exit fullscreen</span>\n            </media-tooltip>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinElement.tagName, MinimalVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinElement.tagName]: MinimalVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;AAAA,2BAAe;;;;ACuBf,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;;;;;;;UAWR,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;gBAOzC,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;gBACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;gBAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;6EAQF,CAAC,UAAU;;kBAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;kDAChC,UAAU;;;;8BAI9B,UAAU;;;4EAGoC,UAAU;;kBAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;kDACZ,UAAU;;;;6BAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;;;kBAuBrB,WAAW,WAAW,EAAE,OAAO,qCAAqC,CAAC,CAAC;;;;;;;;;;;;gBAYxE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;gBAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;gBAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;gBAO3E,WAAW,aAAa,EAAE,OAAO,oCAAoC,CAAC,CAAC;gBACvE,WAAW,YAAY,EAAE,OAAO,mCAAmC,CAAC,CAAC;;;;;;;;gBAQrE,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;gBACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;;;AAenG,IAAa,0BAAb,cAA6C,UAAU,gBAAgB,CAAC;;iBAC5C;;;gBACV,aAAaA,qBAAO;;;yBACX;;;AAG3B,eAAe,OAAO,wBAAwB,SAAS,wBAAwB"}
+{"version":3,"file":"video-minimal.dev.js","names":["styles"],"sources":["../inline-css:src/define/video/minimal-skin.js","../src/define/video/minimal-skin.ts"],"sourcesContent":["export 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\";","import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/poster';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-minimal-skin media-minimal-skin--video\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster>\n        <slot name=\"poster\"></slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\n      </media-buffering-indicator>\n\n      <media-controls class=\"media-controls\">\n        <media-tooltip-group>\n          <div class=\"media-button-group\">\n            <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n              ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n              ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n              ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n            </media-play-button>\n            <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n              <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n              <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n            </media-tooltip>\n\n            <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n              <span class=\"media-icon__container\">\n                ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}\n                <span class=\"media-icon__label\">${SEEK_TIME}</span>\n              </span>\n            </media-seek-button>\n            <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-tooltip\">\n              Seek backward ${SEEK_TIME} seconds\n            </media-tooltip>\n\n            <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n              <span class=\"media-icon__container\">\n                ${renderIcon('seek', { class: 'media-icon' })}\n                <span class=\"media-icon__label\">${SEEK_TIME}</span>\n              </span>\n            </media-seek-button>\n            <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-tooltip\">\n              Seek forward ${SEEK_TIME} seconds\n            </media-tooltip>\n          </div>\n\n          <div class=\"media-time-controls\">\n            <media-time-group class=\"media-time\">\n              <media-time type=\"current\" class=\"media-time__value media-time__value--current\"></media-time>\n              <media-time-separator class=\"media-time__separator\"></media-time-separator>\n              <media-time type=\"duration\" class=\"media-time__value media-time__value--duration\"></media-time>\n            </media-time-group>\n\n            <media-time-slider class=\"media-slider\">\n              <media-slider-track class=\"media-slider__track\">\n                <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n              </media-slider-track>\n              <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n\n              <div class=\"media-preview media-slider__preview\">\n                <div class=\"media-preview__thumbnail-wrapper\">\n                  <media-slider-thumbnail class=\"media-preview__thumbnail\"></media-slider-thumbnail>\n                </div>\n                <media-slider-value type=\"pointer\" class=\"media-preview__timestamp\"></media-slider-value>\n                ${renderIcon('spinner', { class: 'media-preview__spinner media-icon' })}\n              </div>\n            </media-time-slider>\n          </div>\n\n          <div class=\"media-button-group\">\n            <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"media-button media-button--subtle media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n            <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-tooltip\">\n              Toggle playback rate\n            </media-tooltip>\n\n            <media-mute-button commandfor=\"video-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n              ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n              ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n              ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n            </media-mute-button>\n\n            <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-popover media-popover--volume\">\n              <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n                <media-slider-track class=\"media-slider__track\">\n                  <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                </media-slider-track>\n                <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n              </media-volume-slider>\n            </media-popover>\n\n            <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n              ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n              ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n            </media-captions-button>\n            <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-tooltip\">\n              Toggle captions\n            </media-tooltip>\n\n            <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n              ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n              ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n            </media-pip-button>\n            <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <span class=\"media-tooltip-label media-tooltip-label--enter-pip\">Enter picture-in-picture</span>\n              <span class=\"media-tooltip-label media-tooltip-label--exit-pip\">Exit picture-in-picture</span>\n            </media-tooltip>\n\n            <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n              ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n              ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n            </media-fullscreen-button>\n            <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <span class=\"media-tooltip-label media-tooltip-label--enter-fullscreen\">Enter fullscreen</span>\n              <span class=\"media-tooltip-label media-tooltip-label--exit-fullscreen\">Exit fullscreen</span>\n            </media-tooltip>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinElement.tagName, MinimalVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinElement.tagName]: MinimalVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,2BAAe;;;;ACuBf,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;;;;;;;UAWR,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;gBAOzC,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;gBACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;gBAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;6EAQF,CAAC,UAAU;;kBAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;kDAChC,UAAU;;;;8BAI9B,UAAU;;;4EAGoC,UAAU;;kBAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;kDACZ,UAAU;;;;6BAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;;;kBAuBrB,WAAW,WAAW,EAAE,OAAO,qCAAqC,CAAC,CAAC;;;;;;;;;;;;gBAYxE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;gBAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;gBAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;gBAO3E,WAAW,aAAa,EAAE,OAAO,oCAAoC,CAAC,CAAC;gBACvE,WAAW,YAAY,EAAE,OAAO,mCAAmC,CAAC,CAAC;;;;;;;;gBAQrE,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;gBACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;;;AAenG,IAAa,0BAAb,cAA6C,UAAU,gBAAgB,CAAC;;iBAC5C;;;gBACV,aAAaA,qBAAO;;;yBACX;;;AAG3B,eAAe,OAAO,wBAAwB,SAAS,wBAAwB"}