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

package/dist/dev/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/dev/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/dev/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/dev/define/shared.css

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

package/dist/dev/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/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;;;;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"}
+{"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"}

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

@@ -77,6 +77,14 @@ function getTemplateHTML() {
                 <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>