@videojs/react 10.0.0-rc.1 → 10.0.0-rc.2

package/dist/dev/presets/live-audio/skin.css

@@ -471,6 +471,25 @@
     }
   }
 
+  :where(.media-skin[data-theme="default"][data-preset="live-audio"]) .media-popup-surface {
+    background-color: var(--media-popover);
+    color: var(--media-popover-foreground);
+    box-shadow:
+      0 0 0 1px var(--media-surface-border, var(--media-border)),
+      var(--media-shadow-surface);
+    backdrop-filter: var(--media-backdrop-filter-surface);
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="live-audio"]) .media-popup-surface:after {
+    content: "";
+    z-index: 10;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: var(--media-shadow-surface-inset);
+    position: absolute;
+    inset: 0;
+  }
+
   @scope (.media-skin[data-theme="default"][data-preset="live-audio"]) {
     .media-button-icon {
       width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
@@ -537,6 +556,7 @@
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-buffer,
       &[data-dragging] .media-slider-buffer,
       &[data-seeking] .media-slider-buffer {
         transition-duration: 0s;
@@ -569,6 +589,7 @@
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-fill,
       &[data-dragging] .media-slider-fill,
       &[data-seeking] .media-slider-fill {
         transition-duration: 0s;
@@ -627,6 +648,14 @@
       translate: -50% -50%;
     }
 
+    @scope (.media-slider) {
+      &:focus-within .media-slider-thumb {
+        transition-property: opacity, height, width, outline-offset, scale;
+        transition-duration: 0.15s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
     @scope (.media-slider) {
       &[data-dragging] .media-slider-thumb {
         transition-property: opacity, height, width, outline-offset, scale;
@@ -749,13 +778,17 @@
       }
     }
 
+    .media-slider[data-disabled] {
+      pointer-events: none;
+    }
+
     .media-slider[data-orientation="horizontal"] {
       height: var(--media-slider-height, calc(var(--media-spacing) * 8));
-      min-width: calc(var(--media-spacing) * 20);
+      min-width: calc(var(--media-spacing) * 18);
     }
 
     .media-slider[data-orientation="vertical"] {
-      height: calc(var(--media-spacing) * 20);
+      height: calc(var(--media-spacing) * 18);
       width: calc(var(--media-spacing) * 8);
       min-width: calc(var(--media-spacing) * 0);
     }
@@ -897,7 +930,7 @@
       z-index: 20;
       border-radius: var(--media-controls-radius);
       background-color: var(--media-controls);
-      padding: calc(var(--media-spacing) * 1);
+      padding: calc(var(--media-spacing) * 0.5);
       color: var(--media-controls-foreground);
       box-shadow:
         0 0 0 1px var(--media-surface-border, var(--media-border)),
@@ -919,6 +952,12 @@
       inset: 0;
     }
 
+    @container media-root (width >= 32rem) {
+      .audio-controls-content {
+        padding: calc(var(--media-spacing) * 1);
+      }
+    }
+
     .audio-controls-end {
       align-items: center;
       gap: 1px;
@@ -991,7 +1030,7 @@
     --media-backdrop-filter-indicator: blur(8px);
     --media-backdrop-filter-dialog: blur(16px) saturate(150%);
     --media-control-corner-shape: round;
-    --media-control-radius: calc(infinity * 1px);
+    --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
     --media-controls-radius: var(--media-control-radius);
     --media-default-accent-color: oklch(100% 0 0);

package/dist/dev/presets/live-video/minimal-skin.css

@@ -392,8 +392,6 @@
     .media-poster {
       pointer-events: none;
       border-radius: inherit;
-      object-fit: var(--media-object-fit, contain);
-      object-position: var(--media-object-position, center);
       width: 100%;
       height: 100%;
       transition-property: opacity;
@@ -408,7 +406,7 @@
       opacity: 0;
     }
 
-    .media-poster img {
+    .media-poster-image {
       border-radius: inherit;
       object-fit: var(--media-object-fit, contain);
       object-position: var(--media-object-position, center);
@@ -418,11 +416,42 @@
       inset: 0;
     }
 
-    .media-poster:is(img):not([src]):not([srcset]) {
+    .media-poster-image:not([src]):not([srcset]) {
       visibility: hidden;
     }
   }
 
+  :where(.media-skin[data-theme="minimal"][data-preset="live-video"]) .media-poster {
+    pointer-events: none;
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: var(--media-duration-slower);
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="live-video"]) .media-poster:not([data-visible]) {
+    opacity: 0;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="live-video"]) .media-poster-image {
+    border-radius: inherit;
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="live-video"]) .media-poster-image:not([src]):not([srcset]) {
+    visibility: hidden;
+  }
+
   @scope (.media-skin[data-theme="minimal"][data-preset="live-video"]) {
     .media-status-announcer {
       clip-path: inset(50%);
@@ -955,6 +984,26 @@
     }
   }
 
+  :where(.media-skin[data-theme="minimal"][data-preset="live-video"]) .media-popup-surface {
+    background-color: var(--media-popover);
+    color: var(--media-popover-foreground);
+    box-shadow:
+      0 0 0 1px var(--media-surface-border, var(--media-border)),
+      var(--media-shadow-surface);
+    backdrop-filter: var(--media-backdrop-filter-surface);
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="live-video"]) .media-popup-surface:after {
+    z-index: 10;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: var(--media-shadow-surface-inset);
+    content: "";
+    display: none;
+    position: absolute;
+    inset: 0;
+  }
+
   @scope (.media-skin[data-theme="minimal"][data-preset="live-video"]) {
     .media-cast-button-enter-icon {
       opacity: 0;
@@ -1161,6 +1210,7 @@
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-buffer,
       &[data-dragging] .media-slider-buffer,
       &[data-seeking] .media-slider-buffer {
         transition-duration: 0s;
@@ -1193,6 +1243,7 @@
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-fill,
       &[data-dragging] .media-slider-fill,
       &[data-seeking] .media-slider-fill {
         transition-duration: 0s;
@@ -1251,6 +1302,14 @@
       translate: -50% -50%;
     }
 
+    @scope (.media-slider) {
+      &:focus-within .media-slider-thumb {
+        transition-property: opacity, height, width, outline-offset, scale;
+        transition-duration: 0.15s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
     @scope (.media-slider) {
       &[data-dragging] .media-slider-thumb {
         transition-property: opacity, height, width, outline-offset, scale;
@@ -1328,6 +1387,10 @@
       }
     }
 
+    .media-slider[data-disabled] {
+      pointer-events: none;
+    }
+
     .media-slider[data-orientation="horizontal"] {
       height: var(--media-slider-height, calc(var(--media-spacing) * 8));
       min-width: calc(var(--media-spacing) * 20);
@@ -1690,7 +1753,7 @@
     .video-controls-content {
       inset-inline: calc(var(--media-spacing) * 1);
       bottom: calc(var(--media-spacing) * 1);
-      z-index: 20;
+      z-index: 30;
       align-items: center;
       column-gap: calc(var(--media-spacing) * 2);
       border-radius: var(--media-controls-radius);
@@ -1812,7 +1875,7 @@
     --media-backdrop-filter-indicator: blur(8px);
     --media-backdrop-filter-dialog: blur(16px) saturate(150%);
     --media-control-corner-shape: round;
-    --media-control-radius: calc(infinity * 1px);
+    --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
     --media-controls-radius: var(--media-control-radius);
     --media-default-accent-color: oklch(100% 0 0);

package/dist/dev/presets/live-video/skin.css

@@ -403,8 +403,6 @@
     .media-poster {
       pointer-events: none;
       border-radius: inherit;
-      object-fit: var(--media-object-fit, contain);
-      object-position: var(--media-object-position, center);
       width: 100%;
       height: 100%;
       transition-property: opacity;
@@ -419,7 +417,7 @@
       opacity: 0;
     }
 
-    .media-poster img {
+    .media-poster-image {
       border-radius: inherit;
       object-fit: var(--media-object-fit, contain);
       object-position: var(--media-object-position, center);
@@ -429,11 +427,42 @@
       inset: 0;
     }
 
-    .media-poster:is(img):not([src]):not([srcset]) {
+    .media-poster-image:not([src]):not([srcset]) {
       visibility: hidden;
     }
   }
 
+  :where(.media-skin[data-theme="default"][data-preset="live-video"]) .media-poster {
+    pointer-events: none;
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: var(--media-duration-slower);
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="live-video"]) .media-poster:not([data-visible]) {
+    opacity: 0;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="live-video"]) .media-poster-image {
+    border-radius: inherit;
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="live-video"]) .media-poster-image:not([src]):not([srcset]) {
+    visibility: hidden;
+  }
+
   @scope (.media-skin[data-theme="default"][data-preset="live-video"]) {
     .media-status-announcer {
       clip-path: inset(50%);
@@ -954,6 +983,25 @@
     }
   }
 
+  :where(.media-skin[data-theme="default"][data-preset="live-video"]) .media-popup-surface {
+    background-color: var(--media-popover);
+    color: var(--media-popover-foreground);
+    box-shadow:
+      0 0 0 1px var(--media-surface-border, var(--media-border)),
+      var(--media-shadow-surface);
+    backdrop-filter: var(--media-backdrop-filter-surface);
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="live-video"]) .media-popup-surface:after {
+    content: "";
+    z-index: 10;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: var(--media-shadow-surface-inset);
+    position: absolute;
+    inset: 0;
+  }
+
   @scope (.media-skin[data-theme="default"][data-preset="live-video"]) {
     .media-cast-button-enter-icon {
       opacity: 0;
@@ -1160,6 +1208,7 @@
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-buffer,
       &[data-dragging] .media-slider-buffer,
       &[data-seeking] .media-slider-buffer {
         transition-duration: 0s;
@@ -1192,6 +1241,7 @@
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-fill,
       &[data-dragging] .media-slider-fill,
       &[data-seeking] .media-slider-fill {
         transition-duration: 0s;
@@ -1250,6 +1300,14 @@
       translate: -50% -50%;
     }
 
+    @scope (.media-slider) {
+      &:focus-within .media-slider-thumb {
+        transition-property: opacity, height, width, outline-offset, scale;
+        transition-duration: 0.15s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
     @scope (.media-slider) {
       &[data-dragging] .media-slider-thumb {
         transition-property: opacity, height, width, outline-offset, scale;
@@ -1372,13 +1430,17 @@
       }
     }
 
+    .media-slider[data-disabled] {
+      pointer-events: none;
+    }
+
     .media-slider[data-orientation="horizontal"] {
       height: var(--media-slider-height, calc(var(--media-spacing) * 8));
-      min-width: calc(var(--media-spacing) * 20);
+      min-width: calc(var(--media-spacing) * 18);
     }
 
     .media-slider[data-orientation="vertical"] {
-      height: calc(var(--media-spacing) * 20);
+      height: calc(var(--media-spacing) * 18);
       width: calc(var(--media-spacing) * 8);
       min-width: calc(var(--media-spacing) * 0);
     }
@@ -1727,7 +1789,7 @@
       .video-controls-content {
         inset-inline: calc(var(--media-spacing) * 2);
         bottom: calc(var(--media-spacing) * 2);
-        z-index: 10;
+        z-index: 30;
         border-radius: var(--media-controls-radius);
         background-color: var(--media-popover);
         color: var(--media-popover-foreground);
@@ -1775,10 +1837,10 @@
     .video-controls-primary {
       inset-inline: calc(var(--media-spacing) * 2);
       bottom: calc(var(--media-spacing) * 2);
-      z-index: 10;
+      z-index: 30;
       transform-origin: bottom;
       border-radius: var(--media-controls-radius);
-      padding: calc(var(--media-spacing) * 1);
+      padding: calc(var(--media-spacing) * 0.5);
       transition-property: filter, opacity, scale, translate;
       transition-duration: 0.15s;
       transition-duration: calc(var(--media-duration-controls) / 2);
@@ -1898,7 +1960,7 @@
     --media-backdrop-filter-indicator: blur(8px);
     --media-backdrop-filter-dialog: blur(16px) saturate(150%);
     --media-control-corner-shape: round;
-    --media-control-radius: calc(infinity * 1px);
+    --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
     --media-controls-radius: var(--media-control-radius);
     --media-default-accent-color: oklch(100% 0 0);

package/dist/dev/presets/types.d.ts

@@ -1,4 +1,4 @@
-import { Poster } from "../ui/poster/poster.js";
+import { PosterImageProps } from "../ui/poster/image.js";
 import "../ui/poster/index.js";
 import { CSSProperties, PropsWithChildren } from "react";
 //#region src/presets/types.d.ts
@@ -24,7 +24,7 @@ type BaseVideoSkinProps<T = unknown> = BaseSkinProps<T> & {
    *   />
    *   ```;
    */
-  renderPoster?: Poster.Props['render'];
+  renderPoster?: PosterImageProps['render'];
 };
 //#endregion
 export { BaseSkinProps, BaseVideoSkinProps };

package/dist/dev/presets/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/presets/types.ts"],"mappings":";;;;;KAKY,cAAc,eAAe,kBACvC;;EAEE,QAAQ;;EAGR;;;KAKQ,mBAAmB,eAAe,cAAc;;;;;;;;;;;;;;EAc1D,eAAe,OAAO"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/presets/types.ts"],"mappings":";;;;;KAKY,cAAc,eAAe,kBACvC;;EAEE,QAAQ;;EAGR;;;KAKQ,mBAAmB,eAAe,cAAc;;;;;;;;;;;;;;EAc1D,eAAe"}