@videojs/react 10.0.0-beta.28 → 10.0.0-beta.29

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

@@ -438,8 +438,7 @@
   --track-size: calc(var(--spacing) * 1);
   --track-highlighted-size: calc(var(--spacing) * 1.75);
   --track-border-radius: 99px;
-  --thumb-size: calc(var(--spacing) * 2.5);
-  --thumb-active-size: calc(var(--spacing) * 3);
+  --thumb-size: calc(var(--spacing) * 3);
   --chapter-gap: calc(var(--spacing) * 1);
   --chapter-inset-start: calc(var(--chapter-gap) / 2);
   --chapter-inset-end: calc(var(--chapter-gap) / 2);
@@ -492,13 +491,22 @@
       inset-block: 0;
       left: 0;
       width: 100%;
-      transition-property: clip-path;
     }
     &[data-orientation="vertical"] {
       inset-inline: 0;
       bottom: 0;
       height: 100%;
-      transition-property: clip-path;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: clip-path 200ms ease-out;
+    }
+  }
+  &[data-dragging],
+  &[data-seeking] {
+    .media-slider__fill,
+    .media-slider__buffer {
+      transition-duration: 0ms;
     }
   }
 
@@ -525,6 +533,14 @@
       clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));
     }
   }
+  &[data-dragging] {
+    .media-slider__fill[data-orientation="horizontal"] {
+      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+    }
+    .media-slider__fill[data-orientation="vertical"] {
+      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    }
+  }
 
   /* Chapters */
   .media-slider__chapters {
@@ -606,45 +622,6 @@
     }
   }
 
-  /* Dragging — thumb and fill follow the pointer position */
-  &[data-dragging] {
-    .media-slider__thumb[data-orientation="horizontal"] {
-      left: var(--media-slider-pointer);
-    }
-    .media-slider__thumb[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-pointer));
-    }
-    .media-slider__fill[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
-    }
-    .media-slider__fill[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .media-slider__thumb {
-      transition-property: opacity, height, width, outline-offset, left, top;
-    }
-    .media-slider__fill {
-      transition-timing-function: linear;
-      transition-duration: 200ms;
-    }
-    .media-slider__buffer {
-      transition-timing-function: ease-out;
-      transition-duration: 250ms;
-    }
-  }
-
-  &[data-dragging],
-  &[data-seeking] {
-    .media-slider__thumb,
-    .media-slider__fill,
-    .media-slider__buffer {
-      transition-duration: 0ms;
-    }
-  }
-
   /* Thumb */
   .media-slider__thumb {
     position: absolute;
@@ -661,10 +638,8 @@
       0 1px 3px 0 oklch(0 0 0 / 0.35),
       0 1px 2px -1px oklch(0 0 0 / 0.35);
     opacity: 0;
+    scale: 0.8;
     translate: -50% -50%;
-    transition-timing-function: ease-out;
-    transition-duration: 150ms;
-    transition-property: opacity, height, width, outline-offset;
 
     &[data-orientation="horizontal"] {
       top: 50%;
@@ -681,22 +656,12 @@
       opacity: 1;
     }
 
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        outline-color: oklch(from currentColor l c h / 0.15);
-        outline-offset: 0;
-      }
-    }
-
     &::after {
       position: absolute;
       inset: -4px;
       content: "";
       border-radius: inherit;
       box-shadow: 0 0 0 2px currentColor;
-      transition-timing-function: ease-out;
-      transition-duration: 150ms;
-      transition-property: opacity, scale;
     }
 
     &:not(:focus-visible)::after {
@@ -705,37 +670,70 @@
     }
 
     &.media-slider__thumb--persistent {
-      width: var(--thumb-active-size);
-      height: var(--thumb-active-size);
       opacity: 1;
+      scale: 1;
     }
-  }
 
-  &:active .media-slider__thumb,
-  &:focus-within .media-slider__thumb {
-    width: var(--thumb-active-size);
-    height: var(--thumb-active-size);
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        outline-color: oklch(from currentColor l c h / 0.15);
+        outline-offset: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-timing-function: ease-out;
+      transition-duration: 150ms;
+      transition-property: opacity, outline-offset, left, top, scale;
+
+      &::after {
+        transition-timing-function: ease-out;
+        transition-duration: 150ms;
+        transition-property: opacity, scale;
+      }
+    }
   }
 
   @media (hover: hover) and (pointer: fine) {
     &:hover .media-slider__thumb {
       opacity: 1;
+      scale: 1;
+    }
+  }
+
+  &[data-dragging] .media-slider__thumb {
+    opacity: 1;
+    scale: 0.9;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: opacity, outline-offset, scale;
+    }
+
+    &[data-orientation="horizontal"] {
+      left: var(--media-slider-pointer);
+    }
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-pointer));
     }
   }
 
   /* Preview */
   .media-slider__preview {
-    --max-width: min(calc(var(--spacing) * 48), 100cqi);
-    --max-height: calc(var(--spacing) * 32);
+    --max-size-factor: 36;
+    --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);
 
-    min-width: var(--max-width);
+    min-width: var(--max-size);
     height: calc(var(--spacing) * 1);
 
+    @container media-root (width > 42rem) {
+      --max-size-factor: 48;
+    }
+
     .media-slider__thumbnail,
     .media-slider__value {
       position: absolute;
       left: 50%;
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       opacity: 0;
       filter: blur(8px);
       transform-origin: bottom;
@@ -746,7 +744,8 @@
     }
 
     .media-slider__thumbnail {
-      --thumbnail-max-width: var(--max-width);
+      --thumbnail-max-width: var(--max-size);
+      --thumbnail-max-height: var(--max-size);
       bottom: calc(100% + (var(--spacing) * 9));
     }
 
@@ -760,7 +759,7 @@
 
     .media-slider__chapter-title {
       min-width: 0;
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       padding-inline: calc(var(--spacing) * 6);
       overflow: hidden;
       text-overflow: ellipsis;

package/dist/default/presets/audio/skin.js

@@ -50,8 +50,8 @@ import VolumeLowIcon from "../../icons/dist/react/default/volume-low.js";
 import VolumeOffIcon from "../../icons/dist/react/default/volume-off.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { playbackRateText } from "@videojs/core/i18n/text/menu";
 import { cn } from "@videojs/utils/style";
+import { playbackRateText } from "@videojs/core/i18n/text/menu";
 //#region src/presets/audio/skin.tsx
 const SEEK_TIME = 10;
 const Button = forwardRef(function Button({ className, ...props }, ref) {

package/dist/default/presets/audio/skin.tailwind.js

@@ -58,8 +58,8 @@ import { seek } from "../../skins/dist/default/default/tailwind/components/seek.
 import { container, controls, error, playButton, popup, slider, time } from "../../skins/dist/default/default/tailwind/audio.tailwind.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { playbackRateText } from "@videojs/core/i18n/text/menu";
 import { cn } from "@videojs/utils/style";
+import { playbackRateText } from "@videojs/core/i18n/text/menu";
 //#region src/presets/audio/skin.tailwind.tsx
 const SEEK_TIME = 10;
 const Button = forwardRef(function Button({ className, ...props }, ref) {

package/dist/default/presets/live-audio/minimal-skin.css

@@ -444,9 +444,13 @@
 }
 
 .media-minimal-skin .media-slider {
+  --track-size: calc(var(--spacing) * 1);
+  --track-highlighted-size: calc(var(--spacing) * 1.75);
+  --track-border-radius: 99px;
   --thumb-size: calc(var(--spacing) * 3);
-  --thumb-active-size: calc(var(--spacing) * 3);
-  --track-border-radius: calc(Infinity * 1px);
+  --chapter-gap: calc(var(--spacing) * 1);
+  --chapter-inset-start: calc(var(--chapter-gap) / 2);
+  --chapter-inset-end: calc(var(--chapter-gap) / 2);
 
   position: relative;
   display: flex;
@@ -478,68 +482,14 @@
 
     &[data-orientation="horizontal"] {
       width: 100%;
-      height: calc(var(--spacing) * 0.75);
+      height: var(--track-size);
     }
     &[data-orientation="vertical"] {
-      width: calc(var(--spacing) * 0.75);
+      width: var(--track-size);
       height: 100%;
     }
   }
 
-  /* Thumb */
-  .media-slider__thumb {
-    position: absolute;
-    z-index: 10;
-    width: var(--thumb-size);
-    height: var(--thumb-size);
-    user-select: none;
-    outline: 2px solid transparent;
-    outline-offset: -2px;
-    background-color: currentColor;
-    border-radius: calc(Infinity * 1px);
-    box-shadow:
-      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
-      0 1px 3px 0 oklch(0 0 0 / 0.15),
-      0 1px 2px -1px oklch(0 0 0 / 0.15);
-    opacity: 0;
-    transform-origin: center;
-    scale: 0.7;
-    translate: -50% -50%;
-    transition-timing-function: ease-out;
-    transition-duration: 150ms;
-
-    &[data-orientation="horizontal"] {
-      top: 50%;
-      left: var(--media-slider-fill);
-    }
-    &[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-fill));
-      left: 50%;
-    }
-
-    &:focus-visible {
-      outline-color: var(--focus-ring-color);
-      outline-offset: 2px;
-    }
-  }
-
-  &:focus-within .media-slider__thumb,
-  .media-slider__thumb--persistent {
-    width: var(--thumb-active-size);
-    height: var(--thumb-active-size);
-    opacity: 1;
-    scale: 1;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    &:hover .media-slider__thumb {
-      width: var(--thumb-active-size);
-      height: var(--thumb-active-size);
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
   /* Shared track fills */
   .media-slider__buffer,
   .media-slider__fill {
@@ -551,13 +501,22 @@
       inset-block: 0;
       left: 0;
       width: 100%;
-      transition-property: clip-path;
     }
     &[data-orientation="vertical"] {
       inset-inline: 0;
       bottom: 0;
       height: 100%;
-      transition-property: clip-path;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: clip-path 200ms ease-out;
+    }
+  }
+  &[data-dragging],
+  &[data-seeking] {
+    .media-slider__fill,
+    .media-slider__buffer {
+      transition-duration: 0ms;
     }
   }
 
@@ -584,6 +543,14 @@
       clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));
     }
   }
+  &[data-dragging] {
+    .media-slider__fill[data-orientation="horizontal"] {
+      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+    }
+    .media-slider__fill[data-orientation="vertical"] {
+      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    }
+  }
 
   /* Chapters */
   .media-slider__chapters {
@@ -607,9 +574,6 @@
   }
 
   .media-slider__chapter {
-    --chapter-gap: calc(var(--spacing) * 1);
-    --chapter-inset-start: calc(var(--chapter-gap) / 2);
-    --chapter-inset-end: calc(var(--chapter-gap) / 2);
     position: absolute;
     inset: 0;
     display: flex;
@@ -626,8 +590,6 @@
     }
 
     .media-slider__chapter-track {
-      --chapter-track-size: calc(var(--spacing) * 0.75);
-      --chapter-track-highlighted-size: calc(var(--spacing) * 1.25);
       border-radius: var(--track-border-radius);
 
       @media (prefers-reduced-motion: no-preference) {
@@ -640,7 +602,7 @@
       clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));
 
       .media-slider__chapter-track {
-        height: var(--chapter-track-size);
+        height: var(--track-size);
         clip-path: inset(
           0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
             calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
@@ -648,7 +610,7 @@
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        height: var(--chapter-track-highlighted-size);
+        height: var(--track-highlighted-size);
       }
     }
 
@@ -656,7 +618,7 @@
       clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);
 
       .media-slider__chapter-track {
-        width: var(--chapter-track-size);
+        width: var(--track-size);
         clip-path: inset(
           calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
             calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
@@ -664,63 +626,102 @@
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        width: var(--chapter-track-highlighted-size);
+        width: var(--track-highlighted-size);
       }
     }
   }
 
-  /* Dragging — thumb and fill follow the pointer position */
-  &[data-dragging] {
-    .media-slider__thumb[data-orientation="horizontal"] {
-      left: var(--media-slider-pointer);
-    }
-    .media-slider__thumb[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-pointer));
-    }
-    .media-slider__fill[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+  /* Thumb */
+  .media-slider__thumb {
+    position: absolute;
+    z-index: 10;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    user-select: none;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    background-color: currentColor;
+    border-radius: calc(Infinity * 1px);
+    box-shadow:
+      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
+      0 1px 3px 0 oklch(0 0 0 / 0.15),
+      0 1px 2px -1px oklch(0 0 0 / 0.15);
+    opacity: 0;
+    transform-origin: center;
+    scale: 0.7;
+    translate: -50% -50%;
+
+    &[data-orientation="horizontal"] {
+      top: 50%;
+      left: var(--media-slider-fill);
     }
-    .media-slider__fill[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-fill));
+      left: 50%;
     }
-  }
 
-  @media (prefers-reduced-motion: no-preference) {
-    .media-slider__thumb {
-      transition-property: opacity, scale, height, width, outline-offset, left, top;
+    &:focus-visible {
+      outline-color: var(--focus-ring-color);
+      outline-offset: 2px;
     }
-    .media-slider__fill {
-      transition-timing-function: linear;
-      transition-duration: 200ms;
+
+    &:focus-visible,
+    &.media-slider__thumb--persistent {
+      opacity: 1;
+      scale: 1;
     }
-    .media-slider__buffer {
+
+    @media (prefers-reduced-motion: no-preference) {
       transition-timing-function: ease-out;
-      transition-duration: 250ms;
+      transition-duration: 150ms;
+      transition-property: opacity, outline-offset, left, top, scale;
     }
   }
 
-  &[data-dragging],
-  &[data-seeking] {
-    .media-slider__thumb,
-    .media-slider__fill,
-    .media-slider__buffer {
-      transition-duration: 0ms;
+  @media (hover: hover) and (pointer: fine) {
+    &:hover .media-slider__thumb {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  &[data-dragging] .media-slider__thumb {
+    opacity: 1;
+    scale: 0.9;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: opacity, outline-offset, scale;
+    }
+
+    &[data-orientation="horizontal"] {
+      left: var(--media-slider-pointer);
+    }
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-pointer));
     }
   }
 
   /* Preview */
   .media-slider__preview {
-    --max-width: min(calc(var(--spacing) * 48), 100cqi);
-    --max-height: calc(var(--spacing) * 32);
+    --max-size-factor: 28;
+    --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);
 
     min-width: 100%;
     height: calc(var(--spacing) * 1);
 
+    @container media-root (width > 32rem) {
+      --max-size-factor: 36;
+    }
+
+    @container media-root (width > 42rem) {
+      --max-size-factor: 48;
+    }
+
     .media-slider__thumbnail,
     .media-slider__value {
       position: absolute;
       left: var(--preview-left, var(--media-slider-pointer));
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       opacity: 0;
       filter: blur(8px);
       transform-origin: bottom;
@@ -732,8 +733,9 @@
     }
 
     .media-slider__thumbnail {
-      --thumbnail-max-width: var(--max-width);
-      bottom: calc(100% + (var(--spacing) * 12));
+      --thumbnail-max-width: var(--max-size);
+      --thumbnail-max-height: var(--max-size);
+      bottom: calc(100% + (var(--spacing) * 11));
     }
 
     .media-slider__value {