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

package/dist/default/define/audio/minimal-skin.css

@@ -70,7 +70,6 @@
 .media-minimal-skin *::before,
 .media-minimal-skin *::after {
   box-sizing: border-box;
-  margin: 0;
 }
 .media-minimal-skin img,
 .media-minimal-skin video,
@@ -299,6 +298,7 @@
   transition-timing-function: ease-out;
   cursor: pointer;
   user-select: none;
+  touch-action: manipulation;
 
   &:focus-visible {
     outline-color: currentColor;
@@ -407,6 +407,7 @@
   flex: 1;
   border-radius: calc(infinity * 1px);
   outline: none;
+  cursor: pointer;
 
   &[data-orientation="horizontal"] {
     min-width: 5rem;
@@ -536,11 +537,6 @@
   }
 }
 
-/* Time display within slider */
-.media-minimal-skin .media-slider__time-display {
-  font-variant-numeric: tabular-nums;
-}
-
 /* ==========================================================================
    Popups & Animations
    ========================================================================== */
@@ -552,12 +548,12 @@
   color: inherit;
   overflow: visible;
   transition-property: transform, scale, opacity, filter;
-  transition-duration: 200ms;
+  transition-duration: 150ms;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0);
+    transform: scale(0.5);
     filter: blur(8px);
   }
 
@@ -577,6 +573,48 @@
   &[data-side="right"] {
     transform-origin: left;
   }
+
+  /* Safe area between trigger and popup */
+  &::before {
+    content: "";
+    position: absolute;
+    pointer-events: inherit;
+  }
+
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    width: 100%;
+    inset-inline: 0;
+  }
+  &[data-side="top"]::before {
+    top: 100%;
+  }
+  &[data-side="bottom"]::before {
+    bottom: 100%;
+  }
+
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    height: 100%;
+    inset-block: 0;
+  }
+  &[data-side="left"]::before {
+    left: 100%;
+  }
+  &[data-side="right"]::before {
+    right: 100%;
+  }
+}
+
+.media-minimal-skin .media-popover {
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    height: var(--media-popover-side-offset);
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    width: var(--media-popover-side-offset);
+  }
 }
 
 .media-minimal-skin .media-tooltip {
@@ -589,7 +627,16 @@
     0 2px 4px -2px oklch(0 0 0 / 0.1);
   font-size: 0.75rem;
   white-space: nowrap;
-  --media-tooltip-side-offset: 0.5rem;
+  --media-tooltip-side-offset: 0.75rem;
+
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    height: var(--media-tooltip-side-offset);
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    width: var(--media-tooltip-side-offset);
+  }
 
   @media (prefers-reduced-transparency: reduce) {
     background-color: oklch(0 0 0 / 0.7);
@@ -640,3 +687,7 @@ media-tooltip-group {
   display: contents;
 }
 
+:host {
+  display: grid;
+}
+

package/dist/default/define/audio/skin.css

@@ -70,7 +70,6 @@
 .media-default-skin *::before,
 .media-default-skin *::after {
   box-sizing: border-box;
-  margin: 0;
 }
 .media-default-skin img,
 .media-default-skin video,
@@ -120,7 +119,7 @@
   background-color: var(--media-surface-background-color);
   backdrop-filter: var(--media-surface-backdrop-filter);
   box-shadow:
-    inset 0 0 0 1px var(--media-surface-inner-border-color),
+    0 0 0 1px var(--media-surface-outer-border-color),
     0 1px 3px 0 var(--media-surface-shadow-color),
     0 1px 2px -1px var(--media-surface-shadow-color);
 
@@ -131,7 +130,7 @@
     inset: 0;
     z-index: 10;
     border-radius: inherit;
-    box-shadow: 0 0 0 1px var(--media-surface-outer-border-color);
+    box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
     pointer-events: none;
   }
 
@@ -316,6 +315,7 @@
   transition-timing-function: ease-out;
   cursor: pointer;
   user-select: none;
+  touch-action: manipulation;
 
   &:focus-visible {
     outline-color: oklch(62.3% 0.214 259.815);
@@ -425,6 +425,7 @@
   flex: 1;
   border-radius: calc(infinity * 1px);
   outline: none;
+  cursor: pointer;
 
   &[data-orientation="horizontal"] {
     min-width: 5rem;
@@ -557,11 +558,6 @@
   }
 }
 
-/* Time display within slider */
-.media-default-skin .media-slider__time-display {
-  font-variant-numeric: tabular-nums;
-}
-
 /* ==========================================================================
    Popups & Tooltips
    ========================================================================== */
@@ -573,12 +569,12 @@
   color: inherit;
   overflow: visible;
   transition-property: transform, scale, opacity, filter;
-  transition-duration: 200ms;
+  transition-duration: 150ms;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0);
+    transform: scale(0.5);
     filter: blur(8px);
   }
 
@@ -598,10 +594,50 @@
   &[data-side="right"] {
     transform-origin: left;
   }
+
+  /* Safe area between trigger and popup */
+  &::before {
+    content: "";
+    position: absolute;
+    pointer-events: inherit;
+  }
+
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    width: 100%;
+    inset-inline: 0;
+  }
+  &[data-side="top"]::before {
+    top: 100%;
+  }
+  &[data-side="bottom"]::before {
+    bottom: 100%;
+  }
+
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    height: 100%;
+    inset-block: 0;
+  }
+  &[data-side="left"]::before {
+    left: 100%;
+  }
+  &[data-side="right"]::before {
+    right: 100%;
+  }
 }
 
 .media-default-skin .media-popover {
   --media-popover-side-offset: 0.5rem;
+
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    height: var(--media-popover-side-offset);
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    width: var(--media-popover-side-offset);
+  }
 }
 .media-default-skin .media-popover--volume {
   padding: 0.625rem 0.25rem;
@@ -613,7 +649,16 @@
   border-radius: calc(infinity * 1px);
   font-size: 0.75rem;
   white-space: nowrap;
-  --media-tooltip-side-offset: 0.5rem;
+  --media-tooltip-side-offset: 0.75rem;
+
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    height: var(--media-tooltip-side-offset);
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    width: var(--media-tooltip-side-offset);
+  }
 }
 
 
@@ -661,3 +706,7 @@ media-tooltip-group {
   display: contents;
 }
 
+:host {
+  display: grid;
+}
+

package/dist/default/define/base.css

@@ -2,24 +2,22 @@ video-player {
   display: contents;
 }
 
-video-player video,
-video-player hls-video,
-video-player simple-hls-video {
+/*
+Required to override any default video styles (such as Tailwind's CSS reset)
+and ensure the video element fills the container as expected.
+*/
+video-player video {
   display: block;
   width: 100%;
   height: 100%;
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
 }
 
 video-player video::-webkit-media-text-track-container {
-  transition: transform var(--media-caption-track-duration, 150ms) ease-out;
-  transition-delay: var(--media-caption-track-delay, 600ms);
+  transition: transform var(--media-caption-track-duration, 0) ease-out;
+  transition-delay: var(--media-caption-track-delay, 0);
   transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
-  z-index: var(--media-caption-track-z, 1);
+  z-index: 1;
   font-family: inherit;
 }
-
-@media (prefers-reduced-motion: reduce) {
-  video-player video::-webkit-media-text-track-container {
-    transition-duration: 50ms;
-  }
-}

package/dist/default/define/shared.css

@@ -1,3 +1,7 @@
 media-tooltip-group {
   display: contents;
 }
+
+:host {
+  display: grid;
+}

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

@@ -100,7 +100,6 @@
 .media-minimal-skin *::before,
 .media-minimal-skin *::after {
   box-sizing: border-box;
-  margin: 0;
 }
 .media-minimal-skin img,
 .media-minimal-skin video,
@@ -151,9 +150,11 @@
   display: block;
   width: 100%;
   height: 100%;
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
 }
 .media-minimal-skin ::slotted(video) {
-  border-radius: var(--media-border-radius, 0.75rem);
+  border-radius: var(--media-video-border-radius);
 }
 .media-minimal-skin video {
   border-radius: inherit;
@@ -168,10 +169,11 @@
   inset: 0;
   width: 100%;
   height: 100%;
-  border-radius: inherit;
-  object-fit: cover;
+  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;
@@ -182,14 +184,10 @@
    Fullscreen
    ========================================================================== */
 
-.media-minimal-skin:fullscreen video,
 .media-minimal-skin:fullscreen ::slotted(video),
-.media-minimal-skin:fullscreen > img {
+.media-minimal-skin:fullscreen video {
   object-fit: contain;
 }
-.media-minimal-skin:fullscreen ::slotted(video) {
-  border-radius: 0;
-}
 
 /* ==========================================================================
    Overlay / Scrim
@@ -417,6 +415,7 @@
   transition-timing-function: ease-out;
   cursor: pointer;
   user-select: none;
+  touch-action: manipulation;
 
   &:focus-visible {
     outline-color: currentColor;
@@ -513,6 +512,54 @@
   scale: -1 1;
 }
 
+/* ==========================================================================
+   Media preview
+   ========================================================================== */
+.media-minimal-skin .media-preview {
+  & .media-preview__thumbnail-wrapper {
+    position: relative;
+    border-radius: 0.5rem;
+    background-color: oklch(0 0 0 / 0.9);
+  }
+  & .media-preview__thumbnail {
+    display: block;
+    border-radius: inherit;
+  }
+
+  & .media-preview__timestamp {
+    display: block;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    margin-top: 0.5rem;
+  }
+
+  & .media-overlay {
+    opacity: 1;
+  }
+
+  & .media-preview__spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+  }
+
+  & .media-preview__thumbnail,
+  & .media-preview__spinner {
+    transition: opacity 150ms ease-out;
+  }
+
+  &:has(.media-preview__thumbnail[data-loading]) {
+    & .media-preview__thumbnail {
+      opacity: 0;
+    }
+    & .media-preview__spinner {
+      opacity: 1;
+    }
+  }
+}
+
 /* ==========================================================================
    Slider
    ========================================================================== */
@@ -525,6 +572,7 @@
   flex: 1;
   border-radius: calc(infinity * 1px);
   outline: none;
+  cursor: pointer;
 
   &[data-orientation="horizontal"] {
     min-width: 5rem;
@@ -654,11 +702,6 @@
   }
 }
 
-/* Time display within slider */
-.media-minimal-skin .media-slider__time-display {
-  font-variant-numeric: tabular-nums;
-}
-
 /* ==========================================================================
    Popups & Animations
    ========================================================================== */
@@ -670,12 +713,12 @@
   color: inherit;
   overflow: visible;
   transition-property: transform, scale, opacity, filter;
-  transition-duration: 200ms;
+  transition-duration: 150ms;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0);
+    transform: scale(0.5);
     filter: blur(8px);
   }
 
@@ -695,6 +738,48 @@
   &[data-side="right"] {
     transform-origin: left;
   }
+
+  /* Safe area between trigger and popup */
+  &::before {
+    content: "";
+    position: absolute;
+    pointer-events: inherit;
+  }
+
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    width: 100%;
+    inset-inline: 0;
+  }
+  &[data-side="top"]::before {
+    top: 100%;
+  }
+  &[data-side="bottom"]::before {
+    bottom: 100%;
+  }
+
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    height: 100%;
+    inset-block: 0;
+  }
+  &[data-side="left"]::before {
+    left: 100%;
+  }
+  &[data-side="right"]::before {
+    right: 100%;
+  }
+}
+
+.media-minimal-skin .media-popover {
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    height: var(--media-popover-side-offset);
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    width: var(--media-popover-side-offset);
+  }
 }
 
 .media-minimal-skin .media-tooltip {
@@ -707,7 +792,16 @@
     0 2px 4px -2px oklch(0 0 0 / 0.1);
   font-size: 0.75rem;
   white-space: nowrap;
-  --media-tooltip-side-offset: 0.5rem;
+  --media-tooltip-side-offset: 0.75rem;
+
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    height: var(--media-tooltip-side-offset);
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    width: var(--media-tooltip-side-offset);
+  }
 
   @media (prefers-reduced-transparency: reduce) {
     background-color: oklch(0 0 0 / 0.7);
@@ -723,6 +817,7 @@
    ========================================================================== */
 
 .media-minimal-skin {
+  --media-caption-track-duration: 150ms;
   --media-caption-track-delay: 600ms;
   --media-caption-track-y: -0.5rem;
 
@@ -730,23 +825,21 @@
     --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 150ms ease-out;
+  transition: transform var(--media-caption-track-duration) ease-out;
   transition-delay: var(--media-caption-track-delay);
   transform: translateY(var(--media-caption-track-y)) scale(0.98);
   z-index: 1;
   font-family: inherit;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .media-minimal-skin video::-webkit-media-text-track-container {
-    transition-duration: 50ms;
-  }
-}
-
 
 /* ==========================================================================
    Root
@@ -755,6 +848,7 @@
 .media-minimal-skin--video {
   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 (prefers-color-scheme: dark) {
     --media-border-color: oklch(1 0 0 / 0.15);
@@ -773,7 +867,7 @@
 
   /* Fullscreen */
   &:fullscreen {
-    border-radius: 0;
+    --media-border-radius: 0;
   }
 }
 
@@ -823,6 +917,11 @@
   }
 }
 
+/* Hide cursor when controls are hidden in fullscreen */
+.media-minimal-skin--video:fullscreen:has(.media-controls:not([data-visible])) {
+  cursor: none;
+}
+
 /* ==========================================================================
    Sliders
    ========================================================================== */
@@ -841,7 +940,56 @@
   padding: 0.25rem;
 }
 
+/* ==========================================================================
+   Slider preview
+   ========================================================================== */
+
+.media-minimal-skin .media-slider__preview {
+  position: absolute;
+  left: var(--media-slider-pointer);
+  bottom: calc(100% + 0.5rem);
+  translate: -50%;
+  opacity: 0;
+  scale: 0.8;
+  filter: blur(8px);
+  transition-property: scale, opacity, filter;
+  transition-duration: 150ms;
+  transform-origin: bottom;
+
+  & .media-preview__thumbnail-wrapper {
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      box-shadow:
+        0 0 0 1px oklch(0 0 0 / 0.05),
+        0 1px 3px 0 oklch(0 0 0 / 0.2),
+        0 1px 2px -1px oklch(0 0 0 / 0.2);
+    }
+  }
+
+  & .media-preview__thumbnail {
+    max-width: 11rem;
+  }
+
+  &:has(.media-preview__thumbnail[data-loading]) {
+    max-height: 6rem;
+  }
+}
+.media-minimal-skin .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) {
+  opacity: 1;
+  scale: 1;
+  filter: blur(0);
+}
+
 media-tooltip-group {
   display: contents;
 }
 
+:host {
+  display: grid;
+}
+

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

@@ -21,7 +21,7 @@ import { ReactiveElement } from "@videojs/element";
 //#region src/define/video/minimal-skin.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `<media-container class="media-minimal-skin media-minimal-skin--video"><slot name="media"></slot><media-buffering-indicator class="media-buffering-indicator"> ${renderIcon("spinner", { class: "media-icon" })} </media-buffering-indicator><media-controls class="media-controls"><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-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><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></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-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></div></media-tooltip-group></media-controls><div class="media-overlay"></div></media-container>`;
+	return `<media-container class="media-minimal-skin media-minimal-skin--video"><slot name="media"></slot><media-buffering-indicator class="media-buffering-indicator"> ${renderIcon("spinner", { class: "media-icon" })} </media-buffering-indicator><media-controls class="media-controls"><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-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><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><div class="media-preview media-slider__preview"><div class="media-preview__thumbnail-wrapper"><media-slider-thumbnail class="media-preview__thumbnail"></media-slider-thumbnail></div><media-slider-value type="pointer" class="media-preview__timestamp"></media-slider-value> ${renderIcon("spinner", { class: "media-preview__spinner media-icon" })} </div></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-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></div></media-tooltip-group></media-controls><div class="media-overlay"></div></media-container>`;
 }
 var MinimalVideoSkinElement = class extends SkinMixin(ReactiveElement) {
 	static {