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

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

@@ -477,8 +477,6 @@ media-container {
     .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;
@@ -493,7 +491,7 @@ media-container {
       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);
@@ -503,7 +501,7 @@ media-container {
       inset: 0;
     }
 
-    .media-poster:is(img):not([src]):not([srcset]) {
+    .media-poster-image:not([src]):not([srcset]) {
       visibility: hidden;
     }
   }
@@ -518,8 +516,38 @@ media-container {
     inset: 0;
   }
 
-  .media-poster > slot::slotted(img:not([src]):not([srcset])),
-  .media-poster > slot > img:not([src]):not([srcset]) {
+  .media-poster > slot::slotted(img:not([src]):not([srcset])) {
+    visibility: hidden;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="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="video"]) .media-poster:not([data-visible]) {
+    opacity: 0;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="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="video"]) .media-poster-image:not([src]):not([srcset]) {
     visibility: hidden;
   }
 
@@ -1115,6 +1143,25 @@ media-container {
     }
   }
 
+  :where(.media-skin[data-theme="default"][data-preset="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="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="video"]) {
     .media-captions-button-off-icon {
       opacity: 0;
@@ -1304,6 +1351,7 @@ media-container {
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-buffer,
       &[data-dragging] .media-slider-buffer,
       &[data-seeking] .media-slider-buffer {
         transition-duration: 0s;
@@ -1336,6 +1384,7 @@ media-container {
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-fill,
       &[data-dragging] .media-slider-fill,
       &[data-seeking] .media-slider-fill {
         transition-duration: 0s;
@@ -1394,6 +1443,14 @@ media-container {
       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;
@@ -1516,13 +1573,17 @@ media-container {
       }
     }
 
+    .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);
     }
@@ -1565,7 +1626,7 @@ media-container {
       height: calc(var(--media-spacing) * 1);
       min-width: var(--media-slider-preview-max-width);
       --media-slider-preview-max-height: var(--media-slider-preview-max-width);
-      --media-slider-preview-max-width: min(calc(var(--media-spacing) * 36), 100cqi);
+      --media-slider-preview-max-width: min(calc(var(--media-spacing) * 32), 100cqi);
       position: relative;
     }
 
@@ -1595,6 +1656,12 @@ media-container {
       scale: 1;
     }
 
+    @container media-root (width >= 30rem) {
+      .media-slider-preview {
+        --media-slider-preview-max-width: min(calc(var(--media-spacing) * 40), 100cqi);
+      }
+    }
+
     @container media-root (width >= 42rem) {
       .media-slider-preview {
         --media-slider-preview-max-width: min(calc(var(--media-spacing) * 48), 100cqi);
@@ -1625,6 +1692,7 @@ media-container {
     .media-slider-thumbnail {
       pointer-events: none;
       bottom: calc(100% + var(--media-slider-preview-offset));
+      max-height: var(--media-slider-preview-max-height);
       border-radius: var(--media-popup-radius);
       background-color: var(--media-backdrop);
       left: 50%;
@@ -1637,12 +1705,36 @@ media-container {
       }
     }
 
-    .media-slider-thumbnail:has([data-loading]) {
+    .media-slider-thumbnail:after {
+      pointer-events: none;
+      inset: calc(var(--media-spacing) * 0);
+      border-radius: inherit;
+      content: "";
+      background-image: var(--media-thumbnail-gradient);
+      position: absolute;
+    }
+
+    .media-slider-thumbnail[data-loading] {
       aspect-ratio: 16 / 9;
       width: var(--media-slider-preview-max-width);
     }
 
+    .media-slider-thumbnail-image {
+      transition-property: opacity;
+      transition-duration: 0.15s;
+      transition-duration: var(--media-duration);
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      display: block;
+    }
+
+    @scope (.media-slider-thumbnail) {
+      &[data-loading] .media-slider-thumbnail-image {
+        opacity: 0;
+      }
+    }
+
     .media-slider-thumbnail-spinner-icon {
+      z-index: 10;
       width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
       height: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
       opacity: 0;
@@ -1658,13 +1750,13 @@ media-container {
     }
 
     @scope (.media-slider-thumbnail) {
-      &:not(:has([role="img"][data-loading])) .media-slider-thumbnail-spinner-icon {
+      &:not([data-loading]) .media-slider-thumbnail-spinner-icon {
         --media-spinner-animation: none;
       }
     }
 
     @scope (.media-slider-thumbnail) {
-      &:has([role="img"][data-loading]) .media-slider-thumbnail-spinner-icon {
+      &[data-loading] .media-slider-thumbnail-spinner-icon {
         opacity: 1;
       }
     }
@@ -1792,20 +1884,48 @@ media-container {
     }
   }
 
-  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-image {
-    max-height: var(--media-slider-preview-max-height);
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-preview-content {
     max-width: var(--media-slider-preview-max-width);
-    border-radius: inherit;
-    transition-property: opacity;
+    transform-origin: bottom;
+    translate: -50% var(--media-hidden-preview-offset);
+    scale: var(--media-hidden-preview-scale) var(--media-hidden-preview-scale);
+    opacity: 0;
+    filter: blur(var(--media-hidden-blur));
+    transition-property: filter, opacity, scale;
     transition-duration: 0.15s;
     transition-duration: var(--media-duration);
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-    display: block;
-    position: relative;
-    overflow: clip;
+    position: absolute;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider):has(:focus-visible)
+    .media-slider-preview-content,
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider-preview)[data-pointing]
+    .media-slider-preview-content {
+    opacity: 1;
+    filter: none;
+    scale: 1;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail {
+    pointer-events: none;
+    bottom: calc(100% + var(--media-slider-preview-offset));
+    max-height: var(--media-slider-preview-max-height);
+    border-radius: var(--media-popup-radius);
+    background-color: var(--media-backdrop);
+    left: 50%;
+    overflow: hidden;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail {
+      background-color: color-mix(in oklab, var(--media-backdrop) 90%, transparent);
+    }
   }
 
-  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-image:after {
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail:after {
     pointer-events: none;
     inset: calc(var(--media-spacing) * 0);
     border-radius: inherit;
@@ -1814,10 +1934,53 @@ media-container {
     position: absolute;
   }
 
-  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-image[data-loading] {
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail[data-loading] {
+    aspect-ratio: 16 / 9;
+    width: var(--media-slider-preview-max-width);
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-image {
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-duration: var(--media-duration);
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    display: block;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider-thumbnail)[data-loading]
+    .media-slider-thumbnail-image {
     opacity: 0;
   }
 
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-spinner-icon {
+    z-index: 10;
+    width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
+    height: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
+    opacity: 0;
+    filter: drop-shadow(0 1px 0 var(--media-shadow-current-color));
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-duration: var(--media-duration);
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider-thumbnail):not([data-loading])
+    .media-slider-thumbnail-spinner-icon {
+    --media-spinner-animation: none;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider-thumbnail)[data-loading]
+    .media-slider-thumbnail-spinner-icon {
+    opacity: 1;
+  }
+
   @scope (.media-skin[data-theme="default"][data-preset="video"]) {
   }
 
@@ -2502,7 +2665,7 @@ media-container {
       .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);
@@ -2550,10 +2713,10 @@ media-container {
     .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);
@@ -2611,10 +2774,10 @@ media-container {
     .video-controls-secondary {
       top: calc(var(--media-spacing) * 2);
       right: calc(var(--media-spacing) * 2);
-      z-index: 10;
+      z-index: 30;
       transform-origin: top;
       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);
@@ -2721,8 +2884,21 @@ media-container {
       outline-color: var(--media-ring);
     }
 
+    .media-time-toggle[aria-disabled="true"] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
     .media-time-value {
       font-variant-numeric: tabular-nums;
+      transition-property: opacity;
+      transition-duration: 0.15s;
+      transition-duration: var(--media-duration-slow);
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .media-time-value[data-unavailable] {
+      opacity: 0.5;
     }
   }
 
@@ -2774,7 +2950,7 @@ media-container {
     --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);