@videojs/html 10.0.1 → 10.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-video/adapter.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { HlsVideoAdapter } from '@videojs/spf/hls-video';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class HlsVideo extends MediaAttachMixin(CustomMediaElement('video', HlsVideoAdapter)) {}\n"],"mappings":";;;;AAKA,IAAa,WAAb,cAA8B,iBAAiB,mBAAmB,SAAS,eAAe,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-video/adapter.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { HlsVideoAdapter } from '@videojs/spf/adapters/hls-video';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class HlsVideo extends MediaAttachMixin(CustomMediaElement('video', HlsVideoAdapter)) {}\n"],"mappings":";;;;AAKA,IAAa,WAAb,cAA8B,iBAAiB,mBAAmB,SAAS,eAAe,CAAC,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,11 @@
+import { CustomMediaConstructor } from "../../index.js";
+import { PlayerJsAdapter } from "@videojs/playerjs-video";
+//#region src/media/playerjs-video/adapter.d.ts
+declare const PlayerJsCustomMediaElement_base: CustomMediaConstructor<typeof PlayerJsAdapter>;
+declare class PlayerJsCustomMediaElement extends PlayerJsCustomMediaElement_base {
+  static getTemplateHTML: (attrs: Record<string, string>) => string;
+}
+declare const PlayerJsVideo_base: typeof PlayerJsCustomMediaElement;
+export declare class PlayerJsVideo extends PlayerJsVideo_base {}
+//#endregion
+//# sourceMappingURL=adapter.d.ts.map

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

@@ -0,0 +1,61 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { escapeHtml } from "@videojs/utils/string";
+import { PlayerJsAdapter, buildPlayerJsIframeSrc } from "@videojs/playerjs-video";
+//#region src/media/playerjs-video/adapter.ts
+var PlayerJsCustomMediaElement = class extends CustomMediaElement("iframe", PlayerJsAdapter) {
+	static {
+		this.getTemplateHTML = (attrs) => {
+			const initialSrc = buildPlayerJsIframeSrc(attrs.src ?? "", templateAttrsToEmbedProps(attrs));
+			return `
+      <style>
+        :host {
+          display: inline-block;
+          min-width: 300px;
+          min-height: 150px;
+          position: relative;
+        }
+        iframe {
+          position: absolute;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+          border: 0;
+        }
+        /* A cross-origin frame swallows every pointer event, so the skin above it
+           never sees the hover that reveals the controls. Not every service lets
+           its chrome be hidden, so without controls the frame is kept out of
+           hit-testing as well. */
+        :host(:not([controls])) {
+          pointer-events: none;
+        }
+      </style>
+      <iframe
+        part="iframe"
+        title="Video player"
+        ${initialSrc ? ` src="${escapeHtml(initialSrc)}"` : ""}
+        allow="accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+        frameborder="0"
+        width="100%"
+        height="100%"
+        referrerpolicy="${escapeHtml(attrs.referrerpolicy ?? "")}"
+      ></iframe>
+    `;
+		};
+	}
+};
+function templateAttrsToEmbedProps(attrs) {
+	return {
+		autoplay: attrs.autoplay !== void 0,
+		defaultMuted: attrs.muted !== void 0,
+		loop: attrs.loop !== void 0,
+		controls: attrs.controls !== void 0,
+		preload: attrs.preload ?? PlayerJsAdapter.defaultProps.preload
+	};
+}
+var PlayerJsVideo = class extends MediaAttachMixin(PlayerJsCustomMediaElement) {};
+//#endregion
+export { PlayerJsVideo };
+
+//# sourceMappingURL=adapter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/playerjs-video/adapter.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { buildPlayerJsIframeSrc, PlayerJsAdapter, type PlayerJsAdapterProps } from '@videojs/playerjs-video';\nimport { escapeHtml } from '@videojs/utils/string';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nclass PlayerJsCustomMediaElement extends CustomMediaElement('iframe', PlayerJsAdapter) {\n  static override getTemplateHTML = (attrs: Record<string, string>): string => {\n    const initialSrc = buildPlayerJsIframeSrc(attrs.src ?? '', templateAttrsToEmbedProps(attrs));\n    const srcAttr = initialSrc ? ` src=\"${escapeHtml(initialSrc)}\"` : '';\n\n    return /*html*/ `\n      <style>\n        :host {\n          display: inline-block;\n          min-width: 300px;\n          min-height: 150px;\n          position: relative;\n        }\n        iframe {\n          position: absolute;\n          inset: 0;\n          width: 100%;\n          height: 100%;\n          border: 0;\n        }\n        /* A cross-origin frame swallows every pointer event, so the skin above it\n           never sees the hover that reveals the controls. Not every service lets\n           its chrome be hidden, so without controls the frame is kept out of\n           hit-testing as well. */\n        :host(:not([controls])) {\n          pointer-events: none;\n        }\n      </style>\n      <iframe\n        part=\"iframe\"\n        title=\"Video player\"\n        ${srcAttr}\n        allow=\"accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n        allowfullscreen\n        frameborder=\"0\"\n        width=\"100%\"\n        height=\"100%\"\n        referrerpolicy=\"${escapeHtml(attrs.referrerpolicy ?? '')}\"\n      ></iframe>\n    `;\n  };\n}\n\n// The props the embed URL is built from for the services the adapter recognizes. A URL differing from the one the\n// adapter builds would have it rebuild the frame on mount.\nfunction templateAttrsToEmbedProps(attrs: Record<string, string>): Partial<PlayerJsAdapterProps> {\n  return {\n    autoplay: attrs.autoplay !== undefined,\n    defaultMuted: attrs.muted !== undefined,\n    loop: attrs.loop !== undefined,\n    controls: attrs.controls !== undefined,\n    preload: (attrs.preload as PlayerJsAdapterProps['preload']) ?? PlayerJsAdapter.defaultProps.preload,\n  };\n}\n\nexport class PlayerJsVideo extends MediaAttachMixin(PlayerJsCustomMediaElement) {}\n"],"mappings":";;;;;AAMA,IAAM,6BAAN,cAAyC,mBAAmB,UAAU,eAAe,CAAC,CAAC;;EAClD,KAAA,mBAAA,UAA0C;GAC3E,MAAM,aAAa,uBAAuB,MAAM,OAAO,IAAI,0BAA0B,KAAK,CAAC;GAG3F,OAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;UAFA,aAAa,SAAS,WAAW,UAAU,EAAE,KAAK,GA4BpD;;;;;;0BAMQ,WAAW,MAAM,kBAAkB,EAAE,EAAE;;;EAG/D;;AACF;AAIA,SAAS,0BAA0B,OAA8D;CAC/F,OAAO;EACL,UAAU,MAAM,aAAa,KAAA;EAC7B,cAAc,MAAM,UAAU,KAAA;EAC9B,MAAM,MAAM,SAAS,KAAA;EACrB,UAAU,MAAM,aAAa,KAAA;EAC7B,SAAU,MAAM,WAA+C,gBAAgB,aAAa;CAC9F;AACF;AAEA,IAAa,gBAAb,cAAmC,iBAAiB,0BAA0B,CAAC,CAAC,CAAC"}

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

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

package/dist/dev/presets/audio/index.d.ts

@@ -1,6 +1,7 @@
 import { CompatAudioSkinElement } from "./compat-skin.js";
+import { ScaffoldAudioSkinElement } from "./scaffold-skin.js";
 import { AudioPlayerElement, PlayerController } from "./player.js";
 import { AudioSkinElement } from "./skin.js";
 import { NeutralAudioSkinElement } from "./neutral-skin.js";
 import { audioFeatures } from "@videojs/core/dom";
-export { AudioPlayerElement, AudioSkinElement, CompatAudioSkinElement, NeutralAudioSkinElement, PlayerController, audioFeatures };
+export { AudioPlayerElement, AudioSkinElement, CompatAudioSkinElement, NeutralAudioSkinElement, PlayerController, ScaffoldAudioSkinElement, audioFeatures };

package/dist/dev/presets/audio/index.js

@@ -1,6 +1,7 @@
 import { CompatAudioSkinElement } from "./compat-skin.js";
 import { NeutralAudioSkinElement } from "./neutral-skin.js";
 import { AudioPlayerElement, PlayerController } from "./player.js";
+import { ScaffoldAudioSkinElement } from "./scaffold-skin.js";
 import { AudioSkinElement } from "./skin.js";
 import { audioFeatures } from "@videojs/core/dom";
-export { AudioPlayerElement, AudioSkinElement, CompatAudioSkinElement, NeutralAudioSkinElement, PlayerController, audioFeatures };
+export { AudioPlayerElement, AudioSkinElement, CompatAudioSkinElement, NeutralAudioSkinElement, PlayerController, ScaffoldAudioSkinElement, audioFeatures };

package/dist/dev/presets/audio/scaffold-skin.d.ts

@@ -0,0 +1,15 @@
+import { SkinElement } from "../skin.js";
+//#region src/presets/audio/scaffold-skin.d.ts
+/** Packaged scaffold audio UI registered as `<audio-scaffold-skin>`. */
+export declare class ScaffoldAudioSkinElement extends SkinElement {
+  static readonly tagName = "audio-scaffold-skin";
+  static styles: import("@videojs/utils/dom").ShadowStyle;
+  static template: HTMLTemplateElement | null;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [ScaffoldAudioSkinElement.tagName]: ScaffoldAudioSkinElement;
+  }
+}
+//#endregion
+//# sourceMappingURL=scaffold-skin.d.ts.map

package/dist/dev/presets/audio/scaffold-skin.js

@@ -0,0 +1,21 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/scaffold-audio/template.js";
+import scaffold_skin_default from "../../define/audio/scaffold-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/audio/scaffold-skin.ts
+/** Packaged scaffold audio UI registered as `<audio-scaffold-skin>`. */
+var ScaffoldAudioSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "audio-scaffold-skin";
+	}
+	static {
+		this.styles = createShadowStyle(scaffold_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { ScaffoldAudioSkinElement };
+
+//# sourceMappingURL=scaffold-skin.js.map

package/dist/dev/presets/audio/scaffold-skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaffold-skin.js","names":["styles"],"sources":["../../../../src/presets/audio/scaffold-skin.ts"],"sourcesContent":["import { createShadowStyle } from '@videojs/utils/dom';\n\nimport { template } from '../../internal/skins/scaffold-audio/template';\nimport { SkinElement } from '../skin';\n\nimport styles from '../../define/audio/scaffold-skin.css?inline';\n\n/** Packaged scaffold audio UI registered as `<audio-scaffold-skin>`. */\nexport class ScaffoldAudioSkinElement extends SkinElement {\n  static readonly tagName = 'audio-scaffold-skin';\n  static styles = createShadowStyle(styles);\n  static template = template;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ScaffoldAudioSkinElement.tagName]: ScaffoldAudioSkinElement;\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,2BAAb,cAA8C,YAAY;;EAC9B,KAAA,UAAA;;;EACV,KAAA,SAAA,kBAAkBA,qBAAM;;;EACtB,KAAA,WAAA;;AACpB"}

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

@@ -1,5 +1,4 @@
 import skin_default from "../../define/background/skin2.js";
-import { SKIN_HELP_TEXT, SKIN_HELP_URL } from "@videojs/core";
 import { ReactiveElement } from "@videojs/element";
 import { ensureGlobalStyle } from "@videojs/utils/dom";
 //#region src/presets/background/skin.ts
@@ -11,7 +10,6 @@ function getTemplateHTML() {
       <slot name="media"></slot>
       <slot></slot>
     </media-container>
-    <a rel="help" href="${SKIN_HELP_URL}" hidden>${SKIN_HELP_TEXT}</a>
   `;
 }
 var BackgroundVideoSkinElement = class BackgroundVideoSkinElement extends ReactiveElement {

package/dist/dev/presets/background/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/presets/background/skin.ts"],"sourcesContent":["import { SKIN_HELP_TEXT, SKIN_HELP_URL } from '@videojs/core';\nimport { ReactiveElement } from '@videojs/element';\nimport { ensureGlobalStyle } from '@videojs/utils/dom';\n\nimport styles from '../../define/background/skin.css?inline';\n\nconst STYLES_ID = '__media-background-styles';\n\nfunction getTemplateHTML() {\n  return /* html */ `\n    <media-container>\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n    </media-container>\n    <a rel=\"help\" href=\"${SKIN_HELP_URL}\" hidden>${SKIN_HELP_TEXT}</a>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, styles);\n\n    if (!this.shadowRoot) {\n      this.attachShadow(BackgroundVideoSkinElement.shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;AAMA,MAAM,YAAY;AAElB,SAAS,kBAAkB;CACzB,OAAkB;;;;;;0BAMM,cAAc,WAAW,eAAe;;AAElE;AAEA,IAAa,6BAAb,MAAa,mCAAmC,gBAAgB;;EACpC,KAAA,UAAA;;;EACiB,KAAA,oBAAA,EAAE,MAAM,OAAO;;;EACjC,KAAA,kBAAA;;CAEzB,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWA,YAAM;EAEnC,IAAI,CAAC,KAAK,YAAY;GACpB,KAAK,aAAa,2BAA2B,iBAAiB;GAC9D,KAAK,WAAY,YAAY,gBAAgB;EAC/C;CACF;AACF"}
+{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/presets/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { ensureGlobalStyle } from '@videojs/utils/dom';\n\nimport styles from '../../define/background/skin.css?inline';\n\nconst STYLES_ID = '__media-background-styles';\n\nfunction getTemplateHTML() {\n  return /* html */ `\n    <media-container>\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n    </media-container>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, styles);\n\n    if (!this.shadowRoot) {\n      this.attachShadow(BackgroundVideoSkinElement.shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;AAKA,MAAM,YAAY;AAElB,SAAS,kBAAkB;CACzB,OAAkB;;;;;;;AAOpB;AAEA,IAAa,6BAAb,MAAa,mCAAmC,gBAAgB;;EACpC,KAAA,UAAA;;;EACiB,KAAA,oBAAA,EAAE,MAAM,OAAO;;;EACjC,KAAA,kBAAA;;CAEzB,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWA,YAAM;EAEnC,IAAI,CAAC,KAAK,YAAY;GACpB,KAAK,aAAa,2BAA2B,iBAAiB;GAC9D,KAAK,WAAY,YAAY,gBAAgB;EAC/C;CACF;AACF"}

package/dist/dev/presets/live-audio/index.d.ts

@@ -1,6 +1,7 @@
 import { CompatLiveAudioSkinElement } from "./compat-skin.js";
+import { ScaffoldLiveAudioSkinElement } from "./scaffold-skin.js";
 import { LiveAudioPlayerElement, PlayerController } from "./player.js";
 import { LiveAudioSkinElement } from "./skin.js";
 import { NeutralLiveAudioSkinElement } from "./neutral-skin.js";
 import { liveAudioFeatures } from "@videojs/core/dom";
-export { CompatLiveAudioSkinElement, LiveAudioPlayerElement, LiveAudioSkinElement, NeutralLiveAudioSkinElement, PlayerController, liveAudioFeatures };
+export { CompatLiveAudioSkinElement, LiveAudioPlayerElement, LiveAudioSkinElement, NeutralLiveAudioSkinElement, PlayerController, ScaffoldLiveAudioSkinElement, liveAudioFeatures };

package/dist/dev/presets/live-audio/index.js

@@ -1,6 +1,7 @@
 import { CompatLiveAudioSkinElement } from "./compat-skin.js";
 import { NeutralLiveAudioSkinElement } from "./neutral-skin.js";
 import { LiveAudioPlayerElement, PlayerController } from "./player.js";
+import { ScaffoldLiveAudioSkinElement } from "./scaffold-skin.js";
 import { LiveAudioSkinElement } from "./skin.js";
 import { liveAudioFeatures } from "@videojs/core/dom";
-export { CompatLiveAudioSkinElement, LiveAudioPlayerElement, LiveAudioSkinElement, NeutralLiveAudioSkinElement, PlayerController, liveAudioFeatures };
+export { CompatLiveAudioSkinElement, LiveAudioPlayerElement, LiveAudioSkinElement, NeutralLiveAudioSkinElement, PlayerController, ScaffoldLiveAudioSkinElement, liveAudioFeatures };

package/dist/dev/presets/live-audio/scaffold-skin.d.ts

@@ -0,0 +1,15 @@
+import { SkinElement } from "../skin.js";
+//#region src/presets/live-audio/scaffold-skin.d.ts
+/** Packaged scaffold live-audio UI registered as `<live-audio-scaffold-skin>`. */
+export declare class ScaffoldLiveAudioSkinElement extends SkinElement {
+  static readonly tagName = "live-audio-scaffold-skin";
+  static styles: import("@videojs/utils/dom").ShadowStyle;
+  static template: HTMLTemplateElement | null;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [ScaffoldLiveAudioSkinElement.tagName]: ScaffoldLiveAudioSkinElement;
+  }
+}
+//#endregion
+//# sourceMappingURL=scaffold-skin.d.ts.map

package/dist/dev/presets/live-audio/scaffold-skin.js

@@ -0,0 +1,21 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/scaffold-live-audio/template.js";
+import scaffold_skin_default from "../../define/live-audio/scaffold-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/live-audio/scaffold-skin.ts
+/** Packaged scaffold live-audio UI registered as `<live-audio-scaffold-skin>`. */
+var ScaffoldLiveAudioSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "live-audio-scaffold-skin";
+	}
+	static {
+		this.styles = createShadowStyle(scaffold_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { ScaffoldLiveAudioSkinElement };
+
+//# sourceMappingURL=scaffold-skin.js.map

package/dist/dev/presets/live-audio/scaffold-skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaffold-skin.js","names":["styles"],"sources":["../../../../src/presets/live-audio/scaffold-skin.ts"],"sourcesContent":["import { createShadowStyle } from '@videojs/utils/dom';\n\nimport { template } from '../../internal/skins/scaffold-live-audio/template';\nimport { SkinElement } from '../skin';\n\nimport styles from '../../define/live-audio/scaffold-skin.css?inline';\n\n/** Packaged scaffold live-audio UI registered as `<live-audio-scaffold-skin>`. */\nexport class ScaffoldLiveAudioSkinElement extends SkinElement {\n  static readonly tagName = 'live-audio-scaffold-skin';\n  static styles = createShadowStyle(styles);\n  static template = template;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ScaffoldLiveAudioSkinElement.tagName]: ScaffoldLiveAudioSkinElement;\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,+BAAb,cAAkD,YAAY;;EAClC,KAAA,UAAA;;;EACV,KAAA,SAAA,kBAAkBA,qBAAM;;;EACtB,KAAA,WAAA;;AACpB"}

package/dist/dev/presets/live-video/index.d.ts

@@ -1,6 +1,7 @@
 import { CompatLiveVideoSkinElement } from "./compat-skin.js";
+import { ScaffoldLiveVideoSkinElement } from "./scaffold-skin.js";
 import { LiveVideoPlayerElement, PlayerController } from "./player.js";
 import { LiveVideoSkinElement } from "./skin.js";
 import { NeutralLiveVideoSkinElement } from "./neutral-skin.js";
 import { liveVideoFeatures } from "@videojs/core/dom";
-export { CompatLiveVideoSkinElement, LiveVideoPlayerElement, LiveVideoSkinElement, NeutralLiveVideoSkinElement, PlayerController, liveVideoFeatures };
+export { CompatLiveVideoSkinElement, LiveVideoPlayerElement, LiveVideoSkinElement, NeutralLiveVideoSkinElement, PlayerController, ScaffoldLiveVideoSkinElement, liveVideoFeatures };

package/dist/dev/presets/live-video/index.js

@@ -1,6 +1,7 @@
 import { CompatLiveVideoSkinElement } from "./compat-skin.js";
 import { NeutralLiveVideoSkinElement } from "./neutral-skin.js";
 import { LiveVideoPlayerElement, PlayerController } from "./player.js";
+import { ScaffoldLiveVideoSkinElement } from "./scaffold-skin.js";
 import { LiveVideoSkinElement } from "./skin.js";
 import { liveVideoFeatures } from "@videojs/core/dom";
-export { CompatLiveVideoSkinElement, LiveVideoPlayerElement, LiveVideoSkinElement, NeutralLiveVideoSkinElement, PlayerController, liveVideoFeatures };
+export { CompatLiveVideoSkinElement, LiveVideoPlayerElement, LiveVideoSkinElement, NeutralLiveVideoSkinElement, PlayerController, ScaffoldLiveVideoSkinElement, liveVideoFeatures };

package/dist/dev/presets/live-video/scaffold-skin.d.ts

@@ -0,0 +1,15 @@
+import { SkinElement } from "../skin.js";
+//#region src/presets/live-video/scaffold-skin.d.ts
+/** Packaged scaffold live-video UI registered as `<live-video-scaffold-skin>`. */
+export declare class ScaffoldLiveVideoSkinElement extends SkinElement {
+  static readonly tagName = "live-video-scaffold-skin";
+  static styles: import("@videojs/utils/dom").ShadowStyle;
+  static template: HTMLTemplateElement | null;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [ScaffoldLiveVideoSkinElement.tagName]: ScaffoldLiveVideoSkinElement;
+  }
+}
+//#endregion
+//# sourceMappingURL=scaffold-skin.d.ts.map

package/dist/dev/presets/live-video/scaffold-skin.js

@@ -0,0 +1,21 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/scaffold-live-video/template.js";
+import scaffold_skin_default from "../../define/live-video/scaffold-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/live-video/scaffold-skin.ts
+/** Packaged scaffold live-video UI registered as `<live-video-scaffold-skin>`. */
+var ScaffoldLiveVideoSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "live-video-scaffold-skin";
+	}
+	static {
+		this.styles = createShadowStyle(scaffold_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { ScaffoldLiveVideoSkinElement };
+
+//# sourceMappingURL=scaffold-skin.js.map

package/dist/dev/presets/live-video/scaffold-skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaffold-skin.js","names":["styles"],"sources":["../../../../src/presets/live-video/scaffold-skin.ts"],"sourcesContent":["import { createShadowStyle } from '@videojs/utils/dom';\n\nimport { template } from '../../internal/skins/scaffold-live-video/template';\nimport { SkinElement } from '../skin';\n\nimport styles from '../../define/live-video/scaffold-skin.css?inline';\n\n/** Packaged scaffold live-video UI registered as `<live-video-scaffold-skin>`. */\nexport class ScaffoldLiveVideoSkinElement extends SkinElement {\n  static readonly tagName = 'live-video-scaffold-skin';\n  static styles = createShadowStyle(styles);\n  static template = template;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ScaffoldLiveVideoSkinElement.tagName]: ScaffoldLiveVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,+BAAb,cAAkD,YAAY;;EAClC,KAAA,UAAA;;;EACV,KAAA,SAAA,kBAAkBA,qBAAM;;;EACtB,KAAA,WAAA;;AACpB"}

package/dist/dev/presets/skin.js

@@ -1,6 +1,5 @@
 import global_default from "../define/global.js";
 import shadow_default from "../define/shadow.js";
-import { SKIN_HELP_TEXT, SKIN_HELP_URL } from "@videojs/core";
 import { ReactiveElement } from "@videojs/element";
 import { applyShadowStyles, createShadowStyle, ensureGlobalStyle, renderTemplate } from "@videojs/utils/dom";
 //#region src/presets/skin.ts
@@ -21,22 +20,12 @@ var SkinElement = class extends ReactiveElement {
 			const ctor = this.constructor;
 			this.attachShadow(ctor.shadowRootOptions);
 			if (ctor.template) renderTemplate(this.shadowRoot, ctor.template);
-			this.shadowRoot.append(createHelpLink(this.ownerDocument));
 			const sheets = [shadowSheet];
 			if (ctor.styles) sheets.push(ctor.styles);
 			applyShadowStyles(this.shadowRoot, sheets);
 		}
 	}
 };
-/** Every packaged skin links to the page that explains what the player is. See `SKIN_HELP_URL`. */
-function createHelpLink(doc) {
-	const link = doc.createElement("a");
-	link.rel = "help";
-	link.href = SKIN_HELP_URL;
-	link.hidden = true;
-	link.textContent = SKIN_HELP_TEXT;
-	return link;
-}
 //#endregion
 export { SkinElement };
 

package/dist/dev/presets/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["shadowStyles","globalStyles"],"sources":["../../../src/presets/skin.ts"],"sourcesContent":["import { SKIN_HELP_TEXT, SKIN_HELP_URL } from '@videojs/core';\nimport { ReactiveElement } from '@videojs/element';\nimport {\n  applyShadowStyles,\n  createShadowStyle,\n  ensureGlobalStyle,\n  renderTemplate,\n  type ShadowStyle,\n} from '@videojs/utils/dom';\n\nimport globalStyles from '../define/global.css?inline';\nimport shadowStyles from '../define/shadow.css?inline';\n\nconst STYLES_ID = '__media-styles';\nconst shadowSheet = createShadowStyle(shadowStyles);\n\n/**\n * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +\n * per-skin styles via `adoptedStyleSheets` (or `<style>` fallback).\n */\nexport class SkinElement extends ReactiveElement {\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static styles?: ShadowStyle;\n  static template?: HTMLTemplateElement | null;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, globalStyles);\n\n    if (!this.shadowRoot) {\n      const ctor = this.constructor as typeof SkinElement;\n\n      this.attachShadow(ctor.shadowRootOptions);\n\n      if (ctor.template) {\n        renderTemplate(this.shadowRoot!, ctor.template);\n      }\n\n      this.shadowRoot!.append(createHelpLink(this.ownerDocument));\n\n      const sheets: ShadowStyle[] = [shadowSheet];\n\n      if (ctor.styles) {\n        sheets.push(ctor.styles);\n      }\n\n      applyShadowStyles(this.shadowRoot!, sheets);\n    }\n  }\n}\n\n/** Every packaged skin links to the page that explains what the player is. See `SKIN_HELP_URL`. */\nfunction createHelpLink(doc: Document): HTMLAnchorElement {\n  const link = doc.createElement('a');\n\n  link.rel = 'help';\n  link.href = SKIN_HELP_URL;\n  link.hidden = true;\n  link.textContent = SKIN_HELP_TEXT;\n\n  return link;\n}\n"],"mappings":";;;;;;AAaA,MAAM,YAAY;AAClB,MAAM,cAAc,kBAAkBA,cAAY;;;;;AAMlD,IAAa,cAAb,cAAiC,gBAAgB;;EACJ,KAAA,oBAAA,EAAE,MAAM,OAAO;;CAI1D,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWC,cAAY;EAEzC,IAAI,CAAC,KAAK,YAAY;GACpB,MAAM,OAAO,KAAK;GAElB,KAAK,aAAa,KAAK,iBAAiB;GAExC,IAAI,KAAK,UACP,eAAe,KAAK,YAAa,KAAK,QAAQ;GAGhD,KAAK,WAAY,OAAO,eAAe,KAAK,aAAa,CAAC;GAE1D,MAAM,SAAwB,CAAC,WAAW;GAE1C,IAAI,KAAK,QACP,OAAO,KAAK,KAAK,MAAM;GAGzB,kBAAkB,KAAK,YAAa,MAAM;EAC5C;CACF;AACF;;AAGA,SAAS,eAAe,KAAkC;CACxD,MAAM,OAAO,IAAI,cAAc,GAAG;CAElC,KAAK,MAAM;CACX,KAAK,OAAO;CACZ,KAAK,SAAS;CACd,KAAK,cAAc;CAEnB,OAAO;AACT"}
+{"version":3,"file":"skin.js","names":["shadowStyles","globalStyles"],"sources":["../../../src/presets/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport {\n  applyShadowStyles,\n  createShadowStyle,\n  ensureGlobalStyle,\n  renderTemplate,\n  type ShadowStyle,\n} from '@videojs/utils/dom';\n\nimport globalStyles from '../define/global.css?inline';\nimport shadowStyles from '../define/shadow.css?inline';\n\nconst STYLES_ID = '__media-styles';\nconst shadowSheet = createShadowStyle(shadowStyles);\n\n/**\n * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +\n * per-skin styles via `adoptedStyleSheets` (or `<style>` fallback).\n */\nexport class SkinElement extends ReactiveElement {\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static styles?: ShadowStyle;\n  static template?: HTMLTemplateElement | null;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, globalStyles);\n\n    if (!this.shadowRoot) {\n      const ctor = this.constructor as typeof SkinElement;\n\n      this.attachShadow(ctor.shadowRootOptions);\n\n      if (ctor.template) {\n        renderTemplate(this.shadowRoot!, ctor.template);\n      }\n\n      const sheets: ShadowStyle[] = [shadowSheet];\n\n      if (ctor.styles) {\n        sheets.push(ctor.styles);\n      }\n\n      applyShadowStyles(this.shadowRoot!, sheets);\n    }\n  }\n}\n"],"mappings":";;;;;AAYA,MAAM,YAAY;AAClB,MAAM,cAAc,kBAAkBA,cAAY;;;;;AAMlD,IAAa,cAAb,cAAiC,gBAAgB;;EACJ,KAAA,oBAAA,EAAE,MAAM,OAAO;;CAI1D,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWC,cAAY;EAEzC,IAAI,CAAC,KAAK,YAAY;GACpB,MAAM,OAAO,KAAK;GAElB,KAAK,aAAa,KAAK,iBAAiB;GAExC,IAAI,KAAK,UACP,eAAe,KAAK,YAAa,KAAK,QAAQ;GAGhD,MAAM,SAAwB,CAAC,WAAW;GAE1C,IAAI,KAAK,QACP,OAAO,KAAK,KAAK,MAAM;GAGzB,kBAAkB,KAAK,YAAa,MAAM;EAC5C;CACF;AACF"}

package/dist/dev/presets/video/index.d.ts

@@ -1,6 +1,7 @@
 import { CompatVideoSkinElement } from "./compat-skin.js";
+import { ScaffoldVideoSkinElement } from "./scaffold-skin.js";
 import { NeutralVideoSkinElement } from "./neutral-skin.js";
 import { PlayerController, VideoPlayerElement } from "./player.js";
 import { VideoSkinElement } from "./skin.js";
 import { videoFeatures } from "@videojs/core/dom";
-export { CompatVideoSkinElement, NeutralVideoSkinElement, PlayerController, VideoPlayerElement, VideoSkinElement, videoFeatures };
+export { CompatVideoSkinElement, NeutralVideoSkinElement, PlayerController, ScaffoldVideoSkinElement, VideoPlayerElement, VideoSkinElement, videoFeatures };

package/dist/dev/presets/video/index.js

@@ -1,6 +1,7 @@
 import { CompatVideoSkinElement } from "./compat-skin.js";
 import { NeutralVideoSkinElement } from "./neutral-skin.js";
 import { PlayerController, VideoPlayerElement } from "./player.js";
+import { ScaffoldVideoSkinElement } from "./scaffold-skin.js";
 import { VideoSkinElement } from "./skin.js";
 import { videoFeatures } from "@videojs/core/dom";
-export { CompatVideoSkinElement, NeutralVideoSkinElement, PlayerController, VideoPlayerElement, VideoSkinElement, videoFeatures };
+export { CompatVideoSkinElement, NeutralVideoSkinElement, PlayerController, ScaffoldVideoSkinElement, VideoPlayerElement, VideoSkinElement, videoFeatures };

package/dist/dev/presets/video/scaffold-skin.d.ts

@@ -0,0 +1,15 @@
+import { SkinElement } from "../skin.js";
+//#region src/presets/video/scaffold-skin.d.ts
+/** Packaged scaffold video UI registered as `<video-scaffold-skin>`. */
+export declare class ScaffoldVideoSkinElement extends SkinElement {
+  static readonly tagName = "video-scaffold-skin";
+  static styles: import("@videojs/utils/dom").ShadowStyle;
+  static template: HTMLTemplateElement | null;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [ScaffoldVideoSkinElement.tagName]: ScaffoldVideoSkinElement;
+  }
+}
+//#endregion
+//# sourceMappingURL=scaffold-skin.d.ts.map

package/dist/dev/presets/video/scaffold-skin.js

@@ -0,0 +1,21 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/scaffold-video/template.js";
+import scaffold_skin_default from "../../define/video/scaffold-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/video/scaffold-skin.ts
+/** Packaged scaffold video UI registered as `<video-scaffold-skin>`. */
+var ScaffoldVideoSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "video-scaffold-skin";
+	}
+	static {
+		this.styles = createShadowStyle(scaffold_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { ScaffoldVideoSkinElement };
+
+//# sourceMappingURL=scaffold-skin.js.map

package/dist/dev/presets/video/scaffold-skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaffold-skin.js","names":["styles"],"sources":["../../../../src/presets/video/scaffold-skin.ts"],"sourcesContent":["import { createShadowStyle } from '@videojs/utils/dom';\n\nimport { template } from '../../internal/skins/scaffold-video/template';\nimport { SkinElement } from '../skin';\n\nimport styles from '../../define/video/scaffold-skin.css?inline';\n\n/** Packaged scaffold video UI registered as `<video-scaffold-skin>`. */\nexport class ScaffoldVideoSkinElement extends SkinElement {\n  static readonly tagName = 'video-scaffold-skin';\n  static styles = createShadowStyle(styles);\n  static template = template;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ScaffoldVideoSkinElement.tagName]: ScaffoldVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,2BAAb,cAA8C,YAAY;;EAC9B,KAAA,UAAA;;;EACV,KAAA,SAAA,kBAAkBA,qBAAM;;;EACtB,KAAA,WAAA;;AACpB"}

package/dist/dev/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/dev/ui/slider/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/slider/element.ts"],"sourcesContent":["import { SliderCore, SliderDataAttrs, type SliderProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getSliderCSSVars,\n  type SliderApi,\n  selectControls,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles } from '@videojs/utils/dom';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\nimport { sliderContext } from './context';\n\n/**\n * @fires value-change - Fired while the slider value changes during an interaction.\n * @fires value-commit - Fired when an interaction commits the slider value.\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class SliderElement extends UIElement {\n  static readonly tagName = 'media-slider';\n\n  static override properties = {\n    label: { type: String },\n    value: { type: Number },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n  } satisfies PropertyDeclarationMap<keyof SliderProps>;\n\n  label: Text | string = '';\n  value = SliderCore.defaultProps.value;\n  min = SliderCore.defaultProps.min;\n  max = SliderCore.defaultProps.max;\n  step = SliderCore.defaultProps.step;\n  largeStep = SliderCore.defaultProps.largeStep;\n  orientation = SliderCore.defaultProps.orientation;\n  disabled = SliderCore.defaultProps.disabled;\n  thumbAlignment = SliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new SliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n  #releaseControlsLock: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const signal = this.#disconnect.signal;\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isDisabled: () => this.disabled,\n      getPercent: () => this.#core.percentFromValue(this.value),\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-change', { detail: { value: this.value }, bubbles: true }));\n      },\n      onValueCommit: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-commit', { detail: { value: this.value }, bubbles: true }));\n      },\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      onResize: () => this.requestUpdate(),\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  #releaseControlsVisibilityLock(): void {\n    this.#releaseControlsLock?.();\n    this.#releaseControlsLock = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const state = this.#core.getSliderState(this.value);\n\n    const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));\n\n    applyStyles(this, cssVars);\n\n    // Apply state data attributes to the root element.\n    applyStateDataAttrs(this, state, SliderDataAttrs);\n\n    // Provide context to child elements (thumb, value, track, etc.).\n    this.#provider.setValue({\n      state,\n      stateAttrMap: SliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: (() => {\n        const attrs = this.#core.getAttrs(state);\n\n        return { ...attrs, 'aria-label': translateText(attrs['aria-label'], this.#i18n.value) };\n      })(),\n      thumbProps: this.#slider.thumbProps,\n    });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/slider/element.ts"],"sourcesContent":["import { SliderCore, SliderDataAttrs, type SliderProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getSliderCSSVars,\n  type SliderApi,\n  selectControls,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles } from '@videojs/utils/dom';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\nimport { sliderContext } from './context';\n\n/**\n * @fires value-change - Fired while the slider value changes during an interaction.\n * @fires value-commit - Fired when an interaction commits the slider value.\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class SliderElement extends UIElement {\n  static readonly tagName = 'media-slider';\n\n  static override properties = {\n    label: { type: String },\n    value: { type: Number },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n  } satisfies PropertyDeclarationMap<keyof SliderProps>;\n\n  label: Text | string = '';\n  value = SliderCore.defaultProps.value;\n  min = SliderCore.defaultProps.min;\n  max = SliderCore.defaultProps.max;\n  step = SliderCore.defaultProps.step;\n  largeStep = SliderCore.defaultProps.largeStep;\n  orientation = SliderCore.defaultProps.orientation;\n  disabled = SliderCore.defaultProps.disabled;\n  thumbAlignment = SliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new SliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n  #releaseControlsLock: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const signal = this.#disconnect.signal;\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isDisabled: () => this.disabled,\n      getPercent: () => this.#core.percentFromValue(this.value),\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-change', { detail: { value: this.value }, bubbles: true }));\n      },\n      onValueCommit: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-commit', { detail: { value: this.value }, bubbles: true }));\n      },\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      // Only edge alignment depends on the slider's size.\n      onResize: () => {\n        if (this.thumbAlignment === 'edge') this.requestUpdate();\n      },\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  #releaseControlsVisibilityLock(): void {\n    this.#releaseControlsLock?.();\n    this.#releaseControlsLock = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const state = this.#core.getSliderState(this.value);\n\n    const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));\n\n    applyStyles(this, cssVars);\n\n    // Apply state data attributes to the root element.\n    applyStateDataAttrs(this, state, SliderDataAttrs);\n\n    // Provide context to child elements (thumb, value, track, etc.).\n    this.#provider.setValue({\n      state,\n      stateAttrMap: SliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: (() => {\n        const attrs = this.#core.getAttrs(state);\n\n        return { ...attrs, 'aria-label': translateText(attrs['aria-label'], this.#i18n.value) };\n      })(),\n      thumbProps: this.#slider.thumbProps,\n    });\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2BA,IAAa,gBAAb,cAAmC,UAAU;;;EAepB,KAAA,QAAA;EACf,KAAA,QAAA,WAAW,aAAa;EAC1B,KAAA,MAAA,WAAW,aAAa;EACxB,KAAA,MAAA,WAAW,aAAa;EACvB,KAAA,OAAA,WAAW,aAAa;EACnB,KAAA,YAAA,WAAW,aAAa;EACtB,KAAA,cAAA,WAAW,aAAa;EAC3B,KAAA,WAAA,WAAW,aAAa;EAClB,KAAA,iBAAA,WAAW,aAAa;EAExB,KAAA,QAAA,IAAI,WAAW;EACN,KAAA,iBAAA,IAAI,iBAAiB,MAAM,eAAe,cAAc;EACjE,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAChC,KAAA,YAAA,IAAI,gBAAgB,MAAM,EAAE,SAAS,cAAc,CAAC;EAE7C,KAAA,UAAA;EACU,KAAA,cAAA;EACM,KAAA,uBAAA;;;EA/BlB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,OAAO,EAAE,MAAM,OAAO;GACtB,OAAO,EAAE,MAAM,OAAO;GACtB,KAAK,EAAE,MAAM,OAAO;GACpB,KAAK,EAAE,MAAM,OAAO;GACpB,MAAM,EAAE,MAAM,OAAO;GACrB,WAAW;IAAE,MAAM;IAAQ,WAAW;GAAa;GACnD,aAAa,EAAE,MAAM,OAAO;GAC5B,UAAU,EAAE,MAAM,QAAQ;GAC1B,gBAAgB;IAAE,MAAM;IAAQ,WAAW;GAAkB;EAC/D;;CAYA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,KAAK,cAAc,IAAI,gBAAgB;EACvC,MAAM,SAAS,KAAK,YAAY;EAEhC,KAAK,UAAU,aAAa;GAC1B,kBAAkB;GAClB,uBAAuB,KAAK,cAA2B,oBAAoB;GAC3E,sBAAsB,KAAK;GAC3B,kBAAkB,KAAK;GACvB,kBAAkB,KAAK,MAAM,iBAAiB,KAAK,KAAK;GACxD,sBAAsB,KAAK,MAAM,eAAe;GAChD,2BAA2B,KAAK,MAAM,oBAAoB;GAC1D,gBAAgB,YAAY;IAC1B,KAAK,QAAQ,KAAK,MAAM,iBAAiB,OAAO;IAChD,KAAK,cAAc,IAAI,YAAY,gBAAgB;KAAE,QAAQ,EAAE,OAAO,KAAK,MAAM;KAAG,SAAS;IAAK,CAAC,CAAC;GACtG;GACA,gBAAgB,YAAY;IAC1B,KAAK,QAAQ,KAAK,MAAM,iBAAiB,OAAO;IAChD,KAAK,cAAc,IAAI,YAAY,gBAAgB;KAAE,QAAQ,EAAE,OAAO,KAAK,MAAM;KAAG,SAAS;IAAK,CAAC,CAAC;GACtG;GACA,oBAAoB;IAClB,KAAK,yBAAyB,KAAK,eAAe,OAAO,oBAAoB,KAAK;GACpF;GACA,kBAAkB,KAAK,+BAA+B;GACtD,mBAAmB;IACjB,KAAK,cAAc,IAAI,YAAY,cAAc,EAAE,SAAS,KAAK,CAAC,CAAC;GACrE;GACA,iBAAiB;IACf,KAAK,cAAc,IAAI,YAAY,YAAY,EAAE,SAAS,KAAK,CAAC,CAAC;GACnE;GACA,gBAAgB,KAAK,WAAW,cAAc,KAAK,MAAM,0BAA0B,KAAK,WAAW,SAAS;GAE5G,gBAAgB;IACd,IAAI,KAAK,mBAAmB,QAAQ,KAAK,cAAc;GACzD;EACF,CAAC;EAED,kBAAkB,MAAM,KAAK,QAAQ,WAAW,EAAE,OAAO,CAAC;EAC1D,YAAY,MAAM,KAAK,QAAQ,SAAS;EACxC,KAAK,QAAQ,MAAM,gBAAgB,KAAK,cAAc,GAAG,EAAE,OAAO,CAAC;CACrE;CAEA,uBAAsC;EACpC,KAAK,+BAA+B;EACpC,MAAM,qBAAqB;EAC3B,KAAK,aAAa,MAAM;EACxB,KAAK,cAAc;CACrB;CAEA,kBAAiC;EAC/B,KAAK,+BAA+B;EACpC,KAAK,SAAS,QAAQ;EACtB,MAAM,gBAAgB;CACxB;CAEA,iCAAuC;EACrC,KAAK,uBAAuB;EAC5B,KAAK,uBAAuB;CAC9B;CAEA,WAA8B,UAAgC;EAC5D,MAAM,WAAW,QAAQ;EACzB,KAAK,MAAM,SAAS,IAAI;CAC1B;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,IAAI,CAAC,KAAK,SAAS;EAEnB,KAAK,MAAM,SAAS,KAAK,QAAQ,MAAM,OAAO;EAC9C,MAAM,QAAQ,KAAK,MAAM,eAAe,KAAK,KAAK;EAElD,MAAM,UAAU,iBAAiB,KAAK,QAAQ,mBAAmB,KAAK,CAAC;EAEvE,YAAY,MAAM,OAAO;EAGzB,oBAAoB,MAAM,OAAO,eAAe;EAGhD,KAAK,UAAU,SAAS;GACtB;GACA,cAAc;GACd,cAAc,KAAK,MAAM,iBAAiB,MAAM,cAAc;GAC9D,mBAAmB;IACjB,MAAM,QAAQ,KAAK,MAAM,SAAS,KAAK;IAEvC,OAAO;KAAE,GAAG;KAAO,cAAc,cAAc,MAAM,eAAe,KAAK,MAAM,KAAK;IAAE;GACxF,EAAA,CAAG;GACH,YAAY,KAAK,QAAQ;EAC3B,CAAC;CACH;AACF"}

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

@@ -4,9 +4,9 @@ import { playerContext } from "../../player/context.js";
 import { PlayerController } from "../../player/controller.js";
 import { UIElement } from "../ui-element.js";
 import { sliderContext } from "../slider/context.js";
-import { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
-import { applyElementProps, applyStateDataAttrs, createSlider, getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectControls, selectPlayback, selectTime } from "@videojs/core/dom";
-import { hasTimeRange } from "@videojs/media";
+import { SliderCSSVars, TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, createSlider, createTimeSliderSeek, getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectControls, selectPlayback, selectTime } from "@videojs/core/dom";
+import { hasTimeRange, isMediaPlaying } from "@videojs/media";
 import { ContextProvider } from "@videojs/element/context";
 import { translateText } from "@videojs/core/i18n";
 import { applyStyles } from "@videojs/utils/dom";
@@ -33,7 +33,9 @@ var TimeSliderElement = class extends UIElement {
 		this.#timeState = new PlayerController(this, playerContext, selectTime);
 		this.#bufferState = new PlayerController(this, playerContext, selectBuffer);
 		this.#playbackState = new PlayerController(this, playerContext, selectPlayback);
+		this.#seek = createTimeSliderSeek(SliderCSSVars.fill);
 		this.#i18n = new I18nController(this, i18nContext);
+		this.#cssVars = {};
 		this.#slider = null;
 		this.#disconnect = null;
 		this.#releaseControlsLock = null;
@@ -71,7 +73,9 @@ var TimeSliderElement = class extends UIElement {
 	#timeState;
 	#bufferState;
 	#playbackState;
+	#seek;
 	#i18n;
+	#cssVars;
 	#slider;
 	#disconnect;
 	#releaseControlsLock;
@@ -80,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"),
@@ -102,9 +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) media.seek(this.#core.rawValueFromPercent(percent));
+				if (percent !== dragSeekPercent) seek(percent);
+				dragSeekPercent = void 0;
 			},
 			changeThrottle: this.changeThrottle,
 			onPressStart: () => {
@@ -120,16 +138,20 @@ 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);
 		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
+		this.#seek.state.subscribe(() => this.requestUpdate(), { signal });
 		if (!this.#timeState.value) logMissingFeature(this.localName, this.#timeState.displayName);
 	}
 	disconnectedCallback() {
 		this.#releaseControlsVisibilityLock();
 		this.#resumeIfDragPaused();
+		this.#seek.destroy();
 		super.disconnectedCallback();
 		this.#disconnect?.abort();
 		this.#disconnect = null;
@@ -137,6 +159,7 @@ var TimeSliderElement = class extends UIElement {
 	destroyCallback() {
 		this.#releaseControlsVisibilityLock();
 		this.#resumeIfDragPaused();
+		this.#seek.destroy();
 		this.#slider?.destroy();
 		super.destroyCallback();
 	}
@@ -166,7 +189,11 @@ var TimeSliderElement = class extends UIElement {
 		if (!this.#slider) return;
 		const time = this.#timeState.value;
 		const buffer = this.#bufferState.value;
-		if (!time) return;
+		if (!time) {
+			this.#seek.destroy();
+			this.removeAttribute("data-playing");
+			return;
+		}
 		this.#core.setInput(this.#slider.input.current);
 		const media = {
 			...time,
@@ -177,9 +204,18 @@ var TimeSliderElement = class extends UIElement {
 		};
 		this.#core.setMedia(media);
 		const state = this.#core.getState();
-		const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(state));
+		this.#seek.update(state.seeking, state.fillPercent, this);
+		const percent = this.#seek.state.current.percent;
+		this.toggleAttribute("data-playing", isMediaPlaying(this.#playbackState.value) && !state.disabled && !state.dragging && !state.seeking && percent === void 0);
+		const fill = percent === void 0 || state.dragging || state.disabled ? state : {
+			...state,
+			fillPercent: percent
+		};
+		const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(fill));
+		const styles = Object.fromEntries(Object.entries(cssVars).filter(([name, value]) => this.#cssVars[name] !== value));
+		applyStyles(this, styles);
+		this.#cssVars = cssVars;
 		const thumbAttrs = this.#core.getAttrs(state);
-		applyStyles(this, cssVars);
 		applyStateDataAttrs(this, state, TimeSliderDataAttrs);
 		this.#provider.setValue({
 			state,