@videojs/html 10.0.0 → 10.1.0

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/thumbnail/element.js

@@ -167,9 +167,9 @@ var ThumbnailElement = class extends UIElement {
 		}
 	}
 	/**
-	* Leaving `crossOrigin` unset means "follow the media element", so thumbnails keep working on a CORS-enabled player
+	* Leaving `crossOrigin` unset means "follow the media component", so thumbnails keep working on a CORS-enabled player
 	* without a skin having to thread an attribute through. Only the `<track>` path inherits: `thumbnails` set directly
-	* may point at a host that has nothing to do with the media element.
+	* may point at a host that has nothing to do with the media component.
 	*/
 	#inheritedCrossOrigin(textTrack) {
 		return this.#externalThumbnails ? void 0 : textTrack?.thumbnailsTrack?.crossOrigin;

package/dist/dev/ui/thumbnail/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/thumbnail/element.ts"],"sourcesContent":["import {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailImage,\n  type ThumbnailResizeResult,\n  type ThumbnailImageProps,\n  type ThumbnailProps,\n} from '@videojs/core';\nimport type { ThumbnailApi } from '@videojs/core/dom';\nimport { applyElementProps, applyStateDataAttrs, createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { MediaTextTrackState } from '@videojs/media';\nimport { findComposedElement, isHTMLImageElement, listen } from '@videojs/utils/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\nconst SHADOW_CSS = `\\\n:host {\n  display: inline-block;\n  overflow: hidden;\n}\nimg,\n::slotted(img) {\n  display: block;\n}`;\n\n/**\n * Image attributes the element fills in from its own properties. Ones already on an image when it is adopted are the\n * author's and are left alone, so an `<img slot=\"thumbnail\" loading=\"lazy\">` keeps its settings inside a skin.\n */\nconst IMAGE_ATTRIBUTES = ['crossorigin', 'loading', 'fetchpriority'] as const;\n\ntype ImageAttribute = (typeof IMAGE_ATTRIBUTES)[number];\n\n/** The image the element draws when none is supplied, reachable from outside as `::part(image)`. */\nfunction createFallbackImage(): HTMLImageElement {\n  const img = document.createElement('img');\n\n  img.alt = '';\n  img.setAttribute('part', 'image');\n  img.setAttribute('aria-hidden', 'true');\n  img.setAttribute('decoding', 'async');\n\n  return img;\n}\n\n/**\n * `<media-thumbnail>` — resolves and sizes a time-based thumbnail into an image.\n *\n * The element owns `src` and `srcset` on the active image. Left empty, it draws an image of its own in its shadow root.\n * Supply an `<img>` child instead — `<media-thumbnail time=\"12\"><img alt=\"\"></media-thumbnail>` — to compose overlays\n * or loading indicators beside the image the element controls. Any `crossorigin`, `loading`, or `fetchpriority` the\n * child already carries wins over the element's own; the rest are filled in. Inside a skin, an `<img slot=\"thumbnail\">`\n * of yours replaces the one the skin carries.\n */\nexport class ThumbnailElement extends UIElement {\n  static readonly tagName = 'media-thumbnail';\n\n  static override properties = {\n    time: { type: Number },\n    crossOrigin: { type: String, attribute: 'crossorigin' },\n    loading: { type: String },\n    fetchPriority: { type: String, attribute: 'fetchpriority' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof (ThumbnailProps & ThumbnailImageProps), 'thumbnails'>>;\n\n  time = 0;\n  crossOrigin: (ThumbnailProps & ThumbnailImageProps)['crossOrigin'];\n  loading: (ThumbnailProps & ThumbnailImageProps)['loading'];\n  fetchPriority: (ThumbnailProps & ThumbnailImageProps)['fetchPriority'];\n\n  readonly #core = new ThumbnailCore();\n  readonly #shadow = this.attachShadow({ mode: 'open' });\n  readonly #fallback = createFallbackImage();\n  readonly #children = new MutationObserver(() => this.requestUpdate());\n  // An image assigned through a forwarding slot lives outside this subtree, so its\n  // attributes are watched on the image itself.\n  readonly #imageAttributes = new MutationObserver(() => this.requestUpdate());\n  readonly #textTracks = new PlayerController(this, playerContext, selectTextTrack);\n\n  #slots: AbortController | null = null;\n  #img: HTMLImageElement | null = null;\n  /** Attributes `#img` already carried when adopted, which the author owns. */\n  #authored = new Set<ImageAttribute>();\n  #thumbnails: ThumbnailImage[] = [];\n  #externalThumbnails: ThumbnailImage[] | undefined;\n  #lastTextTrack: MediaTextTrackState | undefined;\n  #api: ThumbnailApi | null = null;\n\n  constructor() {\n    super();\n\n    const style = document.createElement('style');\n\n    style.textContent = SHADOW_CSS;\n    this.#shadow.append(style, document.createElement('slot'), this.#fallback);\n  }\n\n  /**\n   * Set thumbnail images directly, bypassing the automatic `<track>` detection. When set, this takes priority over the\n   * text track path.\n   */\n  get thumbnails(): ThumbnailImage[] | undefined {\n    return this.#externalThumbnails;\n  }\n\n  set thumbnails(value: ThumbnailImage[] | undefined) {\n    this.#externalThumbnails = value;\n    this.requestUpdate();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#api = createThumbnail({\n      getContainer: () => this,\n      getImg: () => this.#img,\n      onStateChange: () => this.requestUpdate(),\n    });\n    this.#children.observe(this, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['src', 'srcset'],\n    });\n\n    // Nodes assigned to a forwarding slot are not children of this subtree, so an image slotted\n    // in later never shows up as a mutation. The slot announces it with `slotchange` instead.\n    this.#slots = new AbortController();\n    listen(this, 'slotchange', () => this.requestUpdate(), { signal: this.#slots.signal });\n\n    // Disconnecting let go of the image, and reconnecting alone schedules no update,\n    // so a moved element adopts its image and reapplies the source here.\n    this.requestUpdate();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.#adopt(null);\n    this.#children.disconnect();\n    this.#slots?.abort();\n    this.#slots = null;\n    this.#api?.destroy();\n    this.#api = null;\n  }\n\n  override destroyCallback(): void {\n    this.#api?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const textTrack = this.#textTracks.value;\n\n    // Resolve thumbnails: external prop takes priority over auto <track> path.\n    if (this.#externalThumbnails) {\n      this.#thumbnails = this.#externalThumbnails;\n    } else if (textTrack !== this.#lastTextTrack) {\n      this.#lastTextTrack = textTrack;\n      const thumbnailsTrack = textTrack?.thumbnailsTrack;\n\n      this.#thumbnails =\n        thumbnailsTrack && thumbnailsTrack.cues.length > 0\n          ? mapCuesToThumbnails(thumbnailsTrack.cues, thumbnailsTrack.src ?? undefined)\n          : [];\n    }\n\n    const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);\n    const img = findComposedElement(this, isHTMLImageElement) ?? this.#fallback;\n\n    this.#adopt(img);\n    this.#applyImageAttributes(img, textTrack);\n\n    // Track src changes via the thumbnail API.\n    this.#api?.updateSrc(thumbnail?.url);\n    this.#applySource(thumbnail?.url);\n    this.#api?.connect();\n\n    if (!thumbnail) {\n      this.#resetStyles();\n\n      const state = this.#core.getState(false, false, undefined);\n\n      applyElementProps(this, this.#core.getAttrs(state));\n      applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n      return;\n    }\n\n    const api = this.#api;\n    const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);\n\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n\n    if (api?.naturalWidth && api.naturalHeight) {\n      const constraints = api.readConstraints();\n      const result = this.#core.resize(thumbnail, api.naturalWidth, api.naturalHeight, constraints);\n\n      if (result) {\n        this.#applyResize(result);\n      }\n    }\n  }\n\n  /**\n   * Leaving `crossOrigin` unset means \"follow the media element\", so thumbnails keep working on a CORS-enabled player\n   * without a skin having to thread an attribute through. Only the `<track>` path inherits: `thumbnails` set directly\n   * may point at a host that has nothing to do with the media element.\n   */\n  #inheritedCrossOrigin(\n    textTrack: MediaTextTrackState | undefined\n  ): (ThumbnailProps & ThumbnailImageProps)['crossOrigin'] {\n    return this.#externalThumbnails ? undefined : textTrack?.thumbnailsTrack?.crossOrigin;\n  }\n\n  /** Sync image attributes from element properties, leaving the ones the author put on the image alone. */\n  #applyImageAttributes(img: HTMLImageElement, textTrack: MediaTextTrackState | undefined): void {\n    const props: Partial<Record<ImageAttribute, string | undefined>> = {\n      crossorigin: this.#core.resolveCrossOrigin(this.crossOrigin, this.#inheritedCrossOrigin(textTrack)),\n      loading: this.loading,\n      fetchpriority: this.fetchPriority,\n    };\n\n    for (const name of this.#authored) delete props[name];\n\n    applyElementProps(img, props);\n  }\n\n  #applyResize(result: ThumbnailResizeResult): void {\n    this.style.width = `${result.containerWidth}px`;\n    this.style.height = `${result.containerHeight}px`;\n\n    const imgStyle = this.#img?.style;\n    if (!imgStyle) return;\n\n    imgStyle.width = `${result.imageWidth}px`;\n    imgStyle.height = `${result.imageHeight}px`;\n    imgStyle.maxWidth = 'none';\n    imgStyle.transform =\n      result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : '';\n  }\n\n  #resetStyles(): void {\n    this.style.width = '';\n    this.style.height = '';\n\n    const imgStyle = this.#img?.style;\n    if (!imgStyle) return;\n\n    imgStyle.width = '';\n    imgStyle.height = '';\n    imgStyle.maxWidth = '';\n    imgStyle.transform = '';\n  }\n\n  #adopt(next: HTMLImageElement | null): void {\n    if (next === this.#img) return;\n\n    const previous = this.#img;\n\n    if (previous) {\n      this.#api?.disconnectImg(previous);\n      this.#resetStyles();\n      previous.removeAttribute('src');\n      previous.removeAttribute('srcset');\n\n      for (const name of IMAGE_ATTRIBUTES) {\n        if (!this.#authored.has(name)) previous.removeAttribute(name);\n      }\n    }\n\n    // Ownership is settled once, when an image becomes active: after the first\n    // sync the attributes we set would themselves look authored.\n    this.#img = next;\n    this.#authored = new Set(next ? IMAGE_ATTRIBUTES.filter((name) => next.hasAttribute(name)) : []);\n    this.#imageAttributes.disconnect();\n\n    if (next && next !== this.#fallback) {\n      this.#imageAttributes.observe(next, { attributes: true, attributeFilter: ['src', 'srcset'] });\n    }\n\n    // The fallback only occupies the shadow root while it is the active image,\n    // so a supplied image never sits beside a hidden one.\n    if (next === this.#fallback) this.#shadow.append(this.#fallback);\n    else if (next) this.#fallback.remove();\n\n    // Reset the request even when the next image will receive the same URL. A\n    // replacement image is a new download with its own lifecycle.\n    this.#api?.updateSrc(undefined);\n  }\n\n  #applySource(src: string | undefined): void {\n    const img = this.#img;\n    if (!img) return;\n\n    // A srcset candidate wins over src, so the root has to clear both parts of\n    // the source contract before applying the selected thumbnail URL.\n    img.removeAttribute('srcset');\n\n    if (!src) img.removeAttribute('src');\n    else if (img.getAttribute('src') !== src) img.setAttribute('src', src);\n  }\n}\n"],"mappings":";;;;;;;AAmBA,MAAM,aAAa;;;;;;;;;;;;;AAcnB,MAAM,mBAAmB;CAAC;CAAe;CAAW;AAAe;;AAKnE,SAAS,sBAAwC;CAC/C,MAAM,MAAM,SAAS,cAAc,KAAK;CAExC,IAAI,MAAM;CACV,IAAI,aAAa,QAAQ,OAAO;CAChC,IAAI,aAAa,eAAe,MAAM;CACtC,IAAI,aAAa,YAAY,OAAO;CAEpC,OAAO;AACT;;;;;;;;;;AAWA,IAAa,mBAAb,cAAsC,UAAU;;EACpB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,MAAM,EAAE,MAAM,OAAO;GACrB,aAAa;IAAE,MAAM;IAAQ,WAAW;GAAc;GACtD,SAAS,EAAE,MAAM,OAAO;GACxB,eAAe;IAAE,MAAM;IAAQ,WAAW;GAAgB;EAC5D;;CAOA;CACA;CACA;CACA;CAGA;CACA;CAEA;CACA;;CAEA;CACA;CACA;CACA;CACA;CAEA,cAAc;EACZ,MAAM;EAxBD,KAAA,OAAA;EAKU,KAAA,QAAA,IAAI,cAAc;EAChB,KAAA,UAAA,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;EAChC,KAAA,YAAA,oBAAoB;EACpB,KAAA,YAAA,IAAI,uBAAuB,KAAK,cAAc,CAAC;EAGxC,KAAA,mBAAA,IAAI,uBAAuB,KAAK,cAAc,CAAC;EACpD,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,eAAe;EAE/C,KAAA,SAAA;EACD,KAAA,OAAA;EAEpB,KAAA,4BAAA,IAAI,IAAoB;EACJ,KAAA,cAAA,CAAC;EAGL,KAAA,OAAA;EAK1B,MAAM,QAAQ,SAAS,cAAc,OAAO;EAE5C,MAAM,cAAc;EACpB,KAAK,QAAQ,OAAO,OAAO,SAAS,cAAc,MAAM,GAAG,KAAK,SAAS;CAC3E;;;;;CAMA,IAAI,aAA2C;EAC7C,OAAO,KAAK;CACd;CAEA,IAAI,WAAW,OAAqC;EAClD,KAAK,sBAAsB;EAC3B,KAAK,cAAc;CACrB;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,KAAK,OAAO,gBAAgB;GAC1B,oBAAoB;GACpB,cAAc,KAAK;GACnB,qBAAqB,KAAK,cAAc;EAC1C,CAAC;EACD,KAAK,UAAU,QAAQ,MAAM;GAC3B,WAAW;GACX,SAAS;GACT,YAAY;GACZ,iBAAiB,CAAC,OAAO,QAAQ;EACnC,CAAC;EAID,KAAK,SAAS,IAAI,gBAAgB;EAClC,OAAO,MAAM,oBAAoB,KAAK,cAAc,GAAG,EAAE,QAAQ,KAAK,OAAO,OAAO,CAAC;EAIrF,KAAK,cAAc;CACrB;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAE3B,KAAK,OAAO,IAAI;EAChB,KAAK,UAAU,WAAW;EAC1B,KAAK,QAAQ,MAAM;EACnB,KAAK,SAAS;EACd,KAAK,MAAM,QAAQ;EACnB,KAAK,OAAO;CACd;CAEA,kBAAiC;EAC/B,KAAK,MAAM,QAAQ;EACnB,MAAM,gBAAgB;CACxB;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,YAAY,KAAK,YAAY;EAGnC,IAAI,KAAK,qBACP,KAAK,cAAc,KAAK;OACnB,IAAI,cAAc,KAAK,gBAAgB;GAC5C,KAAK,iBAAiB;GACtB,MAAM,kBAAkB,WAAW;GAEnC,KAAK,cACH,mBAAmB,gBAAgB,KAAK,SAAS,IAC7C,oBAAoB,gBAAgB,MAAM,gBAAgB,OAAO,KAAA,CAAS,IAC1E,CAAC;EACT;EAEA,MAAM,YAAY,KAAK,MAAM,oBAAoB,KAAK,aAAa,KAAK,IAAI;EAC5E,MAAM,MAAM,oBAAoB,MAAM,kBAAkB,KAAK,KAAK;EAElE,KAAK,OAAO,GAAG;EACf,KAAK,sBAAsB,KAAK,SAAS;EAGzC,KAAK,MAAM,UAAU,WAAW,GAAG;EACnC,KAAK,aAAa,WAAW,GAAG;EAChC,KAAK,MAAM,QAAQ;EAEnB,IAAI,CAAC,WAAW;GACd,KAAK,aAAa;GAElB,MAAM,QAAQ,KAAK,MAAM,SAAS,OAAO,OAAO,KAAA,CAAS;GAEzD,kBAAkB,MAAM,KAAK,MAAM,SAAS,KAAK,CAAC;GAClD,oBAAoB,MAAM,OAAO,kBAAkB;GACnD;EACF;EAEA,MAAM,MAAM,KAAK;EACjB,MAAM,QAAQ,KAAK,MAAM,SAAS,KAAK,WAAW,OAAO,KAAK,SAAS,OAAO,SAAS;EAEvF,kBAAkB,MAAM,KAAK,MAAM,SAAS,KAAK,CAAC;EAClD,oBAAoB,MAAM,OAAO,kBAAkB;EAEnD,IAAI,KAAK,gBAAgB,IAAI,eAAe;GAC1C,MAAM,cAAc,IAAI,gBAAgB;GACxC,MAAM,SAAS,KAAK,MAAM,OAAO,WAAW,IAAI,cAAc,IAAI,eAAe,WAAW;GAE5F,IAAI,QACF,KAAK,aAAa,MAAM;EAE5B;CACF;;;;;;CAOA,sBACE,WACuD;EACvD,OAAO,KAAK,sBAAsB,KAAA,IAAY,WAAW,iBAAiB;CAC5E;;CAGA,sBAAsB,KAAuB,WAAkD;EAC7F,MAAM,QAA6D;GACjE,aAAa,KAAK,MAAM,mBAAmB,KAAK,aAAa,KAAK,sBAAsB,SAAS,CAAC;GAClG,SAAS,KAAK;GACd,eAAe,KAAK;EACtB;EAEA,KAAK,MAAM,QAAQ,KAAK,WAAW,OAAO,MAAM;EAEhD,kBAAkB,KAAK,KAAK;CAC9B;CAEA,aAAa,QAAqC;EAChD,KAAK,MAAM,QAAQ,GAAG,OAAO,eAAe;EAC5C,KAAK,MAAM,SAAS,GAAG,OAAO,gBAAgB;EAE9C,MAAM,WAAW,KAAK,MAAM;EAC5B,IAAI,CAAC,UAAU;EAEf,SAAS,QAAQ,GAAG,OAAO,WAAW;EACtC,SAAS,SAAS,GAAG,OAAO,YAAY;EACxC,SAAS,WAAW;EACpB,SAAS,YACP,OAAO,WAAW,OAAO,UAAU,cAAc,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO;CACjG;CAEA,eAAqB;EACnB,KAAK,MAAM,QAAQ;EACnB,KAAK,MAAM,SAAS;EAEpB,MAAM,WAAW,KAAK,MAAM;EAC5B,IAAI,CAAC,UAAU;EAEf,SAAS,QAAQ;EACjB,SAAS,SAAS;EAClB,SAAS,WAAW;EACpB,SAAS,YAAY;CACvB;CAEA,OAAO,MAAqC;EAC1C,IAAI,SAAS,KAAK,MAAM;EAExB,MAAM,WAAW,KAAK;EAEtB,IAAI,UAAU;GACZ,KAAK,MAAM,cAAc,QAAQ;GACjC,KAAK,aAAa;GAClB,SAAS,gBAAgB,KAAK;GAC9B,SAAS,gBAAgB,QAAQ;GAEjC,KAAK,MAAM,QAAQ,kBACjB,IAAI,CAAC,KAAK,UAAU,IAAI,IAAI,GAAG,SAAS,gBAAgB,IAAI;EAEhE;EAIA,KAAK,OAAO;EACZ,KAAK,YAAY,IAAI,IAAI,OAAO,iBAAiB,QAAQ,SAAS,KAAK,aAAa,IAAI,CAAC,IAAI,CAAC,CAAC;EAC/F,KAAK,iBAAiB,WAAW;EAEjC,IAAI,QAAQ,SAAS,KAAK,WACxB,KAAK,iBAAiB,QAAQ,MAAM;GAAE,YAAY;GAAM,iBAAiB,CAAC,OAAO,QAAQ;EAAE,CAAC;EAK9F,IAAI,SAAS,KAAK,WAAW,KAAK,QAAQ,OAAO,KAAK,SAAS;OAC1D,IAAI,MAAM,KAAK,UAAU,OAAO;EAIrC,KAAK,MAAM,UAAU,KAAA,CAAS;CAChC;CAEA,aAAa,KAA+B;EAC1C,MAAM,MAAM,KAAK;EACjB,IAAI,CAAC,KAAK;EAIV,IAAI,gBAAgB,QAAQ;EAE5B,IAAI,CAAC,KAAK,IAAI,gBAAgB,KAAK;OAC9B,IAAI,IAAI,aAAa,KAAK,MAAM,KAAK,IAAI,aAAa,OAAO,GAAG;CACvE;AACF"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/thumbnail/element.ts"],"sourcesContent":["import {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailImage,\n  type ThumbnailResizeResult,\n  type ThumbnailImageProps,\n  type ThumbnailProps,\n} from '@videojs/core';\nimport type { ThumbnailApi } from '@videojs/core/dom';\nimport { applyElementProps, applyStateDataAttrs, createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { MediaTextTrackState } from '@videojs/media';\nimport { findComposedElement, isHTMLImageElement, listen } from '@videojs/utils/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\nconst SHADOW_CSS = `\\\n:host {\n  display: inline-block;\n  overflow: hidden;\n}\nimg,\n::slotted(img) {\n  display: block;\n}`;\n\n/**\n * Image attributes the element fills in from its own properties. Ones already on an image when it is adopted are the\n * author's and are left alone, so an `<img slot=\"thumbnail\" loading=\"lazy\">` keeps its settings inside a skin.\n */\nconst IMAGE_ATTRIBUTES = ['crossorigin', 'loading', 'fetchpriority'] as const;\n\ntype ImageAttribute = (typeof IMAGE_ATTRIBUTES)[number];\n\n/** The image the element draws when none is supplied, reachable from outside as `::part(image)`. */\nfunction createFallbackImage(): HTMLImageElement {\n  const img = document.createElement('img');\n\n  img.alt = '';\n  img.setAttribute('part', 'image');\n  img.setAttribute('aria-hidden', 'true');\n  img.setAttribute('decoding', 'async');\n\n  return img;\n}\n\n/**\n * `<media-thumbnail>` — resolves and sizes a time-based thumbnail into an image.\n *\n * The element owns `src` and `srcset` on the active image. Left empty, it draws an image of its own in its shadow root.\n * Supply an `<img>` child instead — `<media-thumbnail time=\"12\"><img alt=\"\"></media-thumbnail>` — to compose overlays\n * or loading indicators beside the image the element controls. Any `crossorigin`, `loading`, or `fetchpriority` the\n * child already carries wins over the element's own; the rest are filled in. Inside a skin, an `<img slot=\"thumbnail\">`\n * of yours replaces the one the skin carries.\n */\nexport class ThumbnailElement extends UIElement {\n  static readonly tagName = 'media-thumbnail';\n\n  static override properties = {\n    time: { type: Number },\n    crossOrigin: { type: String, attribute: 'crossorigin' },\n    loading: { type: String },\n    fetchPriority: { type: String, attribute: 'fetchpriority' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof (ThumbnailProps & ThumbnailImageProps), 'thumbnails'>>;\n\n  time = 0;\n  crossOrigin: (ThumbnailProps & ThumbnailImageProps)['crossOrigin'];\n  loading: (ThumbnailProps & ThumbnailImageProps)['loading'];\n  fetchPriority: (ThumbnailProps & ThumbnailImageProps)['fetchPriority'];\n\n  readonly #core = new ThumbnailCore();\n  readonly #shadow = this.attachShadow({ mode: 'open' });\n  readonly #fallback = createFallbackImage();\n  readonly #children = new MutationObserver(() => this.requestUpdate());\n  // An image assigned through a forwarding slot lives outside this subtree, so its\n  // attributes are watched on the image itself.\n  readonly #imageAttributes = new MutationObserver(() => this.requestUpdate());\n  readonly #textTracks = new PlayerController(this, playerContext, selectTextTrack);\n\n  #slots: AbortController | null = null;\n  #img: HTMLImageElement | null = null;\n  /** Attributes `#img` already carried when adopted, which the author owns. */\n  #authored = new Set<ImageAttribute>();\n  #thumbnails: ThumbnailImage[] = [];\n  #externalThumbnails: ThumbnailImage[] | undefined;\n  #lastTextTrack: MediaTextTrackState | undefined;\n  #api: ThumbnailApi | null = null;\n\n  constructor() {\n    super();\n\n    const style = document.createElement('style');\n\n    style.textContent = SHADOW_CSS;\n    this.#shadow.append(style, document.createElement('slot'), this.#fallback);\n  }\n\n  /**\n   * Set thumbnail images directly, bypassing the automatic `<track>` detection. When set, this takes priority over the\n   * text track path.\n   */\n  get thumbnails(): ThumbnailImage[] | undefined {\n    return this.#externalThumbnails;\n  }\n\n  set thumbnails(value: ThumbnailImage[] | undefined) {\n    this.#externalThumbnails = value;\n    this.requestUpdate();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#api = createThumbnail({\n      getContainer: () => this,\n      getImg: () => this.#img,\n      onStateChange: () => this.requestUpdate(),\n    });\n    this.#children.observe(this, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['src', 'srcset'],\n    });\n\n    // Nodes assigned to a forwarding slot are not children of this subtree, so an image slotted\n    // in later never shows up as a mutation. The slot announces it with `slotchange` instead.\n    this.#slots = new AbortController();\n    listen(this, 'slotchange', () => this.requestUpdate(), { signal: this.#slots.signal });\n\n    // Disconnecting let go of the image, and reconnecting alone schedules no update,\n    // so a moved element adopts its image and reapplies the source here.\n    this.requestUpdate();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.#adopt(null);\n    this.#children.disconnect();\n    this.#slots?.abort();\n    this.#slots = null;\n    this.#api?.destroy();\n    this.#api = null;\n  }\n\n  override destroyCallback(): void {\n    this.#api?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const textTrack = this.#textTracks.value;\n\n    // Resolve thumbnails: external prop takes priority over auto <track> path.\n    if (this.#externalThumbnails) {\n      this.#thumbnails = this.#externalThumbnails;\n    } else if (textTrack !== this.#lastTextTrack) {\n      this.#lastTextTrack = textTrack;\n      const thumbnailsTrack = textTrack?.thumbnailsTrack;\n\n      this.#thumbnails =\n        thumbnailsTrack && thumbnailsTrack.cues.length > 0\n          ? mapCuesToThumbnails(thumbnailsTrack.cues, thumbnailsTrack.src ?? undefined)\n          : [];\n    }\n\n    const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);\n    const img = findComposedElement(this, isHTMLImageElement) ?? this.#fallback;\n\n    this.#adopt(img);\n    this.#applyImageAttributes(img, textTrack);\n\n    // Track src changes via the thumbnail API.\n    this.#api?.updateSrc(thumbnail?.url);\n    this.#applySource(thumbnail?.url);\n    this.#api?.connect();\n\n    if (!thumbnail) {\n      this.#resetStyles();\n\n      const state = this.#core.getState(false, false, undefined);\n\n      applyElementProps(this, this.#core.getAttrs(state));\n      applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n      return;\n    }\n\n    const api = this.#api;\n    const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);\n\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n\n    if (api?.naturalWidth && api.naturalHeight) {\n      const constraints = api.readConstraints();\n      const result = this.#core.resize(thumbnail, api.naturalWidth, api.naturalHeight, constraints);\n\n      if (result) {\n        this.#applyResize(result);\n      }\n    }\n  }\n\n  /**\n   * Leaving `crossOrigin` unset means \"follow the media component\", so thumbnails keep working on a CORS-enabled player\n   * without a skin having to thread an attribute through. Only the `<track>` path inherits: `thumbnails` set directly\n   * may point at a host that has nothing to do with the media component.\n   */\n  #inheritedCrossOrigin(\n    textTrack: MediaTextTrackState | undefined\n  ): (ThumbnailProps & ThumbnailImageProps)['crossOrigin'] {\n    return this.#externalThumbnails ? undefined : textTrack?.thumbnailsTrack?.crossOrigin;\n  }\n\n  /** Sync image attributes from element properties, leaving the ones the author put on the image alone. */\n  #applyImageAttributes(img: HTMLImageElement, textTrack: MediaTextTrackState | undefined): void {\n    const props: Partial<Record<ImageAttribute, string | undefined>> = {\n      crossorigin: this.#core.resolveCrossOrigin(this.crossOrigin, this.#inheritedCrossOrigin(textTrack)),\n      loading: this.loading,\n      fetchpriority: this.fetchPriority,\n    };\n\n    for (const name of this.#authored) delete props[name];\n\n    applyElementProps(img, props);\n  }\n\n  #applyResize(result: ThumbnailResizeResult): void {\n    this.style.width = `${result.containerWidth}px`;\n    this.style.height = `${result.containerHeight}px`;\n\n    const imgStyle = this.#img?.style;\n    if (!imgStyle) return;\n\n    imgStyle.width = `${result.imageWidth}px`;\n    imgStyle.height = `${result.imageHeight}px`;\n    imgStyle.maxWidth = 'none';\n    imgStyle.transform =\n      result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : '';\n  }\n\n  #resetStyles(): void {\n    this.style.width = '';\n    this.style.height = '';\n\n    const imgStyle = this.#img?.style;\n    if (!imgStyle) return;\n\n    imgStyle.width = '';\n    imgStyle.height = '';\n    imgStyle.maxWidth = '';\n    imgStyle.transform = '';\n  }\n\n  #adopt(next: HTMLImageElement | null): void {\n    if (next === this.#img) return;\n\n    const previous = this.#img;\n\n    if (previous) {\n      this.#api?.disconnectImg(previous);\n      this.#resetStyles();\n      previous.removeAttribute('src');\n      previous.removeAttribute('srcset');\n\n      for (const name of IMAGE_ATTRIBUTES) {\n        if (!this.#authored.has(name)) previous.removeAttribute(name);\n      }\n    }\n\n    // Ownership is settled once, when an image becomes active: after the first\n    // sync the attributes we set would themselves look authored.\n    this.#img = next;\n    this.#authored = new Set(next ? IMAGE_ATTRIBUTES.filter((name) => next.hasAttribute(name)) : []);\n    this.#imageAttributes.disconnect();\n\n    if (next && next !== this.#fallback) {\n      this.#imageAttributes.observe(next, { attributes: true, attributeFilter: ['src', 'srcset'] });\n    }\n\n    // The fallback only occupies the shadow root while it is the active image,\n    // so a supplied image never sits beside a hidden one.\n    if (next === this.#fallback) this.#shadow.append(this.#fallback);\n    else if (next) this.#fallback.remove();\n\n    // Reset the request even when the next image will receive the same URL. A\n    // replacement image is a new download with its own lifecycle.\n    this.#api?.updateSrc(undefined);\n  }\n\n  #applySource(src: string | undefined): void {\n    const img = this.#img;\n    if (!img) return;\n\n    // A srcset candidate wins over src, so the root has to clear both parts of\n    // the source contract before applying the selected thumbnail URL.\n    img.removeAttribute('srcset');\n\n    if (!src) img.removeAttribute('src');\n    else if (img.getAttribute('src') !== src) img.setAttribute('src', src);\n  }\n}\n"],"mappings":"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"}

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;
@@ -104,7 +108,11 @@ var TimeSliderElement = class extends UIElement {
 			getLargeStepPercent: () => this.#core.getLargeStepPercent(),
 			onValueCommit: (percent) => {
 				const media = this.#timeState.value;
-				if (media) media.seek(this.#core.rawValueFromPercent(percent));
+				if (media) {
+					const time = this.#core.rawValueFromPercent(percent);
+					this.#seek.seek(percent);
+					media.seek(time);
+				}
 			},
 			changeThrottle: this.changeThrottle,
 			onPressStart: () => {
@@ -125,11 +133,13 @@ var TimeSliderElement = class extends UIElement {
 		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 +147,7 @@ var TimeSliderElement = class extends UIElement {
 	destroyCallback() {
 		this.#releaseControlsVisibilityLock();
 		this.#resumeIfDragPaused();
+		this.#seek.destroy();
 		this.#slider?.destroy();
 		super.destroyCallback();
 	}
@@ -166,7 +177,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 +192,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,

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

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/time-slider/element.ts"],"sourcesContent":["import { TimeSliderCore, TimeSliderDataAttrs, type TimeSliderProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getTimeSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectBuffer,\n  selectControls,\n  selectPlayback,\n  selectTime,\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 { hasTimeRange } from '@videojs/media';\nimport { applyStyles } from '@videojs/utils/dom';\nimport { formatTime } from '@videojs/utils/time';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/**\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class TimeSliderElement extends UIElement {\n  static readonly tagName = 'media-time-slider';\n\n  static override properties = {\n    label: { type: String },\n    changeThrottle: { type: Number, attribute: 'change-throttle' },\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    pauseOnDrag: { type: Boolean, attribute: 'pause-on-drag' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof TimeSliderProps, 'value' | 'min' | 'max'>>;\n\n  label: Text | string = '';\n  changeThrottle = TimeSliderCore.defaultProps.changeThrottle;\n  step = TimeSliderCore.defaultProps.step;\n  largeStep = TimeSliderCore.defaultProps.largeStep;\n  orientation = TimeSliderCore.defaultProps.orientation;\n  disabled = TimeSliderCore.defaultProps.disabled;\n  thumbAlignment = TimeSliderCore.defaultProps.thumbAlignment;\n  pauseOnDrag = TimeSliderCore.defaultProps.pauseOnDrag;\n\n  readonly #core = new TimeSliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #timeState = new PlayerController(this, playerContext, selectTime);\n  readonly #bufferState = new PlayerController(this, playerContext, selectBuffer);\n  readonly #playbackState = new PlayerController(this, playerContext, selectPlayback);\n  readonly #i18n = new I18nController(this, i18nContext);\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: () => {\n        const time = this.#timeState.value;\n        const buffer = this.#bufferState.value;\n\n        // `bufferFeature` is optional: compositions that omit it still get a working slider, with an empty buffer.\n        return this.disabled || !time || !hasTimeRange({ ...time, ...(buffer ?? { buffered: [], seekable: [] }) });\n      },\n      getPercent: () => {\n        const media = this.#timeState.value;\n        if (!media) return 0;\n\n        return this.#core.percentFromValue(media.currentTime);\n      },\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueCommit: (percent) => {\n        const media = this.#timeState.value;\n\n        if (media) media.seek(this.#core.rawValueFromPercent(percent));\n      },\n      changeThrottle: this.changeThrottle,\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.#core.startDrag(this.#playbackState.value);\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.#core.endDrag(this.#playbackState.value);\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    if (__DEV__ && !this.#timeState.value) {\n      logMissingFeature(this.localName, this.#timeState.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#resumeIfDragPaused();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#resumeIfDragPaused();\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  // createSlider's destroy() does not fire onDragEnd, so a teardown mid-drag\n  // would leave playback paused. Called from both disconnect and destroy paths\n  // before super so the PlayerController is still attached.\n  #resumeIfDragPaused(): void {\n    this.#core.endDrag(this.#playbackState.value);\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({\n      label: this.label,\n      changeThrottle: this.changeThrottle,\n      step: this.step,\n      largeStep: this.largeStep,\n      orientation: this.orientation,\n      disabled: this.disabled,\n      thumbAlignment: this.thumbAlignment,\n      pauseOnDrag: this.pauseOnDrag,\n    });\n    this.#core.setFormatLocale(this.#i18n.locale);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    const time = this.#timeState.value;\n    const buffer = this.#bufferState.value;\n\n    if (!time) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const media = { ...time, ...(buffer ?? { buffered: [], seekable: [] }) };\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(state));\n    const thumbAttrs = this.#core.getAttrs(state);\n\n    applyStyles(this, cssVars);\n\n    // Domain-specific data attributes on root (includes data-seeking).\n    applyStateDataAttrs(this, state, TimeSliderDataAttrs);\n\n    // Provide context to child elements with base slider data attrs.\n    this.#provider.setValue({\n      state,\n      stateAttrMap: TimeSliderDataAttrs,\n      pointerValue: this.#core.rawValueFromPercent(state.pointerPercent),\n      thumbAttrs: {\n        ...thumbAttrs,\n        'aria-label': translateText(thumbAttrs['aria-label'], this.#i18n.value),\n        'aria-valuetext': translateText(\n          thumbAttrs['aria-valuetext'],\n          this.#i18n.value,\n          this.#core.getValueTextParams(state)\n        ),\n      },\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => formatTime(value, state.duration, { locale: this.#i18n.locale }),\n    });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/time-slider/element.ts"],"sourcesContent":["import { SliderCSSVars, TimeSliderCore, TimeSliderDataAttrs, type TimeSliderProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  createTimeSliderSeek,\n  getTimeSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectBuffer,\n  selectControls,\n  selectPlayback,\n  selectTime,\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 { hasTimeRange, isMediaPlaying } from '@videojs/media';\nimport { applyStyles } from '@videojs/utils/dom';\nimport { formatTime } from '@videojs/utils/time';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/**\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class TimeSliderElement extends UIElement {\n  static readonly tagName = 'media-time-slider';\n\n  static override properties = {\n    label: { type: String },\n    changeThrottle: { type: Number, attribute: 'change-throttle' },\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    pauseOnDrag: { type: Boolean, attribute: 'pause-on-drag' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof TimeSliderProps, 'value' | 'min' | 'max'>>;\n\n  label: Text | string = '';\n  changeThrottle = TimeSliderCore.defaultProps.changeThrottle;\n  step = TimeSliderCore.defaultProps.step;\n  largeStep = TimeSliderCore.defaultProps.largeStep;\n  orientation = TimeSliderCore.defaultProps.orientation;\n  disabled = TimeSliderCore.defaultProps.disabled;\n  thumbAlignment = TimeSliderCore.defaultProps.thumbAlignment;\n  pauseOnDrag = TimeSliderCore.defaultProps.pauseOnDrag;\n\n  readonly #core = new TimeSliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #timeState = new PlayerController(this, playerContext, selectTime);\n  readonly #bufferState = new PlayerController(this, playerContext, selectBuffer);\n  readonly #playbackState = new PlayerController(this, playerContext, selectPlayback);\n  readonly #seek = createTimeSliderSeek(SliderCSSVars.fill);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  #cssVars: Record<string, string> = {};\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: () => {\n        const time = this.#timeState.value;\n        const buffer = this.#bufferState.value;\n\n        // `bufferFeature` is optional: compositions that omit it still get a working slider, with an empty buffer.\n        return this.disabled || !time || !hasTimeRange({ ...time, ...(buffer ?? { buffered: [], seekable: [] }) });\n      },\n      getPercent: () => {\n        const media = this.#timeState.value;\n        if (!media) return 0;\n\n        return this.#core.percentFromValue(media.currentTime);\n      },\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueCommit: (percent) => {\n        const media = this.#timeState.value;\n\n        if (media) {\n          const time = this.#core.rawValueFromPercent(percent);\n\n          this.#seek.seek(percent);\n          media.seek(time);\n        }\n      },\n      changeThrottle: this.changeThrottle,\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.#core.startDrag(this.#playbackState.value);\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.#core.endDrag(this.#playbackState.value);\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    this.#seek.state.subscribe(() => this.requestUpdate(), { signal });\n\n    if (__DEV__ && !this.#timeState.value) {\n      logMissingFeature(this.localName, this.#timeState.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#resumeIfDragPaused();\n    this.#seek.destroy();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#resumeIfDragPaused();\n    this.#seek.destroy();\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  // createSlider's destroy() does not fire onDragEnd, so a teardown mid-drag\n  // would leave playback paused. Called from both disconnect and destroy paths\n  // before super so the PlayerController is still attached.\n  #resumeIfDragPaused(): void {\n    this.#core.endDrag(this.#playbackState.value);\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({\n      label: this.label,\n      changeThrottle: this.changeThrottle,\n      step: this.step,\n      largeStep: this.largeStep,\n      orientation: this.orientation,\n      disabled: this.disabled,\n      thumbAlignment: this.thumbAlignment,\n      pauseOnDrag: this.pauseOnDrag,\n    });\n    this.#core.setFormatLocale(this.#i18n.locale);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    const time = this.#timeState.value;\n    const buffer = this.#bufferState.value;\n\n    if (!time) {\n      this.#seek.destroy();\n      this.removeAttribute('data-playing');\n      return;\n    }\n\n    this.#core.setInput(this.#slider.input.current);\n    const media = { ...time, ...(buffer ?? { buffered: [], seekable: [] }) };\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    this.#seek.update(state.seeking, state.fillPercent, this);\n    const percent = this.#seek.state.current.percent;\n\n    this.toggleAttribute(\n      'data-playing',\n      isMediaPlaying(this.#playbackState.value) &&\n        !state.disabled &&\n        !state.dragging &&\n        !state.seeking &&\n        percent === undefined\n    );\n\n    const fill = percent === undefined || state.dragging || state.disabled ? state : { ...state, fillPercent: percent };\n    const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(fill));\n    const styles = Object.fromEntries(Object.entries(cssVars).filter(([name, value]) => this.#cssVars[name] !== value));\n\n    applyStyles(this, styles);\n    this.#cssVars = cssVars;\n\n    const thumbAttrs = this.#core.getAttrs(state);\n\n    // Domain-specific data attributes on root (includes data-seeking).\n    applyStateDataAttrs(this, state, TimeSliderDataAttrs);\n\n    // Provide context to child elements with base slider data attrs.\n    this.#provider.setValue({\n      state,\n      stateAttrMap: TimeSliderDataAttrs,\n      pointerValue: this.#core.rawValueFromPercent(state.pointerPercent),\n      thumbAttrs: {\n        ...thumbAttrs,\n        'aria-label': translateText(thumbAttrs['aria-label'], this.#i18n.value),\n        'aria-valuetext': translateText(\n          thumbAttrs['aria-valuetext'],\n          this.#i18n.value,\n          this.#core.getValueTextParams(state)\n        ),\n      },\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => formatTime(value, state.duration, { locale: this.#i18n.locale }),\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/dev/version.js

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

package/docs/README.md

@@ -1,6 +1,6 @@
 # @videojs/html documentation
 
-Bundled markdown documentation for `@videojs/html` v10.0.0.
+Bundled markdown documentation for `@videojs/html` v10.1.0.
 
 Start at [`./llms.txt`](./llms.txt) — it's the structured index of every page in this directory.
 

package/docs/guides/architecture.md

@@ -70,7 +70,7 @@ Media components are the components that actually display your media. They’re
 
 Media components can be format specific (HLS, DASH), service specific (YouTube, Vimeo, Mux), or use case specific (background video).
 
-Media elements are discovered automatically. Plain `<video>` and `<audio>` elements are found via a `querySelector`. Custom media elements like `<hlsjs-video>` register themselves after you import their registration entry point.
+Media components are discovered automatically. Plain `<video>` and `<audio>` elements are found via a `querySelector`. Media components like `<hlsjs-video>` register themselves after you import their registration entry point.
 
 ```html
 <video-player>
@@ -104,7 +104,7 @@ An extension can provide behavior that a UI component controls: `<google-cast>`
 
 The default presets are `@videojs/html/video` and `@videojs/html/audio`, covering the baseline set of controls you’d expect from the HTML `<video>` and `<audio>` tags.
 
-Beyond the defaults, presets target more specific use cases. The `/background` preset combines a media element with autoplay, mute, and loop built in, a skin with no controls, and only the features needed to power it.
+Beyond the defaults, presets target more specific use cases. The `/background` preset combines a media component with autoplay, mute, and loop built in, a skin with no controls, and only the features needed to power it.
 
 You can use it from the `@videojs/html/background/*` registration entry points.
 
@@ -117,4 +117,4 @@ You can use it from the `@videojs/html/background/*` registration entry points.
 - [Installation](./installation.md): Install Video.js packages and build an accessible, customizable video player with composable controls
 - [Features](./features.md): The state and actions each feature adds to the player
 - [Skins](./skins.md): Packaged player designs that include both UI components and their styles.
-- [Presets](./presets.md): Pre-packaged player configurations that bundle state management, skins, and media elements for specific use cases.
+- [Presets](./presets.md): Pre-packaged player configurations that bundle state management, skins, and media components for specific use cases.