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

package/dist/dev/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/dev/define/audio/skin.d.ts

@@ -4,11 +4,11 @@ import { ReactiveElement } from "@videojs/element";
 declare function getTemplateHTML(): string;
 declare const AudioSkinElement_base: typeof ReactiveElement & {
   shadowRootOptions: ShadowRootInit;
-  styles?: CSSStyleSheet;
+  styles?: string | CSSStyleSheet;
 };
 declare class AudioSkinElement extends AudioSkinElement_base {
   static readonly tagName = "audio-skin";
-  static styles: CSSStyleSheet;
+  static styles: string | CSSStyleSheet;
   static getTemplateHTML: typeof getTemplateHTML;
 }
 declare global {

package/dist/dev/define/audio/skin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/audio/skin.ts"],"mappings":";;;iBAoBS,eAAA,CAAA;AAAA,cAAe,qBAAA;;;;cA6EX,gBAAA,SAAyB,qBAAA;EAAA,gBACpB,OAAA;EAAA,OACT,MAAA,EAAM,aAAA;EAAA,OACN,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,gBAAA,CAAiB,OAAA,GAAU,gBAAA;EAAA;AAAA"}
+{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/audio/skin.ts"],"mappings":";;;iBAsBS,eAAA,CAAA;AAAA,cAAe,qBAAA;;;;cA6FX,gBAAA,SAAyB,qBAAA;EAAA,gBACpB,OAAA;EAAA,OACT,MAAA,WAAM,aAAA;EAAA,OACN,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,gBAAA,CAAiB,OAAA,GAAU,gBAAA;EAAA;AAAA"}

package/dist/dev/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,7 +15,6 @@ 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() {
@@ -23,41 +24,55 @@ function getTemplateHTML() {
       <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>
-          <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>
+          <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-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-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>
 
-          <media-time-group class="media-time">
-            <media-time type="current" class="media-time__value"></media-time>
+          <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>
@@ -65,28 +80,30 @@ function getTemplateHTML() {
               </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-time type="duration" class="media-time"></media-time>
+          </div>
 
-          <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>
+          <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-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-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>
@@ -103,8 +120,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/dev/define/audio/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["styles"],"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;;;;;;;;;cASJ,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;cACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;cAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;2EAQF,CAAC,UAAU;;gBAEtE,WAAW,QAAQ,EAAE,OAAO,mDAAmD,CAAC,CAAC;gDACjD,UAAU;;;;4BAI9B,UAAU;;;0EAGoC,UAAU;;gBAEpE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;gDAC7B,UAAU;;;;2BAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;cAqBvB,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;;;;AAiBzF,IAAa,mBAAb,cAAsC,UAAU,gBAAgB,CAAC;;iBACrC;;;gBACV,aAAaA,aAAO;;;yBACX;;;AAG3B,eAAe,OAAO,iBAAiB,SAAS,iBAAiB"}
+{"version":3,"file":"skin.js","names":["styles"],"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;;;;;;;;;;;;;;;;;;;;;;gBAsBF,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;gBACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;gBAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;6EAQF,CAAC,UAAU;;kBAEtE,WAAW,QAAQ,EAAE,OAAO,mDAAmD,CAAC,CAAC;kDACjD,UAAU;;;;8BAI9B,UAAU;;;4EAGoC,UAAU;;kBAEpE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;kDAC7B,UAAU;;;;6BAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;;;gBAuBvB,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;;;;;AAkB3F,IAAa,mBAAb,cAAsC,UAAU,gBAAgB,CAAC;;iBACrC;;;gBACV,aAAaA,aAAO;;;yBACX;;;AAG3B,WAAW,iBAAiB"}

package/dist/dev/define/audio/skin.tailwind.d.ts

@@ -4,7 +4,7 @@ import { ReactiveElement } from "@videojs/element";
 declare function getTemplateHTML(): string;
 declare const AudioSkinTailwindElement_base: typeof ReactiveElement & {
   shadowRootOptions: ShadowRootInit;
-  styles?: CSSStyleSheet;
+  styles?: string | CSSStyleSheet;
 };
 declare class AudioSkinTailwindElement extends AudioSkinTailwindElement_base {
   static readonly tagName = "audio-skin-tailwind";

package/dist/dev/define/audio/skin.tailwind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/audio/skin.tailwind.ts"],"mappings":";;;iBAmCS,eAAA,CAAA;AAAA,cAAe,6BAAA;;;;cA+EX,wBAAA,SAAiC,6BAAA;EAAA,gBAC5B,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,wBAAA,CAAyB,OAAA,GAAU,wBAAA;EAAA;AAAA"}
+{"version":3,"file":"skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/audio/skin.tailwind.ts"],"mappings":";;;iBAuCS,eAAA,CAAA;AAAA,cAAe,6BAAA;;;;cA+FX,wBAAA,SAAiC,6BAAA;EAAA,gBAC5B,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,wBAAA,CAAyB,OAAA,GAAU,wBAAA;EAAA;AAAA"}