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

package/dist/dev/define/audio/skin.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n  button,\n  controls,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/default/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root}\">\n      <slot name=\"media\"></slot>\n\n      <div class=\"${controls}\">\n        <span class=\"${tooltipState.play.wrapper}\">\n          <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.icon, iconState.play.button)}\">\n            ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n            ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n            ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n          </media-play-button>\n          <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            <span class=\"${tooltipState.play.replay}\">Replay</span>\n            <span class=\"${tooltipState.play.play}\">Play</span>\n            <span class=\"${tooltipState.play.pause}\">Pause</span>\n          </media-tooltip>\n        </span>\n\n        <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n          <span class=\"${iconContainer}\">\n            ${renderIcon('seek', { class: cn(icon, iconFlipped) })}\n            <span class=\"${cn(seek.label, seek.labelBackward)}\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n          Seek backward ${SEEK_TIME} seconds\n        </media-tooltip>\n\n        <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n          <span class=\"${iconContainer}\">\n            ${renderIcon('seek', { class: icon })}\n            <span class=\"${cn(seek.label, seek.labelForward)}\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n          Seek forward ${SEEK_TIME} seconds\n        </media-tooltip>\n\n        <media-time-group class=\"${time.group}\">\n          <media-time type=\"current\" class=\"${time.current}\"></media-time>\n          <media-time-slider class=\"${slider.root}\">\n            <media-slider-track class=\"${slider.track}\">\n              <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n              <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n            </media-slider-track>\n            <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n          </media-time-slider>\n          <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n        </media-time-group>\n\n        <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"${cn(button.base, button.icon, playbackRate.button)}\"></media-playback-rate-button>\n        <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n          Toggle playback rate\n        </media-tooltip>\n\n        <media-mute-button commandfor=\"audio-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=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n          <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n            <media-slider-track class=\"${slider.track}\">\n              <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n            </media-slider-track>\n            <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n          </media-volume-slider>\n        </media-popover>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class AudioSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'audio-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(AudioSkinTailwindElement.tagName, AudioSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioSkinTailwindElement.tagName]: AudioSkinTailwindElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;8BACY,KAAK;;;oBAGf,SAAS;uBACN,aAAa,KAAK,QAAQ;gEACe,GAAG,OAAO,MAAM,OAAO,MAAM,UAAU,KAAK,OAAO,CAAC;cACtG,WAAW,WAAW,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,QAAQ,EAAE,CAAC,CAAC;cACnE,WAAW,QAAQ,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,KAAK,EAAE,CAAC,CAAC;cAC7D,WAAW,SAAS,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,MAAM,EAAE,CAAC,CAAC;;+DAEd,GAAG,MAAM,QAAQ,CAAC;2BACtD,aAAa,KAAK,OAAO;2BACzB,aAAa,KAAK,KAAK;2BACvB,aAAa,KAAK,MAAM;;;;yEAIsB,CAAC,UAAU,WAAW,GAAG,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,CAAC;yBAChH,cAAc;cACzB,WAAW,QAAQ,EAAE,OAAO,GAAG,MAAM,YAAY,EAAE,CAAC,CAAC;2BACxC,GAAG,KAAK,OAAO,KAAK,cAAc,CAAC,IAAI,UAAU;;;sEAGN,GAAG,MAAM,QAAQ,CAAC;0BAC9D,UAAU;;;wEAGoC,UAAU,WAAW,GAAG,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,CAAC;yBAC9G,cAAc;cACzB,WAAW,QAAQ,EAAE,OAAO,MAAM,CAAC,CAAC;2BACvB,GAAG,KAAK,OAAO,KAAK,aAAa,CAAC,IAAI,UAAU;;;qEAGN,GAAG,MAAM,QAAQ,CAAC;yBAC9D,UAAU;;;mCAGA,KAAK,MAAM;8CACA,KAAK,QAAQ;sCACrB,OAAO,KAAK;yCACT,OAAO,MAAM;0CACZ,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC;4CACrC,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,OAAO,CAAC;;yCAE5C,GAAG,OAAO,MAAM,MAAM,OAAO,MAAM,YAAY,CAAC;;+CAE1C,KAAK,SAAS;;;iFAGoB,GAAG,OAAO,MAAM,OAAO,MAAM,aAAa,OAAO,CAAC;sEAC7D,GAAG,MAAM,QAAQ,CAAC;;;;sEAIlB,GAAG,OAAO,MAAM,OAAO,MAAM,UAAU,KAAK,OAAO,CAAC;YAC9G,WAAW,cAAc,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,UAAU,EAAE,CAAC,CAAC;YACxE,WAAW,cAAc,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,UAAU,EAAE,CAAC,CAAC;YACxE,WAAW,eAAe,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,WAAW,EAAE,CAAC,CAAC;;;iHAG2B,GAAG,MAAM,SAAS,MAAM,OAAO,CAAC;wCACzG,OAAO,KAAK;yCACX,OAAO,MAAM;0CACZ,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC;;yCAExC,GAAG,OAAO,MAAM,MAAM,OAAO,MAAM,WAAW,CAAC;;;;;;;AAQxF,IAAa,2BAAb,cAA8C,UAAU,gBAAgB,CAAC;;iBAC7C;;;yBACD;;;AAG3B,eAAe,OAAO,yBAAyB,SAAS,yBAAyB"}
+{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n  button,\n  controls,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/default/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root}\">\n      <slot name=\"media\"></slot>\n\n      <div class=\"${controls}\">\n        <media-tooltip-group class=\"contents\">\n          <span class=\"${tooltipState.play.wrapper}\">\n            <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.icon, iconState.play.button)}\">\n              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n            </media-play-button>\n            <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.play.replay}\">Replay</span>\n              <span class=\"${tooltipState.play.play}\">Play</span>\n              <span class=\"${tooltipState.play.pause}\">Pause</span>\n            </media-tooltip>\n          </span>\n\n          <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n            <span class=\"${iconContainer}\">\n              ${renderIcon('seek', { class: cn(icon, iconFlipped) })}\n              <span class=\"${cn(seek.label, seek.labelBackward)}\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            Seek backward ${SEEK_TIME} seconds\n          </media-tooltip>\n\n          <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n            <span class=\"${iconContainer}\">\n              ${renderIcon('seek', { class: icon })}\n              <span class=\"${cn(seek.label, seek.labelForward)}\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            Seek forward ${SEEK_TIME} seconds\n          </media-tooltip>\n\n          <media-time-group class=\"${time.group}\">\n            <media-time type=\"current\" class=\"${time.current}\"></media-time>\n            <media-time-slider class=\"${slider.root}\">\n              <media-slider-track class=\"${slider.track}\">\n                <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n                <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n              </media-slider-track>\n              <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n            </media-time-slider>\n            <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n          </media-time-group>\n\n          <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"${cn(button.base, button.icon, playbackRate.button)}\"></media-playback-rate-button>\n          <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            Toggle playback rate\n          </media-tooltip>\n\n          <media-mute-button commandfor=\"audio-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=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n            <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n              <media-slider-track class=\"${slider.track}\">\n                <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n              </media-slider-track>\n              <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n            </media-volume-slider>\n          </media-popover>\n        </media-tooltip-group>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class AudioSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'audio-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(AudioSkinTailwindElement.tagName, AudioSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioSkinTailwindElement.tagName]: AudioSkinTailwindElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;8BACY,KAAK;;;oBAGf,SAAS;;yBAEJ,aAAa,KAAK,QAAQ;kEACe,GAAG,OAAO,MAAM,OAAO,MAAM,UAAU,KAAK,OAAO,CAAC;gBACtG,WAAW,WAAW,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,QAAQ,EAAE,CAAC,CAAC;gBACnE,WAAW,QAAQ,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,KAAK,EAAE,CAAC,CAAC;gBAC7D,WAAW,SAAS,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,MAAM,EAAE,CAAC,CAAC;;iEAEd,GAAG,MAAM,QAAQ,CAAC;6BACtD,aAAa,KAAK,OAAO;6BACzB,aAAa,KAAK,KAAK;6BACvB,aAAa,KAAK,MAAM;;;;2EAIsB,CAAC,UAAU,WAAW,GAAG,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,CAAC;2BAChH,cAAc;gBACzB,WAAW,QAAQ,EAAE,OAAO,GAAG,MAAM,YAAY,EAAE,CAAC,CAAC;6BACxC,GAAG,KAAK,OAAO,KAAK,cAAc,CAAC,IAAI,UAAU;;;wEAGN,GAAG,MAAM,QAAQ,CAAC;4BAC9D,UAAU;;;0EAGoC,UAAU,WAAW,GAAG,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,CAAC;2BAC9G,cAAc;gBACzB,WAAW,QAAQ,EAAE,OAAO,MAAM,CAAC,CAAC;6BACvB,GAAG,KAAK,OAAO,KAAK,aAAa,CAAC,IAAI,UAAU;;;uEAGN,GAAG,MAAM,QAAQ,CAAC;2BAC9D,UAAU;;;qCAGA,KAAK,MAAM;gDACA,KAAK,QAAQ;wCACrB,OAAO,KAAK;2CACT,OAAO,MAAM;4CACZ,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC;8CACrC,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,OAAO,CAAC;;2CAE5C,GAAG,OAAO,MAAM,MAAM,OAAO,MAAM,YAAY,CAAC;;iDAE1C,KAAK,SAAS;;;mFAGoB,GAAG,OAAO,MAAM,OAAO,MAAM,aAAa,OAAO,CAAC;wEAC7D,GAAG,MAAM,QAAQ,CAAC;;;;wEAIlB,GAAG,OAAO,MAAM,OAAO,MAAM,UAAU,KAAK,OAAO,CAAC;cAC9G,WAAW,cAAc,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,UAAU,EAAE,CAAC,CAAC;cACxE,WAAW,cAAc,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,UAAU,EAAE,CAAC,CAAC;cACxE,WAAW,eAAe,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,WAAW,EAAE,CAAC,CAAC;;;mHAG2B,GAAG,MAAM,SAAS,MAAM,OAAO,CAAC;0CACzG,OAAO,KAAK;2CACX,OAAO,MAAM;4CACZ,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC;;2CAExC,GAAG,OAAO,MAAM,MAAM,OAAO,MAAM,WAAW,CAAC;;;;;;;;AAS1F,IAAa,2BAAb,cAA8C,UAAU,gBAAgB,CAAC;;iBAC7C;;;yBACD;;;AAG3B,eAAe,OAAO,yBAAyB,SAAS,yBAAyB"}

package/dist/dev/define/shared.css

@@ -0,0 +1,3 @@
+media-tooltip-group {
+  display: contents;
+}

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

@@ -125,6 +125,8 @@
   position: relative;
   isolation: isolate;
   display: block;
+  height: 100%;
+  width: 100%;
   container: media-root / inline-size;
   border-radius: var(--media-border-radius, 0.75rem);
   font-family:
@@ -149,8 +151,13 @@
   display: block;
   width: 100%;
   height: 100%;
+}
+.media-minimal-skin ::slotted(video) {
   border-radius: var(--media-border-radius, 0.75rem);
 }
+.media-minimal-skin video {
+  border-radius: inherit;
+}
 
 /* ==========================================================================
    Poster Image
@@ -171,6 +178,19 @@
   }
 }
 
+/* ==========================================================================
+   Fullscreen
+   ========================================================================== */
+
+.media-minimal-skin:fullscreen video,
+.media-minimal-skin:fullscreen ::slotted(video),
+.media-minimal-skin:fullscreen > img {
+  object-fit: contain;
+}
+.media-minimal-skin:fullscreen ::slotted(video) {
+  border-radius: 0;
+}
+
 /* ==========================================================================
    Overlay / Scrim
    ========================================================================== */
@@ -180,28 +200,34 @@
   inset: 0;
   border-radius: inherit;
   background-image: linear-gradient(to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) 7.5rem, oklch(0 0 0 / 0));
-  backdrop-filter: blur(0) saturate(1.2) brightness(0.9);
+  backdrop-filter: blur(0) saturate(1.5);
   opacity: 0;
-  transition-property: opacity, backdrop-filter;
-  transition-duration: 500ms;
-  transition-delay: 500ms;
-  transition-timing-function: ease-out;
   pointer-events: none;
 
-  @media (prefers-reduced-motion: reduce) {
-    transition-duration: 100ms;
+  @media (pointer: fine) {
+    transition-property: opacity, backdrop-filter;
+    transition-duration: 500ms;
+    transition-delay: 500ms;
+    transition-timing-function: ease-out;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 100ms;
+    }
   }
 }
 
 .media-minimal-skin .media-controls[data-visible] ~ .media-overlay,
 .media-minimal-skin .media-error[data-open] ~ .media-overlay {
   opacity: 1;
-  transition-duration: 150ms;
-  transition-delay: 0ms;
+
+  @media (pointer: fine) {
+    transition-duration: 150ms;
+    transition-delay: 0ms;
+  }
 }
 
 .media-minimal-skin .media-error[data-open] ~ .media-overlay {
-  backdrop-filter: blur(8px) saturate(1.2) brightness(0.9);
+  backdrop-filter: blur(16px) saturate(1.5);
 }
 
 /* ==========================================================================
@@ -675,7 +701,7 @@
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   background-color: oklch(1 0 0 / 0.1);
-  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);
+  backdrop-filter: blur(16px) saturate(1.5);
   box-shadow:
     0 4px 6px -1px oklch(0 0 0 / 0.1),
     0 2px 4px -2px oklch(0 0 0 / 0.1);
@@ -728,20 +754,21 @@
 
 .media-minimal-skin--video {
   background: oklch(0 0 0);
+  --media-border-color: oklch(0 0 0 / 0.15);
 
-  /* Border ring */
+  @media (prefers-color-scheme: dark) {
+    --media-border-color: oklch(1 0 0 / 0.15);
+  }
+
+  /* Inner border ring */
   &::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 10;
     border-radius: inherit;
-    box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.15);
+    box-shadow: inset 0 0 0 1px var(--media-border-color);
     pointer-events: none;
-
-    @media (prefers-color-scheme: dark) {
-      box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.15);
-    }
   }
 
   /* Fullscreen */
@@ -761,13 +788,16 @@
   z-index: 10;
   gap: 0.5rem;
   padding: 2rem 0.375rem 0.375rem 0.375rem;
-  will-change: transform, filter, opacity;
-  transition-property: transform, filter, opacity;
-  transition-duration: 75ms;
-  transition-delay: 0ms;
-  transition-timing-function: ease-out;
   color: oklch(1 0 0);
 
+  @media (pointer: fine) {
+    will-change: transform, filter, opacity;
+    transition-property: transform, filter, opacity;
+    transition-duration: 75ms;
+    transition-delay: 0ms;
+    transition-timing-function: ease-out;
+  }
+
   @container media-root (width > 40rem) {
     gap: 0.875rem;
     padding: 2.5rem 0.75rem 0.75rem 0.75rem;
@@ -775,17 +805,20 @@
 
   &:not([data-visible]) {
     opacity: 0;
-    transform: translateY(100%);
-    filter: blur(8px);
-    transition-duration: 500ms;
-    transition-delay: 500ms;
     pointer-events: none;
 
-    @media (prefers-reduced-motion: reduce) {
-      scale: 1;
-      transform: translateY(0);
-      filter: blur(0);
-      transition-duration: 100ms;
+    @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;
+      }
     }
   }
 }
@@ -808,3 +841,7 @@
   padding: 0.25rem;
 }
 
+media-tooltip-group {
+  display: contents;
+}
+

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":";;;iBAuBS,eAAA,CAAA;AAAA,cAAe,4BAAA;;;;cAgHX,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":";;;iBAwBS,eAAA,CAAA;AAAA,cAAe,4BAAA;;;;cAkHX,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

@@ -13,6 +13,7 @@ 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 minimal_skin_default from "../../_virtual/inline-css_src/define/video/minimal-skin.js";
 import { ReactiveElement } from "@videojs/element";
@@ -29,101 +30,103 @@ function getTemplateHTML() {
       </media-buffering-indicator>
 
       <media-controls class="media-controls">
-        <span class="media-button-group">
-          <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-tooltip-group>
+          <div class="media-button-group">
+            <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 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 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 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>
+            <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>
+          </div>
 
-        <span class="media-time-controls">
-          <media-time-group class="media-time">
-            <media-time type="current" class="media-time__value media-time__value--current"></media-time>
-            <media-time-separator class="media-time__separator"></media-time-separator>
-            <media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
-          </media-time-group>
+          <div class="media-time-controls">
+            <media-time-group class="media-time">
+              <media-time type="current" class="media-time__value media-time__value--current"></media-time>
+              <media-time-separator class="media-time__separator"></media-time-separator>
+              <media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
+            </media-time-group>
 
-          <media-time-slider class="media-slider">
-            <media-slider-track class="media-slider__track">
-              <media-slider-fill class="media-slider__fill"></media-slider-fill>
-              <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
-            </media-slider-track>
-            <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
-          </media-time-slider>
-        </span>
-
-        <span class="media-button-group">
-          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
-          <media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
-            Toggle playback rate
-          </media-tooltip>
-
-          <media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
-            ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
-            ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
-            ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
-          </media-mute-button>
-
-          <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-popover media-popover--volume">
-            <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
+            <media-time-slider class="media-slider">
               <media-slider-track class="media-slider__track">
                 <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
               </media-slider-track>
-              <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
-            </media-volume-slider>
-          </media-popover>
+              <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
+            </media-time-slider>
+          </div>
+
+          <div class="media-button-group">
+            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
+            <media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
+              Toggle playback rate
+            </media-tooltip>
+
+            <media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
+              ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
+              ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
+              ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
+            </media-mute-button>
+
+            <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-popover media-popover--volume">
+              <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
+                <media-slider-track class="media-slider__track">
+                  <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                </media-slider-track>
+                <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
+              </media-volume-slider>
+            </media-popover>
 
-          <media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
-            ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })}
-            ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })}
-          </media-captions-button>
-          <media-tooltip id="captions-tooltip" side="top" class="media-tooltip">
-            Toggle captions
-          </media-tooltip>
+            <media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
+              ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })}
+              ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })}
+            </media-captions-button>
+            <media-tooltip id="captions-tooltip" side="top" class="media-tooltip">
+              Toggle captions
+            </media-tooltip>
 
-          <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon">
-            ${renderIcon("pip", { class: "media-icon" })}
-          </media-pip-button>
-          <media-tooltip id="pip-tooltip" side="top" class="media-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-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 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-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>
+          </div>
+        </media-tooltip-group>
       </media-controls>
 
       <div class="media-overlay"></div>

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/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        <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;;;;;;cAM3C,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"}
+{"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            </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;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA2BvB,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"}

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":";;;iBA0CS,eAAA,CAAA;AAAA,cAAe,oCAAA;;;;cA0HX,+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;;;;cA4HX,+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"}