@videojs/html 10.0.0-beta.1 → 10.0.0-beta.2

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

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport {\n  bufferingIndicator,\n  button,\n  buttonGroup,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/minimal/tailwind/video.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\nimport { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root(true)}\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"${bufferingIndicator}\">\n        ${renderIcon('spinner')}\n      </media-buffering-indicator>\n\n      <!--<div class=\"${error.root}\" role=\"alertdialog\" aria-labelledby=\"media-error-title\" aria-describedby=\"media-error-description\">\n        <div class=\"${error.dialog}\">\n          <div class=\"${error.content}\">\n            <p id=\"media-error-title\" class=\"${error.title}\">Something went wrong.</p>\n            <p id=\"media-error-description\">An error occurred while trying to play the video. Please try again.</p>\n          </div>\n          <div class=\"${error.actions}\">\n            <button type=\"button\" class=\"${cn(button.base, button.default)}\">OK</button>\n          </div>\n        </div>\n      </div>-->\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <span class=\"${buttonGroup}\">\n          <span class=\"${tooltipState.play.wrapper}\">\n            <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, 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.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.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        </span>\n\n        <span class=\"${time.controls}\">\n          <media-time-group class=\"${time.group}\">\n            <media-time type=\"current\" class=\"${time.current}\"></media-time>\n            <media-time-separator class=\"${time.separator}\"></media-time-separator>\n            <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n          </media-time-group>\n\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        </span>\n\n        <span class=\"${buttonGroup}\">\n          <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"${cn(button.base, button.icon, playbackRate.button)}\">\n          </media-playback-rate-button>\n          <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            Toggle playback rate\n          </media-tooltip>\n\n          <media-mute-button commandfor=\"video-volume-popover\" class=\"${cn(button.base, button.icon, iconState.mute.button)}\">\n            ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n            ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n            ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n          </media-mute-button>\n\n          <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.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=\"${slider.thumb.base}\"></media-slider-thumb>\n            </media-volume-slider>\n          </media-popover>\n\n          <span class=\"${tooltipState.captions.wrapper}\">\n            <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.icon, iconState.captions.button)}\">\n              ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n              ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n            </media-captions-button>\n            <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n              <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n            </media-tooltip>\n          </span>\n\n          <span class=\"${tooltipState.pip.wrapper}\">\n            <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.icon)}\">\n              ${renderIcon('pip', { class: icon })}\n            </media-pip-button>\n            <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n              <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n            </media-tooltip>\n          </span>\n\n          <span class=\"${tooltipState.fullscreen.wrapper}\">\n            <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.icon, iconState.fullscreen.button)}\">\n              ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n              ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n            </media-fullscreen-button>\n            <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n              <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n            </media-tooltip>\n          </span>\n        </span>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinTailwindElement.tagName, MinimalVideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinTailwindElement.tagName]: MinimalVideoSkinTailwindElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;8BACY,KAAK,KAAK,CAAC;;;0CAGC,mBAAmB;UACnD,WAAW,UAAU,CAAC;;;wBAGR,MAAM,KAAK;sBACb,MAAM,OAAO;wBACX,MAAM,QAAQ;+CACS,MAAM,MAAM;;;wBAGnC,MAAM,QAAQ;2CACK,GAAG,OAAO,MAAM,OAAO,QAAQ,CAAC;;;;;gDAK3B,SAAS;uBAClC,YAAY;yBACV,aAAa,KAAK,QAAQ;kEACe,GAAG,OAAO,MAAM,OAAO,MAAM,UAAU,KAAK,OAAO,CAAC;gBACtG,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,MAAM,KAAK,OAAO,CAAC;2BAChH,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,MAAM,KAAK,OAAO,CAAC;2BAC9G,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;;;;uBAId,KAAK,SAAS;qCACA,KAAK,MAAM;gDACA,KAAK,QAAQ;2CAClB,KAAK,UAAU;iDACT,KAAK,SAAS;;;sCAGzB,OAAO,KAAK;yCACT,OAAO,MAAM;0CACZ,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC;4CACrC,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,OAAO,CAAC;;yCAE5C,GAAG,OAAO,MAAM,MAAM,OAAO,MAAM,YAAY,CAAC;;;;uBAIlE,YAAY;mFACgD,GAAG,OAAO,MAAM,OAAO,MAAM,aAAa,OAAO,CAAC;;wEAE7D,GAAG,MAAM,QAAQ,CAAC;;;;wEAIlB,GAAG,OAAO,MAAM,OAAO,MAAM,UAAU,KAAK,OAAO,CAAC;cAC9G,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,OAAO,CAAC;0CAC1F,OAAO,KAAK;2CACX,OAAO,MAAM;4CACZ,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC;;2CAExC,OAAO,MAAM,KAAK;;;;yBAIpC,aAAa,SAAS,QAAQ;0EACmB,GAAG,OAAO,MAAM,OAAO,MAAM,UAAU,SAAS,OAAO,CAAC;gBAClH,WAAW,gBAAgB,EAAE,OAAO,GAAG,MAAM,UAAU,SAAS,IAAI,EAAE,CAAC,CAAC;gBACxE,WAAW,eAAe,EAAE,OAAO,GAAG,MAAM,UAAU,SAAS,GAAG,EAAE,CAAC,CAAC;;qEAEjB,GAAG,MAAM,QAAQ,CAAC;6BAC1D,aAAa,SAAS,OAAO;6BAC7B,aAAa,SAAS,QAAQ;;;;yBAIlC,aAAa,IAAI,QAAQ;gEACc,GAAG,OAAO,MAAM,OAAO,KAAK,CAAC;gBAC7E,WAAW,OAAO,EAAE,OAAO,MAAM,CAAC,CAAC;;gEAEa,GAAG,MAAM,QAAQ,CAAC;6BACrD,aAAa,IAAI,MAAM;6BACvB,aAAa,IAAI,KAAK;;;;yBAI1B,aAAa,WAAW,QAAQ;8EACqB,GAAG,OAAO,MAAM,OAAO,MAAM,UAAU,WAAW,OAAO,CAAC;gBACxH,WAAW,oBAAoB,EAAE,OAAO,GAAG,MAAM,UAAU,WAAW,MAAM,EAAE,CAAC,CAAC;gBAChF,WAAW,mBAAmB,EAAE,OAAO,GAAG,MAAM,UAAU,WAAW,KAAK,EAAE,CAAC,CAAC;;uEAEvB,GAAG,MAAM,QAAQ,CAAC;6BAC5D,aAAa,WAAW,MAAM;6BAC9B,aAAa,WAAW,KAAK;;;;;;oBAMtC,QAAQ;;;;AAK5B,IAAa,kCAAb,cAAqD,UAAU,gBAAgB,CAAC;;iBACpD;;;yBACD;;;AAG3B,eAAe,OAAO,gCAAgC,SAAS,gCAAgC"}
+{"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport {\n  bufferingIndicator,\n  button,\n  buttonGroup,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/minimal/tailwind/video.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\nimport { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root(true)}\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"${bufferingIndicator}\">\n        ${renderIcon('spinner')}\n      </media-buffering-indicator>\n\n      <!--<div class=\"${error.root}\" role=\"alertdialog\" aria-labelledby=\"media-error-title\" aria-describedby=\"media-error-description\">\n        <div class=\"${error.dialog}\">\n          <div class=\"${error.content}\">\n            <p id=\"media-error-title\" class=\"${error.title}\">Something went wrong.</p>\n            <p id=\"media-error-description\">An error occurred while trying to play the video. Please try again.</p>\n          </div>\n          <div class=\"${error.actions}\">\n            <button type=\"button\" class=\"${cn(button.base, button.default)}\">OK</button>\n          </div>\n        </div>\n      </div>-->\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <span class=\"${buttonGroup}\">\n          <span class=\"${tooltipState.play.wrapper}\">\n            <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, 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.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.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        </span>\n\n        <span class=\"${time.controls}\">\n          <media-time-group class=\"${time.group}\">\n            <media-time type=\"current\" class=\"${time.current}\"></media-time>\n            <media-time-separator class=\"${time.separator}\"></media-time-separator>\n            <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n          </media-time-group>\n\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        </span>\n\n        <span class=\"${buttonGroup}\">\n          <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"${cn(button.base, button.icon, playbackRate.button)}\">\n          </media-playback-rate-button>\n          <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            Toggle playback rate\n          </media-tooltip>\n\n          <media-mute-button commandfor=\"video-volume-popover\" class=\"${cn(button.base, button.icon, iconState.mute.button)}\">\n            ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n            ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n            ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n          </media-mute-button>\n\n          <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.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=\"${slider.thumb.base}\"></media-slider-thumb>\n            </media-volume-slider>\n          </media-popover>\n\n          <span class=\"${tooltipState.captions.wrapper}\">\n            <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.icon, iconState.captions.button)}\">\n              ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n              ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n            </media-captions-button>\n            <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n              <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n            </media-tooltip>\n          </span>\n\n          <span class=\"${tooltipState.pip.wrapper}\">\n            <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.icon)}\">\n              ${renderIcon('pip', { class: icon })}\n            </media-pip-button>\n            <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n              <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n            </media-tooltip>\n          </span>\n\n          <span class=\"${tooltipState.fullscreen.wrapper}\">\n            <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.icon, iconState.fullscreen.button)}\">\n              ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n              ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n            </media-fullscreen-button>\n            <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n              <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n            </media-tooltip>\n          </span>\n        </span>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinTailwindElement.tagName, MinimalVideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinTailwindElement.tagName]: MinimalVideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}

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

@@ -21,122 +21,7 @@ import { ReactiveElement } from "@videojs/element";
 //#region src/define/video/skin.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `
-    <media-container class="media-default-skin media-default-skin--video">
-      <slot name="media"></slot>
-
-      <media-buffering-indicator class="media-buffering-indicator">
-        <div class="media-surface">
-          ${renderIcon("spinner", { class: "media-icon" })}
-        </div>
-      </media-buffering-indicator>
-
-      <!--<div class="media-error" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
-        <div class="media-error__dialog media-surface">
-          <div class="media-error__content">
-            <p id="media-error-title" class="media-error__title">Something went wrong.</p>
-            <p id="media-error-description" class="media-error__description">An error occurred while trying to play the video. Please try again.</p>
-          </div>
-          <div class="media-error__actions">
-            <button type="button" class="media-button">OK</button>
-          </div>
-        </div>
-      </div>-->
-
-      <media-controls class="media-surface media-controls">
-        <media-play-button commandfor="play-tooltip" class="media-button 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--icon media-button--seek">
-          <span class="media-icon__container">
-            ${renderIcon("seek", { class: "media-icon 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--icon media-button--seek">
-          <span class="media-icon__container">
-            ${renderIcon("seek", { class: "media-icon" })}
-            <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--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="video-volume-popover" class="media-button 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="video-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-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
-          ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })}
-          ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })}
-        </media-captions-button>
-        <media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span>
-          <span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
-        </media-tooltip>
-
-        <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon">
-          ${renderIcon("pip", { class: "media-icon" })}
-        </media-pip-button>
-        <media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
-          <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
-        </media-tooltip>
-
-        <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
-          ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })}
-          ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })}
-        </media-fullscreen-button>
-        <media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
-          <span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
-        </media-tooltip>
-      </media-controls>
-
-      <div class="media-overlay"></div>
-    </media-container>
-  `;
+	return `<media-container class="media-default-skin media-default-skin--video"><slot name="media"></slot><media-buffering-indicator class="media-buffering-indicator"><div class="media-surface"> ${renderIcon("spinner", { class: "media-icon" })} </div></media-buffering-indicator><media-controls class="media-surface media-controls"><media-play-button commandfor="play-tooltip" class="media-button 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--icon media-button--seek"><span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon 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--icon media-button--seek"><span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon" })} <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--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="video-volume-popover" class="media-button 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="video-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-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions"> ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })} ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip"><span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span><span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span></media-tooltip><media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon"> ${renderIcon("pip", { class: "media-icon" })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip"><span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span><span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span></media-tooltip><media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen"> ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })} ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip"><span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span><span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span></media-tooltip></media-controls><div class="media-overlay"></div></media-container>`;
 }
 var VideoSkinElement = class extends SkinMixin(ReactiveElement) {
 	static {

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

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/define/video/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/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\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--video\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        <div class=\"media-surface\">\n          ${renderIcon('spinner', { class: 'media-icon' })}\n        </div>\n      </media-buffering-indicator>\n\n      <!--<div class=\"media-error\" role=\"alertdialog\" aria-labelledby=\"media-error-title\" aria-describedby=\"media-error-description\">\n        <div class=\"media-error__dialog media-surface\">\n          <div class=\"media-error__content\">\n            <p id=\"media-error-title\" class=\"media-error__title\">Something went wrong.</p>\n            <p id=\"media-error-description\" class=\"media-error__description\">An error occurred while trying to play the video. Please try again.</p>\n          </div>\n          <div class=\"media-error__actions\">\n            <button type=\"button\" class=\"media-button\">OK</button>\n          </div>\n        </div>\n      </div>-->\n\n      <media-controls class=\"media-surface media-controls\">\n        <media-play-button commandfor=\"play-tooltip\" class=\"media-button 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--icon media-button--seek\">\n          <span class=\"media-icon__container\">\n            ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}\n            <span class=\"media-icon__label\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-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--icon media-button--seek\">\n          <span class=\"media-icon__container\">\n            ${renderIcon('seek', { class: 'media-icon' })}\n            <span class=\"media-icon__label\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-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--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=\"video-volume-popover\" class=\"media-button media-button--icon media-button--mute\">\n          ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n          ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n          ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n        </media-mute-button>\n\n        <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-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\n        <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--icon media-button--captions\">\n          ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n          ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n        </media-captions-button>\n        <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          <span class=\"media-tooltip-label media-tooltip-label--enable-captions\">Enable captions</span>\n          <span class=\"media-tooltip-label media-tooltip-label--disable-captions\">Disable captions</span>\n        </media-tooltip>\n\n        <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--icon\">\n          ${renderIcon('pip', { class: 'media-icon' })}\n        </media-pip-button>\n        <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          <span class=\"media-tooltip-label media-tooltip-label--enter-pip\">Enter picture-in-picture</span>\n          <span class=\"media-tooltip-label media-tooltip-label--exit-pip\">Exit picture-in-picture</span>\n        </media-tooltip>\n\n        <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--icon media-button--fullscreen\">\n          ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n          ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n        </media-fullscreen-button>\n        <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          <span class=\"media-tooltip-label media-tooltip-label--enter-fullscreen\">Enter fullscreen</span>\n          <span class=\"media-tooltip-label media-tooltip-label--exit-fullscreen\">Exit fullscreen</span>\n        </media-tooltip>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(VideoSkinElement.tagName, VideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinElement.tagName]: VideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;;YAMN,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;;;;;;;;;;;YAkB/C,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;YACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;YAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;yEAQF,CAAC,UAAU;;cAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;8CAChC,UAAU;;;;0BAI9B,UAAU;;;wEAGoC,UAAU;;cAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;8CACZ,UAAU;;;;yBAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;YAqBvB,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;YACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;YACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;YAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;YAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;YAQ3E,WAAW,OAAO,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;YAQ3C,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;YACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;AAa/F,IAAa,mBAAb,cAAsC,UAAU,gBAAgB,CAAC;;iBACrC;;;gBACV,aAAaA,aAAO;;;yBACX;;;AAG3B,eAAe,OAAO,iBAAiB,SAAS,iBAAiB"}
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/video/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/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\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--video\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        <div class=\"media-surface\">\n          ${renderIcon('spinner', { class: 'media-icon' })}\n        </div>\n      </media-buffering-indicator>\n\n      <!--<div class=\"media-error\" role=\"alertdialog\" aria-labelledby=\"media-error-title\" aria-describedby=\"media-error-description\">\n        <div class=\"media-error__dialog media-surface\">\n          <div class=\"media-error__content\">\n            <p id=\"media-error-title\" class=\"media-error__title\">Something went wrong.</p>\n            <p id=\"media-error-description\" class=\"media-error__description\">An error occurred while trying to play the video. Please try again.</p>\n          </div>\n          <div class=\"media-error__actions\">\n            <button type=\"button\" class=\"media-button\">OK</button>\n          </div>\n        </div>\n      </div>-->\n\n      <media-controls class=\"media-surface media-controls\">\n        <media-play-button commandfor=\"play-tooltip\" class=\"media-button 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--icon media-button--seek\">\n          <span class=\"media-icon__container\">\n            ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}\n            <span class=\"media-icon__label\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-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--icon media-button--seek\">\n          <span class=\"media-icon__container\">\n            ${renderIcon('seek', { class: 'media-icon' })}\n            <span class=\"media-icon__label\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-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--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=\"video-volume-popover\" class=\"media-button media-button--icon media-button--mute\">\n          ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n          ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n          ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n        </media-mute-button>\n\n        <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-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\n        <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--icon media-button--captions\">\n          ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n          ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n        </media-captions-button>\n        <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          <span class=\"media-tooltip-label media-tooltip-label--enable-captions\">Enable captions</span>\n          <span class=\"media-tooltip-label media-tooltip-label--disable-captions\">Disable captions</span>\n        </media-tooltip>\n\n        <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--icon\">\n          ${renderIcon('pip', { class: 'media-icon' })}\n        </media-pip-button>\n        <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          <span class=\"media-tooltip-label media-tooltip-label--enter-pip\">Enter picture-in-picture</span>\n          <span class=\"media-tooltip-label media-tooltip-label--exit-pip\">Exit picture-in-picture</span>\n        </media-tooltip>\n\n        <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--icon media-button--fullscreen\">\n          ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n          ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n        </media-fullscreen-button>\n        <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          <span class=\"media-tooltip-label media-tooltip-label--enter-fullscreen\">Enter fullscreen</span>\n          <span class=\"media-tooltip-label media-tooltip-label--exit-fullscreen\">Exit fullscreen</span>\n        </media-tooltip>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(VideoSkinElement.tagName, VideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinElement.tagName]: VideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,4LAAA,WAAA,WAAA,EAAA,OAAA,cAAA,CAAA,CAAA,mMAAA,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,oGAAA,WAAA,QAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,mCAAA,UAAA,4IAAA,UAAA,yFAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,cAAA,CAAA,CAAA,mCAAA,UAAA,0IAAA,UAAA,w7BAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,gpBAAA,WAAA,gBAAA,EAAA,OAAA,uCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,+YAAA,WAAA,OAAA,EAAA,OAAA,cAAA,CAAA,CAAA,8aAAA,WAAA,oBAAA,EAAA,OAAA,2CAAA,CAAA,CAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,0CAAA,CAAA,CAAA;;;;iBAIK;;;gBACL,aAAQ,aAAQ;;;yBACV"}

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

@@ -30,130 +30,7 @@ import { cn } from "@videojs/utils/style";
 //#region src/define/video/skin.tailwind.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `
-    <media-container class="${root(true)}">
-      <slot name="media"></slot>
-
-      <media-buffering-indicator class="${bufferingIndicator.root}">
-        <div class="${bufferingIndicator.container}">
-          ${renderIcon("spinner")}
-        </div>
-      </media-buffering-indicator>
-
-      <!--<div class="${error.root}" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
-        <div class="${error.dialog}">
-          <div class="${error.content}">
-            <p id="media-error-title" class="${error.title}">Something went wrong.</p>
-            <p id="media-error-description" class="${error.description}">An error occurred while trying to play the video. Please try again.</p>
-          </div>
-          <div class="${error.actions}">
-            <button type="button" class="${cn(button.base, button.default)}">OK</button>
-          </div>
-        </div>
-      </div>-->
-
-      <media-controls data-controls="" class="${controls}">
-        <span class="${tooltipState.play.wrapper}">
-          <media-play-button commandfor="play-tooltip" class="${cn(button.base, 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.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.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.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="video-volume-popover" class="${cn(button.base, 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="video-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>
-
-        <span class="${tooltipState.captions.wrapper}">
-          <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}">
-            ${renderIcon("captions-off", { class: cn(icon, iconState.captions.off) })}
-            ${renderIcon("captions-on", { class: cn(icon, iconState.captions.on) })}
-          </media-captions-button>
-          <media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
-            <span class="${tooltipState.captions.enable}">Enable captions</span>
-            <span class="${tooltipState.captions.disable}">Disable captions</span>
-          </media-tooltip>
-        </span>
-
-        <span class="${tooltipState.pip.wrapper}">
-          <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon)}">
-            ${renderIcon("pip", { class: icon })}
-          </media-pip-button>
-          <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
-            <span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
-            <span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
-          </media-tooltip>
-        </span>
-
-        <span class="${tooltipState.fullscreen.wrapper}">
-          <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}">
-            ${renderIcon("fullscreen-enter", { class: cn(icon, iconState.fullscreen.enter) })}
-            ${renderIcon("fullscreen-exit", { class: cn(icon, iconState.fullscreen.exit) })}
-          </media-fullscreen-button>
-          <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
-            <span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span>
-            <span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span>
-          </media-tooltip>
-        </span>
-      </media-controls>
-
-      <div class="${overlay}"></div>
-    </media-container>
-  `;
+	return `<media-container class="${root(true)}"><slot name="media"></slot><media-buffering-indicator class="${bufferingIndicator.root}"><div class="${bufferingIndicator.container}"> ${renderIcon("spinner")} </div></media-buffering-indicator><!--<div class="${error.root}" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description"><div class="${error.dialog}"><div class="${error.content}"><p id="media-error-title" class="${error.title}">Something went wrong.</p><p id="media-error-description" class="${error.description}">An error occurred while trying to play the video. Please try again.</p></div><div class="${error.actions}"><button type="button" class="${cn(button.base, button.default)}">OK</button></div></div></div>--><media-controls data-controls="" class="${controls}"><span class="${tooltipState.play.wrapper}"><media-play-button commandfor="play-tooltip" class="${cn(button.base, 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.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.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.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="video-volume-popover" class="${cn(button.base, 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="video-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><span class="${tooltipState.captions.wrapper}"><media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}"> ${renderIcon("captions-off", { class: cn(icon, iconState.captions.off) })} ${renderIcon("captions-on", { class: cn(icon, iconState.captions.on) })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.captions.enable}">Enable captions</span><span class="${tooltipState.captions.disable}">Disable captions</span></media-tooltip></span><span class="${tooltipState.pip.wrapper}"><media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon)}"> ${renderIcon("pip", { class: icon })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.pip.enter}">Enter picture-in-picture</span><span class="${tooltipState.pip.exit}">Exit picture-in-picture</span></media-tooltip></span><span class="${tooltipState.fullscreen.wrapper}"><media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}"> ${renderIcon("fullscreen-enter", { class: cn(icon, iconState.fullscreen.enter) })} ${renderIcon("fullscreen-exit", { class: cn(icon, iconState.fullscreen.exit) })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span><span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span></media-tooltip></span></media-controls><div class="${overlay}"></div></media-container>`;
 }
 var VideoSkinTailwindElement = class extends SkinMixin(ReactiveElement) {
 	static {

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

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n  bufferingIndicator,\n  button,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root(true)}\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n        <div class=\"${bufferingIndicator.container}\">\n          ${renderIcon('spinner')}\n        </div>\n      </media-buffering-indicator>\n\n      <!--<div class=\"${error.root}\" role=\"alertdialog\" aria-labelledby=\"media-error-title\" aria-describedby=\"media-error-description\">\n        <div class=\"${error.dialog}\">\n          <div class=\"${error.content}\">\n            <p id=\"media-error-title\" class=\"${error.title}\">Something went wrong.</p>\n            <p id=\"media-error-description\" class=\"${error.description}\">An error occurred while trying to play the video. Please try again.</p>\n          </div>\n          <div class=\"${error.actions}\">\n            <button type=\"button\" class=\"${cn(button.base, button.default)}\">OK</button>\n          </div>\n        </div>\n      </div>-->\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <span class=\"${tooltipState.play.wrapper}\">\n          <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, 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.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.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.icon, playbackRate.button)}\"></media-playback-rate-button>\n        <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n          Toggle playback rate\n        </media-tooltip>\n\n        <media-mute-button commandfor=\"video-volume-popover\" class=\"${cn(button.base, button.icon, iconState.mute.button)}\">\n          ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n          ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n          ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n        </media-mute-button>\n\n        <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n          <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n            <media-slider-track class=\"${slider.track}\">\n              <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n            </media-slider-track>\n            <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n          </media-volume-slider>\n        </media-popover>\n\n        <span class=\"${tooltipState.captions.wrapper}\">\n          <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.icon, iconState.captions.button)}\">\n            ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n            ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n          </media-captions-button>\n          <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n            <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n          </media-tooltip>\n        </span>\n\n        <span class=\"${tooltipState.pip.wrapper}\">\n          <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.icon)}\">\n            ${renderIcon('pip', { class: icon })}\n          </media-pip-button>\n          <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n            <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n          </media-tooltip>\n        </span>\n\n        <span class=\"${tooltipState.fullscreen.wrapper}\">\n          <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.icon, iconState.fullscreen.button)}\">\n            ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n            ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n          </media-fullscreen-button>\n          <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n            <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n          </media-tooltip>\n        </span>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(VideoSkinTailwindElement.tagName, VideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinTailwindElement.tagName]: VideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n  bufferingIndicator,\n  button,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root(true)}\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n        <div class=\"${bufferingIndicator.container}\">\n          ${renderIcon('spinner')}\n        </div>\n      </media-buffering-indicator>\n\n      <!--<div class=\"${error.root}\" role=\"alertdialog\" aria-labelledby=\"media-error-title\" aria-describedby=\"media-error-description\">\n        <div class=\"${error.dialog}\">\n          <div class=\"${error.content}\">\n            <p id=\"media-error-title\" class=\"${error.title}\">Something went wrong.</p>\n            <p id=\"media-error-description\" class=\"${error.description}\">An error occurred while trying to play the video. Please try again.</p>\n          </div>\n          <div class=\"${error.actions}\">\n            <button type=\"button\" class=\"${cn(button.base, button.default)}\">OK</button>\n          </div>\n        </div>\n      </div>-->\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <span class=\"${tooltipState.play.wrapper}\">\n          <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, 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.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.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.icon, playbackRate.button)}\"></media-playback-rate-button>\n        <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n          Toggle playback rate\n        </media-tooltip>\n\n        <media-mute-button commandfor=\"video-volume-popover\" class=\"${cn(button.base, button.icon, iconState.mute.button)}\">\n          ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n          ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n          ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n        </media-mute-button>\n\n        <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n          <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n            <media-slider-track class=\"${slider.track}\">\n              <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n            </media-slider-track>\n            <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n          </media-volume-slider>\n        </media-popover>\n\n        <span class=\"${tooltipState.captions.wrapper}\">\n          <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.icon, iconState.captions.button)}\">\n            ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n            ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n          </media-captions-button>\n          <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n            <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n          </media-tooltip>\n        </span>\n\n        <span class=\"${tooltipState.pip.wrapper}\">\n          <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.icon)}\">\n            ${renderIcon('pip', { class: icon })}\n          </media-pip-button>\n          <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n            <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n          </media-tooltip>\n        </span>\n\n        <span class=\"${tooltipState.fullscreen.wrapper}\">\n          <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.icon, iconState.fullscreen.button)}\">\n            ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n            ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n          </media-fullscreen-button>\n          <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n            <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n          </media-tooltip>\n        </span>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(VideoSkinTailwindElement.tagName, VideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinTailwindElement.tagName]: VideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}

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

@@ -2,24 +2,7 @@ import { namedNodeMapToObject } from "@videojs/utils/dom";
 
 //#region src/media/background-video/index.ts
 function getTemplateHTML(attrs) {
-	return `
-    <style>
-      :host {
-        position: relative;
-      }
-
-      video {
-        position: absolute;
-        inset: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: var(--media-object-fit, inherit);
-        object-position: var(--media-object-position, 50% 50%);
-      }
-    </style>
-    <slot></slot>
-    <video ${serializeAttributes(attrs)}></video>
-  `;
+	return `<style> :host { position: relative; } video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--media-object-fit, inherit); object-position: var(--media-object-position, 50% 50%); } </style><slot></slot><video ${serializeAttributes(attrs)}></video>`;
 }
 var BackgroundVideo = class extends HTMLElement {
 	static {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.ts"],"sourcesContent":["import { namedNodeMapToObject } from '@videojs/utils/dom';\n\nfunction getTemplateHTML(attrs: Record<string, string>) {\n  return /*html*/ `\n    <style>\n      :host {\n        position: relative;\n      }\n\n      video {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: var(--media-object-fit, inherit);\n        object-position: var(--media-object-position, 50% 50%);\n      }\n    </style>\n    <slot></slot>\n    <video ${serializeAttributes(attrs)}></video>\n  `;\n}\n\n// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends HTMLElement {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n  static get observedAttributes() {\n    return ['src'];\n  }\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideo).shadowRootOptions);\n\n      const attrs = {\n        ...namedNodeMapToObject(this.attributes),\n        ...(!this.hasAttribute('nomuted') && { muted: '' }),\n        ...(!this.hasAttribute('noloop') && { loop: '' }),\n        ...(!this.hasAttribute('noautoplay') && { autoplay: '' }),\n        playsinline: '',\n        disableremoteplayback: '',\n        disablepictureinpicture: '',\n      };\n\n      this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n    }\n\n    // Neither Chrome or Firefox support setting the muted attribute\n    // after using document.createElement.\n    // Get around this by setting the muted property manually.\n    this.target!.muted = !this.hasAttribute('nomuted');\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.target!.src = newValue ?? '';\n    }\n  }\n\n  get target(): HTMLVideoElement | null {\n    return (\n      this.querySelector(':scope > [slot=media]') ??\n      this.querySelector('video') ??\n      this.shadowRoot?.querySelector('video') ??\n      null\n    );\n  }\n}\n\nconst VideoAttributes = [\n  'autoplay',\n  'controls',\n  'controlslist',\n  'crossorigin',\n  'disablepictureinpicture',\n  'disableremoteplayback',\n  'loop',\n  'muted',\n  'playsinline',\n  'preload',\n] as const;\n\nfunction serializeAttributes(attrs: Record<string, string>): string {\n  let html = '';\n  for (const key in attrs) {\n    // Skip forwarding non native video attributes.\n    if (!VideoAttributes.includes(key as any)) continue;\n\n    const value = attrs[key];\n    if (value === '') html += ` ${key}`;\n    else html += ` ${key}=\"${value}\"`;\n  }\n  return html;\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB,OAA+B;AACtD,QAAgB;;;;;;;;;;;;;;;;aAgBL,oBAAoB,MAAM,CAAC;;;AAKxC,IAAa,kBAAb,cAAqC,YAAY;;2BACpB,EAAE,MAAM,QAA0B;;;yBACpC;;CACzB,WAAW,qBAAqB;AAC9B,SAAO,CAAC,MAAM;;CAGhB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;GAEjF,MAAM,QAAQ;IACZ,GAAG,qBAAqB,KAAK,WAAW;IACxC,GAAI,CAAC,KAAK,aAAa,UAAU,IAAI,EAAE,OAAO,IAAI;IAClD,GAAI,CAAC,KAAK,aAAa,SAAS,IAAI,EAAE,MAAM,IAAI;IAChD,GAAI,CAAC,KAAK,aAAa,aAAa,IAAI,EAAE,UAAU,IAAI;IACxD,aAAa;IACb,uBAAuB;IACvB,yBAAyB;IAC1B;AAED,QAAK,WAAY,YAAY,gBAAgB,MAAM;;AAMrD,OAAK,OAAQ,QAAQ,CAAC,KAAK,aAAa,UAAU;;CAGpD,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,OAAQ,MAAM,YAAY;;CAInC,IAAI,SAAkC;AACpC,SACE,KAAK,cAAc,wBAAwB,IAC3C,KAAK,cAAc,QAAQ,IAC3B,KAAK,YAAY,cAAc,QAAQ,IACvC;;;AAKN,MAAM,kBAAkB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,oBAAoB,OAAuC;CAClE,IAAI,OAAO;AACX,MAAK,MAAM,OAAO,OAAO;AAEvB,MAAI,CAAC,gBAAgB,SAAS,IAAW,CAAE;EAE3C,MAAM,QAAQ,MAAM;AACpB,MAAI,UAAU,GAAI,SAAQ,IAAI;MACzB,SAAQ,IAAI,IAAI,IAAI,MAAM;;AAEjC,QAAO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.ts"],"sourcesContent":["import { namedNodeMapToObject } from '@videojs/utils/dom';\n\nfunction getTemplateHTML(attrs: Record<string, string>) {\n  return /*html*/ `\n    <style>\n      :host {\n        position: relative;\n      }\n\n      video {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: var(--media-object-fit, inherit);\n        object-position: var(--media-object-position, 50% 50%);\n      }\n    </style>\n    <slot></slot>\n    <video ${serializeAttributes(attrs)}></video>\n  `;\n}\n\n// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends HTMLElement {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n  static get observedAttributes() {\n    return ['src'];\n  }\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideo).shadowRootOptions);\n\n      const attrs = {\n        ...namedNodeMapToObject(this.attributes),\n        ...(!this.hasAttribute('nomuted') && { muted: '' }),\n        ...(!this.hasAttribute('noloop') && { loop: '' }),\n        ...(!this.hasAttribute('noautoplay') && { autoplay: '' }),\n        playsinline: '',\n        disableremoteplayback: '',\n        disablepictureinpicture: '',\n      };\n\n      this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n    }\n\n    // Neither Chrome or Firefox support setting the muted attribute\n    // after using document.createElement.\n    // Get around this by setting the muted property manually.\n    this.target!.muted = !this.hasAttribute('nomuted');\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.target!.src = newValue ?? '';\n    }\n  }\n\n  get target(): HTMLVideoElement | null {\n    return (\n      this.querySelector(':scope > [slot=media]') ??\n      this.querySelector('video') ??\n      this.shadowRoot?.querySelector('video') ??\n      null\n    );\n  }\n}\n\nconst VideoAttributes = [\n  'autoplay',\n  'controls',\n  'controlslist',\n  'crossorigin',\n  'disablepictureinpicture',\n  'disableremoteplayback',\n  'loop',\n  'muted',\n  'playsinline',\n  'preload',\n] as const;\n\nfunction serializeAttributes(attrs: Record<string, string>): string {\n  let html = '';\n  for (const key in attrs) {\n    // Skip forwarding non native video attributes.\n    if (!VideoAttributes.includes(key as any)) continue;\n\n    const value = attrs[key];\n    if (value === '') html += ` ${key}`;\n    else html += ` ${key}=\"${value}\"`;\n  }\n  return html;\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB,OAA+B;AACtD,QAAgB,8OAAA,oBAAA,MAAA,CAAA;;AAIlB,IAAM,kBAAN,cAAM,YAAA;;;;;yBAEM;;CACV,WAAM,qBAAkB;AACtB,SAAI,CAAA,MAAQ;;CAGd,cAAa;AACX,SAAI;AAEJ,MAAE,CAAA,KAAK,YAAA;AACN,QAAM,aAAK,KAAA,YAAA,kBAAA;GAEb,MAAA,QAAA;IACH,GAAA,qBAAA,KAAA,WAAA;;IAEQ,GAAC,CAAA,KAAO,aAAA,SAAwB,IAAC,EAAK,MAAM,IAAC;IAC9C,GAAK,CAAC,KAAA,aAAgB,aAAQ,IAAW,EAAC,UAAA,IAAA;IACzC,aAAC;IACD,uBAAmB;IACnB,yBAAyB;IAC7B;;;;;CAWF,yBAAgB,UAA2B,UAAc,UAAA;AACvD,MAAI,aAAU,SAAY,aAAa,SACrC,MAAK,OAAO,MAAA,YAAc;;CAI9B,IAAI,SAAC;SAED,KAAK,cAAY,wBAAY,IAC/B,KAAA,cAAA,QAAA,+CAEE;;;;CAMJ;CACA;CACA;CACA;CACA;;CAEA;CACA;CACA;CACA;CACD;AAED,SAAK,oBAAA,OAAA;CACH,IAAA,OAAA;AACF,MAAA,MAAA,OAAA,OAAA;AAEA,MAAM,CAAA,gBAAkB,SAAA,IAAA,CAAA;EAErB,MAAA,QAAS,MAAA;AACT,MAAA,UAAa,GAAA,SAAA,IAAA;MACb,SAAY,IAAA,IAAA,IAAA,MAAA;;AAEb,QAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/html",
   "type": "module",
-  "version": "10.0.0-beta.1",
+  "version": "10.0.0-beta.2",
   "description": "HTML library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,8 @@
     "./dist/*/define/**/*.js"
   ],
   "files": [
-    "dist"
+    "dist",
+    "cdn"
   ],
   "exports": {
     ".": {
@@ -80,11 +81,11 @@
     }
   },
   "dependencies": {
-    "@videojs/spf": "10.0.0-beta.1",
-    "@videojs/core": "10.0.0-beta.1",
-    "@videojs/store": "10.0.0-beta.1",
-    "@videojs/utils": "10.0.0-beta.1",
-    "@videojs/element": "10.0.0-beta.1"
+    "@videojs/spf": "10.0.0-beta.2",
+    "@videojs/element": "10.0.0-beta.2",
+    "@videojs/core": "10.0.0-beta.2",
+    "@videojs/store": "10.0.0-beta.2",
+    "@videojs/utils": "10.0.0-beta.2"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -92,8 +93,8 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4",
-    "@videojs/skins": "10.0.0-alpha.4",
-    "@videojs/icons": "10.0.0-beta.1"
+    "@videojs/icons": "10.0.0-beta.2",
+    "@videojs/skins": "10.0.0-alpha.4"
   },
   "publishConfig": {
     "access": "public"
@@ -108,9 +109,10 @@
   ],
   "scripts": {
     "build": "tsdown",
+    "build:cdn": "tsdown --config tsdown.cdn.config.ts && node scripts/cdn-copy-css.js",
     "build:watch": "tsdown --watch ./src --no-clean",
     "dev": "pnpm run build:watch",
     "test": "vitest run",
-    "clean": "rm -rf dist types"
+    "clean": "rm -rf dist cdn types"
   }
 }