@videojs/html 10.0.0-beta.5 → 10.0.0-beta.7

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

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../src/define/video/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-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/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/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-minimal-skin media-minimal-skin--video\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\n      </media-buffering-indicator>\n\n      <media-controls class=\"media-controls\">\n        <media-tooltip-group>\n          <div class=\"media-button-group\">\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-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-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-tooltip\">\n              Seek forward ${SEEK_TIME} seconds\n            </media-tooltip>\n          </div>\n\n          <div class=\"media-time-controls\">\n            <media-time-group class=\"media-time\">\n              <media-time type=\"current\" class=\"media-time__value media-time__value--current\"></media-time>\n              <media-time-separator class=\"media-time__separator\"></media-time-separator>\n              <media-time type=\"duration\" class=\"media-time__value media-time__value--duration\"></media-time>\n            </media-time-group>\n\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          </div>\n\n          <div class=\"media-button-group\">\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-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-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-tooltip\">\n              Toggle captions\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-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-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          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinElement.tagName, MinimalVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinElement.tagName]: MinimalVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,iKAAA,WAAA,WAAA,EAAA,OAAA,cAAA,CAAA,CAAA,oOAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,mYAAA,CAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,mCAAA,UAAA,8HAAA,UAAA,yFAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,cAAA,CAAA,CAAA,mCAAA,UAAA,4HAAA,UAAA,ynCAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,koBAAA,WAAA,gBAAA,EAAA,OAAA,uCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,sNAAA,WAAA,OAAA,EAAA,OAAA,cAAA,CAAA,CAAA,gaAAA,WAAA,oBAAA,EAAA,OAAA,2CAAA,CAAA,CAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,0CAAA,CAAA,CAAA;;;;iBAIK;;;gBACb,aAAqB,qBAAG;;;yBACV;;;AAGxB,eAAe,OAAO,wBAAM,SAAA,wBAAA"}
+{"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../src/define/video/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-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/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/poster';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-minimal-skin media-minimal-skin--video\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster>\n        <slot name=\"poster\"></slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\n      </media-buffering-indicator>\n\n      <media-controls class=\"media-controls\">\n        <media-tooltip-group>\n          <div class=\"media-button-group\">\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-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-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-tooltip\">\n              Seek forward ${SEEK_TIME} seconds\n            </media-tooltip>\n          </div>\n\n          <div class=\"media-time-controls\">\n            <media-time-group class=\"media-time\">\n              <media-time type=\"current\" class=\"media-time__value media-time__value--current\"></media-time>\n              <media-time-separator class=\"media-time__separator\"></media-time-separator>\n              <media-time type=\"duration\" class=\"media-time__value media-time__value--duration\"></media-time>\n            </media-time-group>\n\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\n              <div class=\"media-preview media-slider__preview\">\n                <div class=\"media-preview__thumbnail-wrapper\">\n                  <media-slider-thumbnail class=\"media-preview__thumbnail\"></media-slider-thumbnail>\n                </div>\n                <media-slider-value type=\"pointer\" class=\"media-preview__timestamp\"></media-slider-value>\n                ${renderIcon('spinner', { class: 'media-preview__spinner media-icon' })}\n              </div>\n            </media-time-slider>\n          </div>\n\n          <div class=\"media-button-group\">\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-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-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-tooltip\">\n              Toggle captions\n            </media-tooltip>\n\n            <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--icon media-button--pip\">\n              ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n              ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n            </media-pip-button>\n            <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"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-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          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinElement.tagName, MinimalVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinElement.tagName]: MinimalVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,sOAAA,WAAA,WAAA,EAAA,OAAA,cAAA,CAAA,CAAA,oOAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,mYAAA,CAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,mCAAA,UAAA,8HAAA,UAAA,yFAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,cAAA,CAAA,CAAA,mCAAA,UAAA,4HAAA,UAAA,88BAAA,WAAA,WAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,qcAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,koBAAA,WAAA,gBAAA,EAAA,OAAA,uCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,wOAAA,WAAA,aAAA,EAAA,OAAA,oCAAA,CAAA,CAAA,GAAA,WAAA,YAAA,EAAA,OAAA,mCAAA,CAAA,CAAA,gaAAA,WAAA,oBAAA,EAAA,OAAA,2CAAA,CAAA,CAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,0CAAA,CAAA,CAAA;;AAGlB,IAAY,0BAAZ,cAA+B,UAAA,gBAAA,CAAA;;iBACb;;;;;;yBAEC"}

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

@@ -9,7 +9,9 @@ import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/minim
 import { seek } from "../../skins/dist/default/minimal/tailwind/components/seek.js";
 import { time } from "../../skins/dist/default/minimal/tailwind/components/time.js";
 import { overlay } from "../../skins/dist/default/minimal/tailwind/components/overlay.js";
-import { controls, popup, root, slider } from "../../skins/dist/default/minimal/tailwind/video.tailwind.js";
+import { playbackRate } from "../../skins/dist/default/minimal/tailwind/components/playback-rate.js";
+import { poster } from "../../skins/dist/default/minimal/tailwind/components/poster.js";
+import { controls, popup, preview, root, slider } from "../../skins/dist/default/minimal/tailwind/video.tailwind.js";
 import "../media/container.js";
 import "../ui/buffering-indicator.js";
 import "../ui/captions-button.js";
@@ -20,20 +22,20 @@ import "../ui/pip-button.js";
 import "../ui/play-button.js";
 import "../ui/playback-rate-button.js";
 import "../ui/popover.js";
+import "../ui/poster.js";
 import "../ui/seek-button.js";
 import "../ui/time.js";
 import "../ui/time-slider.js";
 import "../ui/tooltip.js";
 import "../ui/tooltip-group.js";
 import "../ui/volume-slider.js";
-import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
 import { ReactiveElement } from "@videojs/element";
 import { cn } from "@videojs/utils/style";
 
 //#region src/define/video/minimal-skin.tailwind.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `<media-container class="${root(true)}"><slot name="media"></slot><media-buffering-indicator class="${bufferingIndicator}"> ${renderIcon("spinner")} </media-buffering-indicator><media-controls data-controls="" class="${controls}"><media-tooltip-group class="contents"><div class="${buttonGroup}"><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></div><div class="${time.controls}"><media-time-group class="${time.group}"><media-time type="current" class="${time.current}"></media-time><media-time-separator class="${time.separator}"></media-time-separator><media-time type="duration" class="${time.duration}"></media-time></media-time-group><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></div><div class="${buttonGroup}"><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.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="${slider.thumb.base}"></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></div></media-tooltip-group></media-controls><div class="${overlay}"></div></media-container>`;
+	return `<media-container class="${root(true)}"><slot name="media"></slot><slot></slot><media-poster class="${poster(true)}"><slot name="poster"></slot></media-poster><media-buffering-indicator class="${bufferingIndicator}"> ${renderIcon("spinner")} </media-buffering-indicator><media-controls data-controls="" class="${controls}"><media-tooltip-group><div class="${buttonGroup}"><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></div><div class="${time.controls}"><media-time-group class="${time.group}"><media-time type="current" class="${time.current}"></media-time><media-time-separator class="${time.separator}"></media-time-separator><media-time type="duration" class="${time.duration}"></media-time></media-time-group><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><div class="${preview.root}"><div class="${preview.thumbnailWrapper}"><media-slider-thumbnail class="${preview.thumbnail}"></media-slider-thumbnail></div><media-slider-value type="pointer" class="${preview.timestamp}"></media-slider-value> ${renderIcon("spinner", { class: cn(icon, preview.spinner) })} </div></media-time-slider></div><div class="${buttonGroup}"><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.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="${slider.thumb.base}"></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, iconState.pip.button)}"> ${renderIcon("pip-enter", { class: cn(icon, iconState.pip.off) })} ${renderIcon("pip-exit", { class: cn(icon, iconState.pip.on) })} </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></div></media-tooltip-group></media-controls><div class="${overlay}"></div></media-container>`;
 }
 var MinimalVideoSkinTailwindElement = class extends SkinMixin(ReactiveElement) {
 	static {

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  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/tooltip-group';\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      <media-controls data-controls=\"\" class=\"${controls}\">\n        <media-tooltip-group class=\"contents\">\n          <div 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          </div>\n\n          <div 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          </div>\n\n          <div 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          </div>\n        </media-tooltip-group>\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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"}
+{"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  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  playbackRate,\n  popup,\n  poster,\n  preview,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/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/poster';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root(true)}\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster class=\"${poster(true)}\">\n        <slot name=\"poster\"></slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"${bufferingIndicator}\">\n        ${renderIcon('spinner')}\n      </media-buffering-indicator>\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <media-tooltip-group>\n          <div class=\"${buttonGroup}\">\n            <span class=\"${tooltipState.play.wrapper}\">\n              <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.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          </div>\n\n          <div 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\n              <div class=\"${preview.root}\">\n                <div class=\"${preview.thumbnailWrapper}\">\n                  <media-slider-thumbnail class=\"${preview.thumbnail}\"></media-slider-thumbnail>\n                </div>\n                <media-slider-value type=\"pointer\" class=\"${preview.timestamp}\"></media-slider-value>\n                ${renderIcon('spinner', { class: cn(icon, preview.spinner) })}\n              </div>\n            </media-time-slider>\n          </div>\n\n          <div 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, iconState.pip.button)}\">\n                ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n                ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n              </media-pip-button>\n              <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n                <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n              </media-tooltip>\n            </span>\n\n            <span class=\"${tooltipState.fullscreen.wrapper}\">\n              <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.icon, iconState.fullscreen.button)}\">\n                ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n                ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n              </media-fullscreen-button>\n              <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n                <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n              </media-tooltip>\n            </span>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n    </media-container>\n  `;\n}\n\nexport class 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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"}