@videojs/html 10.1.0 → 10.2.0

package/dist/default/internal/skins/scaffold-live-audio/skin.css

@@ -204,8 +204,8 @@
 
   :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .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);
@@ -245,8 +245,8 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .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-audio"]) .media-status-announcer {
@@ -258,6 +258,30 @@
     overflow: hidden;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-live-button {
+    align-items: center;
+    gap: calc(var(--media-spacing) * 1.5);
+    font-size: calc(var(--media-spacing) * 2.75);
+    grid-auto-flow: column;
+    width: auto !important;
+    padding-inline: calc(var(--media-spacing) * 2.5) !important;
+  }
+
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-live-button-dot {
+    width: calc(var(--media-spacing) * 2);
+    height: calc(var(--media-spacing) * 2);
+    opacity: .4;
+    background-color: currentColor;
+    border-radius: 0;
+    flex-shrink: 0;
+    display: inline-block;
+  }
+
+  :where(:where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-live-button)[data-live-edge] .media-live-button-dot {
+    opacity: 1;
+    background-color: #f43f5e;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-popup {
     color: inherit;
     border-style: solid;
@@ -373,53 +397,6 @@
     font-size: calc(var(--media-spacing) * 2.75);
   }
 
-  :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) :where(.media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-enter-icon, :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-airplay-button-exit-icon {
-    display: none;
-  }
-
-  :where(:where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-exit-icon {
-    display: block;
-  }
-
-  :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-button-icon {
-    width: calc(var(--media-spacing) * 4.5);
-    height: calc(var(--media-spacing) * 4.5);
-    grid-row-start: 1;
-    grid-column-start: 1;
-  }
-
-  :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) :where(.media-captions-button)[data-active] .media-captions-button-off-icon, :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-captions-button-on-icon {
-    display: none;
-  }
-
-  :where(:where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-captions-button)[data-active] .media-captions-button-on-icon {
-    display: block;
-  }
-
-  :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-live-button {
-    align-items: center;
-    gap: calc(var(--media-spacing) * 1.5);
-    font-size: calc(var(--media-spacing) * 2.75);
-    grid-auto-flow: column;
-    width: auto !important;
-    padding-inline: calc(var(--media-spacing) * 2.5) !important;
-  }
-
-  :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-live-button-dot {
-    width: calc(var(--media-spacing) * 2);
-    height: calc(var(--media-spacing) * 2);
-    opacity: .4;
-    background-color: currentColor;
-    border-radius: 0;
-    flex-shrink: 0;
-    display: inline-block;
-  }
-
-  :where(:where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-live-button)[data-live-edge] .media-live-button-dot {
-    opacity: 1;
-    background-color: #f43f5e;
-  }
-
   :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-poster {
     width: 100%;
     height: 100%;
@@ -766,6 +743,13 @@
     display: block;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-button-icon {
+    width: calc(var(--media-spacing) * 4.5);
+    height: calc(var(--media-spacing) * 4.5);
+    grid-row-start: 1;
+    grid-column-start: 1;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-audio"]) .media-mute-button-high-icon {
     display: none;
   }
@@ -1411,7 +1395,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/default/internal/skins/scaffold-live-audio/template.js

@@ -49,25 +49,13 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-live-button>
 </media-controls-group>
 <media-controls-group class="video-controls-group">
-<media-captions-button class="media-button media-captions-button" id="vjs-r7DX1drE-0-2-trigger">
-<media-icon family="scaffold" name="captions-off" class="media-button-icon media-captions-button-off-icon">
-</media-icon>
-<media-icon family="scaffold" name="captions-on" class="media-button-icon media-captions-button-on-icon">
-</media-icon>
-</media-captions-button>
-<media-tooltip trigger="vjs-r7DX1drE-0-2-trigger" side="top" class="media-popup media-popup-safe-area media-tooltip-popup">
-<media-tooltip-label>
-</media-tooltip-label>
-<media-tooltip-shortcut class="media-tooltip-shortcut">
-</media-tooltip-shortcut>
-</media-tooltip>
-<media-mute-button commandfor="vjs-igUPvPeL-0-popup" class="media-button media-mute-button" id="vjs-r7DX1drE-0-3-trigger">
+<media-mute-button commandfor="vjs-igUPvPeL-0-popup" class="media-button media-mute-button" id="vjs-r7DX1drE-0-2-trigger">
 <media-icon family="scaffold" name="volume-off" class="media-button-icon media-mute-button-off-icon">
 </media-icon>
 <media-icon family="scaffold" name="volume-high" class="media-button-icon media-mute-button-high-icon">
 </media-icon>
 </media-mute-button>
-<media-tooltip trigger="vjs-r7DX1drE-0-3-trigger" delay="0" disabled side="top" sticky class="media-popup media-popup-safe-area media-tooltip-popup">
+<media-tooltip trigger="vjs-r7DX1drE-0-2-trigger" delay="0" disabled side="top" sticky class="media-popup media-popup-safe-area media-tooltip-popup">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
@@ -83,18 +71,6 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-slider-thumb>
 </media-volume-slider>
 </media-volume-popover>
-<media-airplay-button class="media-button media-airplay-button" id="vjs-r7DX1drE-0-4-trigger">
-<media-icon family="scaffold" name="airplay-enter" class="media-button-icon media-airplay-button-enter-icon">
-</media-icon>
-<media-icon family="scaffold" name="airplay-exit" class="media-button-icon media-airplay-button-exit-icon">
-</media-icon>
-</media-airplay-button>
-<media-tooltip trigger="vjs-r7DX1drE-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-tooltip-popup">
-<media-tooltip-label>
-</media-tooltip-label>
-<media-tooltip-shortcut class="media-tooltip-shortcut">
-</media-tooltip-shortcut>
-</media-tooltip>
 </media-controls-group>
 </media-controls-group>
 </div>

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

@@ -240,8 +240,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);
@@ -281,8 +281,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 {
@@ -722,14 +722,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 +1468,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;
   }
@@ -1796,7 +1796,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/default/internal/skins/scaffold-video/skin.css

@@ -240,8 +240,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);
@@ -281,8 +281,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 {
@@ -1201,14 +1201,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 +1691,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;
   }
@@ -2036,7 +2036,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/default/media/hls-audio/adapter.js

@@ -1,6 +1,6 @@
 import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
 import { CustomMediaElement } from "@videojs/media/dom";
-import { HlsAudioAdapter } from "@videojs/spf/hls-audio";
+import { HlsAudioAdapter } from "@videojs/spf/adapters/hls-audio";
 //#region src/media/hls-audio/adapter.ts
 var HlsAudio = class extends MediaAttachMixin(CustomMediaElement("audio", HlsAudioAdapter)) {};
 //#endregion

package/dist/default/media/hls-background-video/adapter.js

@@ -1,7 +1,7 @@
 import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
 import { getTemplateHTML } from "../background-video/template.js";
 import { namedNodeMapToObject } from "@videojs/utils/dom";
-import { HlsBackgroundVideoAdapter } from "@videojs/spf/hls-background-video";
+import { HlsBackgroundVideoAdapter } from "@videojs/spf/adapters/hls-background-video";
 //#region src/media/hls-background-video/adapter.ts
 const HTMLElementBase = globalThis.HTMLElement ?? class {};
 const HlsBackgroundVideoBase = MediaAttachMixin(HTMLElementBase);

package/dist/default/media/hls-video/adapter.js

@@ -1,6 +1,6 @@
 import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
 import { CustomMediaElement } from "@videojs/media/dom";
-import { HlsVideoAdapter } from "@videojs/spf/hls-video";
+import { HlsVideoAdapter } from "@videojs/spf/adapters/hls-video";
 //#region src/media/hls-video/adapter.ts
 var HlsVideo = class extends MediaAttachMixin(CustomMediaElement("video", HlsVideoAdapter)) {};
 //#endregion

package/dist/default/ui/slider/element.js

@@ -103,7 +103,9 @@ var SliderElement = class extends UIElement {
 				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
 			},
 			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),
-			onResize: () => this.requestUpdate()
+			onResize: () => {
+				if (this.thumbAlignment === "edge") this.requestUpdate();
+			}
 		});
 		applyElementProps(this, this.#slider.rootProps, { signal });
 		applyStyles(this, this.#slider.rootStyle);

package/dist/default/ui/time-slider/element.js

@@ -84,6 +84,15 @@ var TimeSliderElement = class extends UIElement {
 		if (this.destroyed) return;
 		this.#disconnect = new AbortController();
 		const signal = this.#disconnect.signal;
+		let dragSeekPercent;
+		const seek = (percent) => {
+			const media = this.#timeState.value;
+			if (media) {
+				const time = this.#core.rawValueFromPercent(percent);
+				this.#seek.seek(percent);
+				media.seek(time);
+			}
+		};
 		this.#slider = createSlider({
 			getElement: () => this,
 			getThumbElement: () => this.querySelector("media-slider-thumb"),
@@ -106,13 +115,14 @@ var TimeSliderElement = class extends UIElement {
 			},
 			getStepPercent: () => this.#core.getStepPercent(),
 			getLargeStepPercent: () => this.#core.getLargeStepPercent(),
+			onValueChange: (percent) => {
+				if (!this.#slider?.input.current.dragging || percent === dragSeekPercent) return;
+				dragSeekPercent = percent;
+				seek(percent);
+			},
 			onValueCommit: (percent) => {
-				const media = this.#timeState.value;
-				if (media) {
-					const time = this.#core.rawValueFromPercent(percent);
-					this.#seek.seek(percent);
-					media.seek(time);
-				}
+				if (percent !== dragSeekPercent) seek(percent);
+				dragSeekPercent = void 0;
 			},
 			changeThrottle: this.changeThrottle,
 			onPressStart: () => {
@@ -128,7 +138,9 @@ var TimeSliderElement = class extends UIElement {
 				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
 			},
 			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),
-			onResize: () => this.requestUpdate()
+			onResize: () => {
+				if (this.thumbAlignment === "edge") this.requestUpdate();
+			}
 		});
 		applyElementProps(this, this.#slider.rootProps, { signal });
 		applyStyles(this, this.#slider.rootStyle);

package/dist/default/ui/volume-slider/element.js

@@ -97,7 +97,9 @@ var VolumeSliderElement = class extends UIElement {
 				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
 			},
 			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),
-			onResize: () => this.requestUpdate()
+			onResize: () => {
+				if (this.thumbAlignment === "edge") this.requestUpdate();
+			}
 		});
 		const wheelProps = createWheelStep({
 			isDisabled,

package/dist/default/version.js

@@ -1,7 +1,7 @@
 //#region src/version.ts
 const readVersion = () => {
 	try {
-		return "10.1.0";
+		return "10.2.0";
 	} catch {}
 	return "UNKNOWN";
 };

package/dist/dev/define/audio/compat-skin.css

@@ -307,6 +307,43 @@ media-container video::-webkit-media-text-track-container {
     overflow: hidden;
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button {
+    align-items: center;
+    gap: calc(var(--media-spacing) * 1.5);
+    font-size: calc(var(--media-spacing) * 2.75);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    grid-auto-flow: column;
+    font-weight: 600;
+    width: auto !important;
+    padding-inline: calc(var(--media-spacing) * 2.5) !important;
+  }
+
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button-dot {
+    width: calc(var(--media-spacing) * 2);
+    height: calc(var(--media-spacing) * 2);
+    opacity: .4;
+    transition-property: background-color, opacity;
+    transition-duration: .15s;
+    transition-duration: var(--media-duration);
+    background-color: currentColor;
+    border-radius: 9999px;
+    flex-shrink: 0;
+    transition-timing-function: cubic-bezier(0, 0, .2, 1);
+    display: inline-block;
+  }
+
+  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button)[data-live-edge] .media-live-button-dot {
+    opacity: 1;
+    background-color: #f43f5e;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button-dot {
+      transition-property: none;
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-popup {
     color: inherit;
     border-style: solid;
@@ -453,66 +490,6 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) :where(.media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-enter-icon, :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-airplay-button-exit-icon {
-    display: none;
-  }
-
-  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-exit-icon {
-    display: block;
-  }
-
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-button-icon {
-    width: calc(var(--media-spacing) * 4.5);
-    height: calc(var(--media-spacing) * 4.5);
-    grid-row-start: 1;
-    grid-column-start: 1;
-  }
-
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) :where(.media-captions-button)[data-active] .media-captions-button-off-icon, :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-captions-button-on-icon {
-    display: none;
-  }
-
-  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-captions-button)[data-active] .media-captions-button-on-icon {
-    display: block;
-  }
-
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button {
-    align-items: center;
-    gap: calc(var(--media-spacing) * 1.5);
-    font-size: calc(var(--media-spacing) * 2.75);
-    letter-spacing: .05em;
-    text-transform: uppercase;
-    grid-auto-flow: column;
-    font-weight: 600;
-    width: auto !important;
-    padding-inline: calc(var(--media-spacing) * 2.5) !important;
-  }
-
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button-dot {
-    width: calc(var(--media-spacing) * 2);
-    height: calc(var(--media-spacing) * 2);
-    opacity: .4;
-    transition-property: background-color, opacity;
-    transition-duration: .15s;
-    transition-duration: var(--media-duration);
-    background-color: currentColor;
-    border-radius: 9999px;
-    flex-shrink: 0;
-    transition-timing-function: cubic-bezier(0, 0, .2, 1);
-    display: inline-block;
-  }
-
-  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button)[data-live-edge] .media-live-button-dot {
-    opacity: 1;
-    background-color: #f43f5e;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button-dot {
-      transition-property: none;
-    }
-  }
-
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-button-icon-base {
     width: calc(var(--media-spacing) * 4.5);
     height: calc(var(--media-spacing) * 4.5);
@@ -825,6 +802,13 @@ media-container video::-webkit-media-text-track-container {
     display: block;
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-button-icon {
+    width: calc(var(--media-spacing) * 4.5);
+    height: calc(var(--media-spacing) * 4.5);
+    grid-row-start: 1;
+    grid-column-start: 1;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-mute-button-high-icon {
     display: none;
   }