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

package/dist/default/define/video/skin.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n  bufferingIndicator,\n  button,\n  controls,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  playbackRate,\n  popup,\n  poster,\n  preview,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/captions-button';\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=\"${root(true)}\">\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 class=\"${poster(true)}\">\n        <slot name=\"poster\"></slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n        <div class=\"${bufferingIndicator.container}\">\n          ${renderIcon('spinner')}\n        </div>\n      </media-buffering-indicator>\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <media-tooltip-group>\n          <span class=\"${tooltipState.play.wrapper}\">\n            <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.play.button)}\">\n              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n            </media-play-button>\n            <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.play.replay}\">Replay</span>\n              <span class=\"${tooltipState.play.play}\">Play</span>\n              <span class=\"${tooltipState.play.pause}\">Pause</span>\n            </media-tooltip>\n          </span>\n\n          <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.subtle, button.icon, seek.button)}\">\n            <span class=\"${iconContainer}\">\n              ${renderIcon('seek', { class: cn(icon, iconFlipped) })}\n              <span class=\"${cn(seek.label, seek.labelBackward)}\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            Seek backward ${SEEK_TIME} seconds\n          </media-tooltip>\n\n          <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"${cn(button.base, button.subtle, button.icon, seek.button)}\">\n            <span class=\"${iconContainer}\">\n              ${renderIcon('seek', { class: icon })}\n              <span class=\"${cn(seek.label, seek.labelForward)}\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            Seek forward ${SEEK_TIME} seconds\n          </media-tooltip>\n\n          <media-time-group class=\"${time.group}\">\n            <media-time type=\"current\" class=\"${time.current}\"></media-time>\n            <media-time-slider class=\"${slider.root}\">\n              <media-slider-track class=\"${slider.track}\">\n                <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n                <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n              </media-slider-track>\n              <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n\n              <div class=\"${preview.root}\">\n                <media-slider-thumbnail class=\"${preview.thumbnail}\"></media-slider-thumbnail>\n                <media-slider-value type=\"pointer\" class=\"${preview.timestamp}\"></media-slider-value>\n                ${renderIcon('spinner', { class: cn(icon, preview.spinner) })}\n              </div>\n            </media-time-slider>\n            <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n          </media-time-group>\n\n          <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"${cn(button.base, button.subtle, button.icon, playbackRate.button)}\"></media-playback-rate-button>\n          <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            Toggle playback rate\n          </media-tooltip>\n\n          <media-mute-button commandfor=\"video-volume-popover\" class=\"${cn(button.base, button.subtle, button.icon, iconState.mute.button)}\">\n            ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n            ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n            ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n          </media-mute-button>\n\n          <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n            <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n              <media-slider-track class=\"${slider.track}\">\n                <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n              </media-slider-track>\n              <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n            </media-volume-slider>\n          </media-popover>\n\n          <span class=\"${tooltipState.captions.wrapper}\">\n            <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.captions.button)}\">\n              ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n              ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n            </media-captions-button>\n            <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n              <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n            </media-tooltip>\n          </span>\n\n          <span class=\"${tooltipState.pip.wrapper}\">\n            <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.pip.button)}\">\n              ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n              ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n            </media-pip-button>\n            <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n              <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n            </media-tooltip>\n          </span>\n\n          <span class=\"${tooltipState.fullscreen.wrapper}\">\n            <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}\">\n              ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n              ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n            </media-fullscreen-button>\n            <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n              <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n            </media-tooltip>\n          </span>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(VideoSkinTailwindElement.tagName, VideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinTailwindElement.tagName]: VideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n  bufferingIndicator,\n  button,\n  buttonGroupEnd,\n  buttonGroupStart,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  playbackRate,\n  popup,\n  poster,\n  preview,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { safeDefine } from '../safe-define';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/error-dialog';\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=\"${root(true)}\">\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 class=\"${poster(true)}\">\n        <slot name=\"poster\"></slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n        <div class=\"${bufferingIndicator.container}\">\n          ${renderIcon('spinner')}\n        </div>\n      </media-buffering-indicator>\n\n      <media-error-dialog class=\"${error.root}\">\n        <div class=\"${error.dialog}\">\n          <div class=\"${error.content}\">\n            <media-alert-dialog-title class=\"${error.title}\">Something went wrong.</media-alert-dialog-title>\n            <media-alert-dialog-description class=\"${error.description}\"></media-alert-dialog-description>\n          </div>\n          <div class=\"${error.actions}\">\n            <media-alert-dialog-close class=\"${cn(button.base, button.primary)}\">OK</media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <media-tooltip-group>\n          <div class=\"${buttonGroupStart}\">\n            <span class=\"${tooltipState.play.wrapper}\">\n              <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.play.button)}\">\n                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n              </media-play-button>\n              <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <span class=\"${tooltipState.play.replay}\">Replay</span>\n                <span class=\"${tooltipState.play.play}\">Play</span>\n                <span class=\"${tooltipState.play.pause}\">Pause</span>\n              </media-tooltip>\n            </span>\n\n            <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.subtle, button.icon)}\">\n              <span class=\"${iconContainer}\">\n                ${renderIcon('seek', { class: cn(icon, iconFlipped) })}\n                <span class=\"${cn(seek.label, seek.labelBackward)}\">${SEEK_TIME}</span>\n              </span>\n            </media-seek-button>\n            <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              Seek backward ${SEEK_TIME} seconds\n            </media-tooltip>\n\n            <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"${cn(button.base, button.subtle, button.icon)}\">\n              <span class=\"${iconContainer}\">\n                ${renderIcon('seek', { class: icon })}\n                <span class=\"${cn(seek.label, seek.labelForward)}\">${SEEK_TIME}</span>\n              </span>\n            </media-seek-button>\n            <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              Seek forward ${SEEK_TIME} seconds\n            </media-tooltip>\n          </div>\n\n          <div class=\"${time.group}\">\n            <media-time type=\"current\" class=\"${time.current}\"></media-time>\n            <media-time-slider class=\"${slider.root}\">\n              <media-slider-track class=\"${slider.track}\">\n                <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n                <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n              </media-slider-track>\n              <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n\n              <div class=\"${preview.root}\">\n                <media-slider-thumbnail class=\"${preview.thumbnail}\"></media-slider-thumbnail>\n                <media-slider-value type=\"pointer\" class=\"${preview.time}\"></media-slider-value>\n                ${renderIcon('spinner', { class: cn(icon, preview.spinner) })}\n              </div>\n            </media-time-slider>\n            <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n          </div>\n\n          <div class=\"${buttonGroupEnd}\">\n            <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"${cn(button.base, button.subtle, button.icon, playbackRate.button)}\"></media-playback-rate-button>\n            <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              Toggle playback rate\n            </media-tooltip>\n\n            <media-mute-button commandfor=\"video-volume-popover\" class=\"${cn(button.base, button.subtle, button.icon, iconState.mute.button)}\">\n              ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n              ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n              ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n            </media-mute-button>\n\n            <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n              <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n                <media-slider-track class=\"${slider.track}\">\n                  <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n                </media-slider-track>\n                <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n              </media-volume-slider>\n            </media-popover>\n\n            <span class=\"${tooltipState.captions.wrapper}\">\n              <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.captions.button)}\">\n                ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n                ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n              </media-captions-button>\n              <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n                <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n              </media-tooltip>\n            </span>\n\n            <span class=\"${tooltipState.pip.wrapper}\">\n              <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.pip.button)}\">\n                ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n                ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n              </media-pip-button>\n              <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n                <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n              </media-tooltip>\n            </span>\n\n            <span class=\"${tooltipState.fullscreen.wrapper}\">\n              <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}\">\n                ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n                ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n              </media-fullscreen-button>\n              <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n                <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n              </media-tooltip>\n            </span>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\nsafeDefine(VideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinTailwindElement.tagName]: VideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}

package/dist/default/icons/dist/render/default/index.js

@@ -22,7 +22,7 @@ function renderIcon(name, attrs) {
 	const attrStr = Object.entries(attrs).map(([k, v]) => ` ${k}="${v}"`).join("");
 	return svg.replace("<svg", `<svg${attrStr}`);
 }
-
 //#endregion
 export { renderIcon };
+
 //# sourceMappingURL=index.js.map

package/dist/default/icons/dist/render/minimal/index.js

@@ -22,7 +22,7 @@ function renderIcon(name, attrs) {
 	const attrStr = Object.entries(attrs).map(([k, v]) => ` ${k}="${v}"`).join("");
 	return svg.replace("<svg", `<svg${attrStr}`);
 }
-
 //#endregion
 export { renderIcon };
+
 //# sourceMappingURL=index.js.map

package/dist/default/index.js

@@ -16,6 +16,7 @@ import { MediaButtonElement } from "./ui/media-button-element.js";
 import { CaptionsButtonElement } from "./ui/captions-button/captions-button-element.js";
 import { ControlsElement } from "./ui/controls/controls-element.js";
 import { ControlsGroupElement } from "./ui/controls/controls-group-element.js";
+import { ErrorDialogElement } from "./ui/error-dialog/error-dialog-element.js";
 import { FullscreenButtonElement } from "./ui/fullscreen-button/fullscreen-button-element.js";
 import { MediaUIElement } from "./ui/media-ui-element.js";
 import { MuteButtonElement } from "./ui/mute-button/mute-button-element.js";
@@ -42,8 +43,7 @@ import { tooltipGroupContext } from "./ui/tooltip/context.js";
 import { TooltipElement } from "./ui/tooltip/tooltip-element.js";
 import { TooltipGroupElement } from "./ui/tooltip/tooltip-group-element.js";
 import { VolumeSliderElement } from "./ui/volume-slider/volume-slider-element.js";
+import { DelegateMixin } from "@videojs/core";
 import { createSelector, shallowEqual } from "@videojs/store";
-
-export * from "@videojs/core/dom"
-
-export { AlertDialogCloseElement, AlertDialogDescriptionElement, AlertDialogElement, AlertDialogTitleElement, BufferingIndicatorElement, CONTAINER_CONTEXT_KEY, CaptionsButtonElement, ControlsElement, ControlsGroupElement, FullscreenButtonElement, MEDIA_CONTEXT_KEY, MediaAttachMixin, MediaButtonElement, MediaContainerElement, MediaElement, MediaUIElement, MuteButtonElement, PLAYER_CONTEXT_KEY, PiPButtonElement, PlayButtonElement, PlaybackRateButtonElement, PlayerController, PopoverElement, PosterElement, SeekButtonElement, SliderBufferElement, SliderElement, SliderFillElement, SliderThumbElement, SliderThumbnailElement, SliderTrackElement, SliderValueElement, ThumbnailElement, TimeElement, TimeGroupElement, TimeSeparatorElement, TimeSliderElement, TooltipElement, TooltipGroupElement, VolumeSliderElement, alertDialogContext, containerContext, createContainerMixin, createMediaAttachMixin, createPlayer, createProviderMixin, createSelector, mediaContext, playerContext, shallowEqual, sliderContext, tooltipGroupContext };
+export * from "@videojs/core/dom";
+export { AlertDialogCloseElement, AlertDialogDescriptionElement, AlertDialogElement, AlertDialogTitleElement, BufferingIndicatorElement, CONTAINER_CONTEXT_KEY, CaptionsButtonElement, ControlsElement, ControlsGroupElement, DelegateMixin, ErrorDialogElement, FullscreenButtonElement, MEDIA_CONTEXT_KEY, MediaAttachMixin, MediaButtonElement, MediaContainerElement, MediaElement, MediaUIElement, MuteButtonElement, PLAYER_CONTEXT_KEY, PiPButtonElement, PlayButtonElement, PlaybackRateButtonElement, PlayerController, PopoverElement, PosterElement, SeekButtonElement, SliderBufferElement, SliderElement, SliderFillElement, SliderThumbElement, SliderThumbnailElement, SliderTrackElement, SliderValueElement, ThumbnailElement, TimeElement, TimeGroupElement, TimeSeparatorElement, TimeSliderElement, TooltipElement, TooltipGroupElement, VolumeSliderElement, alertDialogContext, containerContext, createContainerMixin, createMediaAttachMixin, createPlayer, createProviderMixin, createSelector, mediaContext, playerContext, shallowEqual, sliderContext, tooltipGroupContext };

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

@@ -1,6 +1,5 @@
 import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
 import { namedNodeMapToObject } from "@videojs/utils/dom";
-
 //#region src/media/background-video/index.ts
 function getTemplateHTML(attrs) {
 	return `<style> :host { position: relative; } video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--media-object-fit, inherit); object-position: var(--media-object-position, 50% 50%); } </style><slot></slot><video ${serializeAttributes(attrs)}></video>`;
@@ -64,7 +63,7 @@ function serializeAttributes(attrs) {
 	}
 	return html;
 }
-
 //#endregion
 export { BackgroundVideo };
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.ts"],"sourcesContent":["import type { Media } from '@videojs/core/dom';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nfunction getTemplateHTML(attrs: Record<string, string>) {\n  return /*html*/ `\n    <style>\n      :host {\n        position: relative;\n      }\n\n      video {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: var(--media-object-fit, inherit);\n        object-position: var(--media-object-position, 50% 50%);\n      }\n    </style>\n    <slot></slot>\n    <video ${serializeAttributes(attrs)}></video>\n  `;\n}\n\n// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends MediaAttachMixin(HTMLElement) {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n  static get observedAttributes() {\n    return ['src'];\n  }\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideo).shadowRootOptions);\n\n      const attrs = {\n        ...namedNodeMapToObject(this.attributes),\n        ...(!this.hasAttribute('nomuted') && { muted: '' }),\n        ...(!this.hasAttribute('noloop') && { loop: '' }),\n        ...(!this.hasAttribute('noautoplay') && { autoplay: '' }),\n        playsinline: '',\n        disableremoteplayback: '',\n        disablepictureinpicture: '',\n      };\n\n      this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n    }\n\n    // Neither Chrome or Firefox support setting the muted attribute\n    // after using document.createElement.\n    // Get around this by setting the muted property manually.\n    this.target!.muted = !this.hasAttribute('nomuted');\n  }\n\n  // Register the inner <video> (not `this`) with the provider.\n  getMediaTarget(): Media | null {\n    return this.target;\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.target!.src = newValue ?? '';\n    }\n  }\n\n  get target(): HTMLVideoElement | null {\n    return (\n      this.querySelector(':scope > [slot=media]') ??\n      this.querySelector('video') ??\n      this.shadowRoot?.querySelector('video') ??\n      null\n    );\n  }\n}\n\nconst VideoAttributes = [\n  'autoplay',\n  'controls',\n  'controlslist',\n  'crossorigin',\n  'disablepictureinpicture',\n  'disableremoteplayback',\n  'loop',\n  'muted',\n  'playsinline',\n  'preload',\n] as const;\n\nfunction serializeAttributes(attrs: Record<string, string>): string {\n  let html = '';\n  for (const key in attrs) {\n    // Skip forwarding non native video attributes.\n    if (!VideoAttributes.includes(key as any)) continue;\n\n    const value = attrs[key];\n    if (value === '') html += ` ${key}`;\n    else html += ` ${key}=\"${value}\"`;\n  }\n  return html;\n}\n"],"mappings":";;;;AAIA,SAAS,gBAAgB,OAA+B;AACtD,QAAgB,8OAAA,oBAAA,MAAA,CAAA;;AAIlB,IAAM,kBAAN,cAAM,iBAAA,YAAA,CAAA;;;;;yBAEM;;CACV,WAAM,qBAAkB;AACtB,SAAI,CAAA,MAAQ;;CAGd,cAAa;AACX,SAAI;AAEJ,MAAE,CAAA,KAAK,YAAA;AACN,QAAM,aAAK,KAAA,YAAA,kBAAA;GAEb,MAAA,QAAA;IACH,GAAA,qBAAA,KAAA,WAAA;;IAEQ,GAAC,CAAA,KAAO,aAAA,SAAwB,IAAC,EAAK,MAAM,IAAC;IAC9C,GAAK,CAAC,KAAA,aAAgB,aAAQ,IAAA,EAAA,UAAiB,IAAA;IAC9C,aAAC;IACD,uBAAmB;IACnB,yBAAyB;IAC7B;;;;;CAYF,iBAA8B;AAC5B,SAAO,KAAE;;CAGX,yBAAM,UAA2B,UAAA,UAAA;AAC/B,MAAG,aAAA,SAAA,aAAA;;CAKL,IAAI,SAAkC;AACpC,SACE,KAAK,cAAc,wBAAmB,IACxC,KAAK,cAAgB,QAAM,IAC7B,KAAA,YAAA,cAAA,QAAA;;;;CAOA;CACA;CACA;CACA;CACA;;CAEA;CACA;CACA;CACA;CACD;AAED,SAAK,oBAAA,OAAA;CACH,IAAA,OAAA;AACF,MAAA,MAAA,OAAA,OAAA;AAEA,MAAM,CAAA,gBAAkB,SAAA,IAAA,CAAA;EAErB,MAAA,QAAS,MAAA;AACT,MAAA,UAAa,GAAA,SAAA,IAAA;MACb,SAAY,IAAA,IAAA,IAAA,MAAA;;AAEb,QAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.ts"],"sourcesContent":["import type { Media } from '@videojs/core/dom';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nfunction getTemplateHTML(attrs: Record<string, string>) {\n  return /*html*/ `\n    <style>\n      :host {\n        position: relative;\n      }\n\n      video {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: var(--media-object-fit, inherit);\n        object-position: var(--media-object-position, 50% 50%);\n      }\n    </style>\n    <slot></slot>\n    <video ${serializeAttributes(attrs)}></video>\n  `;\n}\n\n// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends MediaAttachMixin(HTMLElement) {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n  static get observedAttributes() {\n    return ['src'];\n  }\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideo).shadowRootOptions);\n\n      const attrs = {\n        ...namedNodeMapToObject(this.attributes),\n        ...(!this.hasAttribute('nomuted') && { muted: '' }),\n        ...(!this.hasAttribute('noloop') && { loop: '' }),\n        ...(!this.hasAttribute('noautoplay') && { autoplay: '' }),\n        playsinline: '',\n        disableremoteplayback: '',\n        disablepictureinpicture: '',\n      };\n\n      this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n    }\n\n    // Neither Chrome or Firefox support setting the muted attribute\n    // after using document.createElement.\n    // Get around this by setting the muted property manually.\n    this.target!.muted = !this.hasAttribute('nomuted');\n  }\n\n  // Register the inner <video> (not `this`) with the provider.\n  getMediaTarget(): Media | null {\n    return this.target;\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.target!.src = newValue ?? '';\n    }\n  }\n\n  get target(): HTMLVideoElement | null {\n    return (\n      this.querySelector(':scope > [slot=media]') ??\n      this.querySelector('video') ??\n      this.shadowRoot?.querySelector('video') ??\n      null\n    );\n  }\n}\n\nconst VideoAttributes = [\n  'autoplay',\n  'controls',\n  'controlslist',\n  'crossorigin',\n  'disablepictureinpicture',\n  'disableremoteplayback',\n  'loop',\n  'muted',\n  'playsinline',\n  'preload',\n] as const;\n\nfunction serializeAttributes(attrs: Record<string, string>): string {\n  let html = '';\n  for (const key in attrs) {\n    // Skip forwarding non native video attributes.\n    if (!VideoAttributes.includes(key as any)) continue;\n\n    const value = attrs[key];\n    if (value === '') html += ` ${key}`;\n    else html += ` ${key}=\"${value}\"`;\n  }\n  return html;\n}\n"],"mappings":";;;AAIA,SAAS,gBAAgB,OAA+B;AACtD,QAAgB,8OAAA,oBAAA,MAAA,CAAA;;AAIlB,IAAM,kBAAN,cAAM,iBAAA,YAAA,CAAA;;;;;yBAEM;;CACV,WAAM,qBAAkB;AACtB,SAAI,CAAA,MAAQ;;CAGd,cAAa;AACX,SAAI;AAEJ,MAAE,CAAA,KAAK,YAAA;AACN,QAAM,aAAK,KAAA,YAAA,kBAAA;GAEb,MAAA,QAAA;IACH,GAAA,qBAAA,KAAA,WAAA;;IAEQ,GAAC,CAAA,KAAO,aAAA,SAAwB,IAAC,EAAK,MAAM,IAAC;IAC9C,GAAK,CAAC,KAAA,aAAgB,aAAQ,IAAA,EAAA,UAAiB,IAAA;IAC9C,aAAC;IACD,uBAAmB;IACnB,yBAAyB;IAC7B;;;;;CAYF,iBAA8B;AAC5B,SAAO,KAAE;;CAGX,yBAAM,UAA2B,UAAA,UAAA;AAC/B,MAAG,aAAA,SAAA,aAAA,SAAA,MAAA,OAAA,MAAA,YAAA;;CAKL,IAAI,SAAkC;AACpC,SACE,KAAK,cAAc,wBAAmB,IACxC,KAAK,cAAgB,QAAM,IAC7B,KAAA,YAAA,cAAA,QAAA,IAAA;;;;CAOA;CACA;CACA;CACA;CACA;;CAEA;CACA;CACA;CACA;CACD;AAED,SAAK,oBAAA,OAAA;CACH,IAAA,OAAA;AACF,MAAA,MAAA,OAAA,OAAA;AAEA,MAAM,CAAA,gBAAkB,SAAA,IAAA,CAAA;EAErB,MAAA,QAAS,MAAA;AACT,MAAA,UAAa,GAAA,SAAA,IAAA;MACb,SAAY,IAAA,IAAA,IAAA,MAAA;;AAEb,QAAC"}

package/dist/default/media/container-element.js

@@ -1,7 +1,6 @@
 import { containerContext, playerContext } from "../player/context.js";
 import { createContainerMixin } from "../store/container-mixin.js";
 import { MediaElement } from "../ui/media-element.js";
-
 //#region src/media/container-element.ts
 const ContainerMixin = createContainerMixin({
 	playerContext,
@@ -12,7 +11,7 @@ var MediaContainerElement = class extends ContainerMixin(MediaElement) {
 		this.tagName = "media-container";
 	}
 };
-
 //#endregion
 export { MediaContainerElement };
+
 //# sourceMappingURL=container-element.js.map

package/dist/default/media/container-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"container-element.js","names":[],"sources":["../../../src/media/container-element.ts"],"sourcesContent":["import { containerContext, playerContext } from '../player/context';\nimport { createContainerMixin } from '../store/container-mixin';\nimport { MediaElement } from '../ui/media-element';\n\nconst ContainerMixin = createContainerMixin({ playerContext, containerContext });\n\nexport class MediaContainerElement extends ContainerMixin(MediaElement) {\n  static readonly tagName = 'media-container';\n}\n"],"mappings":";;;;;AAIA,MAAM,iBAAiB,qBAAqB;CAAE;CAAe;CAAkB,CAAC;AAEhF,IAAa,wBAAb,cAA2C,eAAe,aAAa,CAAC;;iBAC5C"}
+{"version":3,"file":"container-element.js","names":[],"sources":["../../../src/media/container-element.ts"],"sourcesContent":["import { containerContext, playerContext } from '../player/context';\nimport { createContainerMixin } from '../store/container-mixin';\nimport { MediaElement } from '../ui/media-element';\n\nconst ContainerMixin = createContainerMixin({ playerContext, containerContext });\n\nexport class MediaContainerElement extends ContainerMixin(MediaElement) {\n  static readonly tagName = 'media-container';\n}\n"],"mappings":";;;;AAIA,MAAM,iBAAiB,qBAAqB;CAAE;CAAe;CAAkB,CAAC;AAEhF,IAAa,wBAAb,cAA2C,eAAe,aAAa,CAAC;;iBAC5C"}

package/dist/default/media/dash-video/index.js

@@ -1,26 +1,18 @@
 import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
-import { DashCustomMedia } from "@videojs/core/dom/media/dash";
-
+import { MediaPropsMixin } from "../../utils/media-props-mixin.js";
+import { DashCustomMedia, DashMediaDelegate } from "@videojs/core/dom/media/dash";
 //#region src/media/dash-video/index.ts
-var DashVideo = class extends MediaAttachMixin(DashCustomMedia) {
-	static getTemplateHTML(attrs) {
-		const { src, ...rest } = attrs;
-		return super.getTemplateHTML(rest);
-	}
+var DashVideo = class extends MediaPropsMixin(MediaAttachMixin(DashCustomMedia), DashMediaDelegate) {
 	constructor() {
 		super();
 		this.attach(this.target);
 	}
-	attributeChangedCallback(attrName, oldValue, newValue) {
-		if (attrName !== "src") super.attributeChangedCallback(attrName, oldValue, newValue);
-		if (attrName === "src" && oldValue !== newValue) this.src = newValue ?? "";
-	}
 	disconnectedCallback() {
 		super.disconnectedCallback?.();
 		if (!this.hasAttribute("keep-alive")) this.destroy();
 	}
 };
-
 //#endregion
 export { DashVideo };
+
 //# sourceMappingURL=index.js.map

package/dist/default/media/dash-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/dash-video/index.ts"],"sourcesContent":["import { DashCustomMedia } from '@videojs/core/dom/media/dash';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class DashVideo extends MediaAttachMixin(DashCustomMedia) {\n  static getTemplateHTML(attrs: Record<string, string>): string {\n    const { src, ...rest } = attrs;\n    // biome-ignore lint/complexity/noThisInStatic: intentional use of super\n    return super.getTemplateHTML(rest);\n  }\n\n  constructor() {\n    super();\n    this.attach(this.target);\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName !== 'src') {\n      super.attributeChangedCallback(attrName, oldValue, newValue);\n    }\n\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.src = newValue ?? '';\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n\n    if (!this.hasAttribute('keep-alive')) {\n      this.destroy();\n    }\n  }\n}\n"],"mappings":";;;;AAGA,IAAa,YAAb,cAA+B,iBAAiB,gBAAgB,CAAC;CAC/D,OAAO,gBAAgB,OAAuC;EAC5D,MAAM,EAAE,KAAK,GAAG,SAAS;AAEzB,SAAO,MAAM,gBAAgB,KAAK;;CAGpC,cAAc;AACZ,SAAO;AACP,OAAK,OAAO,KAAK,OAAO;;CAG1B,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,MACf,OAAM,yBAAyB,UAAU,UAAU,SAAS;AAG9D,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,MAAM,YAAY;;CAI3B,uBAA6B;AAC3B,QAAM,wBAAwB;AAE9B,MAAI,CAAC,KAAK,aAAa,aAAa,CAClC,MAAK,SAAS"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/dash-video/index.ts"],"sourcesContent":["import { DashCustomMedia, DashMediaDelegate } from '@videojs/core/dom/media/dash';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\nimport { MediaPropsMixin } from '../../utils/media-props-mixin';\n\nexport class DashVideo extends MediaPropsMixin(MediaAttachMixin(DashCustomMedia), DashMediaDelegate) {\n  constructor() {\n    super();\n    this.attach(this.target);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n\n    if (!this.hasAttribute('keep-alive')) {\n      this.destroy();\n    }\n  }\n}\n"],"mappings":";;;;AAIA,IAAa,YAAb,cAA+B,gBAAgB,iBAAiB,gBAAgB,EAAE,kBAAkB,CAAC;CACnG,cAAc;AACZ,SAAO;AACP,OAAK,OAAO,KAAK,OAAO;;CAG1B,uBAA6B;AAC3B,QAAM,wBAAwB;AAE9B,MAAI,CAAC,KAAK,aAAa,aAAa,CAClC,MAAK,SAAS"}

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

@@ -1,26 +1,18 @@
 import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
-import { HlsCustomMedia } from "@videojs/core/dom/media/hls";
-
+import { MediaPropsMixin } from "../../utils/media-props-mixin.js";
+import { HlsCustomMedia, HlsMediaDelegate } from "@videojs/core/dom/media/hls";
 //#region src/media/hls-video/index.ts
-var HlsVideo = class extends MediaAttachMixin(HlsCustomMedia) {
-	static getTemplateHTML(attrs) {
-		const { src, ...rest } = attrs;
-		return super.getTemplateHTML(rest);
-	}
+var HlsVideo = class extends MediaPropsMixin(MediaAttachMixin(HlsCustomMedia), HlsMediaDelegate) {
 	constructor() {
 		super();
 		this.attach(this.target);
 	}
-	attributeChangedCallback(attrName, oldValue, newValue) {
-		if (attrName !== "src") super.attributeChangedCallback(attrName, oldValue, newValue);
-		if (attrName === "src" && oldValue !== newValue) this.src = newValue ?? "";
-	}
 	disconnectedCallback() {
 		super.disconnectedCallback?.();
 		if (!this.hasAttribute("keep-alive")) this.destroy();
 	}
 };
-
 //#endregion
 export { HlsVideo };
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/hls-video/index.ts"],"sourcesContent":["import { HlsCustomMedia } from '@videojs/core/dom/media/hls';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class HlsVideo extends MediaAttachMixin(HlsCustomMedia) {\n  static getTemplateHTML(attrs: Record<string, string>): string {\n    const { src, ...rest } = attrs;\n    // biome-ignore lint/complexity/noThisInStatic: intentional use of super\n    return super.getTemplateHTML(rest);\n  }\n\n  constructor() {\n    super();\n    // TODO: If we like to support native media elements that\n    // are appended after the custom element is created, we need to\n    // attach the native element to the Media API after the native element\n    // is appended to the DOM. This is currently not supported.\n    this.attach(this.target);\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName !== 'src') {\n      super.attributeChangedCallback(attrName, oldValue, newValue);\n    }\n\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.src = newValue ?? '';\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n\n    if (!this.hasAttribute('keep-alive')) {\n      this.destroy();\n    }\n  }\n}\n"],"mappings":";;;;AAGA,IAAa,WAAb,cAA8B,iBAAiB,eAAe,CAAC;CAC7D,OAAO,gBAAgB,OAAuC;EAC5D,MAAM,EAAE,KAAK,GAAG,SAAS;AAEzB,SAAO,MAAM,gBAAgB,KAAK;;CAGpC,cAAc;AACZ,SAAO;AAKP,OAAK,OAAO,KAAK,OAAO;;CAG1B,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,MACf,OAAM,yBAAyB,UAAU,UAAU,SAAS;AAG9D,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,MAAM,YAAY;;CAI3B,uBAA6B;AAC3B,QAAM,wBAAwB;AAE9B,MAAI,CAAC,KAAK,aAAa,aAAa,CAClC,MAAK,SAAS"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/hls-video/index.ts"],"sourcesContent":["import { HlsCustomMedia, HlsMediaDelegate } from '@videojs/core/dom/media/hls';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\nimport { MediaPropsMixin } from '../../utils/media-props-mixin';\n\nexport class HlsVideo extends MediaPropsMixin(MediaAttachMixin(HlsCustomMedia), HlsMediaDelegate) {\n  constructor() {\n    super();\n    // TODO: If we like to support native media elements that\n    // are appended after the custom element is created, we need to\n    // attach the native element to the Media API after the native element\n    // is appended to the DOM. This is currently not supported.\n    this.attach(this.target);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n\n    if (!this.hasAttribute('keep-alive')) {\n      this.destroy();\n    }\n  }\n}\n"],"mappings":";;;;AAIA,IAAa,WAAb,cAA8B,gBAAgB,iBAAiB,eAAe,EAAE,iBAAiB,CAAC;CAChG,cAAc;AACZ,SAAO;AAKP,OAAK,OAAO,KAAK,OAAO;;CAG1B,uBAA6B;AAC3B,QAAM,wBAAwB;AAE9B,MAAI,CAAC,KAAK,aAAa,aAAa,CAClC,MAAK,SAAS"}

package/dist/default/media/mux-video/index.js

@@ -0,0 +1,18 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { MediaPropsMixin } from "../../utils/media-props-mixin.js";
+import { MuxCustomVideo, MuxMediaDelegate } from "@videojs/core/dom/media/mux";
+//#region src/media/mux-video/index.ts
+var MuxVideo = class extends MediaPropsMixin(MediaAttachMixin(MuxCustomVideo), MuxMediaDelegate) {
+	constructor() {
+		super();
+		this.attach(this.target);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback?.();
+		if (!this.hasAttribute("keep-alive")) this.destroy();
+	}
+};
+//#endregion
+export { MuxVideo };
+
+//# sourceMappingURL=index.js.map

package/dist/default/media/mux-video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/mux-video/index.ts"],"sourcesContent":["import { MuxCustomVideo, MuxMediaDelegate } from '@videojs/core/dom/media/mux';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\nimport { MediaPropsMixin } from '../../utils/media-props-mixin';\n\nexport class MuxVideo extends MediaPropsMixin(MediaAttachMixin(MuxCustomVideo), MuxMediaDelegate) {\n  constructor() {\n    super();\n    this.attach(this.target);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n\n    if (!this.hasAttribute('keep-alive')) {\n      this.destroy();\n    }\n  }\n}\n"],"mappings":";;;;AAIA,IAAa,WAAb,cAA8B,gBAAgB,iBAAiB,eAAe,EAAE,iBAAiB,CAAC;CAChG,cAAc;AACZ,SAAO;AACP,OAAK,OAAO,KAAK,OAAO;;CAG1B,uBAA6B;AAC3B,QAAM,wBAAwB;AAE9B,MAAI,CAAC,KAAK,aAAa,aAAa,CAClC,MAAK,SAAS"}

package/dist/default/media/native-hls-video/index.js

@@ -0,0 +1,18 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { MediaPropsMixin } from "../../utils/media-props-mixin.js";
+import { NativeHlsCustomMedia, NativeHlsMediaDelegate } from "@videojs/core/dom/media/native-hls";
+//#region src/media/native-hls-video/index.ts
+var NativeHlsVideo = class extends MediaPropsMixin(MediaAttachMixin(NativeHlsCustomMedia), NativeHlsMediaDelegate) {
+	constructor() {
+		super();
+		this.attach(this.target);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback?.();
+		if (!this.hasAttribute("keep-alive")) this.destroy();
+	}
+};
+//#endregion
+export { NativeHlsVideo };
+
+//# sourceMappingURL=index.js.map

package/dist/default/media/native-hls-video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/native-hls-video/index.ts"],"sourcesContent":["import { NativeHlsCustomMedia, NativeHlsMediaDelegate } from '@videojs/core/dom/media/native-hls';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\nimport { MediaPropsMixin } from '../../utils/media-props-mixin';\n\nexport class NativeHlsVideo extends MediaPropsMixin(MediaAttachMixin(NativeHlsCustomMedia), NativeHlsMediaDelegate) {\n  constructor() {\n    super();\n    this.attach(this.target);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n\n    if (!this.hasAttribute('keep-alive')) {\n      this.destroy();\n    }\n  }\n}\n"],"mappings":";;;;AAIA,IAAa,iBAAb,cAAoC,gBAAgB,iBAAiB,qBAAqB,EAAE,uBAAuB,CAAC;CAClH,cAAc;AACZ,SAAO;AACP,OAAK,OAAO,KAAK,OAAO;;CAG1B,uBAA6B;AAC3B,QAAM,wBAAwB;AAE9B,MAAI,CAAC,KAAK,aAAa,aAAa,CAClC,MAAK,SAAS"}

package/dist/default/media/simple-hls-video/index.js

@@ -1,23 +1,15 @@
 import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { MediaPropsMixin } from "../../utils/media-props-mixin.js";
 import { SimpleHlsCustomMedia } from "@videojs/core/dom/media/simple-hls";
-
+import { SpfMedia } from "@videojs/spf/dom";
 //#region src/media/simple-hls-video/index.ts
-var SimpleHlsVideo = class extends MediaAttachMixin(SimpleHlsCustomMedia) {
-	static getTemplateHTML(attrs) {
-		const { src, ...rest } = attrs;
-		return super.getTemplateHTML(rest);
-	}
+var SimpleHlsVideo = class extends MediaPropsMixin(MediaAttachMixin(SimpleHlsCustomMedia), SpfMedia) {
 	constructor() {
 		super();
 		this.attach(this.target);
 	}
-	attributeChangedCallback(attrName, oldValue, newValue) {
-		if (attrName !== "src") super.attributeChangedCallback(attrName, oldValue, newValue);
-		if (attrName === "src" && oldValue !== newValue) this.src = newValue ?? "";
-		if (attrName === "preload" && oldValue !== newValue) this.preload = newValue ?? "";
-	}
 };
-
 //#endregion
 export { SimpleHlsVideo };
+
 //# sourceMappingURL=index.js.map

package/dist/default/media/simple-hls-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/simple-hls-video/index.ts"],"sourcesContent":["import { SimpleHlsCustomMedia } from '@videojs/core/dom/media/simple-hls';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class SimpleHlsVideo extends MediaAttachMixin(SimpleHlsCustomMedia) {\n  static getTemplateHTML(attrs: Record<string, string>): string {\n    const { src, ...rest } = attrs;\n    // biome-ignore lint/complexity/noThisInStatic: intentional use of super\n    return super.getTemplateHTML(rest);\n  }\n\n  constructor() {\n    super();\n    this.attach(this.target);\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName !== 'src') {\n      super.attributeChangedCallback(attrName, oldValue, newValue);\n    }\n\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.src = newValue ?? '';\n    }\n\n    if (attrName === 'preload' && oldValue !== newValue) {\n      this.preload = (newValue ?? '') as '' | 'none' | 'metadata' | 'auto';\n    }\n  }\n}\n"],"mappings":";;;;AAGA,IAAa,iBAAb,cAAoC,iBAAiB,qBAAqB,CAAC;CACzE,OAAO,gBAAgB,OAAuC;EAC5D,MAAM,EAAE,KAAK,GAAG,SAAS;AAEzB,SAAO,MAAM,gBAAgB,KAAK;;CAGpC,cAAc;AACZ,SAAO;AACP,OAAK,OAAO,KAAK,OAAO;;CAG1B,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,MACf,OAAM,yBAAyB,UAAU,UAAU,SAAS;AAG9D,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,MAAM,YAAY;AAGzB,MAAI,aAAa,aAAa,aAAa,SACzC,MAAK,UAAW,YAAY"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/simple-hls-video/index.ts"],"sourcesContent":["import { SimpleHlsCustomMedia } from '@videojs/core/dom/media/simple-hls';\nimport { SpfMedia } from '@videojs/spf/dom';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\nimport { MediaPropsMixin } from '../../utils/media-props-mixin';\n\nexport class SimpleHlsVideo extends MediaPropsMixin(MediaAttachMixin(SimpleHlsCustomMedia), SpfMedia) {\n  constructor() {\n    super();\n    this.attach(this.target);\n  }\n}\n"],"mappings":";;;;;AAKA,IAAa,iBAAb,cAAoC,gBAAgB,iBAAiB,qBAAqB,EAAE,SAAS,CAAC;CACpG,cAAc;AACZ,SAAO;AACP,OAAK,OAAO,KAAK,OAAO"}

package/dist/default/player/context.js

@@ -1,5 +1,4 @@
 import { createContext } from "@videojs/element/context";
-
 //#region src/player/context.ts
 const PLAYER_CONTEXT_KEY = Symbol.for("@videojs/player");
 /**
@@ -12,7 +11,7 @@ const MEDIA_CONTEXT_KEY = Symbol.for("@videojs/media");
 const mediaContext = createContext(MEDIA_CONTEXT_KEY);
 const CONTAINER_CONTEXT_KEY = Symbol.for("@videojs/container");
 const containerContext = createContext(CONTAINER_CONTEXT_KEY);
-
 //#endregion
 export { CONTAINER_CONTEXT_KEY, MEDIA_CONTEXT_KEY, PLAYER_CONTEXT_KEY, containerContext, mediaContext, playerContext };
+
 //# sourceMappingURL=context.js.map

package/dist/default/player/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.ts"],"sourcesContent":["import type { AnyPlayerStore, Media, MediaContainer, PlayerStore } from '@videojs/core/dom';\nimport { type Context, createContext } from '@videojs/element/context';\n\n// ----------------------------------------\n// Player Context\n// ----------------------------------------\n\nexport const PLAYER_CONTEXT_KEY = Symbol.for('@videojs/player');\n\nexport type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;\n\nexport type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<\n  typeof PLAYER_CONTEXT_KEY,\n  PlayerContextValue<Store>\n>;\n\n/**\n * The default player context instance for consuming the player store in controllers.\n *\n * @public\n */\nexport const playerContext = createContext<PlayerContextValue, typeof PLAYER_CONTEXT_KEY>(PLAYER_CONTEXT_KEY);\n\n// ----------------------------------------\n// Media Context\n// ----------------------------------------\n\nexport const MEDIA_CONTEXT_KEY = Symbol.for('@videojs/media');\n\nexport interface MediaContextValue {\n  media: Media | null;\n  setMedia: (media: Media | null) => void;\n}\n\nexport type MediaContext = Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;\n\nexport const mediaContext = createContext<MediaContextValue, typeof MEDIA_CONTEXT_KEY>(MEDIA_CONTEXT_KEY);\n\n// ----------------------------------------\n// Container Context\n// ----------------------------------------\n\nexport const CONTAINER_CONTEXT_KEY = Symbol.for('@videojs/container');\n\nexport interface ContainerContextValue {\n  container: MediaContainer | null;\n  setContainer: (container: MediaContainer | null) => void;\n}\n\nexport type ContainerContext = Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;\n\nexport const containerContext = createContext<ContainerContextValue, typeof CONTAINER_CONTEXT_KEY>(\n  CONTAINER_CONTEXT_KEY\n);\n"],"mappings":";;;AAOA,MAAa,qBAAqB,OAAO,IAAI,kBAAkB;;;;;;AAc/D,MAAa,gBAAgB,cAA6D,mBAAmB;AAM7G,MAAa,oBAAoB,OAAO,IAAI,iBAAiB;AAS7D,MAAa,eAAe,cAA2D,kBAAkB;AAMzG,MAAa,wBAAwB,OAAO,IAAI,qBAAqB;AASrE,MAAa,mBAAmB,cAC9B,sBACD"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.ts"],"sourcesContent":["import type { AnyPlayerStore, Media, MediaContainer, PlayerStore } from '@videojs/core/dom';\nimport { type Context, createContext } from '@videojs/element/context';\n\n// ----------------------------------------\n// Player Context\n// ----------------------------------------\n\nexport const PLAYER_CONTEXT_KEY = Symbol.for('@videojs/player');\n\nexport type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;\n\nexport type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<\n  typeof PLAYER_CONTEXT_KEY,\n  PlayerContextValue<Store>\n>;\n\n/**\n * The default player context instance for consuming the player store in controllers.\n *\n * @public\n */\nexport const playerContext = createContext<PlayerContextValue, typeof PLAYER_CONTEXT_KEY>(PLAYER_CONTEXT_KEY);\n\n// ----------------------------------------\n// Media Context\n// ----------------------------------------\n\nexport const MEDIA_CONTEXT_KEY = Symbol.for('@videojs/media');\n\nexport interface MediaContextValue {\n  media: Media | null;\n  setMedia: (media: Media | null) => void;\n}\n\nexport type MediaContext = Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;\n\nexport const mediaContext = createContext<MediaContextValue, typeof MEDIA_CONTEXT_KEY>(MEDIA_CONTEXT_KEY);\n\n// ----------------------------------------\n// Container Context\n// ----------------------------------------\n\nexport const CONTAINER_CONTEXT_KEY = Symbol.for('@videojs/container');\n\nexport interface ContainerContextValue {\n  container: MediaContainer | null;\n  setContainer: (container: MediaContainer | null) => void;\n}\n\nexport type ContainerContext = Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;\n\nexport const containerContext = createContext<ContainerContextValue, typeof CONTAINER_CONTEXT_KEY>(\n  CONTAINER_CONTEXT_KEY\n);\n"],"mappings":";;AAOA,MAAa,qBAAqB,OAAO,IAAI,kBAAkB;;;;;;AAc/D,MAAa,gBAAgB,cAA6D,mBAAmB;AAM7G,MAAa,oBAAoB,OAAO,IAAI,iBAAiB;AAS7D,MAAa,eAAe,cAA2D,kBAAkB;AAMzG,MAAa,wBAAwB,OAAO,IAAI,qBAAqB;AASrE,MAAa,mBAAmB,cAC9B,sBACD"}

package/dist/default/player/create-player.js

@@ -3,7 +3,6 @@ import { createContainerMixin } from "../store/container-mixin.js";
 import { createProviderMixin } from "../store/provider-mixin.js";
 import { PlayerController } from "./player-controller.js";
 import { combine, createStore } from "@videojs/store";
-
 //#region src/player/create-player.ts
 function createPlayer(config) {
 	const slice = combine(...config.features);
@@ -26,7 +25,7 @@ function createPlayer(config) {
 		})
 	};
 }
-
 //#endregion
 export { createPlayer };
+
 //# sourceMappingURL=create-player.js.map

package/dist/default/player/create-player.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.ts"],"sourcesContent":["import type {\n  AnyPlayerFeature,\n  AudioFeatures,\n  AudioPlayerStore,\n  PlayerStore,\n  PlayerTarget,\n  VideoFeatures,\n  VideoPlayerStore,\n} from '@videojs/core/dom';\nimport { combine, createStore } from '@videojs/store';\n\nimport { type ContainerMixin, createContainerMixin } from '../store/container-mixin';\nimport { createProviderMixin, type ProviderMixin } from '../store/provider-mixin';\nimport { containerContext, mediaContext, type PlayerContext, playerContext } from './context';\nimport { PlayerController } from './player-controller';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n}\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  /** Context for consuming player in controllers. */\n  context: PlayerContext<Store>;\n\n  /** Creates a store instance for imperative access. */\n  create: () => Store;\n\n  /** Player controller bound to this player's context. */\n  PlayerController: PlayerController.Constructor<Store>;\n\n  /** Mixin that provides player context to descendants. */\n  ProviderMixin: ProviderMixin<Store>;\n\n  /** Mixin that consumes player context and registers as the container element. */\n  ContainerMixin: ContainerMixin<Store>;\n}\n\n/**\n * Creates a player factory with typed store, mixins, and controller.\n *\n * @example\n * ```ts\n * import { createPlayer, MediaElement, selectPlayback } from '@videojs/html';\n * import { videoFeatures } from '@videojs/html/video';\n *\n * const { ProviderMixin, ContainerMixin, PlayerController, context } = createPlayer({\n *   features: videoFeatures,\n * });\n *\n * // Provider element: owns the store, provides context to descendants\n * class VideoPlayer extends ProviderMixin(MediaElement) {}\n * customElements.define('video-player', VideoPlayer);\n *\n * // Control element with selector\n * class PlayButton extends MediaElement {\n *   #playback = new PlayerController(this, context, selectPlayback);\n * }\n * ```\n *\n * @label Video\n * @param config - Player configuration with features.\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Creates a player factory for audio media.\n *\n * @label Audio\n * @param config - Player configuration with features.\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Creates a player factory with custom features.\n *\n * @label Generic\n * @param config - Player configuration with features.\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<PlayerStore> {\n  const slice = combine<PlayerTarget, AnyPlayerFeature[]>(...config.features);\n\n  function create(): PlayerStore {\n    return createStore<PlayerTarget>()(slice);\n  }\n\n  const ProviderMixin = createProviderMixin<PlayerStore>({\n    playerContext,\n    mediaContext,\n    containerContext,\n    factory: create,\n  });\n\n  const ContainerMixin = createContainerMixin<PlayerStore>({\n    playerContext,\n    containerContext,\n  });\n\n  return {\n    context: playerContext,\n    create,\n    PlayerController,\n    ProviderMixin,\n    ContainerMixin,\n  };\n}\n"],"mappings":";;;;;;;AAkFA,SAAgB,aAAa,QAAiF;CAC5G,MAAM,QAAQ,QAA0C,GAAG,OAAO,SAAS;CAE3E,SAAS,SAAsB;AAC7B,SAAO,aAA2B,CAAC,MAAM;;AAe3C,QAAO;EACL,SAAS;EACT;EACA;EACA,eAhBoB,oBAAiC;GACrD;GACA;GACA;GACA,SAAS;GACV,CAAC;EAYA,gBAVqB,qBAAkC;GACvD;GACA;GACD,CAAC;EAQD"}
+{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.ts"],"sourcesContent":["import type {\n  AnyPlayerFeature,\n  AudioFeatures,\n  AudioPlayerStore,\n  PlayerStore,\n  PlayerTarget,\n  VideoFeatures,\n  VideoPlayerStore,\n} from '@videojs/core/dom';\nimport { combine, createStore } from '@videojs/store';\n\nimport { type ContainerMixin, createContainerMixin } from '../store/container-mixin';\nimport { createProviderMixin, type ProviderMixin } from '../store/provider-mixin';\nimport { containerContext, mediaContext, type PlayerContext, playerContext } from './context';\nimport { PlayerController } from './player-controller';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n}\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  /** Context for consuming player in controllers. */\n  context: PlayerContext<Store>;\n\n  /** Creates a store instance for imperative access. */\n  create: () => Store;\n\n  /** Player controller bound to this player's context. */\n  PlayerController: PlayerController.Constructor<Store>;\n\n  /** Mixin that provides player context to descendants. */\n  ProviderMixin: ProviderMixin<Store>;\n\n  /** Mixin that consumes player context and registers as the container element. */\n  ContainerMixin: ContainerMixin<Store>;\n}\n\n/**\n * Creates a player factory with typed store, mixins, and controller.\n *\n * @example\n * ```ts\n * import { createPlayer, MediaElement, selectPlayback } from '@videojs/html';\n * import { videoFeatures } from '@videojs/html/video';\n *\n * const { ProviderMixin, ContainerMixin, PlayerController, context } = createPlayer({\n *   features: videoFeatures,\n * });\n *\n * // Provider element: owns the store, provides context to descendants\n * class VideoPlayer extends ProviderMixin(MediaElement) {}\n * customElements.define('video-player', VideoPlayer);\n *\n * // Control element with selector\n * class PlayButton extends MediaElement {\n *   #playback = new PlayerController(this, context, selectPlayback);\n * }\n * ```\n *\n * @label Video\n * @param config - Player configuration with features.\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Creates a player factory for audio media.\n *\n * @label Audio\n * @param config - Player configuration with features.\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Creates a player factory with custom features.\n *\n * @label Generic\n * @param config - Player configuration with features.\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<PlayerStore> {\n  const slice = combine<PlayerTarget, AnyPlayerFeature[]>(...config.features);\n\n  function create(): PlayerStore {\n    return createStore<PlayerTarget>()(slice);\n  }\n\n  const ProviderMixin = createProviderMixin<PlayerStore>({\n    playerContext,\n    mediaContext,\n    containerContext,\n    factory: create,\n  });\n\n  const ContainerMixin = createContainerMixin<PlayerStore>({\n    playerContext,\n    containerContext,\n  });\n\n  return {\n    context: playerContext,\n    create,\n    PlayerController,\n    ProviderMixin,\n    ContainerMixin,\n  };\n}\n"],"mappings":";;;;;;AAkFA,SAAgB,aAAa,QAAiF;CAC5G,MAAM,QAAQ,QAA0C,GAAG,OAAO,SAAS;CAE3E,SAAS,SAAsB;AAC7B,SAAO,aAA2B,CAAC,MAAM;;AAe3C,QAAO;EACL,SAAS;EACT;EACA;EACA,eAhBoB,oBAAiC;GACrD;GACA;GACA;GACA,SAAS;GACV,CAAC;EAYA,gBAVqB,qBAAkC;GACvD;GACA;GACD,CAAC;EAQD"}

package/dist/default/player/player-controller.js

@@ -1,6 +1,5 @@
 import { ContextConsumer } from "@videojs/element/context";
 import { StoreController } from "@videojs/store/html";
-
 //#region src/player/player-controller.ts
 /**
 * Reactive controller for accessing player store state.
@@ -60,7 +59,7 @@ var PlayerController = class {
 		if (!this.#store && this.#selector) this.#store = new StoreController(this.#host, store, this.#selector);
 	}
 };
-
 //#endregion
 export { PlayerController };
+
 //# sourceMappingURL=player-controller.js.map

package/dist/default/player/player-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"player-controller.js","names":["#host","#selector","#consumer","#connect","#store"],"sources":["../../../src/player/player-controller.ts"],"sourcesContent":["import type { PlayerStore } from '@videojs/core/dom';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { InferStoreState, Selector } from '@videojs/store';\nimport { StoreController } from '@videojs/store/html';\n\nimport type { PlayerContext } from './context';\n\nexport type PlayerControllerHost = ReactiveControllerHost & HTMLElement;\n\n/**\n * Reactive controller for accessing player store state.\n *\n * Without selector: Returns the store, does NOT subscribe to changes.\n * With selector: Returns selected state, subscribes with shallowEqual comparison.\n *\n * @example\n * ```ts\n * // Store access (no subscription)\n * class Controls extends MediaElement {\n *   #player = new PlayerController(this, playerContext);\n *\n *   handleClick() {\n *     this.#player.value.setVolume(0.5);\n *   }\n * }\n *\n * // Selector-based subscription\n * class PlayButton extends MediaElement {\n *   #playback = new PlayerController(this, playerContext, selectPlayback);\n * }\n * ```\n */\nexport class PlayerController<Store extends PlayerStore, Result = Store> implements ReactiveController {\n  readonly #host: PlayerControllerHost;\n  readonly #selector: Selector<InferStoreState<Store>, Result> | undefined;\n\n  #consumer: ContextConsumer<PlayerContext<Store>, PlayerControllerHost>;\n  #store: StoreController<Store, Result> | null = null;\n\n  /**\n   * @label Without Selector\n   * @param host - The host element that owns this controller.\n   * @param context - Player context to resolve the store from.\n   */\n  constructor(host: PlayerControllerHost, context: PlayerContext<Store>);\n  /**\n   * @label With Selector\n   * @param host - The host element that owns this controller.\n   * @param context - Player context to resolve the store from.\n   * @param selector - Derives a value from the player store state.\n   */\n  constructor(\n    host: PlayerControllerHost,\n    context: PlayerContext<Store>,\n    selector: Selector<InferStoreState<Store>, Result>\n  );\n  constructor(\n    host: PlayerControllerHost,\n    context: PlayerContext<Store>,\n    selector?: Selector<InferStoreState<Store>, Result>\n  ) {\n    this.#host = host;\n    this.#selector = selector;\n\n    this.#consumer = new ContextConsumer(host, {\n      context,\n      callback: (ctx) => this.#connect(ctx),\n      subscribe: true,\n    });\n\n    host.addController(this);\n  }\n\n  get value(): Result | undefined {\n    const store = this.#consumer.value;\n    if (!store) return undefined;\n\n    // Without selector: return store directly\n    if (!this.#selector) return store as unknown as Result;\n\n    // With selector: use StoreController\n    return this.#store?.value;\n  }\n\n  get displayName(): string | undefined {\n    return this.#selector?.displayName;\n  }\n\n  hostConnected(): void {\n    const store = this.#consumer.value;\n    if (store) this.#connect(store);\n  }\n\n  hostDisconnected(): void {\n    this.#store = null;\n  }\n\n  #connect(store: Store): void {\n    if (!this.#store && this.#selector) {\n      this.#store = new StoreController(this.#host, store, this.#selector);\n    }\n  }\n}\n\nexport namespace PlayerController {\n  export type Host = PlayerControllerHost;\n\n  export type Constructor<Store extends PlayerStore = PlayerStore, Result = Store> = typeof PlayerController<\n    Store,\n    Result\n  >;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAa,mBAAb,MAAuG;CACrG,CAASA;CACT,CAASC;CAET;CACA,SAAgD;CAmBhD,YACE,MACA,SACA,UACA;AACA,QAAKD,OAAQ;AACb,QAAKC,WAAY;AAEjB,QAAKC,WAAY,IAAI,gBAAgB,MAAM;GACzC;GACA,WAAW,QAAQ,MAAKC,QAAS,IAAI;GACrC,WAAW;GACZ,CAAC;AAEF,OAAK,cAAc,KAAK;;CAG1B,IAAI,QAA4B;EAC9B,MAAM,QAAQ,MAAKD,SAAU;AAC7B,MAAI,CAAC,MAAO,QAAO;AAGnB,MAAI,CAAC,MAAKD,SAAW,QAAO;AAG5B,SAAO,MAAKG,OAAQ;;CAGtB,IAAI,cAAkC;AACpC,SAAO,MAAKH,UAAW;;CAGzB,gBAAsB;EACpB,MAAM,QAAQ,MAAKC,SAAU;AAC7B,MAAI,MAAO,OAAKC,QAAS,MAAM;;CAGjC,mBAAyB;AACvB,QAAKC,QAAS;;CAGhB,SAAS,OAAoB;AAC3B,MAAI,CAAC,MAAKA,SAAU,MAAKH,SACvB,OAAKG,QAAS,IAAI,gBAAgB,MAAKJ,MAAO,OAAO,MAAKC,SAAU"}
+{"version":3,"file":"player-controller.js","names":["#host","#selector","#consumer","#connect","#store"],"sources":["../../../src/player/player-controller.ts"],"sourcesContent":["import type { PlayerStore } from '@videojs/core/dom';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { InferStoreState, Selector } from '@videojs/store';\nimport { StoreController } from '@videojs/store/html';\n\nimport type { PlayerContext } from './context';\n\nexport type PlayerControllerHost = ReactiveControllerHost & HTMLElement;\n\n/**\n * Reactive controller for accessing player store state.\n *\n * Without selector: Returns the store, does NOT subscribe to changes.\n * With selector: Returns selected state, subscribes with shallowEqual comparison.\n *\n * @example\n * ```ts\n * // Store access (no subscription)\n * class Controls extends MediaElement {\n *   #player = new PlayerController(this, playerContext);\n *\n *   handleClick() {\n *     this.#player.value.setVolume(0.5);\n *   }\n * }\n *\n * // Selector-based subscription\n * class PlayButton extends MediaElement {\n *   #playback = new PlayerController(this, playerContext, selectPlayback);\n * }\n * ```\n */\nexport class PlayerController<Store extends PlayerStore, Result = Store> implements ReactiveController {\n  readonly #host: PlayerControllerHost;\n  readonly #selector: Selector<InferStoreState<Store>, Result> | undefined;\n\n  #consumer: ContextConsumer<PlayerContext<Store>, PlayerControllerHost>;\n  #store: StoreController<Store, Result> | null = null;\n\n  /**\n   * @label Without Selector\n   * @param host - The host element that owns this controller.\n   * @param context - Player context to resolve the store from.\n   */\n  constructor(host: PlayerControllerHost, context: PlayerContext<Store>);\n  /**\n   * @label With Selector\n   * @param host - The host element that owns this controller.\n   * @param context - Player context to resolve the store from.\n   * @param selector - Derives a value from the player store state.\n   */\n  constructor(\n    host: PlayerControllerHost,\n    context: PlayerContext<Store>,\n    selector: Selector<InferStoreState<Store>, Result>\n  );\n  constructor(\n    host: PlayerControllerHost,\n    context: PlayerContext<Store>,\n    selector?: Selector<InferStoreState<Store>, Result>\n  ) {\n    this.#host = host;\n    this.#selector = selector;\n\n    this.#consumer = new ContextConsumer(host, {\n      context,\n      callback: (ctx) => this.#connect(ctx),\n      subscribe: true,\n    });\n\n    host.addController(this);\n  }\n\n  get value(): Result | undefined {\n    const store = this.#consumer.value;\n    if (!store) return undefined;\n\n    // Without selector: return store directly\n    if (!this.#selector) return store as unknown as Result;\n\n    // With selector: use StoreController\n    return this.#store?.value;\n  }\n\n  get displayName(): string | undefined {\n    return this.#selector?.displayName;\n  }\n\n  hostConnected(): void {\n    const store = this.#consumer.value;\n    if (store) this.#connect(store);\n  }\n\n  hostDisconnected(): void {\n    this.#store = null;\n  }\n\n  #connect(store: Store): void {\n    if (!this.#store && this.#selector) {\n      this.#store = new StoreController(this.#host, store, this.#selector);\n    }\n  }\n}\n\nexport namespace PlayerController {\n  export type Host = PlayerControllerHost;\n\n  export type Constructor<Store extends PlayerStore = PlayerStore, Result = Store> = typeof PlayerController<\n    Store,\n    Result\n  >;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAa,mBAAb,MAAuG;CACrG;CACA;CAEA;CACA,SAAgD;CAmBhD,YACE,MACA,SACA,UACA;AACA,QAAA,OAAa;AACb,QAAA,WAAiB;AAEjB,QAAA,WAAiB,IAAI,gBAAgB,MAAM;GACzC;GACA,WAAW,QAAQ,MAAA,QAAc,IAAI;GACrC,WAAW;GACZ,CAAC;AAEF,OAAK,cAAc,KAAK;;CAG1B,IAAI,QAA4B;EAC9B,MAAM,QAAQ,MAAA,SAAe;AAC7B,MAAI,CAAC,MAAO,QAAO,KAAA;AAGnB,MAAI,CAAC,MAAA,SAAgB,QAAO;AAG5B,SAAO,MAAA,OAAa;;CAGtB,IAAI,cAAkC;AACpC,SAAO,MAAA,UAAgB;;CAGzB,gBAAsB;EACpB,MAAM,QAAQ,MAAA,SAAe;AAC7B,MAAI,MAAO,OAAA,QAAc,MAAM;;CAGjC,mBAAyB;AACvB,QAAA,QAAc;;CAGhB,SAAS,OAAoB;AAC3B,MAAI,CAAC,MAAA,SAAe,MAAA,SAClB,OAAA,QAAc,IAAI,gBAAgB,MAAA,MAAY,OAAO,MAAA,SAAe"}

package/dist/default/presets/audio.js

@@ -3,5 +3,4 @@ import { MinimalAudioSkinElement } from "../define/audio/minimal-skin.js";
 import { AudioSkinTailwindElement } from "../define/audio/skin.tailwind.js";
 import { AudioSkinElement } from "../define/audio/skin.js";
 import { audioFeatures } from "@videojs/core/dom";
-
-export { AudioSkinElement, AudioSkinTailwindElement, MinimalAudioSkinElement, MinimalAudioSkinTailwindElement, audioFeatures };
+export { AudioSkinElement, AudioSkinTailwindElement, MinimalAudioSkinElement, MinimalAudioSkinTailwindElement, audioFeatures };

package/dist/default/presets/background.js

@@ -1,3 +1,2 @@
 import { backgroundFeatures } from "@videojs/core/dom";
-
-export { backgroundFeatures };
+export { backgroundFeatures };

package/dist/default/presets/video.js

@@ -3,5 +3,4 @@ import { MinimalVideoSkinElement } from "../define/video/minimal-skin.js";
 import { VideoSkinTailwindElement } from "../define/video/skin.tailwind.js";
 import { VideoSkinElement } from "../define/video/skin.js";
 import { videoFeatures } from "@videojs/core/dom";
-
-export { MinimalVideoSkinElement, MinimalVideoSkinTailwindElement, VideoSkinElement, VideoSkinTailwindElement, videoFeatures };
+export { MinimalVideoSkinElement, MinimalVideoSkinTailwindElement, VideoSkinElement, VideoSkinTailwindElement, videoFeatures };

package/dist/default/skins/dist/default/default/tailwind/audio.tailwind.js

@@ -1,22 +1,21 @@
-import { iconState } from "../../shared/tailwind/icon-state.js";
-import { tooltipState } from "../../shared/tailwind/tooltip-state.js";
+import "../../shared/tailwind/icon-state.js";
+import "../../shared/tailwind/tooltip-state.js";
 import { bufferingIndicator as bufferingIndicator$1 } from "./components/buffering.js";
 import { controls as controls$1 } from "./components/controls.js";
 import { error as error$1 } from "./components/error.js";
 import { popup as popup$1 } from "./components/popup.js";
 import { root as root$1 } from "./components/root.js";
 import { slider as slider$1 } from "./components/slider.js";
-import { surface as surface$1 } from "./components/surface.js";
-import { button } from "./components/button.js";
-import { icon, iconContainer, iconFlipped } from "./components/icon.js";
-import { playbackRate } from "./components/playback-rate.js";
-import { seek } from "./components/seek.js";
-import { time } from "./components/time.js";
+import { surface } from "./components/surface.js";
+import "./components/button.js";
+import "./components/button-group.js";
+import "./components/icon.js";
+import "./components/playback-rate.js";
+import "./components/seek.js";
+import "./components/time.js";
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/default/tailwind/audio.tailwind.js
-const root = cn(root$1, "[--media-text-color:var(--media-color-primary,oklch(0_0_0))]", "[--media-error-dialog-transition-duration:250ms]", "[--media-error-dialog-transition-delay:100ms]", "[--media-popup-transition-duration:100ms]", "[--media-popup-transition-timing-function:ease-out]", "motion-reduce:[--media-error-dialog-transition-duration:50ms]", "motion-reduce:[--media-error-dialog-transition-delay:0ms]", "motion-reduce:[--media-popup-transition-duration:0ms]", "dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]");
-const surface = cn(surface$1, "bg-white/50 dark:bg-black/40", "backdrop-blur-lg backdrop-saturate-150", "ring-black/5 shadow-sm shadow-black/15", "after:ring-white/10", "[@media(prefers-reduced-transparency:reduce)]:bg-white/70 dark:[@media(prefers-reduced-transparency:reduce)]:bg-black/70", "contrast-more:bg-white/90 dark:contrast-more:bg-black/90");
+const root = cn(root$1, "[--media-text-color:var(--media-color-primary,oklch(0_0_0))]", "[--media-surface-background-color:oklch(1_0_0/0.5)]", "[--media-surface-inner-border-color:oklch(1_0_0/0.1)]", "[--media-surface-outer-border-color:oklch(0_0_0/0.05)]", "[--media-surface-shadow-color:oklch(0_0_0/0.15)]", "[--media-surface-backdrop-filter:blur(16px)_saturate(1.5)]", "[--media-error-dialog-transition-duration:250ms]", "[--media-error-dialog-transition-delay:100ms]", "[--media-popup-transition-duration:100ms]", "[--media-popup-transition-timing-function:ease-out]", "[--media-tooltip-side-offset:0.75rem]", "[--media-popover-side-offset:0.75rem]", "motion-reduce:[--media-error-dialog-transition-duration:50ms]", "motion-reduce:[--media-error-dialog-transition-delay:0ms]", "motion-reduce:[--media-popup-transition-duration:0ms]", "dark:[--media-surface-background-color:oklch(0_0_0/0.4)]", "dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]", "[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(1_0_0)]", "contrast-more:[--media-surface-background-color:oklch(1_0_0)]", "[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:oklch(0_0_0/0.05)]", "contrast-more:[--media-surface-outer-border-color:oklch(0_0_0/0.05)]", "dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)]", "dark:contrast-more:[--media-surface-background-color:oklch(0_0_0)]", "dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-inner-border-color:oklch(1_0_0/0.2)]", "dark:contrast-more:[--media-surface-inner-border-color:oklch(1_0_0/0.2)]", "dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:transparent]", "dark:contrast-more:[--media-surface-outer-border-color:transparent]");
 const controls = cn(controls$1, surface, "text-(--media-text-color)", "peer-data-open/error:[&_*]:invisible");
 const slider = {
 	...slider$1,
@@ -27,16 +26,13 @@ const popup = {
 	popover: cn(surface, popup$1.popover),
 	tooltip: cn(surface, popup$1.tooltip)
 };
-const bufferingIndicator = {
-	...bufferingIndicator$1,
-	container: cn(bufferingIndicator$1.container, surface)
-};
+({ ...bufferingIndicator$1 }), cn(bufferingIndicator$1.container, surface);
 const error = {
 	...error$1,
-	dialog: cn("absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5", "bg-(--media-surface-background-color) text-(--media-text-color)", "backdrop-blur-lg backdrop-saturate-150", "transition-[opacity,filter] ease-out", "duration-(--media-error-dialog-transition-duration)", "delay-(--media-error-dialog-transition-delay)", "group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-[4px]", "group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-[4px]", "group-data-ending-style/error:delay-0"),
+	dialog: cn("absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5", "bg-(--media-surface-background-color) text-(--media-text-color)", "backdrop-blur-lg backdrop-saturate-150", "transition-[opacity,filter] ease-out", "duration-(--media-error-dialog-transition-duration)", "delay-(--media-error-dialog-transition-delay)", "group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-xs", "group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-xs", "group-data-ending-style/error:delay-0"),
 	content: "flex flex-1 items-center gap-2"
 };
-
 //#endregion
-export { controls, popup, root, slider };
+export { controls, error, popup, root, slider };
+
 //# sourceMappingURL=audio.tailwind.js.map

package/dist/default/skins/dist/default/default/tailwind/audio.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/audio.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface as surface$1 } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/audio.tailwind.ts\nconst root = cn(root$1, \"[--media-text-color:var(--media-color-primary,oklch(0_0_0))]\", \"[--media-error-dialog-transition-duration:250ms]\", \"[--media-error-dialog-transition-delay:100ms]\", \"[--media-popup-transition-duration:100ms]\", \"[--media-popup-transition-timing-function:ease-out]\", \"motion-reduce:[--media-error-dialog-transition-duration:50ms]\", \"motion-reduce:[--media-error-dialog-transition-delay:0ms]\", \"motion-reduce:[--media-popup-transition-duration:0ms]\", \"dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]\");\nconst surface = cn(surface$1, \"bg-white/50 dark:bg-black/40\", \"backdrop-blur-lg backdrop-saturate-150\", \"ring-black/5 shadow-sm shadow-black/15\", \"after:ring-white/10\", \"[@media(prefers-reduced-transparency:reduce)]:bg-white/70 dark:[@media(prefers-reduced-transparency:reduce)]:bg-black/70\", \"contrast-more:bg-white/90 dark:contrast-more:bg-black/90\");\nconst controls = cn(controls$1, surface, \"text-(--media-text-color)\", \"peer-data-open/error:[&_*]:invisible\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-black/10\", \"dark:bg-white/20 dark:ring-1 dark:ring-black/5\")\n};\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(\"absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5\", \"bg-(--media-surface-background-color) text-(--media-text-color)\", \"backdrop-blur-lg backdrop-saturate-150\", \"transition-[opacity,filter] ease-out\", \"duration-(--media-error-dialog-transition-duration)\", \"delay-(--media-error-dialog-transition-delay)\", \"group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-[4px]\", \"group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-[4px]\", \"group-data-ending-style/error:delay-0\"),\n\tcontent: \"flex flex-1 items-center gap-2\"\n};\n\n//#endregion\nexport { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, playbackRate, popup, root, seek, slider, surface, time, tooltipState };\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAM,OAAO,GAAG,QAAQ,gEAAgE,oDAAoD,iDAAiD,6CAA6C,uDAAuD,iEAAiE,6DAA6D,yDAAyD,oEAAoE;AAC5hB,MAAM,UAAU,GAAG,WAAW,gCAAgC,0CAA0C,0CAA0C,uBAAuB,4HAA4H,2DAA2D;AAChW,MAAM,WAAW,GAAG,YAAY,SAAS,6BAA6B,uCAAuC;AAC7G,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,eAAe,iDAAiD;CAC1F;AACD,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;AACD,MAAM,qBAAqB;CAC1B,GAAG;CACH,WAAW,GAAG,qBAAqB,WAAW,QAAQ;CACtD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,0EAA0E,mEAAmE,0CAA0C,wCAAwC,uDAAuD,iDAAiD,wFAAwF,oFAAoF,wCAAwC;CACtiB,SAAS;CACT"}
+{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/audio.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/audio.tailwind.ts\nconst root = cn(root$1, \"[--media-text-color:var(--media-color-primary,oklch(0_0_0))]\", \"[--media-surface-background-color:oklch(1_0_0/0.5)]\", \"[--media-surface-inner-border-color:oklch(1_0_0/0.1)]\", \"[--media-surface-outer-border-color:oklch(0_0_0/0.05)]\", \"[--media-surface-shadow-color:oklch(0_0_0/0.15)]\", \"[--media-surface-backdrop-filter:blur(16px)_saturate(1.5)]\", \"[--media-error-dialog-transition-duration:250ms]\", \"[--media-error-dialog-transition-delay:100ms]\", \"[--media-popup-transition-duration:100ms]\", \"[--media-popup-transition-timing-function:ease-out]\", \"[--media-tooltip-side-offset:0.75rem]\", \"[--media-popover-side-offset:0.75rem]\", \"motion-reduce:[--media-error-dialog-transition-duration:50ms]\", \"motion-reduce:[--media-error-dialog-transition-delay:0ms]\", \"motion-reduce:[--media-popup-transition-duration:0ms]\", \"dark:[--media-surface-background-color:oklch(0_0_0/0.4)]\", \"dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(1_0_0)]\", \"contrast-more:[--media-surface-background-color:oklch(1_0_0)]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:oklch(0_0_0/0.05)]\", \"contrast-more:[--media-surface-outer-border-color:oklch(0_0_0/0.05)]\", \"dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)]\", \"dark:contrast-more:[--media-surface-background-color:oklch(0_0_0)]\", \"dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-inner-border-color:oklch(1_0_0/0.2)]\", \"dark:contrast-more:[--media-surface-inner-border-color:oklch(1_0_0/0.2)]\", \"dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:transparent]\", \"dark:contrast-more:[--media-surface-outer-border-color:transparent]\");\nconst controls = cn(controls$1, surface, \"text-(--media-text-color)\", \"peer-data-open/error:[&_*]:invisible\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-black/10\", \"dark:bg-white/20 dark:ring-1 dark:ring-black/5\")\n};\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(\"absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5\", \"bg-(--media-surface-background-color) text-(--media-text-color)\", \"backdrop-blur-lg backdrop-saturate-150\", \"transition-[opacity,filter] ease-out\", \"duration-(--media-error-dialog-transition-duration)\", \"delay-(--media-error-dialog-transition-delay)\", \"group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-xs\", \"group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-xs\", \"group-data-ending-style/error:delay-0\"),\n\tcontent: \"flex flex-1 items-center gap-2\"\n};\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, playbackRate, popup, root, seek, slider, time, tooltipState };\n\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAM,OAAO,GAAG,QAAQ,gEAAgE,uDAAuD,yDAAyD,0DAA0D,oDAAoD,8DAA8D,oDAAoD,iDAAiD,6CAA6C,uDAAuD,yCAAyC,yCAAyC,iEAAiE,6DAA6D,yDAAyD,4DAA4D,qEAAqE,iGAAiG,iEAAiE,wGAAwG,wEAAwE,sGAAsG,sEAAsE,4GAA4G,4EAA4E,uGAAuG,sEAAsE;AAC1yD,MAAM,WAAW,GAAG,YAAY,SAAS,6BAA6B,uCAAuC;AAC7G,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,eAAe,iDAAiD;CAC1F;AACD,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;CAGA,EADA,GAAG,sBACmD,GAA3C,GAAG,qBAAqB,WAAW,QAAQ;AAEvD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,0EAA0E,mEAAmE,0CAA0C,wCAAwC,uDAAuD,iDAAiD,qFAAqF,iFAAiF,wCAAwC;CAChiB,SAAS;CACT"}

package/dist/default/skins/dist/default/default/tailwind/components/buffering.js

@@ -3,7 +3,7 @@ const bufferingIndicator = {
 	root: "absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex",
 	container: "p-1 rounded-full"
 };
-
 //#endregion
 export { bufferingIndicator };
+
 //# sourceMappingURL=buffering.js.map

package/dist/default/skins/dist/default/default/tailwind/components/buffering.js.map

@@ -1 +1 @@
-{"version":3,"file":"buffering.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/buffering.js"],"sourcesContent":["//#region src/default/tailwind/components/buffering.ts\nconst bufferingIndicator = {\n\troot: \"absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex\",\n\tcontainer: \"p-1 rounded-full\"\n};\n\n//#endregion\nexport { bufferingIndicator };\n//# sourceMappingURL=buffering.js.map"],"mappings":";AACA,MAAM,qBAAqB;CAC1B,MAAM;CACN,WAAW;CACX"}
+{"version":3,"file":"buffering.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/buffering.js"],"sourcesContent":["//#region src/default/tailwind/components/buffering.ts\nconst bufferingIndicator = {\n\troot: \"absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex\",\n\tcontainer: \"p-1 rounded-full\"\n};\n//#endregion\nexport { bufferingIndicator };\n\n//# sourceMappingURL=buffering.js.map"],"mappings":";AACA,MAAM,qBAAqB;CAC1B,MAAM;CACN,WAAW;CACX"}