@videojs/html 10.2.0 → 10.3.0

package/dist/default/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;
@@ -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;
@@ -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);
   }
@@ -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);
     }
   }
 

package/dist/default/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;
@@ -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;
@@ -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);
   }
@@ -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);
     }
   }
 

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

@@ -0,0 +1,31 @@
+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 };

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

@@ -73,6 +73,13 @@ var HlsBackgroundVideo = class extends HlsBackgroundVideoBase {
 	getMediaTarget() {
 		return this.#media;
 	}
+	/**
+	* The Media driving the inner `<video>`, matching `adapter` on `CustomMediaElement`. Call `adapter.destroy()` to
+	* release the engine after `keep-alive` kept it running past removal.
+	*/
+	get adapter() {
+		return this.#media;
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback?.();
 		if (this.hasAttribute("keep-alive")) return;

package/dist/default/media/mixcloud-audio/adapter.js

@@ -0,0 +1,16 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { escapeHtml } from "@videojs/utils/string";
+import { MixcloudAdapter, buildMixcloudIframeSrc } from "@videojs/mixcloud-audio";
+//#region src/media/mixcloud-audio/adapter.ts
+var MixcloudCustomMediaElement = class extends CustomMediaElement("iframe", MixcloudAdapter) {
+	static {
+		this.getTemplateHTML = (attrs) => {
+			const initialSrc = buildMixcloudIframeSrc(attrs.src ?? "");
+			return `<style> :host { display: block; position: relative; height: 120px; } iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* * The widget is Mixcloud's own chrome, so without controls it is a * transport and nothing else. Hidden rather than merely inert, and * important so a consumer's own display rule cannot put it back on * screen. An iframe in a hidden subtree still loads and plays its src. */ :host(:not([controls])) { display: none !important; } </style><iframe part="iframe" title="Mixcloud audio player" ${initialSrc ? ` src="${escapeHtml(initialSrc)}"` : ""} allow="autoplay; encrypted-media" frameborder="0" width="100%" height="100%" referrerpolicy="${escapeHtml(attrs.referrerpolicy ?? "")}" ></iframe>`;
+		};
+	}
+};
+var MixcloudAudio = class extends MediaAttachMixin(MixcloudCustomMediaElement) {};
+//#endregion
+export { MixcloudAudio };

package/dist/default/media/soundcloud-audio/adapter.js

@@ -0,0 +1,16 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { escapeHtml } from "@videojs/utils/string";
+import { SoundCloudAdapter, buildSoundCloudIframeSrc } from "@videojs/soundcloud-audio";
+//#region src/media/soundcloud-audio/adapter.ts
+var SoundCloudCustomMediaElement = class extends CustomMediaElement("iframe", SoundCloudAdapter) {
+	static {
+		this.getTemplateHTML = (attrs) => {
+			const initialSrc = buildSoundCloudIframeSrc(attrs.src ?? "");
+			return `<style> :host { display: block; position: relative; height: 166px; } iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* * The widget is SoundCloud's own chrome, so without controls it is a * transport and nothing else. Hidden rather than merely inert, and * important so a consumer's own display rule cannot put it back on * screen. An iframe in a hidden subtree still loads and plays its src. */ :host(:not([controls])) { display: none !important; } </style><iframe part="iframe" title="SoundCloud audio player" ${initialSrc ? ` src="${escapeHtml(initialSrc)}"` : ""} allow="autoplay; encrypted-media" scrolling="no" frameborder="0" width="100%" height="100%" referrerpolicy="${escapeHtml(attrs.referrerpolicy ?? "")}" ></iframe>`;
+		};
+	}
+};
+var SoundCloudAudio = class extends MediaAttachMixin(SoundCloudCustomMediaElement) {};
+//#endregion
+export { SoundCloudAudio };

package/dist/default/player/element.js

@@ -1,6 +1,6 @@
 import { UIElement } from "../ui/ui-element.js";
 import { PlayerExtensionCoordinator, setPlayerConfigValue } from "@videojs/core/dom";
-import { ContextProvider, ContextRoot } from "@videojs/element/context";
+import { ContextProvider } from "@videojs/element/context";
 import { camelCase, kebabCase } from "@videojs/utils/string";
 import { isNull } from "@videojs/utils/predicate";
 //#region src/player/element.ts
@@ -27,7 +27,6 @@ function createPlayerElement(options) {
 			};
 		}
 		#store = options.factory();
-		#contextRoot = new ContextRoot();
 		#configuredStore = null;
 		#detach = null;
 		#connected = false;
@@ -94,7 +93,6 @@ function createPlayerElement(options) {
 		}
 		connectedCallback() {
 			this.#connected = true;
-			this.#contextRoot.attach(this);
 			super.connectedCallback();
 			this.#syncInitialConfig();
 			this.#playerProvider.setValue(this.store);
@@ -111,13 +109,11 @@ function createPlayerElement(options) {
 		}
 		disconnectedCallback() {
 			this.#connected = false;
-			this.#contextRoot.detach(this);
 			this.#observer.disconnect();
 			this.#detachStore();
 			super.disconnectedCallback();
 		}
 		destroyCallback() {
-			this.#contextRoot.detach(this);
 			this.#observer.disconnect();
 			this.#detachStore();
 			this.#extensions.destroy();

package/dist/default/presets/background/skin.js

@@ -1,5 +1,5 @@
 import skin_default from "../../define/background/skin2.js";
-import { ReactiveElement } from "@videojs/element";
+import { DestroyMixin, ReactiveElement } from "@videojs/element";
 import { ensureGlobalStyle } from "@videojs/utils/dom";
 //#region src/presets/background/skin.ts
 const STYLES_ID = "__media-background-styles";
@@ -12,7 +12,7 @@ function getTemplateHTML() {
     </media-container>
   `;
 }
-var BackgroundVideoSkinElement = class BackgroundVideoSkinElement extends ReactiveElement {
+var BackgroundVideoSkinElement = class BackgroundVideoSkinElement extends DestroyMixin(ReactiveElement) {
 	static {
 		this.tagName = "background-video-skin";
 	}

package/dist/default/presets/skin.js

@@ -1,15 +1,16 @@
+import { UIElement } from "../ui/ui-element.js";
 import global_default from "../define/global.js";
 import shadow_default from "../define/shadow.js";
-import { ReactiveElement } from "@videojs/element";
 import { applyShadowStyles, createShadowStyle, ensureGlobalStyle, renderTemplate } from "@videojs/utils/dom";
 //#region src/presets/skin.ts
 const STYLES_ID = "__media-styles";
 const shadowSheet = createShadowStyle(shadow_default);
 /**
 * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +
-* per-skin styles via `adoptedStyleSheets` (or `<style>` fallback).
+* per-skin styles via `adoptedStyleSheets` (or `<style>` fallback). Destroying it also destroys the controls in its
+* shadow root.
 */
-var SkinElement = class extends ReactiveElement {
+var SkinElement = class extends UIElement {
 	static {
 		this.shadowRootOptions = { mode: "open" };
 	}

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

@@ -1,9 +1,10 @@
+import { containerContext } from "../../player/context.js";
 import { UIElement } from "../ui-element.js";
 import { PositionController } from "../position-controller.js";
 import { dialogContext } from "./context.js";
 import { DialogCore, DialogDataAttrs } from "@videojs/core";
 import { applyElementProps, applyStateDataAttrs, createDialog, createTransition } from "@videojs/core/dom";
-import { ContextProvider } from "@videojs/element/context";
+import { ContextConsumer, ContextProvider } from "@videojs/element/context";
 import { SnapshotController } from "@videojs/store/html";
 //#region src/ui/dialog/element.ts
 let idCounter = 0;
@@ -25,12 +26,14 @@ var DialogElementBase = class extends UIElement {
 	#stateAttrMap;
 	#provider;
 	#position;
+	#container;
 	#popupId;
 	#titleId;
 	#descriptionId;
 	#bindTrigger;
 	#dialog;
 	#snapshot;
+	#modalitySnapshot;
 	#triggerAbort;
 	#triggerElement;
 	constructor({ core = new DialogCore(), stateAttrMap = DialogDataAttrs, idPrefix = "dialog", bindTrigger = true } = {}) {
@@ -40,8 +43,13 @@ var DialogElementBase = class extends UIElement {
 		this.closeOnEscape = DialogCore.defaultProps.closeOnEscape;
 		this.#provider = new ContextProvider(this, { context: dialogContext });
 		this.#position = new PositionController(this);
+		this.#container = new ContextConsumer(this, {
+			context: containerContext,
+			subscribe: true
+		});
 		this.#dialog = null;
 		this.#snapshot = null;
+		this.#modalitySnapshot = null;
 		this.#triggerAbort = null;
 		this.#triggerElement = null;
 		this.#core = core;
@@ -69,6 +77,8 @@ var DialogElementBase = class extends UIElement {
 		});
 		if (this.#snapshot) this.#snapshot.track(this.#dialog.input);
 		else this.#snapshot = new SnapshotController(this, this.#dialog.input);
+		if (this.#modalitySnapshot) this.#modalitySnapshot.track(this.#dialog.modality);
+		else this.#modalitySnapshot = new SnapshotController(this, this.#dialog.modality);
 	}
 	firstUpdated(changed) {
 		super.firstUpdated(changed);
@@ -86,6 +96,7 @@ var DialogElementBase = class extends UIElement {
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.#core.setProps(this);
+		this.#dialog?.setInteractionRoot(this.#container.value?.container ?? null);
 		if (this.#dialog && changed.has("open")) {
 			const { active: inputOpen } = this.#dialog.input.current;
 			if (this.open !== inputOpen) {
@@ -101,6 +112,7 @@ var DialogElementBase = class extends UIElement {
 		this.#syncTrigger(triggerElement);
 		const input = this.#dialog.input.current;
 		this.#core.setInput(input);
+		this.#core.setDocumentModal(this.#dialog.modality.current.documentModal);
 		const state = this.#core.getState();
 		applyStateDataAttrs(this, state, this.#stateAttrMap);
 		if (this.#triggerElement) applyElementProps(this.#triggerElement, this.#core.getTriggerAttrs(state, this.#popupId));