@videojs/html 10.2.0 → 10.4.0

package/dist/dev/internal/skins/neutral-live-video/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","names":["airPlayEnterIconNeutral","airPlayExitIconNeutral","captionsOffIconNeutral","captionsOnIconNeutral","castEnterIconNeutral","castExitIconNeutral","checkIconNeutral","fullscreenEnterIconNeutral","fullscreenExitIconNeutral","pauseIconNeutral","pipEnterIconNeutral","pipExitIconNeutral","playIconNeutral","restartIconNeutral","spinnerIconNeutral","volumeHighIconNeutral","volumeLowIconNeutral","volumeOffIconNeutral"],"sources":["../../../../../src/internal/skins/neutral-live-video/register.ts"],"sourcesContent":["import '../../../define/ui/container';\nimport '../../../define/ui/poster';\nimport '../../../define/ui/buffering-indicator';\nimport '../../../define/ui/error-dialog';\nimport '../../../define/ui/dialog-backdrop';\nimport '../../../define/ui/dialog-popup';\nimport '../../../define/ui/dialog-title';\nimport '../../../define/ui/dialog-description';\nimport '../../../define/ui/dialog-close';\nimport '../../../define/ui/title';\nimport '../../../define/ui/controls';\nimport '../../../define/ui/controls-backdrop';\nimport '../../../define/ui/controls-content';\nimport '../../../define/ui/tooltip-group';\nimport '../../../define/ui/controls-group';\nimport '../../../define/ui/play-button';\nimport '../../../define/ui/tooltip';\nimport '../../../define/ui/tooltip-label';\nimport '../../../define/ui/tooltip-shortcut';\nimport '../../../define/ui/live-button';\nimport '../../../define/ui/mute-button';\nimport '../../../define/ui/volume-popover';\nimport '../../../define/ui/volume-slider';\nimport '../../../define/ui/slider-track';\nimport '../../../define/ui/slider-fill';\nimport '../../../define/ui/slider-thumb';\nimport '../../../define/ui/captions-button';\nimport '../../../define/ui/menu';\nimport '../../../define/ui/menu-content';\nimport '../../../define/ui/captions-radio-group';\nimport '../../../define/ui/menu-radio-item';\nimport '../../../define/ui/menu-item-indicator';\nimport '../../../define/ui/cast-button';\nimport '../../../define/ui/airplay-button';\nimport '../../../define/ui/pip-button';\nimport '../../../define/ui/fullscreen-button';\nimport '../../../define/ui/hotkey';\nimport '../../../define/ui/gesture';\nimport '../../../define/ui/status-announcer';\nimport '../../../define/ui/volume-indicator';\nimport '../../../define/ui/volume-indicator-fill';\nimport '../../../define/ui/volume-indicator-value';\nimport '../../../define/ui/status-indicator';\nimport '../../../define/ui/status-indicator-value';\nimport { registerIcons } from '../../../icons';\nimport {\n  airPlayEnterIcon as airPlayEnterIconNeutral,\n  airPlayExitIcon as airPlayExitIconNeutral,\n  captionsOffIcon as captionsOffIconNeutral,\n  captionsOnIcon as captionsOnIconNeutral,\n  castEnterIcon as castEnterIconNeutral,\n  castExitIcon as castExitIconNeutral,\n  checkIcon as checkIconNeutral,\n  fullscreenEnterIcon as fullscreenEnterIconNeutral,\n  fullscreenExitIcon as fullscreenExitIconNeutral,\n  pauseIcon as pauseIconNeutral,\n  pipEnterIcon as pipEnterIconNeutral,\n  pipExitIcon as pipExitIconNeutral,\n  playIcon as playIconNeutral,\n  restartIcon as restartIconNeutral,\n  spinnerIcon as spinnerIconNeutral,\n  volumeHighIcon as volumeHighIconNeutral,\n  volumeLowIcon as volumeLowIconNeutral,\n  volumeOffIcon as volumeOffIconNeutral,\n} from '../../../icons/neutral';\n\nregisterIcons('neutral', {\n  'airplay-enter': airPlayEnterIconNeutral,\n  'airplay-exit': airPlayExitIconNeutral,\n  'captions-off': captionsOffIconNeutral,\n  'captions-on': captionsOnIconNeutral,\n  'cast-enter': castEnterIconNeutral,\n  'cast-exit': castExitIconNeutral,\n  check: checkIconNeutral,\n  'fullscreen-enter': fullscreenEnterIconNeutral,\n  'fullscreen-exit': fullscreenExitIconNeutral,\n  pause: pauseIconNeutral,\n  'pip-enter': pipEnterIconNeutral,\n  'pip-exit': pipExitIconNeutral,\n  play: playIconNeutral,\n  restart: restartIconNeutral,\n  spinner: spinnerIconNeutral,\n  'volume-high': volumeHighIconNeutral,\n  'volume-low': volumeLowIconNeutral,\n  'volume-off': volumeOffIconNeutral,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,cAAc,WAAW;CACvB,iBAAiBA;CACjB,gBAAgBC;CAChB,gBAAgBC;CAChB,eAAeC;CACf,cAAcC;CACd,aAAaC;CACb,OAAOC;CACP,oBAAoBC;CACpB,mBAAmBC;CACnB,OAAOC;CACP,aAAaC;CACb,YAAYC;CACZ,MAAMC;CACN,SAASC;CACT,SAASC;CACT,eAAeC;CACf,cAAcC;CACd,cAAcC;AAChB,CAAC"}
+{"version":3,"file":"register.js","names":["airPlayEnterIconNeutral","airPlayExitIconNeutral","captionsOffIconNeutral","captionsOnIconNeutral","castEnterIconNeutral","castExitIconNeutral","checkIconNeutral","fullscreenEnterIconNeutral","fullscreenExitIconNeutral","pauseIconNeutral","pipEnterIconNeutral","pipExitIconNeutral","playIconNeutral","restartIconNeutral","spinnerIconNeutral","volumeHighIconNeutral","volumeLowIconNeutral","volumeOffIconNeutral"],"sources":["../../../../../src/internal/skins/neutral-live-video/register.ts"],"sourcesContent":["import '../../../define/ui/container';\nimport '../../../define/ui/poster';\nimport '../../../define/ui/buffering-indicator';\nimport '../../../define/ui/error-dialog';\nimport '../../../define/ui/dialog-backdrop';\nimport '../../../define/ui/dialog-popup';\nimport '../../../define/ui/dialog-title';\nimport '../../../define/ui/dialog-description';\nimport '../../../define/ui/dialog-close';\nimport '../../../define/ui/title';\nimport '../../../define/ui/controls';\nimport '../../../define/ui/controls-group';\nimport '../../../define/ui/play-button';\nimport '../../../define/ui/controls-backdrop';\nimport '../../../define/ui/controls-content';\nimport '../../../define/ui/tooltip-group';\nimport '../../../define/ui/tooltip';\nimport '../../../define/ui/tooltip-label';\nimport '../../../define/ui/tooltip-shortcut';\nimport '../../../define/ui/live-button';\nimport '../../../define/ui/mute-button';\nimport '../../../define/ui/volume-popover';\nimport '../../../define/ui/volume-slider';\nimport '../../../define/ui/slider-track';\nimport '../../../define/ui/slider-fill';\nimport '../../../define/ui/slider-thumb';\nimport '../../../define/ui/captions-button';\nimport '../../../define/ui/menu';\nimport '../../../define/ui/menu-content';\nimport '../../../define/ui/captions-radio-group';\nimport '../../../define/ui/menu-radio-item';\nimport '../../../define/ui/menu-item-indicator';\nimport '../../../define/ui/cast-button';\nimport '../../../define/ui/airplay-button';\nimport '../../../define/ui/pip-button';\nimport '../../../define/ui/fullscreen-button';\nimport '../../../define/ui/hotkey';\nimport '../../../define/ui/gesture';\nimport '../../../define/ui/status-announcer';\nimport '../../../define/ui/volume-indicator';\nimport '../../../define/ui/volume-indicator-fill';\nimport '../../../define/ui/volume-indicator-value';\nimport '../../../define/ui/status-indicator';\nimport '../../../define/ui/status-indicator-value';\nimport { registerIcons } from '../../../icons';\nimport {\n  airPlayEnterIcon as airPlayEnterIconNeutral,\n  airPlayExitIcon as airPlayExitIconNeutral,\n  captionsOffIcon as captionsOffIconNeutral,\n  captionsOnIcon as captionsOnIconNeutral,\n  castEnterIcon as castEnterIconNeutral,\n  castExitIcon as castExitIconNeutral,\n  checkIcon as checkIconNeutral,\n  fullscreenEnterIcon as fullscreenEnterIconNeutral,\n  fullscreenExitIcon as fullscreenExitIconNeutral,\n  pauseIcon as pauseIconNeutral,\n  pipEnterIcon as pipEnterIconNeutral,\n  pipExitIcon as pipExitIconNeutral,\n  playIcon as playIconNeutral,\n  restartIcon as restartIconNeutral,\n  spinnerIcon as spinnerIconNeutral,\n  volumeHighIcon as volumeHighIconNeutral,\n  volumeLowIcon as volumeLowIconNeutral,\n  volumeOffIcon as volumeOffIconNeutral,\n} from '../../../icons/neutral';\n\nregisterIcons('neutral', {\n  'airplay-enter': airPlayEnterIconNeutral,\n  'airplay-exit': airPlayExitIconNeutral,\n  'captions-off': captionsOffIconNeutral,\n  'captions-on': captionsOnIconNeutral,\n  'cast-enter': castEnterIconNeutral,\n  'cast-exit': castExitIconNeutral,\n  check: checkIconNeutral,\n  'fullscreen-enter': fullscreenEnterIconNeutral,\n  'fullscreen-exit': fullscreenExitIconNeutral,\n  pause: pauseIconNeutral,\n  'pip-enter': pipEnterIconNeutral,\n  'pip-exit': pipExitIconNeutral,\n  play: playIconNeutral,\n  restart: restartIconNeutral,\n  spinner: spinnerIconNeutral,\n  'volume-high': volumeHighIconNeutral,\n  'volume-low': volumeLowIconNeutral,\n  'volume-off': volumeOffIconNeutral,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,cAAc,WAAW;CACvB,iBAAiBA;CACjB,gBAAgBC;CAChB,gBAAgBC;CAChB,eAAeC;CACf,cAAcC;CACd,aAAaC;CACb,OAAOC;CACP,oBAAoBC;CACpB,mBAAmBC;CACnB,OAAOC;CACP,aAAaC;CACb,YAAYC;CACZ,MAAMC;CACN,SAASC;CACT,SAASC;CACT,eAAeC;CACf,cAAcC;CACd,cAAcC;AAChB,CAAC"}

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

@@ -11,6 +11,8 @@
     --media-text-shadow-dialog: 0 1px 0 #00000080;
     --media-backdrop-filter-dialog: blur(16px) saturate(120%);
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), 0 4px 6px -1px oklch(0% 0 0 / .2), 0 2px 4px -2px oklch(0% 0 0 / .2);
+    --media-filter-feedback: drop-shadow(0 0 1px oklch(0% 0 0 / .3)) drop-shadow(0 1px 3px oklch(0% 0 0 / .2))
+      drop-shadow(0 2px 12px oklch(0% 0 0 / .15));
     --media-duration-dialog: var(--media-duration);
     --media-duration-indicator: .4s;
     --media-hidden-offset: 100%;
@@ -27,39 +29,39 @@
   }
 
   .media-skin {
-    --media-background: oklch(0% 0 0);
-    --media-foreground: oklch(100% 0 0);
-    --media-controls: oklch(0% 0 0 / .35);
+    --media-background: #000;
+    --media-foreground: #fff;
+    --media-controls: #00000059;
     --media-controls-foreground: var(--media-foreground);
-    --media-popover: oklch(100% 0 0 / .1);
+    --media-popover: #ffffff1a;
     --media-popover-foreground: var(--media-foreground);
     --media-primary: var(--media-accent-color, var(--media-default-accent-color));
     --media-primary-foreground: var(--media-accent-text-color, var(--media-default-accent-text-color));
-    --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+    --media-accent: var(--media-accent-color, #ffffff1a);
     --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-border: oklch(0% 0 0 / .1);
-    --media-ring: oklch(100% 0 0);
-    --media-backdrop: oklch(0% 0 0);
-    --media-live-color: oklch(65% .22 27);
-    --media-shadow-surface: 0 1px 3px 0 oklch(0% 0 0 / .15), 0 1px 2px -1px oklch(0% 0 0 / .15);
+    --media-muted: #ffffff26;
+    --media-muted-foreground: #ffffffa6;
+    --media-border: #0000001a;
+    --media-ring: #fff;
+    --media-backdrop: #000;
+    --media-live-color: #f9423d;
+    --media-shadow-surface: 0 1px 3px 0 #00000026, 0 1px 2px -1px #00000026;
     --media-shadow-surface-inset: inset 0 1px 0 0 #ffffff1a, inset 0 0 0 1px #ffffff0d;
     --media-shadow-thumb: 0 0 0 1px #0000001a, 0 1px 3px 0 #00000059, 0 1px 2px -1px #00000059;
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), var(--media-shadow-surface);
-    --media-shadow-separator: 0 1px 0 0 oklch(100% 0 0 / .075);
+    --media-shadow-separator: 0 1px 0 0 #ffffff13;
     --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-shadow-subtle-current-color: 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);
     --media-controls-radius: var(--media-control-radius);
-    --media-default-accent-color: oklch(100% 0 0);
-    --media-default-accent-text-color: oklch(0% 0 0);
+    --media-default-accent-color: #fff;
+    --media-default-accent-text-color: #000;
     --media-duration-instant: 50ms;
     --media-duration-fast: .1s;
     --media-duration: .15s;
@@ -96,16 +98,31 @@
     --media-slider-preview-label-offset: calc(var(--media-spacing) * 10.5);
     --media-video-border-radius: var(--media-border-radius, 28px);
     --media-scale: 1;
-    --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    --media-scrollbar-thumb-color: #80808080;
     --media-spacing: calc(var(--media-scale-unit, 16px) * var(--media-scale) / 4);
     scrollbar-color: var(--media-scrollbar-thumb-color) transparent;
     scrollbar-width: thin;
   }
 
+  @supports (color: color-mix(in oklab, red, red)) {
+    .media-skin {
+      --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+      --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
+      --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
+      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    }
+  }
+
+  @supports (color: oklch(0 0 0)) {
+    .media-skin {
+      --media-live-color: oklch(65% .22 27);
+    }
+  }
+
   @supports (color: contrast-color(red)) {
     .media-skin {
       --media-primary-foreground: var(--media-accent-text-color, contrast-color(var(--media-primary)));
-      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, oklch(0% 0 0)))));
+      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, #000))));
     }
   }
 
@@ -153,24 +170,66 @@
 @layer base.preset {
   .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
     --media-frame-border: var(--media-border-color, #0000001a);
-    --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));
+    --media-controls-gradient-height: max(40%, calc(var(--media-spacing) * 40));
+    --media-controls-bottom-gradient-height: max(50%, calc(var(--media-spacing) * 60));
     --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,
-      color-mix(in oklab, var(--media-backdrop) 50%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 10%, transparent),
-      transparent);
+  }
+
+  @supports (color: color-mix(in oklab, red, red)) {
+    .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
+      --media-controls-gradient: linear-gradient(to top,
+        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-thumbnail-gradient: linear-gradient(to top,
+        color-mix(in oklab, var(--media-backdrop) 50%, transparent),
+        color-mix(in oklab, var(--media-backdrop) 10%, transparent),
+        transparent);
+    }
+
+    .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
+      --media-controls-gradient: linear-gradient(to top,
+        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-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),
+        transparent);
+    }
   }
 
   @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);
     }
   }
 
@@ -185,18 +244,14 @@
 
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
     --media-frame-border: var(--media-border-color, #00000026);
-    --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));
-    --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),
-      transparent);
+    --media-controls-gradient-height: 40%;
+    --media-controls-bottom-gradient-height: max(40%, calc(var(--media-spacing) * 44));
     --media-caption-controls-y: calc(var(--media-spacing) * -14);
     --media-slider-preview-offset: calc(var(--media-spacing) * 11);
   }
 
   .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);
   }
 
@@ -208,7 +263,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);
     }
   }
 
@@ -279,7 +343,7 @@
   @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
     .media-skin {
       --media-popover: var(--media-background);
-      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      --media-scrollbar-thumb-color: currentColor;
       --media-backdrop-filter-surface: none;
       --media-backdrop-filter-indicator: none;
       --media-backdrop-filter-dialog: none;
@@ -287,6 +351,12 @@
       scrollbar-width: auto;
     }
 
+    @supports (color: color-mix(in oklab, red, red)) {
+      .media-skin {
+        --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      }
+    }
+
     @supports (color: oklch(from currentColor l c h)) {
       .media-skin {
         --media-scrollbar-thumb-color: oklch(from currentColor l c h / .8);
@@ -529,6 +599,11 @@
     transition-duration: var(--media-duration-instant);
   }
 
+  :where(.media-skin[data-theme="neutral"]) .media-dialog-backdrop[data-scope="document"] {
+    border-radius: 0;
+    position: fixed;
+  }
+
   :where(.media-skin[data-theme="neutral"]) .media-dialog-backdrop:is([data-starting-style], [data-ending-style]) {
     opacity: 0;
   }
@@ -599,6 +674,11 @@
     transition-duration: var(--media-duration-instant);
   }
 
+  :where(.media-skin[data-theme="neutral"]) .media-dialog-popup[data-scope="document"] {
+    max-height: calc(100dvh - 1rem);
+    position: fixed;
+  }
+
   :where(.media-skin[data-theme="neutral"]) .media-dialog-popup:is([data-starting-style], [data-ending-style]) {
     scale: var(--media-hidden-popup-scale) var(--media-hidden-popup-scale);
     opacity: 0;
@@ -702,21 +782,22 @@
     isolation: isolate;
     z-index: 20;
     transform-origin: top;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     padding-inline: calc(var(--media-spacing) * 4);
     padding-top: calc(var(--media-spacing) * 3.5);
     font-size: calc(var(--media-spacing) * 4);
     letter-spacing: -.0125em;
-    overflow-wrap: anywhere;
     color: var(--media-controls-foreground);
     transition-property: filter, opacity, translate;
     transition-duration: .15s;
     transition-duration: calc(var(--media-duration-controls) / 2);
     text-shadow: 0 1px 0 var(--media-shadow-current-color);
-    inset-inline: 0;
     font-weight: 400;
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
     position: absolute;
-    top: 0;
+    inset: 0;
+    overflow: hidden;
   }
 
   :where(.media-skin[data-theme="neutral"]) .media-title:not([data-visible]) {
@@ -725,12 +806,28 @@
     transition-duration: var(--media-duration-controls);
   }
 
+  :where(.media-skin[data-theme="neutral"]) .media-title:before {
+    z-index: -1;
+    height: var(--media-controls-gradient-height);
+    content: "";
+    background-image: var(--media-controls-top-gradient);
+    inset-inline: 0;
+    position: absolute;
+    top: 0;
+  }
+
   @media (pointer: fine) {
     :where(.media-skin[data-theme="neutral"]) .media-title:not([data-visible]) {
       filter: blur(var(--media-hidden-blur));
     }
   }
 
+  @container media-root (width < 15rem) {
+    :where(.media-skin[data-theme="neutral"]) .media-title {
+      display: none;
+    }
+  }
+
   @container media-root (width >= 28rem) {
     :where(.media-skin[data-theme="neutral"]) .media-title {
       padding-inline: calc(var(--media-spacing) * 6);
@@ -792,9 +889,9 @@
     object-position: var(--media-object-position, center);
     width: 100%;
     max-width: 100%;
-    height: 100%;
     margin: 0;
     display: block;
+    height: 100% !important;
   }
 
   :where(.media-skin[data-theme="neutral"]) .media-status-announcer {
@@ -874,6 +971,7 @@
   :where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator {
     padding: calc(var(--media-spacing) * 4);
     text-align: center;
+    filter: var(--media-filter-feedback);
     transition-property: opacity, scale;
     transition-duration: .15s;
     transition-duration: var(--media-duration-slow);
@@ -889,6 +987,12 @@
     transition-timing-function: cubic-bezier(.4, 0, 1, 1);
   }
 
+  @container media-root (width < 10rem) {
+    :where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator {
+      display: none !important;
+    }
+  }
+
   :where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator:is([data-starting-style], [data-ending-style]) {
     scale: var(--media-hidden-playback-scale) var(--media-hidden-playback-scale);
     opacity: 0;
@@ -1465,6 +1569,10 @@
     opacity: .5;
   }
 
+  :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-custom] {
+    font-style: italic;
+  }
+
   :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-availability="unavailable"], :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-availability="unsupported"] {
     display: none;
   }
@@ -1501,8 +1609,15 @@
     color: inherit;
   }
 
+  :where(.media-skin[data-theme="neutral"]) .media-menu-badge {
+    border-radius: var(--media-control-radius);
+    background-color: var(--media-accent);
+    padding-inline: calc(var(--media-spacing) * 1.5);
+    font-size: .7em;
+    font-weight: 600;
+  }
+
   :where(.media-skin[data-theme="neutral"]) .media-menu-content {
-    max-height: inherit;
     overscroll-behavior: none;
     transition-property: translate, filter;
     transition-duration: .15s;
@@ -1524,6 +1639,8 @@
   :where(.media-skin[data-theme="neutral"]) .media-menu-content:not([data-submenu]) {
     inset-inline: var(--media-spacing);
     top: var(--media-spacing);
+    max-height: calc(min(var(--media-menu-available-height, calc(var(--media-spacing) * 56)), calc(var(--media-spacing) * 56)) -
+        (calc(var(--media-spacing) * 2)));
     gap: calc(var(--media-spacing) * .5);
     flex-direction: column;
     display: flex;
@@ -1618,7 +1735,6 @@
   }
 
   :where(.media-skin[data-theme="neutral"]) .media-menu-radio-group {
-    max-height: inherit;
     gap: calc(var(--media-spacing) * .5);
     anchor-scope: --media-menu-item-highlight-anchor;
     flex-direction: column;
@@ -1957,18 +2073,146 @@
     z-index: 10;
     border-radius: inherit;
     background-image: var(--media-controls-gradient);
+    background-size: 100% var(--media-controls-bottom-gradient-height);
     transition-property: opacity;
     transition-duration: .15s;
     transition-duration: var(--media-duration-controls);
+    background-position: bottom;
+    background-repeat: no-repeat;
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
     position: absolute;
     inset: 0;
   }
 
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-backdrop:not([data-started]) {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-backdrop:not([data-visible]) {
     opacity: 0;
   }
 
+  @container not style(--media-controls-before-start: visible) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-backdrop:not([data-started]) {
+      opacity: 0;
+    }
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center {
+    pointer-events: none;
+    z-index: 30;
+    align-items: center;
+    gap: calc(var(--media-spacing) * 6);
+    transition-property: filter, opacity, scale;
+    transition-duration: .15s;
+    transition-duration: calc(var(--media-duration-controls) / 2);
+    transition-timing-function: cubic-bezier(0, 0, .2, 1);
+    display: flex;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center:not([data-visible]) {
+    scale: var(--media-hidden-scale) var(--media-hidden-scale);
+    opacity: 0;
+    transition-duration: var(--media-duration-controls);
+  }
+
+  :where(:where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-buffering)[data-visible] .video-controls-center {
+    display: none;
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    flex-direction: row-reverse;
+  }
+
+  @media (pointer: fine) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center:not([data-visible]) {
+      filter: blur(var(--media-hidden-blur));
+    }
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-buffering {
+    display: contents;
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-button {
+    pointer-events: auto;
+    color: var(--media-controls-foreground) !important;
+  }
+
+  :where(:where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center):not([data-visible]) .video-controls-center-button {
+    pointer-events: none;
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play {
+    width: calc(var(--media-spacing) * 14.5) !important;
+    height: calc(var(--media-spacing) * 14.5) !important;
+    background-color: var(--media-backdrop) !important;
+    corner-shape: round !important;
+    border-radius: 50% !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play {
+      background-color: color-mix(in oklab, var(--media-backdrop) 40%, transparent) !important;
+    }
+  }
+
+  @media (hover: hover) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play:hover {
+      background-color: var(--media-backdrop) !important;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play:hover {
+        background-color: color-mix(in oklab, var(--media-backdrop) 60%, transparent) !important;
+      }
+    }
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play:focus-visible {
+    background-color: var(--media-backdrop) !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play:focus-visible {
+      background-color: color-mix(in oklab, var(--media-backdrop) 60%, transparent) !important;
+    }
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play[data-started]:not(:focus-visible) {
+    pointer-events: var(--media-center-play-started-pointer-events, none) !important;
+    opacity: var(--media-center-play-started-opacity, 0) !important;
+  }
+
+  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play {
+      background-color: var(--media-background) !important;
+    }
+  }
+
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play {
+      width: calc(var(--media-spacing) * 10) !important;
+      height: calc(var(--media-spacing) * 10) !important;
+    }
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play-icon {
+    width: calc(var(--media-spacing) * 7) !important;
+    height: calc(var(--media-spacing) * 7) !important;
+  }
+
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play-icon {
+      width: calc(var(--media-spacing) * 5) !important;
+      height: calc(var(--media-spacing) * 5) !important;
+    }
+  }
+
   :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-content {
     inset-inline: calc(var(--media-spacing) * .5);
     bottom: calc(var(--media-spacing) * .5);
@@ -1988,6 +2232,10 @@
     position: absolute;
   }
 
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-content:not([data-started]) {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-content:not([data-visible]) {
     pointer-events: none;
     translate: 0 var(--media-hidden-offset);
@@ -2020,6 +2268,12 @@
     }
   }
 
+  @container not style(--media-controls-before-start: visible) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-content:not([data-started]) {
+      opacity: 0;
+    }
+  }
+
   :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-spacer {
     flex: 1;
   }

package/dist/dev/internal/skins/neutral-live-video/template.js

@@ -32,6 +32,18 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-title class="media-title">
 </media-title>
 <media-controls>
+<media-buffering-indicator class="video-controls-center-buffering">
+<media-controls-group class="video-controls-center">
+<media-play-button class="media-button media-play-button video-controls-center-button video-controls-center-play">
+<media-icon family="neutral" name="restart" class="media-button-icon media-play-button-restart-icon video-controls-center-play-icon">
+</media-icon>
+<media-icon family="neutral" name="play" class="media-button-icon media-play-button-play-icon video-controls-center-play-icon">
+</media-icon>
+<media-icon family="neutral" name="pause" class="media-button-icon media-play-button-pause-icon video-controls-center-play-icon">
+</media-icon>
+</media-play-button>
+</media-controls-group>
+</media-buffering-indicator>
 <media-controls-backdrop class="video-controls-backdrop">
 </media-controls-backdrop>
 <media-controls-content class="video-controls video-controls-content">
@@ -100,6 +112,8 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-menu-radio-item class="media-menu-radio-item">
 <span data-part="label">
 </span>
+<span data-part="badge" class="media-menu-badge">
+</span>
 <media-menu-item-indicator force-mount class="media-menu-item-indicator">
 <media-icon family="neutral" name="check" class="media-menu-radio-item-icon">
 </media-icon>