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

package/dist/default/define/audio/skin.css

@@ -27,12 +27,12 @@
    ========================================================================== */
 
 .media-default-skin {
+  container: media-root / inline-size;
   position: relative;
   isolation: isolate;
   display: block;
   height: 100%;
   width: 100%;
-  container: media-root / inline-size;
   border-radius: var(--media-border-radius, 2rem);
   font-family:
     Inter Variable,
@@ -40,11 +40,20 @@
     ui-sans-serif,
     system-ui,
     sans-serif;
-  font-size: 0.8125rem;
   line-height: 1.5;
   letter-spacing: normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
+
+  & > * {
+    font-size: 0.75rem; /* 12px at 100% font size */
+  }
+
+  @container media-root (width > 48rem) {
+    & > * {
+      font-size: 0.875rem; /* 14px at 100% font size */
+    }
+  }
 }
 
 /* ==========================================================================
@@ -69,14 +78,6 @@
     box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
     pointer-events: none;
   }
-
-  @media (prefers-reduced-transparency: reduce) {
-    background-color: oklch(from var(--media-surface-background-color) l c h / 0.7);
-  }
-
-  @media (prefers-contrast: more) {
-    background-color: oklch(from var(--media-surface-background-color) l c h / 0.9);
-  }
 }
 
 /* ==========================================================================
@@ -110,6 +111,10 @@
   outline: none;
 }
 
+.media-default-skin .media-error:not([data-open]) {
+  display: none;
+}
+
 .media-default-skin .media-error__title {
   font-weight: 600;
   line-height: 1.25;
@@ -141,44 +146,31 @@
   container: media-controls / inline-size;
   display: flex;
   align-items: center;
-  gap: 0.075rem;
-  padding: 0.175rem;
-  border-radius: calc(infinity * 1px);
+  column-gap: 0.075rem;
+  padding: 0.375rem;
+  border-radius: 1.5rem;
   --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
   --media-controls-current-shadow-color-subtle: oklch(
     from var(--media-controls-current-shadow-color) l c h /
     calc(alpha * 0.4)
   );
   text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);
-
-  @container media-root (width > 40rem) {
-    gap: 0.125rem;
-    padding: 0.25rem;
-  }
 }
 
 /* ==========================================================================
    Time Display
    ========================================================================== */
 
-.media-default-skin .media-time {
-  container: media-time / inline-size;
+.media-default-skin .media-time-controls {
+  container: media-time-controls / inline-size;
   display: flex;
   align-items: center;
   flex: 1;
   gap: 0.75rem;
   padding-inline: 0.5rem;
-
-  & .media-time__value:first-child {
-    display: none;
-
-    @container media-time (width > 18rem) {
-      display: block;
-    }
-  }
 }
 
-.media-default-skin .media-time__value {
+.media-default-skin .media-time {
   font-variant-numeric: tabular-nums;
 }
 
@@ -198,6 +190,8 @@
   outline: 2px solid transparent;
   outline-offset: -2px;
   transition-property: background-color, outline-offset, scale;
+  /* Fix weird jumping when clicking on the buttons in Safari. */
+  will-change: scale;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
   cursor: pointer;
@@ -250,7 +244,7 @@
 /* Icon button variant */
 .media-default-skin .media-button--icon {
   display: grid;
-  width: 2.125rem;
+  width: 2.25rem;
   padding: 0;
   aspect-ratio: 1;
 
@@ -278,10 +272,6 @@
     right: unset;
     left: -1px;
   }
-
-  @container media-controls (width < 28rem) {
-    display: none;
-  }
 }
 
 /* Playback rate button */
@@ -295,6 +285,20 @@
   }
 }
 
+/* ==========================================================================
+   Button Groups
+   ========================================================================== */
+
+.media-default-skin .media-button-group {
+  display: flex;
+  align-items: center;
+  gap: 0.075rem;
+
+  @container media-root (width > 42rem) {
+    gap: 0.125rem;
+  }
+}
+
 /* ==========================================================================
    Icons
    ========================================================================== */
@@ -334,11 +338,11 @@
   &[data-orientation="horizontal"] {
     min-width: 5rem;
     width: 100%;
-    height: 1.25rem;
+    height: 2rem;
   }
 
   &[data-orientation="vertical"] {
-    width: 1.25rem;
+    width: 2rem;
     height: 5rem;
   }
 }
@@ -549,8 +553,6 @@
 }
 
 .media-default-skin .media-popover {
-  --media-popover-side-offset: 0.5rem;
-
   &[data-side="top"]::before,
   &[data-side="bottom"]::before {
     height: var(--media-popover-side-offset);
@@ -561,7 +563,7 @@
   }
 }
 .media-default-skin .media-popover--volume {
-  padding: 0.625rem 0.25rem;
+  padding: 0.75rem 0;
   border-radius: calc(infinity * 1px);
 
   &:has(media-volume-slider[data-availability="unsupported"]) {
@@ -574,7 +576,6 @@
   border-radius: calc(infinity * 1px);
   font-size: 0.75rem;
   white-space: nowrap;
-  --media-tooltip-side-offset: 0.75rem;
 
   &[data-side="top"]::before,
   &[data-side="bottom"]::before {
@@ -656,7 +657,6 @@
    ========================================================================== */
 
 .media-default-skin--audio {
-  --media-border-color: oklch(0 0 0 / 0.1);
   --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);
@@ -667,6 +667,8 @@
   --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;
 
   @media (prefers-reduced-motion: reduce) {
     --media-error-dialog-transition-duration: 50ms;
@@ -675,10 +677,20 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    --media-border-color: oklch(1 0 0 / 0.1);
     --media-surface-background-color: oklch(0 0 0 / 0.4);
     --media-text-color: var(--media-color-primary, oklch(1 0 0));
   }
+
+  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
+    --media-surface-background-color: oklch(1 0 0);
+    --media-surface-outer-border-color: oklch(0 0 0 / 0.05);
+  }
+
+  @media (prefers-color-scheme: dark) and ((prefers-reduced-transparency: reduce) or (prefers-contrast: more)) {
+    --media-surface-background-color: oklch(0 0 0);
+    --media-surface-inner-border-color: oklch(1 0 0 / 0.2);
+    --media-surface-outer-border-color: transparent;
+  }
 }
 
 /* ==========================================================================

package/dist/default/define/audio/skin.js

@@ -1,5 +1,7 @@
+import { safeDefine } from "../safe-define.js";
 import { SkinMixin, createStyles } from "../skin-mixin.js";
 import "../media/container.js";
+import "../ui/error-dialog.js";
 import "../ui/mute-button.js";
 import "../ui/play-button.js";
 import "../ui/playback-rate-button.js";
@@ -13,11 +15,10 @@ import "../ui/volume-slider.js";
 import { renderIcon } from "../../icons/dist/render/default/index.js";
 import skin_default from "../../_virtual/inline-css_src/define/audio/skin.js";
 import { ReactiveElement } from "@videojs/element";
-
 //#region src/define/audio/skin.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `<media-container class="media-default-skin media-default-skin--audio"><slot name="media"></slot><slot></slot><div class="media-surface media-controls"><media-tooltip-group><media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"><span class="media-tooltip-label media-tooltip-label--replay">Replay</span><span class="media-tooltip-label media-tooltip-label--play">Play</span><span class="media-tooltip-label media-tooltip-label--pause">Pause</span></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek media-icon--flipped" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip"> Seek forward ${SEEK_TIME} seconds </media-tooltip><media-time-group class="media-time"><media-time type="current" class="media-time__value"></media-time><media-time-slider class="media-slider"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill><media-slider-buffer class="media-slider__buffer"></media-slider-buffer></media-slider-track><media-slider-thumb class="media-slider__thumb"></media-slider-thumb></media-time-slider><media-time type="duration" class="media-time__value"></media-time></media-time-group><media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute"> ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume"><media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track><media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb></media-volume-slider></media-popover></media-tooltip-group></div></media-container>`;
+	return `<media-container class="media-default-skin media-default-skin--audio"><slot name="media"></slot><slot></slot><media-error-dialog class="media-error"><div class="media-error__dialog"><div class="media-error__content"><media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="media-error__description"></media-alert-dialog-description></div><div class="media-error__actions"><media-alert-dialog-close class="media-button media-button--subtle">OK</media-alert-dialog-close></div></div></media-error-dialog><div class="media-surface media-controls"><media-tooltip-group><div class="media-button-group"><media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"><span class="media-tooltip-label media-tooltip-label--replay">Replay</span><span class="media-tooltip-label media-tooltip-label--play">Play</span><span class="media-tooltip-label media-tooltip-label--pause">Pause</span></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek media-icon--flipped" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip"> Seek forward ${SEEK_TIME} seconds </media-tooltip></div><div class="media-time-controls"><media-time type="current" class="media-time"></media-time><media-time-slider class="media-slider"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill><media-slider-buffer class="media-slider__buffer"></media-slider-buffer></media-slider-track><media-slider-thumb class="media-slider__thumb"></media-slider-thumb></media-time-slider><media-time type="duration" class="media-time"></media-time></div><div class="media-button-group"><media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute"> ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume"><media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track><media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb></media-volume-slider></media-popover></div></media-tooltip-group></div></media-container>`;
 }
 var AudioSkinElement = class extends SkinMixin(ReactiveElement) {
 	static {
@@ -30,8 +31,8 @@ var AudioSkinElement = class extends SkinMixin(ReactiveElement) {
 		this.getTemplateHTML = getTemplateHTML;
 	}
 };
-customElements.define(AudioSkinElement.tagName, AudioSkinElement);
-
+safeDefine(AudioSkinElement);
 //#endregion
 export { AudioSkinElement };
+
 //# sourceMappingURL=skin.js.map

package/dist/default/define/audio/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/audio/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\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-default-skin media-default-skin--audio\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <div class=\"media-surface media-controls\">\n        <media-tooltip-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-surface 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--seek 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-surface 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 media-icon--seek' })}\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-surface media-tooltip\">\n            Seek forward ${SEEK_TIME} seconds\n          </media-tooltip>\n\n          <media-time-group class=\"media-time\">\n            <media-time type=\"current\" class=\"media-time__value\"></media-time>\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            </media-time-slider>\n            <media-time type=\"duration\" class=\"media-time__value\"></media-time>\n          </media-time-group>\n\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-surface media-tooltip\">\n            Toggle playback rate\n          </media-tooltip>\n\n          <media-mute-button commandfor=\"audio-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=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface 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        </media-tooltip-group>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class AudioSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'audio-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(AudioSkinElement.tagName, AudioSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioSkinElement.tagName]: AudioSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,6SAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,iZAAA,CAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,mDAAA,CAAA,CAAA,mCAAA,UAAA,4IAAA,UAAA,yFAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,mCAAA,UAAA,0IAAA,UAAA,k+BAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA;;AAGlB,IAAY,mBAAZ,cAA+B,UAAA,gBAAA,CAAA;;iBACb;;;;;;yBAEM;;;AAGxB,eAAc,OAAA,iBAAwB,SAAQ,iBAAiB"}
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/audio/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport { safeDefine } from '../safe-define';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/error-dialog';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\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-default-skin media-default-skin--audio\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-error-dialog class=\"media-error\">\n        <div class=\"media-error__dialog\">\n          <div class=\"media-error__content\">\n            <media-alert-dialog-title class=\"media-error__title\">Something went wrong.</media-alert-dialog-title>\n            <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n          </div>\n          <div class=\"media-error__actions\">\n            <media-alert-dialog-close class=\"media-button media-button--subtle\">OK</media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <div class=\"media-surface 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-surface 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--seek 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-surface 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 media-icon--seek' })}\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-surface media-tooltip\">\n              Seek forward ${SEEK_TIME} seconds\n            </media-tooltip>\n          </div>\n\n          <div class=\"media-time-controls\">\n            <media-time type=\"current\" class=\"media-time\"></media-time>\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            </media-time-slider>\n            <media-time type=\"duration\" class=\"media-time\"></media-time>\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-surface media-tooltip\">\n              Toggle playback rate\n            </media-tooltip>\n\n            <media-mute-button commandfor=\"audio-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=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface 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          </div>\n        </media-tooltip-group>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class AudioSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'audio-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\nsafeDefine(AudioSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioSkinElement.tagName]: AudioSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,yyBAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,iZAAA,CAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,mDAAA,CAAA,CAAA,mCAAA,UAAA,4IAAA,UAAA,yFAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,mCAAA,UAAA,0IAAA,UAAA,y+BAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA;;AAGlB,IAAY,mBAAZ,cAA+B,UAAA,gBAAA,CAAA;;iBACb;;;;;;yBAEQ;;;AAG1B,WAAW,iBAAc"}

package/dist/default/define/audio/skin.tailwind.js

@@ -1,7 +1,9 @@
+import { safeDefine } from "../safe-define.js";
 import { SkinMixin } from "../skin-mixin.js";
 import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
 import { tooltipState } from "../../skins/dist/default/shared/tailwind/tooltip-state.js";
 import "../media/container.js";
+import "../ui/error-dialog.js";
 import "../ui/mute-button.js";
 import "../ui/play-button.js";
 import "../ui/playback-rate-button.js";
@@ -14,18 +16,18 @@ import "../ui/tooltip-group.js";
 import "../ui/volume-slider.js";
 import { renderIcon } from "../../icons/dist/render/default/index.js";
 import { button } from "../../skins/dist/default/default/tailwind/components/button.js";
+import { buttonGroup } from "../../skins/dist/default/default/tailwind/components/button-group.js";
 import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/default/tailwind/components/icon.js";
 import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
 import { seek } from "../../skins/dist/default/default/tailwind/components/seek.js";
 import { time } from "../../skins/dist/default/default/tailwind/components/time.js";
-import { controls, popup, root, slider } from "../../skins/dist/default/default/tailwind/audio.tailwind.js";
+import { controls, error, popup, root, slider } from "../../skins/dist/default/default/tailwind/audio.tailwind.js";
 import { ReactiveElement } from "@videojs/element";
 import { cn } from "@videojs/utils/style";
-
 //#region src/define/audio/skin.tailwind.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `<media-container class="${root}"> <slot name="media"></slot><slot></slot><div class="${controls}"> <media-tooltip-group><span class="${tooltipState.play.wrapper}"> <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}"> ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })} ${renderIcon("play", { class: cn(icon, iconState.play.play) })} ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"> <span class="${tooltipState.play.replay}">Replay</span><span class="${tooltipState.play.play}">Play</span><span class="${tooltipState.play.pause}">Pause</span></media-tooltip></span><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}"> <span class="${iconContainer}"> ${renderIcon("seek", { class: cn(icon, iconFlipped) })} <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}"> <span class="${iconContainer}"> ${renderIcon("seek", { class: icon })} <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek forward ${SEEK_TIME} seconds </media-tooltip><media-time-group class="${time.group}"> <media-time type="current" class="${time.current}"></media-time><media-time-slider class="${slider.root}"> <media-slider-track class="${slider.track}"> <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill><media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb></media-time-slider><media-time type="duration" class="${time.duration}"></media-time></media-time-group><media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}"> ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })} ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })} ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}"> <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge"> <media-slider-track class="${slider.track}"> <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb></media-volume-slider></media-popover></media-tooltip-group></div></media-container>`;
+	return `<media-container class="${root}"> <slot name="media"></slot><slot></slot><media-error-dialog class="${error.root}"> <div class="${error.dialog}"> <div class="${error.content}"> <media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="${error.description}"></media-alert-dialog-description></div><div class="${error.actions}"> <media-alert-dialog-close class="${cn(button.base, button.subtle)}">OK</media-alert-dialog-close></div></div></media-error-dialog><div class="${controls}"> <media-tooltip-group><div class="${buttonGroup}"> <span class="${tooltipState.play.wrapper}"> <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}"> ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })} ${renderIcon("play", { class: cn(icon, iconState.play.play) })} ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"> <span class="${tooltipState.play.replay}">Replay</span><span class="${tooltipState.play.play}">Play</span><span class="${tooltipState.play.pause}">Pause</span></media-tooltip></span><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}"> <span class="${iconContainer}"> ${renderIcon("seek", { class: cn(icon, iconFlipped) })} <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}"> <span class="${iconContainer}"> ${renderIcon("seek", { class: icon })} <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek forward ${SEEK_TIME} seconds </media-tooltip></div><div class="${time.group}"> <media-time type="current" class="${time.current}"></media-time><media-time-slider class="${slider.root}"> <media-slider-track class="${slider.track}"> <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill><media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb></media-time-slider><media-time type="duration" class="${time.duration}"></media-time></div><div class="${buttonGroup}"> <media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}"> ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })} ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })} ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}"> <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge"> <media-slider-track class="${slider.track}"> <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb></media-volume-slider></media-popover></div></media-tooltip-group></div></media-container>`;
 }
 var AudioSkinTailwindElement = class extends SkinMixin(ReactiveElement) {
 	static {
@@ -35,8 +37,8 @@ var AudioSkinTailwindElement = class extends SkinMixin(ReactiveElement) {
 		this.getTemplateHTML = getTemplateHTML;
 	}
 };
-customElements.define(AudioSkinTailwindElement.tagName, AudioSkinTailwindElement);
-
+safeDefine(AudioSkinTailwindElement);
 //#endregion
 export { AudioSkinTailwindElement };
+
 //# sourceMappingURL=skin.tailwind.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n  button,\n  controls,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/default/tailwind/audio.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/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\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}\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <div 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            </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=\"audio-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=\"audio-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        </media-tooltip-group>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class AudioSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'audio-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(AudioSkinTailwindElement.tagName, AudioSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioSkinTailwindElement.tagName]: AudioSkinTailwindElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,2BAAA,KAAA,wDAAA,SAAA,uCAAA,aAAA,KAAA,QAAA,yDAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,QAAA,EAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,KAAA,EAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,MAAA,EAAA,CAAA,CAAA,0EAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,aAAA,KAAA,OAAA,8BAAA,aAAA,KAAA,KAAA,4BAAA,aAAA,KAAA,MAAA,sGAAA,CAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,KAAA,OAAA,CAAA,kBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,YAAA,EAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,cAAA,CAAA,IAAA,UAAA,gGAAA,GAAA,MAAA,QAAA,CAAA,mBAAA,UAAA,yFAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,KAAA,OAAA,CAAA,kBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,MAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,aAAA,CAAA,IAAA,UAAA,+FAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,UAAA,oDAAA,KAAA,MAAA,uCAAA,KAAA,QAAA,2CAAA,OAAA,KAAA,gCAAA,OAAA,MAAA,+BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,oDAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,OAAA,CAAA,0EAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,YAAA,CAAA,gFAAA,KAAA,SAAA,0GAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,aAAA,OAAA,CAAA,6FAAA,GAAA,MAAA,QAAA,CAAA,sGAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,WAAA,EAAA,CAAA,CAAA,8HAAA,GAAA,MAAA,SAAA,MAAA,OAAA,CAAA,iCAAA,OAAA,KAAA,8EAAA,OAAA,MAAA,+BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,wEAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,WAAA,CAAA;;AAGlB,IAAY,2BAAZ,cAA+B,UAAA,gBAAA,CAAA;;iBACb;;;;;;AAIlB,eAAe,OAAO,yBAAqB,SAAS,yBAAA"}
+{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n  button,\n  buttonGroup,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/default/tailwind/audio.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/error-dialog';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\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}\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\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.subtle)}\">OK</media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <div class=\"${controls}\">\n        <media-tooltip-group>\n          <div class=\"${buttonGroup}\">\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            </media-time-slider>\n            <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n          </div>\n\n          <div class=\"${buttonGroup}\">\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=\"audio-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=\"audio-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          </div>\n        </media-tooltip-group>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class AudioSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'audio-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\nsafeDefine(AudioSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioSkinTailwindElement.tagName]: AudioSkinTailwindElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,2BAAA,KAAA,uEAAA,MAAA,KAAA,iBAAA,MAAA,OAAA,iBAAA,MAAA,QAAA,sCAAA,MAAA,MAAA,2FAAA,MAAA,YAAA,uDAAA,MAAA,QAAA,sCAAA,GAAA,OAAA,MAAA,OAAA,OAAA,CAAA,8EAAA,SAAA,sCAAA,YAAA,kBAAA,aAAA,KAAA,QAAA,yDAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,QAAA,EAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,KAAA,EAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,MAAA,EAAA,CAAA,CAAA,0EAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,aAAA,KAAA,OAAA,8BAAA,aAAA,KAAA,KAAA,4BAAA,aAAA,KAAA,MAAA,sGAAA,CAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,KAAA,CAAA,kBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,YAAA,EAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,cAAA,CAAA,IAAA,UAAA,gGAAA,GAAA,MAAA,QAAA,CAAA,mBAAA,UAAA,yFAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,KAAA,CAAA,kBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,MAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,aAAA,CAAA,IAAA,UAAA,+FAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,UAAA,6CAAA,KAAA,MAAA,uCAAA,KAAA,QAAA,2CAAA,OAAA,KAAA,gCAAA,OAAA,MAAA,+BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,oDAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,OAAA,CAAA,0EAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,YAAA,CAAA,gFAAA,KAAA,SAAA,mCAAA,YAAA,2EAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,aAAA,OAAA,CAAA,6FAAA,GAAA,MAAA,QAAA,CAAA,sGAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,WAAA,EAAA,CAAA,CAAA,8HAAA,GAAA,MAAA,SAAA,MAAA,OAAA,CAAA,iCAAA,OAAA,KAAA,8EAAA,OAAA,MAAA,+BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,wEAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,WAAA,CAAA;;AAGlB,IAAY,2BAAZ,cAA+B,UAAA,gBAAA,CAAA;;iBACb;;;;;;AAIlB,WAAW,yBAAmB"}

package/dist/default/define/background/player.js

@@ -3,7 +3,6 @@ import { MediaContainerElement } from "../../media/container-element.js";
 import { createPlayer } from "../../player/create-player.js";
 import { safeDefine } from "../safe-define.js";
 import { backgroundFeatures } from "@videojs/core/dom";
-
 //#region src/define/background/player.ts
 const { ProviderMixin } = createPlayer({ features: backgroundFeatures });
 var BackgroundVideoPlayerElement = class extends ProviderMixin(MediaElement) {
@@ -13,7 +12,7 @@ var BackgroundVideoPlayerElement = class extends ProviderMixin(MediaElement) {
 };
 safeDefine(BackgroundVideoPlayerElement);
 safeDefine(MediaContainerElement);
-
 //#endregion
 export { BackgroundVideoPlayerElement };
+
 //# sourceMappingURL=player.js.map

package/dist/default/define/background/player.js.map

@@ -1 +1 @@
-{"version":3,"file":"player.js","names":[],"sources":["../../../../src/define/background/player.ts"],"sourcesContent":["import { backgroundFeatures } 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: backgroundFeatures,\n});\n\nexport class BackgroundVideoPlayerElement extends ProviderMixin(MediaElement) {\n  static readonly tagName = 'background-video-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(BackgroundVideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoPlayerElement.tagName]: BackgroundVideoPlayerElement;\n  }\n}\n"],"mappings":";;;;;;;AAMA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,oBACX,CAAC;AAEF,IAAa,+BAAb,cAAkD,cAAc,aAAa,CAAC;;iBAClD;;;AAI5B,WAAW,6BAA6B;AACxC,WAAW,sBAAsB"}
+{"version":3,"file":"player.js","names":[],"sources":["../../../../src/define/background/player.ts"],"sourcesContent":["import { backgroundFeatures } 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: backgroundFeatures,\n});\n\nexport class BackgroundVideoPlayerElement extends ProviderMixin(MediaElement) {\n  static readonly tagName = 'background-video-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(BackgroundVideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoPlayerElement.tagName]: BackgroundVideoPlayerElement;\n  }\n}\n"],"mappings":";;;;;;AAMA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,oBACX,CAAC;AAEF,IAAa,+BAAb,cAAkD,cAAc,aAAa,CAAC;;iBAClD;;;AAI5B,WAAW,6BAA6B;AACxC,WAAW,sBAAsB"}

package/dist/default/define/background/skin.js

@@ -2,7 +2,6 @@ import { safeDefine } from "../safe-define.js";
 import skin_default from "../../_virtual/inline-css_src/define/background/skin.js";
 import { ReactiveElement } from "@videojs/element";
 import { namedNodeMapToObject } from "@videojs/utils/dom";
-
 //#region src/define/background/skin.ts
 const STYLES_ID = "__media-background-styles";
 function ensureBackgroundStyles() {
@@ -35,7 +34,7 @@ var BackgroundVideoSkinElement = class extends ReactiveElement {
 	}
 };
 safeDefine(BackgroundVideoSkinElement);
-
 //#endregion
 export { BackgroundVideoSkinElement };
+
 //# sourceMappingURL=skin.js.map

package/dist/default/define/background/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport styles from './skin.css?inline';\n\nconst STYLES_ID = '__media-background-styles';\n\nfunction ensureBackgroundStyles(): void {\n  if (document.getElementById(STYLES_ID)) return;\n  const style = document.createElement('style');\n  style.id = STYLES_ID;\n  style.textContent = styles;\n  document.head.appendChild(style);\n}\n\nfunction getTemplateHTML(_attrs: Record<string, string>) {\n  return /*html*/ `\n    <media-container>\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n    </media-container>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    ensureBackgroundStyles();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));\n    }\n  }\n}\n\nsafeDefine(BackgroundVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;AAKA,MAAM,YAAY;AAElB,SAAS,yBAA+B;AACtC,KAAI,SAAS,eAAe,UAAU,CAAE;CACxC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAc;AACpB,UAAS,KAAK,YAAY,MAAM;;AAGlC,SAAS,gBAAgB,QAAgC;AACvD,QAAgB;;AAGlB,IAAY,6BAAZ,cAA+B,gBAAA;;iBACb;;;2BACG,EAAA,MAAA,QAAA;;;yBAClB;;;AAGH,SAAO;AAEL,0BAA0B;;AAG1B,QAAA,aAAc,KAAA,YAAA,kBAAA;AACZ,QAAO,WAAA,YAAA,gBAAA,qBAAA,KAAA,WAAA,CAAA;;;;AAKX,WAAW,2BAAmB"}
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport styles from './skin.css?inline';\n\nconst STYLES_ID = '__media-background-styles';\n\nfunction ensureBackgroundStyles(): void {\n  if (document.getElementById(STYLES_ID)) return;\n  const style = document.createElement('style');\n  style.id = STYLES_ID;\n  style.textContent = styles;\n  document.head.appendChild(style);\n}\n\nfunction getTemplateHTML(_attrs: Record<string, string>) {\n  return /*html*/ `\n    <media-container>\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n    </media-container>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    ensureBackgroundStyles();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));\n    }\n  }\n}\n\nsafeDefine(BackgroundVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;AAKA,MAAM,YAAY;AAElB,SAAS,yBAA+B;AACtC,KAAI,SAAS,eAAe,UAAU,CAAE;CACxC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAc;AACpB,UAAS,KAAK,YAAY,MAAM;;AAGlC,SAAS,gBAAgB,QAAgC;AACvD,QAAgB;;AAGlB,IAAY,6BAAZ,cAA+B,gBAAA;;iBACb;;;2BACG,EAAA,MAAA,QAAA;;;yBAClB;;;AAGH,SAAO;AAEL,0BAA0B;;AAG1B,QAAA,aAAc,KAAA,YAAA,kBAAA;AACZ,QAAO,WAAA,YAAA,gBAAA,qBAAA,KAAA,WAAA,CAAA;;;;AAKX,WAAW,2BAAmB"}

package/dist/default/define/background/video.js

@@ -1,3 +1,2 @@
 import { BackgroundVideoElement } from "../media/background-video.js";
-
-export { BackgroundVideoElement };
+export { BackgroundVideoElement };

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

@@ -1,6 +1,5 @@
 import { safeDefine } from "../safe-define.js";
 import { BackgroundVideo } from "../../media/background-video/index.js";
-
 //#region src/define/media/background-video.ts
 var BackgroundVideoElement = class extends BackgroundVideo {
 	static {
@@ -8,7 +7,7 @@ var BackgroundVideoElement = class extends BackgroundVideo {
 	}
 };
 safeDefine(BackgroundVideoElement);
-
 //#endregion
 export { BackgroundVideoElement };
+
 //# sourceMappingURL=background-video.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"background-video.js","names":[],"sources":["../../../../src/define/media/background-video.ts"],"sourcesContent":["import { BackgroundVideo } from '../../media/background-video';\nimport { safeDefine } from '../safe-define';\n\nexport class BackgroundVideoElement extends BackgroundVideo {\n  static readonly tagName = 'background-video';\n}\n\nsafeDefine(BackgroundVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoElement.tagName]: BackgroundVideoElement;\n  }\n}\n"],"mappings":";;;;AAGA,IAAa,yBAAb,cAA4C,gBAAgB;;iBAChC;;;AAG5B,WAAW,uBAAuB"}
+{"version":3,"file":"background-video.js","names":[],"sources":["../../../../src/define/media/background-video.ts"],"sourcesContent":["import { BackgroundVideo } from '../../media/background-video';\nimport { safeDefine } from '../safe-define';\n\nexport class BackgroundVideoElement extends BackgroundVideo {\n  static readonly tagName = 'background-video';\n}\n\nsafeDefine(BackgroundVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoElement.tagName]: BackgroundVideoElement;\n  }\n}\n"],"mappings":";;;AAGA,IAAa,yBAAb,cAA4C,gBAAgB;;iBAChC;;;AAG5B,WAAW,uBAAuB"}

package/dist/default/define/media/container.js

@@ -1,8 +1,7 @@
 import { MediaContainerElement } from "../../media/container-element.js";
 import { safeDefine } from "../safe-define.js";
-
 //#region src/define/media/container.ts
 safeDefine(MediaContainerElement);
-
 //#endregion
+
 //# sourceMappingURL=container.js.map

package/dist/default/define/media/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","names":[],"sources":["../../../../src/define/media/container.ts"],"sourcesContent":["import { MediaContainerElement } from '../../media/container-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MediaContainerElement.tagName]: MediaContainerElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,sBAAsB"}
+{"version":3,"file":"container.js","names":[],"sources":["../../../../src/define/media/container.ts"],"sourcesContent":["import { MediaContainerElement } from '../../media/container-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MediaContainerElement.tagName]: MediaContainerElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,sBAAsB"}

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

@@ -1,6 +1,5 @@
 import { safeDefine } from "../safe-define.js";
 import { DashVideo } from "../../media/dash-video/index.js";
-
 //#region src/define/media/dash-video.ts
 var DashVideoElement = class extends DashVideo {
 	static {
@@ -8,7 +7,7 @@ var DashVideoElement = class extends DashVideo {
 	}
 };
 safeDefine(DashVideoElement);
-
 //#endregion
 export { DashVideoElement };
+
 //# sourceMappingURL=dash-video.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dash-video.js","names":[],"sources":["../../../../src/define/media/dash-video.ts"],"sourcesContent":["import { DashVideo } from '../../media/dash-video';\nimport { safeDefine } from '../safe-define';\n\nexport class DashVideoElement extends DashVideo {\n  static readonly tagName = 'dash-video';\n}\n\nsafeDefine(DashVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [DashVideoElement.tagName]: DashVideoElement;\n  }\n}\n"],"mappings":";;;;AAGA,IAAa,mBAAb,cAAsC,UAAU;;iBACpB;;;AAG5B,WAAW,iBAAiB"}
+{"version":3,"file":"dash-video.js","names":[],"sources":["../../../../src/define/media/dash-video.ts"],"sourcesContent":["import { DashVideo } from '../../media/dash-video';\nimport { safeDefine } from '../safe-define';\n\nexport class DashVideoElement extends DashVideo {\n  static readonly tagName = 'dash-video';\n}\n\nsafeDefine(DashVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [DashVideoElement.tagName]: DashVideoElement;\n  }\n}\n"],"mappings":";;;AAGA,IAAa,mBAAb,cAAsC,UAAU;;iBACpB;;;AAG5B,WAAW,iBAAiB"}

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

@@ -1,6 +1,5 @@
 import { safeDefine } from "../safe-define.js";
 import { HlsVideo } from "../../media/hls-video/index.js";
-
 //#region src/define/media/hls-video.ts
 var HlsVideoElement = class extends HlsVideo {
 	static {
@@ -8,7 +7,7 @@ var HlsVideoElement = class extends HlsVideo {
 	}
 };
 safeDefine(HlsVideoElement);
-
 //#endregion
 export { HlsVideoElement };
+
 //# sourceMappingURL=hls-video.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hls-video.js","names":[],"sources":["../../../../src/define/media/hls-video.ts"],"sourcesContent":["import { HlsVideo } from '../../media/hls-video';\nimport { safeDefine } from '../safe-define';\n\nexport class HlsVideoElement extends HlsVideo {\n  static readonly tagName = 'hls-video';\n}\n\nsafeDefine(HlsVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [HlsVideoElement.tagName]: HlsVideoElement;\n  }\n}\n"],"mappings":";;;;AAGA,IAAa,kBAAb,cAAqC,SAAS;;iBAClB;;;AAG5B,WAAW,gBAAgB"}
+{"version":3,"file":"hls-video.js","names":[],"sources":["../../../../src/define/media/hls-video.ts"],"sourcesContent":["import { HlsVideo } from '../../media/hls-video';\nimport { safeDefine } from '../safe-define';\n\nexport class HlsVideoElement extends HlsVideo {\n  static readonly tagName = 'hls-video';\n}\n\nsafeDefine(HlsVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [HlsVideoElement.tagName]: HlsVideoElement;\n  }\n}\n"],"mappings":";;;AAGA,IAAa,kBAAb,cAAqC,SAAS;;iBAClB;;;AAG5B,WAAW,gBAAgB"}

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

@@ -0,0 +1,13 @@
+import { safeDefine } from "../safe-define.js";
+import { MuxVideo } from "../../media/mux-video/index.js";
+//#region src/define/media/mux-video.ts
+var MuxVideoElement = class extends MuxVideo {
+	static {
+		this.tagName = "mux-video";
+	}
+};
+safeDefine(MuxVideoElement);
+//#endregion
+export { MuxVideoElement };
+
+//# sourceMappingURL=mux-video.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mux-video.js","names":[],"sources":["../../../../src/define/media/mux-video.ts"],"sourcesContent":["import { MuxVideo } from '../../media/mux-video';\nimport { safeDefine } from '../safe-define';\n\nexport class MuxVideoElement extends MuxVideo {\n  static readonly tagName = 'mux-video';\n}\n\nsafeDefine(MuxVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MuxVideoElement.tagName]: MuxVideoElement;\n  }\n}\n"],"mappings":";;;AAGA,IAAa,kBAAb,cAAqC,SAAS;;iBAClB;;;AAG5B,WAAW,gBAAgB"}

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

@@ -0,0 +1,13 @@
+import { safeDefine } from "../safe-define.js";
+import { NativeHlsVideo } from "../../media/native-hls-video/index.js";
+//#region src/define/media/native-hls-video.ts
+var NativeHlsVideoElement = class extends NativeHlsVideo {
+	static {
+		this.tagName = "native-hls-video";
+	}
+};
+safeDefine(NativeHlsVideoElement);
+//#endregion
+export { NativeHlsVideoElement };
+
+//# sourceMappingURL=native-hls-video.js.map