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

package/dist/default/__generated__/skins/default-video/styles/overlays.css

@@ -2,10 +2,34 @@
   @scope (.media-skin-video) {
     .media-overlay {
       pointer-events: none;
+      inset: calc(var(--media-spacing) * 0);
       border-radius: inherit;
-      background-image: linear-gradient(to top, oklch(0% 0 0 / 0.5), oklch(0% 0 0 / 0.3) 25%, #0000);
+      opacity: 0;
+      transition-property: opacity, backdrop-filter;
+      transition-duration: var(--media-controls-transition-duration);
+      background-image: linear-gradient(
+        to top,
+        oklab(0% none none / 0.5) 0%,
+        oklab(0% none none / 0.3) 25%,
+        #0000 100%
+      );
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
       position: absolute;
-      inset: 0;
+    }
+
+    .media-overlay:is(:where(.media-error-dialog)[data-open] ~ *) {
+      opacity: 1;
+      backdrop-filter: blur(16px) saturate(150%);
+    }
+
+    .media-overlay:is(:where(.media-buffering-indicator)[data-visible] ~ *) {
+      opacity: 1;
+      backdrop-filter: blur(4px);
+      background-color: oklab(0% none none / 0.35);
+    }
+
+    .media-overlay:is(:where(.media-controls-root)[data-visible] ~ *) {
+      opacity: 1;
     }
   }
 }

package/dist/default/__generated__/skins/default-video/styles/popups.css

@@ -1,45 +1,371 @@
 @layer videojs.components {
   @scope (.media-skin-video) {
+    .media-popover {
+      margin: calc(var(--media-spacing) * 0);
+      color: inherit;
+      border-style: solid;
+      border-width: 0;
+      transition-property: opacity, filter, transform, scale;
+      transition-duration: 0.1s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      overflow: visible;
+    }
+
+    .media-popover:before {
+      pointer-events: auto;
+      content: '';
+      position: absolute;
+    }
+
+    .media-popover[data-ending-style],
+    .media-popover[data-starting-style] {
+      opacity: 0;
+      filter: blur(4px);
+      scale: 0.95;
+    }
+
+    .media-popover[data-side='bottom'] {
+      transform-origin: top;
+    }
+
+    .media-popover[data-side='bottom']:before {
+      inset-inline: calc(var(--media-spacing) * 0);
+      content: '';
+      height: var(--media-popover-side-offset);
+      bottom: 100%;
+    }
+
+    .media-popover[data-side='left'] {
+      transform-origin: 100%;
+    }
+
+    .media-popover[data-side='left']:before {
+      inset-block: calc(var(--media-spacing) * 0);
+      content: '';
+      width: var(--media-popover-side-offset);
+      left: 100%;
+    }
+
+    .media-popover[data-side='right'] {
+      transform-origin: 0;
+    }
+
+    .media-popover[data-side='right']:before {
+      inset-block: calc(var(--media-spacing) * 0);
+      content: '';
+      width: var(--media-popover-side-offset);
+      right: 100%;
+    }
+
+    .media-popover[data-side='top'] {
+      transform-origin: bottom;
+    }
+
+    .media-popover[data-side='top']:before {
+      inset-inline: calc(var(--media-spacing) * 0);
+      content: '';
+      height: var(--media-popover-side-offset);
+      top: 100%;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .media-popover,
+      .media-tooltip,
+      .media-volume-popover {
+        transition-duration: 0s;
+      }
+    }
+
     .media-surface {
-      background-color: var(--media-surface-background);
-      color: var(--media-controls-color);
+      color: #fff;
+      backdrop-filter: blur(16px) saturate(150%);
+      background-color: oklab(100% 0 5.96046e-8 / 0.1);
+      position: relative;
+      box-shadow:
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 0 1px oklab(0% none none / 0.1),
+        0 1px 3px oklab(0% none none / 0.15),
+        0 1px 2px -1px oklab(0% none none / 0.15);
+    }
+
+    .media-surface:after {
+      pointer-events: none;
+      inset: calc(var(--media-spacing) * 0);
+      z-index: 10;
+      border-radius: inherit;
+      content: '';
+      position: absolute;
       box-shadow:
         0 0 #0000,
         0 0 #0000,
         0 0 #0000,
         0 0 #0000,
-        0 0 0 1px var(--media-surface-border),
-        0 2px 8px var(--media-shadow-color);
-      backdrop-filter: blur(var(--media-surface-backdrop-blur));
+        inset 0 1px #ffffff1a,
+        inset 0 0 0 1px #ffffff0d;
+    }
+
+    @media (prefers-contrast: more) {
+      .media-surface {
+        backdrop-filter: none;
+        background-color: #000;
+        box-shadow:
+          0 0 #0000,
+          0 0 #0000,
+          0 0 #0000,
+          0 0 0 1px #0000,
+          0 1px 3px #00000026,
+          0 1px 2px -1px #00000026;
+      }
+
+      .media-surface:after {
+        content: '';
+        box-shadow:
+          0 0 #0000,
+          0 0 #0000,
+          0 0 #0000,
+          0 0 #0000,
+          inset 0 1px #ffffff40,
+          inset 0 0 0 1px #ffffff20;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .media-surface {
+        background-color: canvas;
+        box-shadow:
+          0 0 #0000,
+          0 0 #0000,
+          0 0 #0000,
+          0 0 0 1px canvastext,
+          0 1px 3px #00000026,
+          0 1px 2px -1px #00000026;
+      }
+
+      .media-surface:after {
+        content: '';
+        box-shadow:
+          0 0 #0000,
+          0 0 #0000,
+          0 0 #0000,
+          0 0 #0000,
+          inset 0 1px canvastext,
+          inset 0 0 0 1px canvastext;
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      .media-surface {
+        backdrop-filter: none;
+        background-color: #000;
+        box-shadow:
+          0 0 #0000,
+          0 0 #0000,
+          0 0 #0000,
+          0 0 0 1px #0000,
+          0 1px 3px #00000026,
+          0 1px 2px -1px #00000026;
+      }
+
+      .media-surface:after {
+        content: '';
+        box-shadow:
+          0 0 #0000,
+          0 0 #0000,
+          0 0 #0000,
+          0 0 #0000,
+          inset 0 1px #ffffff40,
+          inset 0 0 0 1px #ffffff20;
+      }
     }
 
     .media-tooltip {
-      border-radius: var(--media-radius-pill);
+      margin: calc(var(--media-spacing) * 0);
+      border-radius: var(--media-control-radius);
+      padding-inline: calc(var(--media-spacing) * 2.5);
       white-space: nowrap;
+      color: inherit;
       border-style: solid;
       border-width: 0;
-      margin: 0;
       padding-block: 0.35rem;
-      padding-inline: 0.625rem;
+      transition-property: opacity, filter, transform, scale;
+      transition-duration: 0.1s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      overflow: visible;
+    }
+
+    .media-tooltip:before {
+      pointer-events: auto;
+      content: '';
+      position: absolute;
+    }
+
+    .media-tooltip[data-ending-style] {
+      opacity: 0;
+      filter: blur(4px);
+      scale: 0.95;
     }
 
     .media-tooltip[data-open] {
       align-items: center;
-      gap: 0.25rem;
+      gap: calc(var(--media-spacing) * 1);
       display: flex;
     }
 
+    .media-tooltip[data-starting-style] {
+      opacity: 0;
+      filter: blur(4px);
+      scale: 0.95;
+    }
+
+    .media-tooltip[data-side='bottom'] {
+      transform-origin: top;
+    }
+
+    .media-tooltip[data-side='bottom']:before {
+      inset-inline: calc(var(--media-spacing) * 0);
+      content: '';
+      height: var(--media-tooltip-side-offset);
+      bottom: 100%;
+    }
+
+    .media-tooltip[data-side='left'] {
+      transform-origin: 100%;
+    }
+
+    .media-tooltip[data-side='left']:before {
+      inset-block: calc(var(--media-spacing) * 0);
+      content: '';
+      width: var(--media-tooltip-side-offset);
+      left: 100%;
+    }
+
+    .media-tooltip[data-side='right'] {
+      transform-origin: 0;
+    }
+
+    .media-tooltip[data-side='right']:before {
+      inset-block: calc(var(--media-spacing) * 0);
+      content: '';
+      width: var(--media-tooltip-side-offset);
+      right: 100%;
+    }
+
+    .media-tooltip[data-side='top'] {
+      transform-origin: bottom;
+    }
+
+    .media-tooltip[data-side='top']:before {
+      inset-inline: calc(var(--media-spacing) * 0);
+      content: '';
+      height: var(--media-tooltip-side-offset);
+      top: 100%;
+    }
+
     .media-tooltip-shortcut {
+      min-width: calc(var(--media-spacing) * 6);
+      text-align: center;
+      background-color: currentColor;
+      border-radius: 0.25rem;
+      padding: 0.1em;
       font-size: 0.75em;
       font-weight: 600;
+      line-height: 1.25;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .media-tooltip-shortcut {
+        background-color: color-mix(in oklab, currentcolor 30%, transparent);
+      }
     }
 
     .media-volume-popover {
-      border-radius: var(--media-radius-pill);
+      margin: calc(var(--media-spacing) * 0);
+      border-radius: var(--media-control-radius);
+      padding-block: calc(var(--media-spacing) * 3);
+      color: inherit;
       border-style: solid;
       border-width: 0;
-      margin: 0;
-      padding-block: 0.75rem;
+      transition-property: opacity, filter, transform, scale;
+      transition-duration: 0.1s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      overflow: visible;
+    }
+
+    .media-volume-popover:before {
+      pointer-events: auto;
+      content: '';
+      position: absolute;
+    }
+
+    .media-volume-popover:has(:is(media-volume-slider[data-hidden])) {
+      display: none;
+    }
+
+    .media-volume-popover[data-ending-style],
+    .media-volume-popover[data-starting-style] {
+      opacity: 0;
+      filter: blur(4px);
+      scale: 0.95;
+    }
+
+    .media-volume-popover[data-side='bottom'] {
+      transform-origin: top;
+    }
+
+    .media-volume-popover[data-side='bottom']:before {
+      inset-inline: calc(var(--media-spacing) * 0);
+      content: '';
+      height: var(--media-popover-side-offset);
+      bottom: 100%;
+    }
+
+    .media-volume-popover[data-side='left'] {
+      transform-origin: 100%;
+    }
+
+    .media-volume-popover[data-side='left']:before {
+      inset-block: calc(var(--media-spacing) * 0);
+      content: '';
+      width: var(--media-popover-side-offset);
+      left: 100%;
+    }
+
+    .media-volume-popover[data-side='right'] {
+      transform-origin: 0;
+      padding: calc(var(--media-spacing) * 0);
+      backdrop-filter: none;
+      background-color: #0000;
+      box-shadow:
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0,
+        0 0 #0000;
+    }
+
+    .media-volume-popover[data-side='right']:before {
+      inset-block: calc(var(--media-spacing) * 0);
+      content: '';
+      width: var(--media-popover-side-offset);
+      right: 100%;
+    }
+
+    .media-volume-popover[data-side='right']:after {
+      content: '';
+      display: none;
+    }
+
+    .media-volume-popover[data-side='top'] {
+      transform-origin: bottom;
+    }
+
+    .media-volume-popover[data-side='top']:before {
+      inset-inline: calc(var(--media-spacing) * 0);
+      content: '';
+      height: var(--media-popover-side-offset);
+      top: 100%;
     }
   }
 }

package/dist/default/__generated__/skins/default-video/styles/poster.css

@@ -2,6 +2,7 @@
   @scope (.media-skin-video) {
     .media-poster {
       pointer-events: none;
+      inset: calc(var(--media-spacing) * 0);
       border-radius: inherit;
       object-fit: var(--media-object-fit, contain);
       object-position: var(--media-object-position, center);
@@ -11,7 +12,6 @@
       transition-duration: 0.25s;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       position: absolute;
-      inset: 0;
     }
 
     .media-poster:not([data-visible]) {
@@ -20,6 +20,7 @@
 
     .media-poster:before {
       pointer-events: none;
+      inset: calc(var(--media-spacing) * 0);
       background-image: var(--media-poster-placeholder, none);
       background-size: var(--media-object-fit, contain);
       background-position: var(--media-object-position, center);
@@ -27,20 +28,19 @@
       filter: blur(var(--media-poster-placeholder-blur, 20px));
       background-repeat: no-repeat;
       position: absolute;
-      inset: 0;
     }
 
     .media-poster ::slotted(img) {
+      inset: calc(var(--media-spacing) * 0);
       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;
     }
 
-    .media-poster[data-visible]:not([data-loaded]) {
+    .media-poster[data-visible][src]:not([data-loaded]) {
       opacity: 0;
     }
   }