@videojs/html 10.0.0-alpha.7 → 10.0.0-beta.1

package/dist/dev/define/video/minimal-skin.d.ts

@@ -1,23 +1,14 @@
-import "../media/container.js";
-import "../ui/buffering-indicator.js";
-import "../ui/controls.js";
-import "../ui/fullscreen-button.js";
-import "../ui/mute-button.js";
-import "../ui/pip-button.js";
-import "../ui/play-button.js";
-import "../ui/playback-rate-button.js";
-import "../ui/popover.js";
-import "../ui/seek-button.js";
-import "../ui/time-slider.js";
-import "../ui/time.js";
-import "../ui/volume-slider.js";
 import { ReactiveElement } from "@videojs/element";
 
 //#region src/define/video/minimal-skin.d.ts
 declare function getTemplateHTML(): string;
-declare const MinimalVideoSkinElement_base: typeof ReactiveElement;
+declare const MinimalVideoSkinElement_base: typeof ReactiveElement & {
+  shadowRootOptions: ShadowRootInit;
+  styles?: CSSStyleSheet;
+};
 declare class MinimalVideoSkinElement extends MinimalVideoSkinElement_base {
   static readonly tagName = "video-minimal-skin";
+  static styles: CSSStyleSheet;
   static getTemplateHTML: typeof getTemplateHTML;
 }
 declare global {

package/dist/dev/define/video/minimal-skin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.ts"],"mappings":";;;;;;;;;;;;;;;;iBAqBS,eAAA,CAAA;AAAA,cAAe,4BAAA;cAoGX,uBAAA,SAAgC,4BAAA;EAAA,gBAC3B,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,uBAAA,CAAwB,OAAA,GAAU,uBAAA;EAAA;AAAA"}
+{"version":3,"file":"minimal-skin.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.ts"],"mappings":";;;iBAuBS,eAAA,CAAA;AAAA,cAAe,4BAAA;;;;cA4HX,uBAAA,SAAgC,4BAAA;EAAA,gBAC3B,OAAA;EAAA,OACT,MAAA,EAAM,aAAA;EAAA,OACN,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,uBAAA,CAAwB,OAAA,GAAU,uBAAA;EAAA;AAAA"}

package/dist/dev/define/video/minimal-skin.js

@@ -1,4 +1,4 @@
-import { SkinMixin } from "../skin-mixin.js";
+import { SkinMixin, createStyles } from "../skin-mixin.js";
 import { renderIcon } from "../../icons/dist/render/minimal/index.js";
 import "../media/container.js";
 import "../ui/buffering-indicator.js";
@@ -12,19 +12,23 @@ import "../ui/popover.js";
 import "../ui/seek-button.js";
 import "../ui/time.js";
 import "../ui/time-slider.js";
+import "../ui/tooltip.js";
 import "../ui/volume-slider.js";
+import minimal_skin_default from "../../_virtual/inline-css_src/define/video/minimal-skin.js";
 import { ReactiveElement } from "@videojs/element";
 
 //#region src/define/video/minimal-skin.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
 	return `
-    <media-container class="media-minimal-skin">
+    <media-container class="media-minimal-skin media-minimal-skin--video">
+      <slot name="media"></slot>
+
       <media-buffering-indicator class="media-buffering-indicator">
         ${renderIcon("spinner", { class: "media-icon" })}
       </media-buffering-indicator>
 
-      <div class="media-error" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
+      <!--<div class="media-error" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
         <div class="media-error__dialog">
           <div class="media-error__content">
             <p id="media-error-title" class="media-error__title">Something went wrong.</p>
@@ -34,29 +38,40 @@ function getTemplateHTML() {
             <button type="button" class="media-button">OK</button>
           </div>
         </div>
-      </div>
+      </div>-->
 
       <media-controls class="media-controls">
         <span class="media-button-group">
-          <media-play-button class="media-button media-button--icon media-button--play">
+          <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-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 seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+          <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-tooltip">
+            Seek backward ${SEEK_TIME} seconds
+          </media-tooltip>
 
-          <media-seek-button seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+          <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-tooltip">
+            Seek forward ${SEEK_TIME} seconds
+          </media-tooltip>
         </span>
 
         <span class="media-time-controls">
@@ -76,16 +91,18 @@ function getTemplateHTML() {
         </span>
 
         <span class="media-button-group">
-          <media-playback-rate-button class="media-button media-button--icon media-button--playback-rate">
-          </media-playback-rate-button>
+          <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-tooltip">
+            Toggle playback rate
+          </media-tooltip>
 
-          <media-mute-button commandfor="volume-popover" class="media-button media-button--icon media-button--mute">
+          <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="volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popup media-popup--volume media-popup-animation">
+          <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="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>
@@ -94,25 +111,34 @@ function getTemplateHTML() {
             </media-volume-slider>
           </media-popover>
 
-          <!-- <button type="button" class="media-button media-button--icon media-button--captions" aria-label="Captions">
+          <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" })}
-          </button> -->
+          </media-captions-button>
+          <media-tooltip id="captions-tooltip" side="top" class="media-tooltip">
+            Toggle captions
+          </media-tooltip>
 
-          <media-pip-button class="media-button media-button--icon">
+          <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-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 class="media-button media-button--icon media-button--fullscreen">
+          <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-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>
         </span>
       </media-controls>
 
       <div class="media-overlay"></div>
-
-      <slot name="media"></slot>
     </media-container>
   `;
 }
@@ -120,6 +146,9 @@ var MinimalVideoSkinElement = class extends SkinMixin(ReactiveElement) {
 	static {
 		this.tagName = "video-minimal-skin";
 	}
+	static {
+		this.styles = createStyles(minimal_skin_default);
+	}
 	static {
 		this.getTemplateHTML = getTemplateHTML;
 	}

package/dist/dev/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 { 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/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/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-minimal-skin\">\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\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\">\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-controls\">\n        <span class=\"media-button-group\">\n          <media-play-button 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\n          <media-seek-button 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\n          <media-seek-button 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        </span>\n\n        <span 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        </span>\n\n        <span class=\"media-button-group\">\n          <media-playback-rate-button class=\"media-button media-button--icon media-button--playback-rate\">\n          </media-playback-rate-button>\n\n          <media-mute-button commandfor=\"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=\"volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popup media-popup--volume media-popup-animation\">\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          <!-- <button type=\"button\" class=\"media-button media-button--icon media-button--captions\" aria-label=\"Captions\">\n            ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n            ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n          </button> -->\n\n          <media-pip-button class=\"media-button media-button--icon\">\n            ${renderIcon('pip', { class: 'media-icon' })}\n          </media-pip-button>\n\n          <media-fullscreen-button 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        </span>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n\n      <slot name=\"media\"></slot>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin';\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":";;;;;;;;;;;;;;;;;;AAmBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;UAGR,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;;;;;;;;;;;cAkB3C,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;cACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;cAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;wCAGrC,CAAC,UAAU;;gBAEnC,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;gDAChC,UAAU;;;;wCAIlB,UAAU;;gBAElC,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;gDACZ,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;cA0B5C,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;cAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;cAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;cAI3E,WAAW,OAAO,EAAE,OAAO,cAAc,CAAC,CAAC;;;;cAI3C,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;cACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;AAYjG,IAAa,0BAAb,cAA6C,UAAU,gBAAgB,CAAC;;iBAC5C;;;yBACD;;;AAG3B,eAAe,OAAO,wBAAwB,SAAS,wBAAwB"}
+{"version":3,"file":"minimal-skin.js","names":["styles"],"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/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      <!--<div class=\"media-error\" role=\"alertdialog\" aria-labelledby=\"media-error-title\" aria-describedby=\"media-error-description\">\n        <div class=\"media-error__dialog\">\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-controls\">\n        <span 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        </span>\n\n        <span 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        </span>\n\n        <span 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        </span>\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":";;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;UAKR,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;;;;;;;;;;;cAkB3C,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;cACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;cAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;2EAQF,CAAC,UAAU;;gBAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;gDAChC,UAAU;;;;4BAI9B,UAAU;;;0EAGoC,UAAU;;gBAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;gDACZ,UAAU;;;;2BAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;cA2BvB,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;cAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;cAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;cAO3E,WAAW,OAAO,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;cAQ3C,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;cACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;;AAcjG,IAAa,0BAAb,cAA6C,UAAU,gBAAgB,CAAC;;iBAC5C;;;gBACV,aAAaA,qBAAO;;;yBACX;;;AAG3B,eAAe,OAAO,wBAAwB,SAAS,wBAAwB"}

package/dist/dev/define/video/minimal-skin.tailwind.d.ts

@@ -1,21 +1,11 @@
-import "../media/container.js";
-import "../ui/buffering-indicator.js";
-import "../ui/controls.js";
-import "../ui/fullscreen-button.js";
-import "../ui/mute-button.js";
-import "../ui/pip-button.js";
-import "../ui/play-button.js";
-import "../ui/playback-rate-button.js";
-import "../ui/popover.js";
-import "../ui/seek-button.js";
-import "../ui/time-slider.js";
-import "../ui/time.js";
-import "../ui/volume-slider.js";
 import { ReactiveElement } from "@videojs/element";
 
 //#region src/define/video/minimal-skin.tailwind.d.ts
 declare function getTemplateHTML(): string;
-declare const MinimalVideoSkinTailwindElement_base: typeof ReactiveElement;
+declare const MinimalVideoSkinTailwindElement_base: typeof ReactiveElement & {
+  shadowRootOptions: ShadowRootInit;
+  styles?: CSSStyleSheet;
+};
 declare class MinimalVideoSkinTailwindElement extends MinimalVideoSkinTailwindElement_base {
   static readonly tagName = "video-minimal-skin-tailwind";
   static getTemplateHTML: typeof getTemplateHTML;

package/dist/dev/define/video/minimal-skin.tailwind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"mappings":";;;;;;;;;;;;;;;;iBAwCS,eAAA,CAAA;AAAA,cAAe,oCAAA;cAoGX,+BAAA,SAAwC,oCAAA;EAAA,gBACnC,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,+BAAA,CAAgC,OAAA,GAAU,+BAAA;EAAA;AAAA"}
+{"version":3,"file":"minimal-skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"mappings":";;;iBA2CS,eAAA,CAAA;AAAA,cAAe,oCAAA;;;;cAsIX,+BAAA,SAAwC,oCAAA;EAAA,gBACnC,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,+BAAA,CAAgC,OAAA,GAAU,+BAAA;EAAA;AAAA"}

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

@@ -1,8 +1,19 @@
 import { SkinMixin } from "../skin-mixin.js";
 import { renderIcon } from "../../icons/dist/render/minimal/index.js";
-import { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconState, overlay, popup, root, seek, slider, time } from "../../skins/dist/default/video/minimal.tailwind.js";
+import { bufferingIndicator } from "../../skins/dist/default/minimal/tailwind/components/buffering.js";
+import { button } from "../../skins/dist/default/minimal/tailwind/components/button.js";
+import { buttonGroup } from "../../skins/dist/default/minimal/tailwind/components/button-group.js";
+import { error } from "../../skins/dist/default/minimal/tailwind/components/error.js";
+import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/minimal/tailwind/components/icon.js";
+import { seek } from "../../skins/dist/default/minimal/tailwind/components/seek.js";
+import { time } from "../../skins/dist/default/minimal/tailwind/components/time.js";
+import { iconState } from "../../skins/dist/default/minimal/tailwind/components/icon-state.js";
+import { overlay } from "../../skins/dist/default/minimal/tailwind/components/overlay.js";
+import { tooltipState } from "../../skins/dist/default/minimal/tailwind/components/tooltip-state.js";
+import { controls, popup, 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";
 import "../ui/controls.js";
 import "../ui/fullscreen-button.js";
 import "../ui/mute-button.js";
@@ -13,8 +24,9 @@ import "../ui/popover.js";
 import "../ui/seek-button.js";
 import "../ui/time.js";
 import "../ui/time-slider.js";
+import "../ui/tooltip.js";
 import "../ui/volume-slider.js";
-import { playbackRate } from "../../skins/dist/default/video/default.tailwind.js";
+import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
 import { ReactiveElement } from "@videojs/element";
 import { cn } from "@videojs/utils/style";
 
@@ -22,12 +34,14 @@ import { cn } from "@videojs/utils/style";
 const SEEK_TIME = 10;
 function getTemplateHTML() {
 	return `
-    <media-container class="${root}">
+    <media-container class="${root(true)}">
+      <slot name="media"></slot>
+
       <media-buffering-indicator class="${bufferingIndicator}">
         ${renderIcon("spinner")}
       </media-buffering-indicator>
 
-      <div class="${error.root}" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
+      <!--<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>
@@ -37,29 +51,42 @@ function getTemplateHTML() {
             <button type="button" class="${cn(button.base, button.default)}">OK</button>
           </div>
         </div>
-      </div>
+      </div>-->
 
       <media-controls data-controls="" class="${controls}">
         <span class="${buttonGroup}">
-          <media-play-button 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-seek-button seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+          <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 seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+          <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>
         </span>
 
         <span class="${time.controls}">
@@ -79,16 +106,19 @@ function getTemplateHTML() {
         </span>
 
         <span class="${buttonGroup}">
-          <media-playback-rate-button class="${cn(button.base, button.icon, playbackRate.button)}">
+          <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="volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
+          <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="volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.base, popup.volume)}">
+          <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>
@@ -97,25 +127,41 @@ function getTemplateHTML() {
             </media-volume-slider>
           </media-popover>
 
-          <!--<button type="button" class="${cn(button.base, button.icon)}" aria-label="Captions">
-            ${renderIcon("captions-off", { class: icon })}
-            ${renderIcon("captions-on", { class: icon })}
-          </button>-->
-
-          <media-pip-button class="${cn(button.base, button.icon)}">
-            ${renderIcon("pip", { class: icon })}
-          </media-pip-button>
-
-          <media-fullscreen-button 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>
+          <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>
         </span>
       </media-controls>
 
       <div class="${overlay}"></div>
-
-      <slot name="media"></slot>
     </media-container>
   `;
 }

package/dist/dev/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} from '@videojs/skins/video/minimal.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/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/volume-slider';\nimport { playbackRate } from '@videojs/skins/video/default.tailwind';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root}\">\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          <media-play-button 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\n          <media-seek-button 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\n          <media-seek-button 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        </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 class=\"${cn(button.base, button.icon, playbackRate.button)}\">\n          </media-playback-rate-button>\n\n          <media-mute-button commandfor=\"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=\"volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.base, 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          <!--<button type=\"button\" class=\"${cn(button.base, button.icon)}\" aria-label=\"Captions\">\n            ${renderIcon('captions-off', { class: icon })}\n            ${renderIcon('captions-on', { class: icon })}\n          </button>-->\n\n          <media-pip-button class=\"${cn(button.base, button.icon)}\">\n            ${renderIcon('pip', { class: icon })}\n          </media-pip-button>\n\n          <media-fullscreen-button 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        </span>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n\n      <slot name=\"media\"></slot>\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  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/dev/define/video/player.d.ts

@@ -1,6 +1,5 @@
 import { MediaElement } from "../../ui/media-element.js";
 import { PlayerProviderConstructor } from "../../store/types.js";
-import "../../index.js";
 import * as _videojs_core_dom0 from "@videojs/core/dom";
 
 //#region src/define/video/player.d.ts

package/dist/dev/define/video/player.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"player.d.ts","names":[],"sources":["../../../../src/define/video/player.ts"],"mappings":";;;;;;cAGsD,uBAAA;cAOzC,kBAAA,SAA2B,uBAAA;EAAA,gBACtB,OAAA;AAAA;AAAA,QAOV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,kBAAA,CAAmB,OAAA,GAAU,kBAAA;EAAA;AAAA"}
+{"version":3,"file":"player.d.ts","names":[],"sources":["../../../../src/define/video/player.ts"],"mappings":";;;;;cAGsD,uBAAA;cAOzC,kBAAA,SAA2B,uBAAA;EAAA,gBACtB,OAAA;AAAA;AAAA,QAOV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,kBAAA,CAAmB,OAAA,GAAU,kBAAA;EAAA;AAAA"}