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

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

@@ -16,6 +16,8 @@
 .media-button--mute .media-icon--volume-high,
 .media-button--fullscreen .media-icon--fullscreen-enter,
 .media-button--fullscreen .media-icon--fullscreen-exit,
+.media-button--pip .media-icon--pip-enter,
+.media-button--pip .media-icon--pip-exit,
 .media-button--captions .media-icon--captions-off,
 .media-button--captions .media-icon--captions-on {
   display: none;
@@ -40,6 +42,10 @@
 .media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,
 /* Fullscreen: fullscreen → exit */
 .media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,
+/* Picture-in-Picture: not active → enter */
+.media-button--pip:not([data-pip]) .media-icon--pip-enter,
+/* Picture-in-Picture: active → exit */
+.media-button--pip[data-pip] .media-icon--pip-exit,
 /* Captions: not active → captions off */
 .media-button--captions:not([data-active]) .media-icon--captions-off,
 /* Captions: active → captions on */
@@ -160,30 +166,6 @@
   border-radius: inherit;
 }
 
-/* ==========================================================================
-   Poster Image
-   ========================================================================== */
-
-.media-minimal-skin > img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: var(--media-object-fit, contain);
-  object-position: var(--media-object-position, center);
-  transition: opacity 0.25s;
-  pointer-events: none;
-  border-radius: inherit;
-
-  &:not([data-visible]) {
-    opacity: 0;
-  }
-}
-
-/* ==========================================================================
-   Fullscreen
-   ========================================================================== */
-
 .media-minimal-skin:fullscreen ::slotted(video),
 .media-minimal-skin:fullscreen video {
   object-fit: contain;
@@ -269,7 +251,7 @@
   color: oklch(1 0 0);
   font-size: 0.875rem;
   text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);
-  transition-property: opacity, transform;
+  transition-property: opacity, scale;
   transition-duration: 500ms;
   transition-delay: 100ms;
   transition-timing-function: linear(
@@ -295,7 +277,7 @@
 .media-minimal-skin .media-error[data-starting-style] .media-error__dialog,
 .media-minimal-skin .media-error[data-ending-style] .media-error__dialog {
   opacity: 0;
-  transform: scale(0.5);
+  scale: 0.5;
 }
 
 .media-minimal-skin .media-error__content {
@@ -312,6 +294,7 @@
 
 .media-minimal-skin .media-error__description {
   opacity: 0.7;
+  overflow-wrap: anywhere;
 }
 
 .media-minimal-skin .media-error__actions {
@@ -331,12 +314,12 @@
   container: media-controls / inline-size;
   display: flex;
   align-items: center;
-  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.25));
+  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
   --media-controls-current-shadow-color-subtle: oklch(
     from var(--media-controls-current-shadow-color) l c h /
     calc(alpha * 0.4)
   );
-  text-shadow: 0 0 1px var(--media-controls-current-shadow-color);
+  text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);
 }
 
 /* ==========================================================================
@@ -410,7 +393,7 @@
   font-weight: 500;
   text-align: center;
   text-shadow: inherit;
-  transition-property: background-color, color, outline-offset, transform;
+  transition-property: background-color, color, outline-offset, scale;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
   cursor: pointer;
@@ -450,7 +433,7 @@
   }
 
   &:active {
-    transform: scale(0.9);
+    scale: 0.9;
   }
 
   & .media-icon {
@@ -512,6 +495,43 @@
   scale: -1 1;
 }
 
+/* ==========================================================================
+   Poster Image
+   ========================================================================== */
+
+.media-minimal-skin media-poster,
+.media-minimal-skin > img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  transition: opacity 0.25s;
+  pointer-events: none;
+}
+.media-minimal-skin media-poster:not([data-visible]),
+.media-minimal-skin > img:not([data-visible]) {
+  opacity: 0;
+}
+.media-minimal-skin media-poster ::slotted(img) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
+  border-radius: var(--media-video-border-radius);
+}
+.media-minimal-skin > img {
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
+  border-radius: inherit;
+}
+
+.media-minimal-skin:fullscreen media-poster ::slotted(img),
+.media-minimal-skin:fullscreen > img {
+  object-fit: contain;
+}
+
 /* ==========================================================================
    Media preview
    ========================================================================== */
@@ -541,7 +561,7 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
+    translate: -50% -50%;
     opacity: 0;
   }
 
@@ -609,7 +629,7 @@
 /* Thumb */
 .media-minimal-skin .media-slider__thumb {
   position: absolute;
-  transform: translate(-50%, -50%);
+  translate: -50% -50%;
   z-index: 10;
   width: 0.75rem;
   height: 0.75rem;
@@ -712,13 +732,13 @@
   border: 0;
   color: inherit;
   overflow: visible;
-  transition-property: transform, scale, opacity, filter;
+  transition-property: scale, opacity, filter;
   transition-duration: 150ms;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.5);
+    scale: 0.5;
     filter: blur(8px);
   }
 
@@ -812,30 +832,29 @@
   }
 }
 
+.media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability="unsupported"]) {
+  display: none;
+}
+
 /* ==========================================================================
    Native Caption Track
    ========================================================================== */
 
 .media-minimal-skin {
-  --media-caption-track-duration: 150ms;
-  --media-caption-track-delay: 600ms;
+  --media-caption-track-duration: var(--media-controls-transition-duration);
+  --media-caption-track-delay: calc(var(--media-controls-transition-delay) + 25ms);
   --media-caption-track-y: -0.5rem;
 
   &:has(.media-controls[data-visible]) {
-    --media-caption-track-delay: 25ms;
     --media-caption-track-y: -3rem;
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    --media-caption-track-duration: 50ms;
-  }
 }
 
 .media-minimal-skin video::-webkit-media-text-track-container {
-  /* NOTE: The delay must account for the controls delay/duration */
-  transition: transform var(--media-caption-track-duration) ease-out;
+  transition: translate var(--media-caption-track-duration) ease-out;
   transition-delay: var(--media-caption-track-delay);
-  transform: translateY(var(--media-caption-track-y)) scale(0.98);
+  translate: 0 var(--media-caption-track-y);
+  scale: 0.98;
   z-index: 1;
   font-family: inherit;
 }
@@ -846,14 +865,31 @@
    ========================================================================== */
 
 .media-minimal-skin--video {
+  overflow: clip;
   background: oklch(0 0 0);
   --media-border-color: oklch(0 0 0 / 0.15);
   --media-video-border-radius: var(--media-border-radius, 0.75rem);
+  --media-controls-transition-duration: 100ms;
+  --media-controls-transition-delay: 0ms;
 
   @media (prefers-color-scheme: dark) {
     --media-border-color: oklch(1 0 0 / 0.15);
   }
 
+  &:has(.media-controls:not([data-visible])) {
+    /* Slight delay to hide controls on non-touch devices after interaction */
+    @media (pointer: fine) {
+      --media-controls-transition-delay: 500ms;
+      --media-controls-transition-duration: 300ms;
+    }
+    @media (pointer: coarse) {
+      --media-controls-transition-duration: 150ms;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      --media-controls-transition-duration: 100ms;
+    }
+  }
+
   /* Inner border ring */
   &::after {
     content: "";
@@ -882,39 +918,40 @@
   z-index: 10;
   gap: 0.5rem;
   padding: 2rem 0.375rem 0.375rem 0.375rem;
-  color: oklch(1 0 0);
+  color: var(--media-color-primary, oklch(1 0 0));
+  transition-duration: var(--media-controls-transition-duration);
+  transition-delay: var(--media-controls-transition-delay);
+  transition-timing-function: ease-out;
 
   @media (pointer: fine) {
-    will-change: transform, filter, opacity;
-    transition-property: transform, filter, opacity;
-    transition-duration: 75ms;
-    transition-delay: 0ms;
-    transition-timing-function: ease-out;
+    will-change: translate, filter, opacity;
+    transition-property: translate, filter, opacity;
   }
 
-  @container media-root (width > 40rem) {
-    gap: 0.875rem;
-    padding: 2.5rem 0.75rem 0.75rem 0.75rem;
+  @media (pointer: coarse) {
+    will-change: translate, opacity;
+    transition-property: translate, opacity;
   }
 
   &:not([data-visible]) {
     opacity: 0;
     pointer-events: none;
+    translate: 0 100%;
 
     @media (pointer: fine) {
-      transform: translateY(100%);
       filter: blur(8px);
-      transition-duration: 500ms;
-      transition-delay: 500ms;
-
-      @media (prefers-reduced-motion: reduce) {
-        scale: 1;
-        transform: translateY(0);
-        filter: blur(0);
-        transition-duration: 100ms;
-      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      translate: 0 0;
+      filter: blur(0);
     }
   }
+
+  @container media-root (width > 40rem) {
+    gap: 0.875rem;
+    padding: 2.5rem 0.75rem 0.75rem 0.75rem;
+  }
 }
 
 /* Hide cursor when controls are hidden in fullscreen */
@@ -954,6 +991,7 @@
   filter: blur(8px);
   transition-property: scale, opacity, filter;
   transition-duration: 150ms;
+  transition-timing-function: ease-out;
   transform-origin: bottom;
 
   & .media-preview__thumbnail-wrapper {
@@ -985,11 +1023,3 @@
   filter: blur(0);
 }
 
-media-tooltip-group {
-  display: contents;
-}
-
-:host {
-  display: grid;
-}
-

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":";;;iBAwBS,eAAA,CAAA;AAAA,cAAe,4BAAA;;;;cA0HX,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"}
+{"version":3,"file":"minimal-skin.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.ts"],"mappings":";;;iBAyBS,eAAA,CAAA;AAAA,cAAe,4BAAA;;;;cAiIX,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

@@ -9,6 +9,7 @@ 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";
@@ -23,7 +24,13 @@ const SEEK_TIME = 10;
 function getTemplateHTML() {
 	return `
     <media-container class="media-minimal-skin media-minimal-skin--video">
+      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
       <slot name="media"></slot>
+      <slot></slot>
+
+      <media-poster>
+        <slot name="poster"></slot>
+      </media-poster>
 
       <media-buffering-indicator class="media-buffering-indicator">
         ${renderIcon("spinner", { class: "media-icon" })}
@@ -117,8 +124,9 @@ function getTemplateHTML() {
               Toggle captions
             </media-tooltip>
 
-            <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon">
-              ${renderIcon("pip", { class: "media-icon" })}
+            <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip">
+              ${renderIcon("pip-enter", { class: "media-icon media-icon--pip-enter" })}
+              ${renderIcon("pip-exit", { class: "media-icon media-icon--pip-exit" })}
             </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>

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

@@ -1 +1 @@
-{"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/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\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\">\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;;;;;UAKR,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;gBAOzC,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;gBACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;gBAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;6EAQF,CAAC,UAAU;;kBAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;kDAChC,UAAU;;;;8BAI9B,UAAU;;;4EAGoC,UAAU;;kBAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;kDACZ,UAAU;;;;6BAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;;;kBAuBrB,WAAW,WAAW,EAAE,OAAO,qCAAqC,CAAC,CAAC;;;;;;;;;;;;gBAYxE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;gBAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;gBAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;gBAO3E,WAAW,OAAO,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;gBAQ3C,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;gBACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;;;AAenG,IAAa,0BAAb,cAA6C,UAAU,gBAAgB,CAAC;;iBAC5C;;;gBACV,aAAaA,qBAAO;;;yBACX;;;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/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;;;;;;;;;;;UAWR,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;gBAOzC,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;gBACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;gBAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;6EAQF,CAAC,UAAU;;kBAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;kDAChC,UAAU;;;;8BAI9B,UAAU;;;4EAGoC,UAAU;;kBAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;kDACZ,UAAU;;;;6BAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;;;kBAuBrB,WAAW,WAAW,EAAE,OAAO,qCAAqC,CAAC,CAAC;;;;;;;;;;;;gBAYxE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;gBAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;gBAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;gBAO3E,WAAW,aAAa,EAAE,OAAO,oCAAoC,CAAC,CAAC;gBACvE,WAAW,YAAY,EAAE,OAAO,mCAAmC,CAAC,CAAC;;;;;;;;gBAQrE,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;gBACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;;;AAenG,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.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"mappings":";;;iBA4CS,eAAA,CAAA;AAAA,cAAe,oCAAA;;;;cAoIX,+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":";;;iBA8CS,eAAA,CAAA;AAAA,cAAe,oCAAA;;;;cA2IX,+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

@@ -9,6 +9,8 @@ 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 { 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";
@@ -20,13 +22,13 @@ 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";
 
@@ -35,14 +37,20 @@ const SEEK_TIME = 10;
 function getTemplateHTML() {
 	return `
     <media-container class="${root(true)}">
+      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
       <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 class="contents">
+        <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)}">
@@ -136,8 +144,9 @@ function getTemplateHTML() {
             </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 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>

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  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  popup,\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/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\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)}\">\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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"}