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

package/dist/dev/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,14 +16,14 @@ 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() {
@@ -31,42 +33,56 @@ function getTemplateHTML() {
       <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>
-          <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>
+          <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>
-          <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-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>
 
-          <media-time-group class="${time.group}">
+          <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}">
@@ -76,27 +92,29 @@ function getTemplateHTML() {
               <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>
+          </div>
 
-          <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>
+          <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-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-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>
@@ -110,8 +128,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/dev/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;8BACY,KAAK;;;;;oBAKf,SAAS;;yBAEJ,aAAa,KAAK,QAAQ;kEACe,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,UAAU,KAAK,OAAO,CAAC;gBACrH,WAAW,WAAW,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,QAAQ,EAAE,CAAC,CAAC;gBACnE,WAAW,QAAQ,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,KAAK,EAAE,CAAC,CAAC;gBAC7D,WAAW,SAAS,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,MAAM,EAAE,CAAC,CAAC;;iEAEd,GAAG,MAAM,QAAQ,CAAC;6BACtD,aAAa,KAAK,OAAO;6BACzB,aAAa,KAAK,KAAK;6BACvB,aAAa,KAAK,MAAM;;;;2EAIsB,CAAC,UAAU,WAAW,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,KAAK,OAAO,CAAC;2BAC/H,cAAc;gBACzB,WAAW,QAAQ,EAAE,OAAO,GAAG,MAAM,YAAY,EAAE,CAAC,CAAC;6BACxC,GAAG,KAAK,OAAO,KAAK,cAAc,CAAC,IAAI,UAAU;;;wEAGN,GAAG,MAAM,QAAQ,CAAC;4BAC9D,UAAU;;;0EAGoC,UAAU,WAAW,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,KAAK,OAAO,CAAC;2BAC7H,cAAc;gBACzB,WAAW,QAAQ,EAAE,OAAO,MAAM,CAAC,CAAC;6BACvB,GAAG,KAAK,OAAO,KAAK,aAAa,CAAC,IAAI,UAAU;;;uEAGN,GAAG,MAAM,QAAQ,CAAC;2BAC9D,UAAU;;;qCAGA,KAAK,MAAM;gDACA,KAAK,QAAQ;wCACrB,OAAO,KAAK;2CACT,OAAO,MAAM;4CACZ,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC;8CACrC,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,OAAO,CAAC;;2CAE5C,GAAG,OAAO,MAAM,MAAM,OAAO,MAAM,YAAY,CAAC;;iDAE1C,KAAK,SAAS;;;mFAGoB,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,aAAa,OAAO,CAAC;wEAC5E,GAAG,MAAM,QAAQ,CAAC;;;;wEAIlB,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,UAAU,KAAK,OAAO,CAAC;cAC7H,WAAW,cAAc,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,UAAU,EAAE,CAAC,CAAC;cACxE,WAAW,cAAc,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,UAAU,EAAE,CAAC,CAAC;cACxE,WAAW,eAAe,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,WAAW,EAAE,CAAC,CAAC;;;mHAG2B,GAAG,MAAM,SAAS,MAAM,OAAO,CAAC;0CACzG,OAAO,KAAK;2CACX,OAAO,MAAM;4CACZ,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC;;2CAExC,GAAG,OAAO,MAAM,MAAM,OAAO,MAAM,WAAW,CAAC;;;;;;;;AAS1F,IAAa,2BAAb,cAA8C,UAAU,gBAAgB,CAAC;;iBAC7C;;;yBACD;;;AAG3B,eAAe,OAAO,yBAAyB,SAAS,yBAAyB"}
+{"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;8BACY,KAAK;;;;;mCAKA,MAAM,KAAK;sBACxB,MAAM,OAAO;wBACX,MAAM,QAAQ;+CACS,MAAM,MAAM;qDACN,MAAM,YAAY;;wBAE/C,MAAM,QAAQ;+CACS,GAAG,OAAO,MAAM,OAAO,OAAO,CAAC;;;;;oBAK1D,SAAS;;wBAEL,YAAY;2BACT,aAAa,KAAK,QAAQ;oEACe,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,UAAU,KAAK,OAAO,CAAC;kBACrH,WAAW,WAAW,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,QAAQ,EAAE,CAAC,CAAC;kBACnE,WAAW,QAAQ,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,KAAK,EAAE,CAAC,CAAC;kBAC7D,WAAW,SAAS,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,MAAM,EAAE,CAAC,CAAC;;mEAEd,GAAG,MAAM,QAAQ,CAAC;+BACtD,aAAa,KAAK,OAAO;+BACzB,aAAa,KAAK,KAAK;+BACvB,aAAa,KAAK,MAAM;;;;6EAIsB,CAAC,UAAU,WAAW,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,KAAK,CAAC;6BAClH,cAAc;kBACzB,WAAW,QAAQ,EAAE,OAAO,GAAG,MAAM,YAAY,EAAE,CAAC,CAAC;+BACxC,GAAG,KAAK,OAAO,KAAK,cAAc,CAAC,IAAI,UAAU;;;0EAGN,GAAG,MAAM,QAAQ,CAAC;8BAC9D,UAAU;;;4EAGoC,UAAU,WAAW,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,KAAK,CAAC;6BAChH,cAAc;kBACzB,WAAW,QAAQ,EAAE,OAAO,MAAM,CAAC,CAAC;+BACvB,GAAG,KAAK,OAAO,KAAK,aAAa,CAAC,IAAI,UAAU;;;yEAGN,GAAG,MAAM,QAAQ,CAAC;6BAC9D,UAAU;;;;wBAIf,KAAK,MAAM;gDACa,KAAK,QAAQ;wCACrB,OAAO,KAAK;2CACT,OAAO,MAAM;4CACZ,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC;8CACrC,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,OAAO,CAAC;;2CAE5C,GAAG,OAAO,MAAM,MAAM,OAAO,MAAM,YAAY,CAAC;;iDAE1C,KAAK,SAAS;;;wBAGvC,YAAY;qFACiD,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,aAAa,OAAO,CAAC;0EAC5E,GAAG,MAAM,QAAQ,CAAC;;;;0EAIlB,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,UAAU,KAAK,OAAO,CAAC;gBAC7H,WAAW,cAAc,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,UAAU,EAAE,CAAC,CAAC;gBACxE,WAAW,cAAc,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,UAAU,EAAE,CAAC,CAAC;gBACxE,WAAW,eAAe,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,WAAW,EAAE,CAAC,CAAC;;;qHAG2B,GAAG,MAAM,SAAS,MAAM,OAAO,CAAC;4CACzG,OAAO,KAAK;6CACX,OAAO,MAAM;8CACZ,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC;;6CAExC,GAAG,OAAO,MAAM,MAAM,OAAO,MAAM,WAAW,CAAC;;;;;;;;;AAU5F,IAAa,2BAAb,cAA8C,UAAU,gBAAgB,CAAC;;iBAC7C;;;yBACD;;;AAG3B,WAAW,yBAAyB"}

package/dist/dev/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/dev/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/dev/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() {
@@ -41,7 +40,7 @@ var BackgroundVideoSkinElement = class extends ReactiveElement {
 	}
 };
 safeDefine(BackgroundVideoSkinElement);
-
 //#endregion
 export { BackgroundVideoSkinElement };
+
 //# sourceMappingURL=skin.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["styles"],"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,cAAcA;AACpB,UAAS,KAAK,YAAY,MAAM;;AAGlC,SAAS,gBAAgB,QAAgC;AACvD,QAAgB;;;;;;;;AASlB,IAAa,6BAAb,cAAgD,gBAAgB;;iBACpC;;;2BACC,EAAE,MAAM,QAA0B;;;yBACpC;;CAEzB,cAAc;AACZ,SAAO;AAEP,0BAAwB;AAExB,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAkD,kBAAkB;AAC5F,QAAK,WAAY,YAAY,gBAAgB,qBAAqB,KAAK,WAAW,CAAC;;;;AAKzF,WAAW,2BAA2B"}
+{"version":3,"file":"skin.js","names":["styles"],"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,cAAcA;AACpB,UAAS,KAAK,YAAY,MAAM;;AAGlC,SAAS,gBAAgB,QAAgC;AACvD,QAAgB;;;;;;;;AASlB,IAAa,6BAAb,cAAgD,gBAAgB;;iBACpC;;;2BACC,EAAE,MAAM,QAA0B;;;yBACpC;;CAEzB,cAAc;AACZ,SAAO;AAEP,0BAAwB;AAExB,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAkD,kBAAkB;AAC5F,QAAK,WAAY,YAAY,gBAAgB,qBAAqB,KAAK,WAAW,CAAC;;;;AAKzF,WAAW,2BAA2B"}

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

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

package/dist/dev/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/dev/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/dev/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/dev/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/dev/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/dev/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/dev/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/dev/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/dev/define/media/mux-video.d.ts

@@ -0,0 +1,14 @@
+import { MuxVideo } from "../../media/mux-video/index.js";
+
+//#region src/define/media/mux-video.d.ts
+declare class MuxVideoElement extends MuxVideo {
+  static readonly tagName = "mux-video";
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [MuxVideoElement.tagName]: MuxVideoElement;
+  }
+} //# sourceMappingURL=mux-video.d.ts.map
+//#endregion
+export { MuxVideoElement };
+//# sourceMappingURL=mux-video.d.ts.map

package/dist/dev/define/media/mux-video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mux-video.d.ts","names":[],"sources":["../../../../src/define/media/mux-video.ts"],"mappings":";;;cAGa,eAAA,SAAwB,QAAA;EAAA,gBACnB,OAAA;AAAA;AAAA,QAKV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,eAAA,CAAgB,OAAA,GAAU,eAAA;EAAA;AAAA"}

package/dist/dev/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/dev/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/dev/define/media/native-hls-video.d.ts

@@ -0,0 +1,14 @@
+import { NativeHlsVideo } from "../../media/native-hls-video/index.js";
+
+//#region src/define/media/native-hls-video.d.ts
+declare class NativeHlsVideoElement extends NativeHlsVideo {
+  static readonly tagName = "native-hls-video";
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [NativeHlsVideoElement.tagName]: NativeHlsVideoElement;
+  }
+} //# sourceMappingURL=native-hls-video.d.ts.map
+//#endregion
+export { NativeHlsVideoElement };
+//# sourceMappingURL=native-hls-video.d.ts.map

package/dist/dev/define/media/native-hls-video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-hls-video.d.ts","names":[],"sources":["../../../../src/define/media/native-hls-video.ts"],"mappings":";;;cAGa,qBAAA,SAA8B,cAAA;EAAA,gBACzB,OAAA;AAAA;AAAA,QAKV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,qBAAA,CAAsB,OAAA,GAAU,qBAAA;EAAA;AAAA"}

package/dist/dev/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

package/dist/dev/define/media/native-hls-video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-hls-video.js","names":[],"sources":["../../../../src/define/media/native-hls-video.ts"],"sourcesContent":["import { NativeHlsVideo } from '../../media/native-hls-video';\nimport { safeDefine } from '../safe-define';\n\nexport class NativeHlsVideoElement extends NativeHlsVideo {\n  static readonly tagName = 'native-hls-video';\n}\n\nsafeDefine(NativeHlsVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [NativeHlsVideoElement.tagName]: NativeHlsVideoElement;\n  }\n}\n"],"mappings":";;;AAGA,IAAa,wBAAb,cAA2C,eAAe;;iBAC9B;;;AAG5B,WAAW,sBAAsB"}

package/dist/dev/define/media/simple-hls-video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simple-hls-video.d.ts","names":[],"sources":["../../../../src/define/media/simple-hls-video.ts"],"mappings":";;;cAEa,qBAAA,SAA8B,cAAA;EAAA,gBACzB,OAAA;AAAA;AAAA,QAKV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,qBAAA,CAAsB,OAAA,GAAU,qBAAA;EAAA;AAAA"}
+{"version":3,"file":"simple-hls-video.d.ts","names":[],"sources":["../../../../src/define/media/simple-hls-video.ts"],"mappings":";;;cAGa,qBAAA,SAA8B,cAAA;EAAA,gBACzB,OAAA;AAAA;AAAA,QAKV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,qBAAA,CAAsB,OAAA,GAAU,qBAAA;EAAA;AAAA"}

package/dist/dev/define/media/simple-hls-video.js

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

package/dist/dev/define/media/simple-hls-video.js.map

@@ -1 +1 @@
-{"version":3,"file":"simple-hls-video.js","names":[],"sources":["../../../../src/define/media/simple-hls-video.ts"],"sourcesContent":["import { SimpleHlsVideo } from '../../media/simple-hls-video';\n\nexport class SimpleHlsVideoElement extends SimpleHlsVideo {\n  static readonly tagName = 'simple-hls-video';\n}\n\ncustomElements.define(SimpleHlsVideoElement.tagName, SimpleHlsVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [SimpleHlsVideoElement.tagName]: SimpleHlsVideoElement;\n  }\n}\n"],"mappings":";;;AAEA,IAAa,wBAAb,cAA2C,eAAe;;iBAC9B;;;AAG5B,eAAe,OAAO,sBAAsB,SAAS,sBAAsB"}
+{"version":3,"file":"simple-hls-video.js","names":[],"sources":["../../../../src/define/media/simple-hls-video.ts"],"sourcesContent":["import { SimpleHlsVideo } from '../../media/simple-hls-video';\nimport { safeDefine } from '../safe-define';\n\nexport class SimpleHlsVideoElement extends SimpleHlsVideo {\n  static readonly tagName = 'simple-hls-video';\n}\n\nsafeDefine(SimpleHlsVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [SimpleHlsVideoElement.tagName]: SimpleHlsVideoElement;\n  }\n}\n"],"mappings":";;;AAGA,IAAa,wBAAb,cAA2C,eAAe;;iBAC9B;;;AAG5B,WAAW,sBAAsB"}

package/dist/dev/define/safe-define.js

@@ -1,9 +1,11 @@
 //#region src/define/safe-define.ts
 /** Define a custom element only if not already registered. */
 function safeDefine(element) {
-	if (!customElements.get(element.tagName)) customElements.define(element.tagName, element);
+	const registry = globalThis.customElements;
+	if (!registry || registry.get(element.tagName)) return;
+	registry.define(element.tagName, element);
 }
-
 //#endregion
 export { safeDefine };
+
 //# sourceMappingURL=safe-define.js.map

package/dist/dev/define/safe-define.js.map

@@ -1 +1 @@
-{"version":3,"file":"safe-define.js","names":[],"sources":["../../../src/define/safe-define.ts"],"sourcesContent":["type DefinableElement = CustomElementConstructor & { tagName: string };\n\n/** Define a custom element only if not already registered. */\nexport function safeDefine(element: DefinableElement): void {\n  if (!customElements.get(element.tagName)) {\n    customElements.define(element.tagName, element);\n  }\n}\n"],"mappings":";;AAGA,SAAgB,WAAW,SAAiC;AAC1D,KAAI,CAAC,eAAe,IAAI,QAAQ,QAAQ,CACtC,gBAAe,OAAO,QAAQ,SAAS,QAAQ"}
+{"version":3,"file":"safe-define.js","names":[],"sources":["../../../src/define/safe-define.ts"],"sourcesContent":["type DefinableElement = CustomElementConstructor & { tagName: string };\n\n/** Define a custom element only if not already registered. */\nexport function safeDefine(element: DefinableElement): void {\n  const registry = globalThis.customElements;\n  if (!registry || registry.get(element.tagName)) return;\n\n  registry.define(element.tagName, element);\n}\n"],"mappings":";;AAGA,SAAgB,WAAW,SAAiC;CAC1D,MAAM,WAAW,WAAW;AAC5B,KAAI,CAAC,YAAY,SAAS,IAAI,QAAQ,QAAQ,CAAE;AAEhD,UAAS,OAAO,QAAQ,SAAS,QAAQ"}

package/dist/dev/define/skin-mixin.d.ts

@@ -2,6 +2,7 @@ import { ReactiveElement } from "@videojs/element";
 import { Constructor } from "@videojs/utils/types";
 
 //#region src/define/skin-mixin.d.ts
+type SkinStyles = CSSStyleSheet | string;
 /**
  * Mixin for skin elements that renders the template from a static
  * `getTemplateHTML` method into a shadow root. Native `<slot>` elements
@@ -12,10 +13,10 @@ import { Constructor } from "@videojs/utils/types";
  */
 declare function SkinMixin<Base extends Constructor<ReactiveElement>>(BaseClass: Base): Base & {
   shadowRootOptions: ShadowRootInit;
-  styles?: CSSStyleSheet;
+  styles?: SkinStyles;
 };
-/** Create a shared `CSSStyleSheet` from a CSS string. */
-declare function createStyles(css: string): CSSStyleSheet;
+/** Create a constructable stylesheet when available, otherwise return raw CSS. */
+declare function createStyles(css: string): SkinStyles;
 //#endregion
 export { SkinMixin, createStyles };
 //# sourceMappingURL=skin-mixin.d.ts.map

package/dist/dev/define/skin-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin-mixin.d.ts","names":[],"sources":["../../../src/define/skin-mixin.ts"],"mappings":";;;;;;AA0BA;;;;;;iBAAgB,SAAA,cAAuB,WAAA,CAAY,eAAA,EAAA,CACjD,SAAA,EAAW,IAAA,GACV,IAAA;EAAS,iBAAA,EAAmB,cAAA;EAAgB,MAAA,GAAS,aAAA;AAAA;;iBA+BxC,YAAA,CAAa,GAAA,WAAc,aAAA"}
+{"version":3,"file":"skin-mixin.d.ts","names":[],"sources":["../../../src/define/skin-mixin.ts"],"mappings":";;;;KAMK,UAAA,GAAa,aAAA;;AALsC;;;;;AAqDxD;;iBAAgB,SAAA,cAAuB,WAAA,CAAY,eAAA,EAAA,CACjD,SAAA,EAAW,IAAA,GACV,IAAA;EAAS,iBAAA,EAAmB,cAAA;EAAgB,MAAA,GAAS,UAAA;AAAA;;iBA+BxC,YAAA,CAAa,GAAA,WAAc,UAAA"}

package/dist/dev/define/skin-mixin.js

@@ -1,17 +1,35 @@
 import base_default from "../_virtual/inline-css_src/define/base.js";
 import shared_default from "../_virtual/inline-css_src/define/shared.js";
-
 //#region src/define/skin-mixin.ts
 const STYLES_ID = "__media-styles";
 function ensureRootStyles() {
-	if (document.getElementById(STYLES_ID)) return;
-	const style = document.createElement("style");
+	const doc = globalThis.document;
+	if (!doc || doc.getElementById(STYLES_ID)) return;
+	const style = doc.createElement("style");
 	style.id = STYLES_ID;
 	style.textContent = base_default;
-	document.head.appendChild(style);
+	doc.head.appendChild(style);
+}
+function isConstructableStyleSheet(value) {
+	return typeof globalThis.CSSStyleSheet !== "undefined" && value instanceof globalThis.CSSStyleSheet;
+}
+function getStyleText(style) {
+	if (typeof style === "string") return style;
+	return Array.from(style.cssRules).map((rule) => rule.cssText).join("\n");
+}
+function applyShadowStyles(shadowRoot, styles) {
+	if (styles.every(isConstructableStyleSheet) && "adoptedStyleSheets" in shadowRoot) {
+		shadowRoot.adoptedStyleSheets = styles;
+		return;
+	}
+	const doc = shadowRoot.ownerDocument;
+	for (const styleText of styles.map(getStyleText)) {
+		const style = doc.createElement("style");
+		style.textContent = styleText;
+		shadowRoot.appendChild(style);
+	}
 }
-const sharedSheet = new CSSStyleSheet();
-sharedSheet.replaceSync(shared_default);
+const sharedSheet = createStyles(shared_default);
 /**
 * Mixin for skin elements that renders the template from a static
 * `getTemplateHTML` method into a shadow root. Native `<slot>` elements
@@ -31,22 +49,23 @@ function SkinMixin(BaseClass) {
 			if (!this.shadowRoot) {
 				const ctor = this.constructor;
 				this.attachShadow(ctor.shadowRootOptions);
+				if (ctor.getTemplateHTML) this.shadowRoot.innerHTML = ctor.getTemplateHTML();
 				const sheets = [sharedSheet];
 				if (ctor.styles) sheets.push(ctor.styles);
-				this.shadowRoot.adoptedStyleSheets = sheets;
-				if (ctor.getTemplateHTML) this.shadowRoot.innerHTML = ctor.getTemplateHTML();
+				applyShadowStyles(this.shadowRoot, sheets);
 			}
 		}
 	}
 	return SkinElement;
 }
-/** Create a shared `CSSStyleSheet` from a CSS string. */
+/** Create a constructable stylesheet when available, otherwise return raw CSS. */
 function createStyles(css) {
-	const sheet = new CSSStyleSheet();
+	if (typeof globalThis.CSSStyleSheet === "undefined") return css;
+	const sheet = new globalThis.CSSStyleSheet();
 	sheet.replaceSync(css);
 	return sheet;
 }
-
 //#endregion
 export { SkinMixin, createStyles };
+
 //# sourceMappingURL=skin-mixin.js.map