@videojs/html 10.1.0 → 10.3.0

package/dist/dev/internal/skins/scaffold-live-video/skin.css

@@ -223,6 +223,10 @@
     display: none;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-dialog-backdrop[data-scope="document"] {
+    position: fixed;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-dialog-close {
     height: calc(var(--media-spacing) * 8);
     width: auto;
@@ -240,8 +244,8 @@
 
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-dialog-popup {
     z-index: 50;
-    width: calc(100% - 2rem);
-    max-height: calc(100% - 2rem);
+    max-height: calc(100% - var(--media-spacing) * 8);
+    width: calc(100% - var(--media-spacing) * 8);
     max-width: calc(var(--media-spacing) * 80);
     gap: calc(var(--media-spacing) * 3);
     background-color: var(--media-popover);
@@ -268,6 +272,11 @@
     outline-color: var(--media-ring);
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-dialog-popup[data-scope="document"] {
+    max-height: calc(100dvh - var(--media-spacing) * 8);
+    position: fixed;
+  }
+
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-dialog-popup {
       border: 1px solid canvastext;
@@ -281,8 +290,8 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-dialog-title {
-    font-size: 1.125rem;
-    line-height: 1.55556;
+    font-size: calc(var(--media-spacing) * 4.5);
+    line-height: calc(var(--media-spacing) * 7);
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-indicator {
@@ -394,6 +403,18 @@
     overflow: hidden;
   }
 
+  .media-poster > slot::slotted(img) {
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    display: block;
+    height: 100% !important;
+  }
+
+  .media-poster > slot::slotted(img:not([src]):not([srcset])) {
+    visibility: hidden;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-poster {
     width: 100%;
     height: 100%;
@@ -565,8 +586,13 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-tooltip-shortcut {
+    text-align: center;
+    min-width: 1.5em;
     font-family: inherit;
     font-size: calc(var(--media-spacing) * 2.75);
+    background-color: oklab(100% 0 5.96046e-8 / .1);
+    padding: .1em;
+    line-height: 1.25;
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-button-icon {
@@ -623,6 +649,10 @@
     outline: 2px solid;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-menu-radio-item[data-custom] {
+    font-style: italic;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-menu-radio-item[data-highlighted] {
     background-color: var(--media-button-highlight);
   }
@@ -722,14 +752,6 @@
     display: flex;
   }
 
-  :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) :where(.media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-enter-icon, :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-airplay-button-exit-icon {
-    display: none;
-  }
-
-  :where(:where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-exit-icon {
-    display: block;
-  }
-
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-live-button {
     align-items: center;
     gap: calc(var(--media-spacing) * 1.5);
@@ -1476,6 +1498,14 @@
     inset: auto !important;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) :where(.media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-enter-icon, :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-airplay-button-exit-icon {
+    display: none;
+  }
+
+  :where(:where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-exit-icon {
+    display: block;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-tooltip-screen-popup {
     --media-tooltip-side-offset: calc(var(--media-spacing) * 3) !important;
   }
@@ -1545,7 +1575,7 @@
 
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-backdrop {
     pointer-events: none;
-    background-color: #0006;
+    background-image: linear-gradient(to top, #00000080, #0000 40% 60%, #0006);
     position: absolute;
     inset: 0;
   }
@@ -1563,6 +1593,9 @@
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-container, :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]).media-container {
     border-radius: var(--media-video-border-radius);
     width: 100%;
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
     font-family: var(--media-font-family, inherit);
     font-size: calc(var(--media-spacing) * 3.25);
     color: var(--media-foreground);
@@ -1582,9 +1615,19 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-video, :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]).media-video {
-    aspect-ratio: 16 / 9;
     background-color: #000;
   }
+
+  .media-container > slot::slotted(video), :scope.media-container > slot::slotted(video) {
+    border-radius: inherit;
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    display: block;
+    height: 100% !important;
+  }
 }
 
 @layer utilities;
@@ -1602,7 +1645,7 @@
     --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
     --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: oklch(100% 0 0 / .65);
+    --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
     --media-border: oklch(0% 0 0 / .1);
     --media-ring: oklch(100% 0 0);
     --media-backdrop: oklch(0% 0 0);
@@ -1615,9 +1658,9 @@
     --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
     --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
     --media-text-shadow-dialog: 0 1px 0 #00000040;
-    --media-backdrop-filter-surface: blur(16px) saturate(110%);
+    --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
-    --media-backdrop-filter-dialog: blur(16px) saturate(110%);
+    --media-backdrop-filter-dialog: blur(16px) saturate(125%);
     --media-control-corner-shape: round;
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
@@ -1717,10 +1760,20 @@
 @layer base.preset {
   .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
     --media-frame-border: var(--media-border-color, #0000001a);
+    --media-controls-gradient-height: max(40%, calc(var(--media-spacing) * 40));
+    --media-controls-bottom-gradient-height: max(50%, calc(var(--media-spacing) * 60));
     --media-controls-gradient: linear-gradient(to top,
-      color-mix(in oklab, var(--media-backdrop) 40%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 20%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 50%, transparent));
+      color-mix(in oklab, var(--media-backdrop) 60%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 50.7%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 30%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 9.3%, transparent) 75%,
+      transparent);
+    --media-controls-top-gradient: linear-gradient(to bottom,
+      color-mix(in oklab, var(--media-backdrop) 55%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 46.48%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 27.5%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 8.53%, transparent) 75%,
+      transparent);
     --media-caption-controls-y: calc(var(--media-spacing) * -16);
     --media-slider-preview-offset: calc(var(--media-spacing) * 9);
     --media-thumbnail-gradient: linear-gradient(to top,
@@ -1732,9 +1785,17 @@
   @supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red)) {
     .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
       --media-controls-gradient: linear-gradient(to top in oklab,
-        oklch(from var(--media-backdrop) l c h / .4),
-        oklch(from var(--media-backdrop) l c h / .2),
-        oklch(from var(--media-backdrop) l c h / .5));
+        oklch(from var(--media-backdrop) l c h / .6),
+        oklch(from var(--media-backdrop) l c h / .507) 25%,
+        oklch(from var(--media-backdrop) l c h / .3) 50%,
+        oklch(from var(--media-backdrop) l c h / .093) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom in oklab,
+        oklch(from var(--media-backdrop) l c h / .55),
+        oklch(from var(--media-backdrop) l c h / .4647) 25%,
+        oklch(from var(--media-backdrop) l c h / .275) 50%,
+        oklch(from var(--media-backdrop) l c h / .0853) 75%,
+        transparent);
     }
   }
 
@@ -1749,9 +1810,20 @@
 
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
     --media-frame-border: var(--media-border-color, #00000026);
+    --media-controls-gradient-height: 40%;
+    --media-controls-bottom-gradient-height: 40%;
     --media-controls-gradient: linear-gradient(to top,
       color-mix(in oklab, var(--media-backdrop) 50%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 20%, transparent));
+      color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+      transparent);
+    --media-controls-top-gradient: linear-gradient(to bottom,
+      color-mix(in oklab, var(--media-backdrop) 50%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+      transparent);
     --media-indicator-gradient: linear-gradient(to bottom,
       color-mix(in oklab, var(--media-backdrop) 35%, transparent),
       color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12),
@@ -1761,6 +1833,7 @@
   }
 
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="compat"] {
+    --media-controls-gradient: linear-gradient(to top, #00000080, transparent 40% 60%, #0006);
     --media-caption-controls-y: calc(var(--media-spacing) * -18);
   }
 
@@ -1772,7 +1845,16 @@
     .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
       --media-controls-gradient: linear-gradient(to top in oklab,
         oklch(from var(--media-backdrop) l c h / .5),
-        oklch(from var(--media-backdrop) l c h / .2));
+        oklch(from var(--media-backdrop) l c h / .422) 25%,
+        oklch(from var(--media-backdrop) l c h / .25) 50%,
+        oklch(from var(--media-backdrop) l c h / .078) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom in oklab,
+        oklch(from var(--media-backdrop) l c h / .5),
+        oklch(from var(--media-backdrop) l c h / .422) 25%,
+        oklch(from var(--media-backdrop) l c h / .25) 50%,
+        oklch(from var(--media-backdrop) l c h / .078) 75%,
+        transparent);
     }
   }
 
@@ -1796,7 +1878,6 @@
   }
 
   .media-skin[data-theme="scaffold"] {
-    --media-spacing: calc(var(--media-scale-unit, 16px) / 4);
     --media-background: transparent;
     --media-foreground: white;
     --media-accent: var(--media-accent-color, var(--media-default-accent-color));

package/dist/dev/internal/skins/scaffold-video/register.d.ts

@@ -26,27 +26,27 @@ import "../../../define/ui/tooltip.js";
 import "../../../define/ui/tooltip-label.js";
 import "../../../define/ui/tooltip-shortcut.js";
 import "../../../define/ui/seek-button.js";
+import "../../../define/ui/time-group.js";
+import "../../../define/ui/time.js";
+import "../../../define/ui/time-separator.js";
 import "../../../define/ui/menu.js";
 import "../../../define/ui/menu-content.js";
 import "../../../define/ui/playback-rate-radio-group.js";
 import "../../../define/ui/menu-radio-item.js";
 import "../../../define/ui/menu-item-indicator.js";
-import "../../../define/ui/time-group.js";
-import "../../../define/ui/time.js";
-import "../../../define/ui/time-separator.js";
-import "../../../define/ui/captions-button.js";
 import "../../../define/ui/mute-button.js";
 import "../../../define/ui/volume-popover.js";
 import "../../../define/ui/volume-slider.js";
-import "../../../define/ui/airplay-button.js";
 import "../../../define/ui/hotkey.js";
 import "../../../define/ui/status-announcer.js";
 import "../../../define/ui/poster.js";
 import "../../../define/ui/title.js";
 import "../../../define/ui/controls-backdrop.js";
+import "../../../define/ui/airplay-button.js";
 import "../../../define/ui/cast-button.js";
 import "../../../define/ui/pip-button.js";
 import "../../../define/ui/fullscreen-button.js";
+import "../../../define/ui/captions-button.js";
 import "../../../define/ui/captions-radio-group.js";
 import "../../../define/ui/gesture.js";
 import "../../../define/ui/volume-indicator.js";

package/dist/dev/internal/skins/scaffold-video/skin.css

@@ -223,6 +223,10 @@
     display: none;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-dialog-backdrop[data-scope="document"] {
+    position: fixed;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-dialog-close {
     height: calc(var(--media-spacing) * 8);
     width: auto;
@@ -240,8 +244,8 @@
 
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-dialog-popup {
     z-index: 50;
-    width: calc(100% - 2rem);
-    max-height: calc(100% - 2rem);
+    max-height: calc(100% - var(--media-spacing) * 8);
+    width: calc(100% - var(--media-spacing) * 8);
     max-width: calc(var(--media-spacing) * 80);
     gap: calc(var(--media-spacing) * 3);
     background-color: var(--media-popover);
@@ -268,6 +272,11 @@
     outline-color: var(--media-ring);
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-dialog-popup[data-scope="document"] {
+    max-height: calc(100dvh - var(--media-spacing) * 8);
+    position: fixed;
+  }
+
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-dialog-popup {
       border: 1px solid canvastext;
@@ -281,8 +290,8 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-dialog-title {
-    font-size: 1.125rem;
-    line-height: 1.55556;
+    font-size: calc(var(--media-spacing) * 4.5);
+    line-height: calc(var(--media-spacing) * 7);
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-indicator {
@@ -431,6 +440,18 @@
     overflow: hidden;
   }
 
+  .media-poster > slot::slotted(img) {
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    display: block;
+    height: 100% !important;
+  }
+
+  .media-poster > slot::slotted(img:not([src]):not([srcset])) {
+    visibility: hidden;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-poster {
     width: 100%;
     height: 100%;
@@ -602,8 +623,13 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-tooltip-shortcut {
+    text-align: center;
+    min-width: 1.5em;
     font-family: inherit;
     font-size: calc(var(--media-spacing) * 2.75);
+    background-color: oklab(100% 0 5.96046e-8 / .1);
+    padding: .1em;
+    line-height: 1.25;
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-button-icon {
@@ -676,6 +702,10 @@
     outline: 2px solid;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-menu-radio-item[data-custom] {
+    font-style: italic;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-menu-radio-item[data-highlighted] {
     background-color: var(--media-button-highlight);
   }
@@ -1201,14 +1231,6 @@
     display: block;
   }
 
-  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) :where(.media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-enter-icon, :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-airplay-button-exit-icon {
-    display: none;
-  }
-
-  :where(:where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-exit-icon {
-    display: block;
-  }
-
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) :where(.media-captions-button)[data-active] .media-captions-button-off-icon, :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-captions-button-on-icon {
     display: none;
   }
@@ -1699,6 +1721,14 @@
     inset: auto !important;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) :where(.media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-enter-icon, :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-airplay-button-exit-icon {
+    display: none;
+  }
+
+  :where(:where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-exit-icon {
+    display: block;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-tooltip-screen-popup {
     --media-tooltip-side-offset: calc(var(--media-spacing) * 3) !important;
   }
@@ -1768,7 +1798,7 @@
 
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-backdrop {
     pointer-events: none;
-    background-color: #0006;
+    background-image: linear-gradient(to top, #00000080, #0000 40% 60%, #0006);
     position: absolute;
     inset: 0;
   }
@@ -1803,6 +1833,9 @@
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-container, :where(.media-skin[data-theme="scaffold"][data-preset="video"]).media-container {
     border-radius: var(--media-video-border-radius);
     width: 100%;
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
     font-family: var(--media-font-family, inherit);
     font-size: calc(var(--media-spacing) * 3.25);
     color: var(--media-foreground);
@@ -1822,9 +1855,19 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-video, :where(.media-skin[data-theme="scaffold"][data-preset="video"]).media-video {
-    aspect-ratio: 16 / 9;
     background-color: #000;
   }
+
+  .media-container > slot::slotted(video), :scope.media-container > slot::slotted(video) {
+    border-radius: inherit;
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    display: block;
+    height: 100% !important;
+  }
 }
 
 @layer utilities;
@@ -1842,7 +1885,7 @@
     --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
     --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: oklch(100% 0 0 / .65);
+    --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
     --media-border: oklch(0% 0 0 / .1);
     --media-ring: oklch(100% 0 0);
     --media-backdrop: oklch(0% 0 0);
@@ -1855,9 +1898,9 @@
     --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
     --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
     --media-text-shadow-dialog: 0 1px 0 #00000040;
-    --media-backdrop-filter-surface: blur(16px) saturate(110%);
+    --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
-    --media-backdrop-filter-dialog: blur(16px) saturate(110%);
+    --media-backdrop-filter-dialog: blur(16px) saturate(125%);
     --media-control-corner-shape: round;
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
@@ -1957,10 +2000,20 @@
 @layer base.preset {
   .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
     --media-frame-border: var(--media-border-color, #0000001a);
+    --media-controls-gradient-height: max(40%, calc(var(--media-spacing) * 40));
+    --media-controls-bottom-gradient-height: max(50%, calc(var(--media-spacing) * 60));
     --media-controls-gradient: linear-gradient(to top,
-      color-mix(in oklab, var(--media-backdrop) 40%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 20%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 50%, transparent));
+      color-mix(in oklab, var(--media-backdrop) 60%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 50.7%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 30%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 9.3%, transparent) 75%,
+      transparent);
+    --media-controls-top-gradient: linear-gradient(to bottom,
+      color-mix(in oklab, var(--media-backdrop) 55%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 46.48%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 27.5%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 8.53%, transparent) 75%,
+      transparent);
     --media-caption-controls-y: calc(var(--media-spacing) * -16);
     --media-slider-preview-offset: calc(var(--media-spacing) * 9);
     --media-thumbnail-gradient: linear-gradient(to top,
@@ -1972,9 +2025,17 @@
   @supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red)) {
     .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
       --media-controls-gradient: linear-gradient(to top in oklab,
-        oklch(from var(--media-backdrop) l c h / .4),
-        oklch(from var(--media-backdrop) l c h / .2),
-        oklch(from var(--media-backdrop) l c h / .5));
+        oklch(from var(--media-backdrop) l c h / .6),
+        oklch(from var(--media-backdrop) l c h / .507) 25%,
+        oklch(from var(--media-backdrop) l c h / .3) 50%,
+        oklch(from var(--media-backdrop) l c h / .093) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom in oklab,
+        oklch(from var(--media-backdrop) l c h / .55),
+        oklch(from var(--media-backdrop) l c h / .4647) 25%,
+        oklch(from var(--media-backdrop) l c h / .275) 50%,
+        oklch(from var(--media-backdrop) l c h / .0853) 75%,
+        transparent);
     }
   }
 
@@ -1989,9 +2050,20 @@
 
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
     --media-frame-border: var(--media-border-color, #00000026);
+    --media-controls-gradient-height: 40%;
+    --media-controls-bottom-gradient-height: 40%;
     --media-controls-gradient: linear-gradient(to top,
       color-mix(in oklab, var(--media-backdrop) 50%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 20%, transparent));
+      color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+      transparent);
+    --media-controls-top-gradient: linear-gradient(to bottom,
+      color-mix(in oklab, var(--media-backdrop) 50%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+      transparent);
     --media-indicator-gradient: linear-gradient(to bottom,
       color-mix(in oklab, var(--media-backdrop) 35%, transparent),
       color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12),
@@ -2001,6 +2073,7 @@
   }
 
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="compat"] {
+    --media-controls-gradient: linear-gradient(to top, #00000080, transparent 40% 60%, #0006);
     --media-caption-controls-y: calc(var(--media-spacing) * -18);
   }
 
@@ -2012,7 +2085,16 @@
     .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
       --media-controls-gradient: linear-gradient(to top in oklab,
         oklch(from var(--media-backdrop) l c h / .5),
-        oklch(from var(--media-backdrop) l c h / .2));
+        oklch(from var(--media-backdrop) l c h / .422) 25%,
+        oklch(from var(--media-backdrop) l c h / .25) 50%,
+        oklch(from var(--media-backdrop) l c h / .078) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom in oklab,
+        oklch(from var(--media-backdrop) l c h / .5),
+        oklch(from var(--media-backdrop) l c h / .422) 25%,
+        oklch(from var(--media-backdrop) l c h / .25) 50%,
+        oklch(from var(--media-backdrop) l c h / .078) 75%,
+        transparent);
     }
   }
 
@@ -2036,7 +2118,6 @@
   }
 
   .media-skin[data-theme="scaffold"] {
-    --media-spacing: calc(var(--media-scale-unit, 16px) / 4);
     --media-background: transparent;
     --media-foreground: white;
     --media-accent: var(--media-accent-color, var(--media-default-accent-color));

package/dist/dev/media/dailymotion-video/adapter.d.ts

@@ -0,0 +1,17 @@
+import { CustomMediaConstructor } from "../../index.js";
+import { DailymotionAdapter } from "@videojs/dailymotion-video";
+//#region src/media/dailymotion-video/adapter.d.ts
+interface DailymotionCustomMediaElement {
+  connectedCallback?(): void;
+}
+declare const DailymotionCustomMediaElement_base: CustomMediaConstructor<typeof DailymotionAdapter>;
+declare class DailymotionCustomMediaElement extends DailymotionCustomMediaElement_base {
+  static getTemplateHTML: () => string;
+}
+declare const DailymotionVideo_base: typeof DailymotionCustomMediaElement;
+export declare class DailymotionVideo extends DailymotionVideo_base {
+  constructor();
+  connectedCallback(): void;
+}
+//#endregion
+//# sourceMappingURL=adapter.d.ts.map

package/dist/dev/media/dailymotion-video/adapter.js

@@ -0,0 +1,47 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { DailymotionAdapter } from "@videojs/dailymotion-video";
+//#region src/media/dailymotion-video/adapter.ts
+var DailymotionCustomMediaElement = class extends CustomMediaElement("iframe", DailymotionAdapter) {
+	static {
+		this.getTemplateHTML = () => `
+    <style>
+      :host {
+        display: inline-block;
+        min-width: 300px;
+        min-height: 150px;
+        position: relative;
+      }
+      ::slotted([slot=media]) {
+        position: absolute;
+        inset: 0;
+      }
+    </style>
+    <slot name="media"></slot>
+  `;
+	}
+};
+var DailymotionVideo = class extends MediaAttachMixin(DailymotionCustomMediaElement) {
+	constructor() {
+		super();
+		this.adapter.addEventListener("volumechange", () => {
+			const { muted } = this.adapter;
+			if (this.hasAttribute("muted") !== muted) this.toggleAttribute("muted", muted);
+		});
+	}
+	connectedCallback() {
+		super.connectedCallback?.();
+		const existing = this.querySelector(":scope > [slot=media]");
+		if (existing) {
+			if (this.adapter.src && !existing.hasChildNodes() && !this.adapter.error) this.adapter.load();
+			return;
+		}
+		const container = document.createElement("div");
+		container.slot = "media";
+		this.append(container);
+	}
+};
+//#endregion
+export { DailymotionVideo };
+
+//# sourceMappingURL=adapter.js.map

package/dist/dev/media/dailymotion-video/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/dailymotion-video/adapter.ts"],"sourcesContent":["import { DailymotionAdapter } from '@videojs/dailymotion-video';\nimport { CustomMediaElement } from '@videojs/media/dom';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\n// `CustomMediaElement` implements `connectedCallback` but doesn't type it; declared so `super` can reach it.\ninterface DailymotionCustomMediaElement {\n  connectedCallback?(): void;\n}\n\n// The target is a container the SDK builds its iframe in. `'iframe'` still tells `CustomMediaElement` it hosts an\n// embed: no attributes are mirrored onto the target, and the host is marked as a cross-origin frame. Unlike the other\n// embed hosts, it never keeps the player out of hit-testing: Dailymotion's terms forbid blocking any part of its player.\nclass DailymotionCustomMediaElement extends CustomMediaElement('iframe', DailymotionAdapter) {\n  static override getTemplateHTML = (): string => /*html*/ `\n    <style>\n      :host {\n        display: inline-block;\n        min-width: 300px;\n        min-height: 150px;\n        position: relative;\n      }\n      ::slotted([slot=media]) {\n        position: absolute;\n        inset: 0;\n      }\n    </style>\n    <slot name=\"media\"></slot>\n  `;\n}\n\nexport class DailymotionVideo extends MediaAttachMixin(DailymotionCustomMediaElement) {\n  constructor() {\n    super();\n\n    // Dailymotion can mute the player on its own (a browser's muted autoplay, a click on its own mute button). Writes\n    // to `muted` go through the `muted` attribute, so it follows the player, or a later unmute would find nothing to\n    // change. The attribute change sets the same value back, which the adapter ignores.\n    this.adapter.addEventListener('volumechange', () => {\n      const { muted } = this.adapter;\n\n      if (this.hasAttribute('muted') !== muted) this.toggleAttribute('muted', muted);\n    });\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback?.();\n\n    // The SDK finds the container by id from the document, so it lives in the light DOM, slotted as `media` to become\n    // the adapter's target. Added here because a constructor may not add children.\n    const existing = this.querySelector(':scope > [slot=media]');\n\n    if (existing) {\n      // Attached before the host was in the page, the container stayed empty; load the source now.\n      if (this.adapter.src && !existing.hasChildNodes() && !this.adapter.error) this.adapter.load();\n\n      return;\n    }\n\n    const container = document.createElement('div');\n\n    container.slot = 'media';\n    this.append(container);\n  }\n}\n"],"mappings":";;;;AAaA,IAAM,gCAAN,cAA4C,mBAAmB,UAAU,kBAAkB,CAAC,CAAC;;EAClC,KAAA,wBAAA;;;;;;;;;;;;;;;;AAe3D;AAEA,IAAa,mBAAb,cAAsC,iBAAiB,6BAA6B,CAAC,CAAC;CACpF,cAAc;EACZ,MAAM;EAKN,KAAK,QAAQ,iBAAiB,sBAAsB;GAClD,MAAM,EAAE,UAAU,KAAK;GAEvB,IAAI,KAAK,aAAa,OAAO,MAAM,OAAO,KAAK,gBAAgB,SAAS,KAAK;EAC/E,CAAC;CACH;CAEA,oBAAmC;EACjC,MAAM,oBAAoB;EAI1B,MAAM,WAAW,KAAK,cAAc,uBAAuB;EAE3D,IAAI,UAAU;GAEZ,IAAI,KAAK,QAAQ,OAAO,CAAC,SAAS,cAAc,KAAK,CAAC,KAAK,QAAQ,OAAO,KAAK,QAAQ,KAAK;GAE5F;EACF;EAEA,MAAM,YAAY,SAAS,cAAc,KAAK;EAE9C,UAAU,OAAO;EACjB,KAAK,OAAO,SAAS;CACvB;AACF"}

package/dist/dev/media/dailymotion-video/index.d.ts

@@ -0,0 +1,2 @@
+import { DailymotionVideo } from "./adapter.js";
+export { DailymotionVideo };

package/dist/dev/media/hls-audio/adapter.d.ts

@@ -1,5 +1,5 @@
 import { CustomMediaConstructor } from "../../index.js";
-import { HlsAudioAdapter } from "@videojs/spf/hls-audio";
+import { HlsAudioAdapter } from "@videojs/spf/adapters/hls-audio";
 //#region src/media/hls-audio/adapter.d.ts
 declare const HlsAudio_base: CustomMediaConstructor<typeof HlsAudioAdapter>;
 export declare class HlsAudio extends HlsAudio_base {}