@videojs/html 10.0.0-alpha.4 → 10.0.0-alpha.6

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

@@ -1 +1 @@
-{"version":3,"file":"time-element.js","names":["#core","#state","#signSpan","#textNode"],"sources":["../../../../src/ui/time/time-element.ts"],"sourcesContent":["import { TimeCore, TimeDataAttrs, type TimeType } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature, selectTime } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class TimeElement extends MediaElement {\n  static readonly tagName = 'media-time';\n\n  static override properties = {\n    type: { type: String },\n    negativeSign: { type: String, attribute: 'negative-sign' },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<keyof TimeCore.Props>;\n\n  type: TimeType = TimeCore.defaultProps.type;\n  negativeSign = TimeCore.defaultProps.negativeSign;\n  label = TimeCore.defaultProps.label;\n\n  readonly #core = new TimeCore();\n  readonly #state = new PlayerController(this, playerContext, selectTime);\n\n  readonly #signSpan = document.createElement('span');\n  readonly #textNode = document.createTextNode('');\n\n  constructor() {\n    super();\n    this.#signSpan.setAttribute('aria-hidden', 'true');\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(TimeElement.tagName, 'time');\n    }\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    const media = this.#state.value;\n\n    if (!media) return;\n\n    const state = this.#core.getState(media);\n\n    if (state.negative) {\n      this.#signSpan.textContent = this.negativeSign;\n      this.#textNode.textContent = state.text;\n\n      // Append elements if not already in DOM\n      if (!this.#signSpan.parentNode) {\n        this.textContent = '';\n        this.appendChild(this.#signSpan);\n        this.appendChild(this.#textNode);\n      }\n    } else {\n      // Remove sign span if present, use direct text\n      if (this.#signSpan.parentNode) {\n        this.#signSpan.remove();\n        this.#textNode.remove();\n      }\n      this.textContent = state.text;\n    }\n\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, TimeDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,cAAb,MAAa,oBAAoB,aAAa;;iBAClB;;;oBAEG;GAC3B,MAAM,EAAE,MAAM,QAAQ;GACtB,cAAc;IAAE,MAAM;IAAQ,WAAW;IAAiB;GAC1D,OAAO,EAAE,MAAM,QAAQ;GACxB;;CAMD,CAASA,OAAQ,IAAI,UAAU;CAC/B,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,WAAW;CAEvE,CAASC,WAAY,SAAS,cAAc,OAAO;CACnD,CAASC,WAAY,SAAS,eAAe,GAAG;CAEhD,cAAc;AACZ,SAAO;cAXQ,SAAS,aAAa;sBACxB,SAAS,aAAa;eAC7B,SAAS,aAAa;AAU5B,QAAKD,SAAU,aAAa,eAAe,OAAO;;CAGpD,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,MAAKD,MAAO,MAC1B,mBAAkB,YAAY,SAAS,OAAO;;CAIlD,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAKD,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAKC,MAAO;AAE1B,MAAI,CAAC,MAAO;EAEZ,MAAM,QAAQ,MAAKD,KAAM,SAAS,MAAM;AAExC,MAAI,MAAM,UAAU;AAClB,SAAKE,SAAU,cAAc,KAAK;AAClC,SAAKC,SAAU,cAAc,MAAM;AAGnC,OAAI,CAAC,MAAKD,SAAU,YAAY;AAC9B,SAAK,cAAc;AACnB,SAAK,YAAY,MAAKA,SAAU;AAChC,SAAK,YAAY,MAAKC,SAAU;;SAE7B;AAEL,OAAI,MAAKD,SAAU,YAAY;AAC7B,UAAKA,SAAU,QAAQ;AACvB,UAAKC,SAAU,QAAQ;;AAEzB,QAAK,cAAc,MAAM;;AAG3B,oBAAkB,MAAM,MAAKH,KAAM,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,cAAc"}
+{"version":3,"file":"time-element.js","names":["#core","#state","#signSpan","#textNode"],"sources":["../../../../src/ui/time/time-element.ts"],"sourcesContent":["import { TimeCore, TimeDataAttrs, type TimeType } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature, selectTime } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class TimeElement extends MediaElement {\n  static readonly tagName = 'media-time';\n\n  static override properties = {\n    type: { type: String },\n    negativeSign: { type: String, attribute: 'negative-sign' },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<keyof TimeCore.Props>;\n\n  type: TimeType = TimeCore.defaultProps.type;\n  negativeSign = TimeCore.defaultProps.negativeSign;\n  label = TimeCore.defaultProps.label;\n\n  readonly #core = new TimeCore();\n  readonly #state = new PlayerController(this, playerContext, selectTime);\n\n  readonly #signSpan = document.createElement('span');\n  readonly #textNode = document.createTextNode('');\n\n  constructor() {\n    super();\n\n    this.#signSpan.setAttribute('aria-hidden', 'true');\n    this.#signSpan.hidden = true;\n\n    this.appendChild(this.#signSpan);\n    this.appendChild(this.#textNode);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.displayName!);\n    }\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    const media = this.#state.value;\n\n    if (!media) return;\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    this.#signSpan.hidden = !state.negative;\n    this.#signSpan.textContent = state.negative ? this.negativeSign : '';\n    this.#textNode.textContent = state.text;\n\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, TimeDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,cAAb,cAAiC,aAAa;;iBAClB;;;oBAEG;GAC3B,MAAM,EAAE,MAAM,QAAQ;GACtB,cAAc;IAAE,MAAM;IAAQ,WAAW;IAAiB;GAC1D,OAAO,EAAE,MAAM,QAAQ;GACxB;;CAMD,CAASA,OAAQ,IAAI,UAAU;CAC/B,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,WAAW;CAEvE,CAASC,WAAY,SAAS,cAAc,OAAO;CACnD,CAASC,WAAY,SAAS,eAAe,GAAG;CAEhD,cAAc;AACZ,SAAO;cAXQ,SAAS,aAAa;sBACxB,SAAS,aAAa;eAC7B,SAAS,aAAa;AAW5B,QAAKD,SAAU,aAAa,eAAe,OAAO;AAClD,QAAKA,SAAU,SAAS;AAExB,OAAK,YAAY,MAAKA,SAAU;AAChC,OAAK,YAAY,MAAKC,SAAU;;CAGlC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,MAAKF,MAAO,MAC1B,mBAAkB,KAAK,WAAW,MAAKA,MAAO,YAAa;;CAI/D,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAKD,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAKC,MAAO;AAE1B,MAAI,CAAC,MAAO;AAEZ,QAAKD,KAAM,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAKA,KAAM,UAAU;AAEnC,QAAKE,SAAU,SAAS,CAAC,MAAM;AAC/B,QAAKA,SAAU,cAAc,MAAM,WAAW,KAAK,eAAe;AAClE,QAAKC,SAAU,cAAc,MAAM;AAEnC,oBAAkB,MAAM,MAAKH,KAAM,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,cAAc"}

package/dist/dev/ui/time-slider/time-slider-element.d.ts

@@ -0,0 +1,49 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+import * as _videojs_core0 from "@videojs/core";
+
+//#region src/ui/time-slider/time-slider-element.d.ts
+declare class TimeSliderElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-time-slider";
+  static properties: {
+    label: {
+      type: StringConstructor;
+    };
+    commitThrottle: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+    step: {
+      type: NumberConstructor;
+    };
+    largeStep: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+    orientation: {
+      type: StringConstructor;
+    };
+    disabled: {
+      type: BooleanConstructor;
+    };
+    thumbAlignment: {
+      type: StringConstructor;
+      attribute: string;
+    };
+  };
+  label: string | ((state: _videojs_core0.SliderState) => string);
+  commitThrottle: number;
+  step: number;
+  largeStep: number;
+  orientation: "horizontal" | "vertical";
+  disabled: boolean;
+  thumbAlignment: "center" | "edge";
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected willUpdate(_changed: PropertyValues): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { TimeSliderElement };
+//# sourceMappingURL=time-slider-element.d.ts.map

package/dist/dev/ui/time-slider/time-slider-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slider-element.d.ts","names":[],"sources":["../../../../src/ui/time-slider/time-slider-element.ts"],"mappings":";;;;;cAoBa,iBAAA,SAA0B,YAAA;EAAA;kBACrB,OAAA;EAAA,OAEA,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;EAUhB,KAAA,aAAK,KAAA,iBAAA,WAAA;EACL,cAAA;EACA,IAAA;EACA,SAAA;EACA,WAAA;EACA,QAAA;EACA,cAAA;EAUS,iBAAA,CAAA;EA2CA,oBAAA,CAAA;EAAA,UAQU,UAAA,CAAW,QAAA,EAAU,cAAA;EAAA,UAKrB,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

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

@@ -0,0 +1,129 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { sliderContext } from "../slider/context.js";
+import { applyStateDataAttrs, createSlider, getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from "@videojs/core/dom";
+import { ContextProvider } from "@videojs/element/context";
+import { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
+import { applyStyles, isRTL } from "@videojs/utils/dom";
+import { formatTime } from "@videojs/utils/time";
+
+//#region src/ui/time-slider/time-slider-element.ts
+var TimeSliderElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = TimeSliderCore.defaultProps.label;
+		this.commitThrottle = TimeSliderCore.defaultProps.commitThrottle;
+		this.step = TimeSliderCore.defaultProps.step;
+		this.largeStep = TimeSliderCore.defaultProps.largeStep;
+		this.orientation = TimeSliderCore.defaultProps.orientation;
+		this.disabled = TimeSliderCore.defaultProps.disabled;
+		this.thumbAlignment = TimeSliderCore.defaultProps.thumbAlignment;
+	}
+	static {
+		this.tagName = "media-time-slider";
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			commitThrottle: {
+				type: Number,
+				attribute: "commit-throttle"
+			},
+			step: { type: Number },
+			largeStep: {
+				type: Number,
+				attribute: "large-step"
+			},
+			orientation: { type: String },
+			disabled: { type: Boolean },
+			thumbAlignment: {
+				type: String,
+				attribute: "thumb-alignment"
+			}
+		};
+	}
+	#core = new TimeSliderCore();
+	#provider = new ContextProvider(this, { context: sliderContext });
+	#timeState = new PlayerController(this, playerContext, selectTime);
+	#bufferState = new PlayerController(this, playerContext, selectBuffer);
+	#slider = null;
+	#disconnect = null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		const signal = this.#disconnect.signal;
+		this.#slider = createSlider({
+			getElement: () => this,
+			getThumbElement: () => this.querySelector("media-slider-thumb"),
+			getOrientation: () => this.orientation,
+			isRTL: () => isRTL(this),
+			isDisabled: () => this.disabled || !this.#timeState.value,
+			getPercent: () => {
+				const media = this.#timeState.value;
+				if (!media) return 0;
+				return this.#core.percentFromValue(media.currentTime);
+			},
+			getStepPercent: () => this.#core.getStepPercent(),
+			getLargeStepPercent: () => this.#core.getLargeStepPercent(),
+			onValueCommit: (percent) => {
+				const media = this.#timeState.value;
+				if (media) media.seek(this.#core.valueFromPercent(percent));
+			},
+			commitThrottle: this.commitThrottle,
+			onDragStart: () => {
+				this.dispatchEvent(new CustomEvent("drag-start", { bubbles: true }));
+			},
+			onDragEnd: () => {
+				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
+			}
+		});
+		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
+		this.style.touchAction = "none";
+		this.style.userSelect = "none";
+		if (!this.#timeState.value) logMissingFeature(this.localName, this.#timeState.displayName);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#slider?.destroy();
+		this.#slider = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	willUpdate(_changed) {
+		super.willUpdate(_changed);
+		this.#core.setProps(this);
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#slider) return;
+		const time = this.#timeState.value;
+		const buffer = this.#bufferState.value;
+		if (!time) return;
+		this.#core.setInput(this.#slider.input.current);
+		const media = {
+			...time,
+			...buffer ?? {
+				buffered: [],
+				seekable: []
+			}
+		};
+		this.#core.setMedia(media);
+		const state = this.#core.getState();
+		const cssVars = getTimeSliderCSSVars(state);
+		applyStyles(this, cssVars);
+		applyStateDataAttrs(this, state, TimeSliderDataAttrs);
+		this.#provider.setValue({
+			state,
+			stateAttrMap: TimeSliderDataAttrs,
+			pointerValue: this.#core.valueFromPercent(state.pointerPercent),
+			thumbAttrs: this.#core.getAttrs(state),
+			thumbProps: this.#slider.thumbProps,
+			formatValue: (value) => formatTime(value, state.duration)
+		});
+	}
+};
+
+//#endregion
+export { TimeSliderElement };
+//# sourceMappingURL=time-slider-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slider-element.js","names":["#core","#provider","#timeState","#bufferState","#disconnect","#slider"],"sources":["../../../../src/ui/time-slider/time-slider-element.ts"],"sourcesContent":["import { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport {\n  applyStateDataAttrs,\n  createSlider,\n  getTimeSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectBuffer,\n  selectTime,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles, isRTL } from '@videojs/utils/dom';\nimport { formatTime } from '@videojs/utils/time';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from '../slider/context';\n\nexport class TimeSliderElement extends MediaElement {\n  static readonly tagName = 'media-time-slider';\n\n  static override properties = {\n    label: { type: String },\n    commitThrottle: { type: Number, attribute: 'commit-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  } satisfies PropertyDeclarationMap<Exclude<keyof TimeSliderCore.Props, 'value' | 'min' | 'max'>>;\n\n  label = TimeSliderCore.defaultProps.label;\n  commitThrottle = TimeSliderCore.defaultProps.commitThrottle;\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\n  readonly #core = new TimeSliderCore();\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\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\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      isRTL: () => isRTL(this),\n      isDisabled: () => this.disabled || !this.#timeState.value,\n      getPercent: () => {\n        const media = this.#timeState.value;\n        if (!media) return 0;\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        if (media) media.seek(this.#core.valueFromPercent(percent));\n      },\n      commitThrottle: this.commitThrottle,\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    });\n\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    // Prevent default touch gestures and text selection during interaction.\n    this.style.touchAction = 'none';\n    this.style.userSelect = 'none';\n\n    if (__DEV__ && !this.#timeState.value) {\n      logMissingFeature(this.localName, this.#timeState.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#slider?.destroy();\n    this.#slider = null;\n    this.#disconnect?.abort();\n    this.#disconnect = 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    if (!this.#slider) return;\n\n    const time = this.#timeState.value;\n    const buffer = this.#bufferState.value;\n    if (!time) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const media = { ...time, ...(buffer ?? { buffered: [], seekable: [] }) };\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n    const cssVars = getTimeSliderCSSVars(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.valueFromPercent(state.pointerPercent),\n      thumbAttrs: this.#core.getAttrs(state),\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => formatTime(value, state.duration),\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/dev/ui/volume-slider/volume-slider-element.d.ts

@@ -0,0 +1,44 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+import * as _videojs_core0 from "@videojs/core";
+
+//#region src/ui/volume-slider/volume-slider-element.d.ts
+declare class VolumeSliderElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-volume-slider";
+  static properties: {
+    label: {
+      type: StringConstructor;
+    };
+    step: {
+      type: NumberConstructor;
+    };
+    largeStep: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+    orientation: {
+      type: StringConstructor;
+    };
+    disabled: {
+      type: BooleanConstructor;
+    };
+    thumbAlignment: {
+      type: StringConstructor;
+      attribute: string;
+    };
+  };
+  label: string | ((state: _videojs_core0.SliderState) => string);
+  step: number;
+  largeStep: number;
+  orientation: "horizontal" | "vertical";
+  disabled: boolean;
+  thumbAlignment: "center" | "edge";
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected willUpdate(_changed: PropertyValues): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { VolumeSliderElement };
+//# sourceMappingURL=volume-slider-element.d.ts.map

package/dist/dev/ui/volume-slider/volume-slider-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-slider-element.d.ts","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-element.ts"],"mappings":";;;;;cAkBa,mBAAA,SAA4B,YAAA;EAAA;kBACvB,OAAA;EAAA,OAEA,UAAA;;;;;;;;;;;;;;;;;;;;;;EAShB,KAAA,aAAK,KAAA,iBAAA,WAAA;EACL,IAAA;EACA,SAAA;EACA,WAAA;EACA,QAAA;EACA,cAAA;EASS,iBAAA,CAAA;EA4CA,oBAAA,CAAA;EAAA,UAQU,UAAA,CAAW,QAAA,EAAU,cAAA;EAAA,UAKrB,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

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

@@ -0,0 +1,118 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { sliderContext } from "../slider/context.js";
+import { applyStateDataAttrs, createSlider, getSliderCSSVars, logMissingFeature, selectVolume } from "@videojs/core/dom";
+import { ContextProvider } from "@videojs/element/context";
+import { SliderDataAttrs, VolumeSliderCore } from "@videojs/core";
+import { applyStyles, isRTL } from "@videojs/utils/dom";
+
+//#region src/ui/volume-slider/volume-slider-element.ts
+var VolumeSliderElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = VolumeSliderCore.defaultProps.label;
+		this.step = VolumeSliderCore.defaultProps.step;
+		this.largeStep = VolumeSliderCore.defaultProps.largeStep;
+		this.orientation = VolumeSliderCore.defaultProps.orientation;
+		this.disabled = VolumeSliderCore.defaultProps.disabled;
+		this.thumbAlignment = VolumeSliderCore.defaultProps.thumbAlignment;
+	}
+	static {
+		this.tagName = "media-volume-slider";
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			step: { type: Number },
+			largeStep: {
+				type: Number,
+				attribute: "large-step"
+			},
+			orientation: { type: String },
+			disabled: { type: Boolean },
+			thumbAlignment: {
+				type: String,
+				attribute: "thumb-alignment"
+			}
+		};
+	}
+	#core = new VolumeSliderCore();
+	#provider = new ContextProvider(this, { context: sliderContext });
+	#volumeState = new PlayerController(this, playerContext, selectVolume);
+	#slider = null;
+	#disconnect = null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		const signal = this.#disconnect.signal;
+		this.#slider = createSlider({
+			getElement: () => this,
+			getThumbElement: () => this.querySelector("media-slider-thumb"),
+			getOrientation: () => this.orientation,
+			isRTL: () => isRTL(this),
+			isDisabled: () => this.disabled || !this.#volumeState.value,
+			getPercent: () => {
+				const media = this.#volumeState.value;
+				if (!media) return 0;
+				return media.volume * 100;
+			},
+			getStepPercent: () => this.#core.getStepPercent(),
+			getLargeStepPercent: () => this.#core.getLargeStepPercent(),
+			onValueChange: (percent) => {
+				this.#setVolume(percent);
+			},
+			onValueCommit: (percent) => {
+				this.#setVolume(percent);
+			},
+			onDragStart: () => {
+				this.dispatchEvent(new CustomEvent("drag-start", { bubbles: true }));
+			},
+			onDragEnd: () => {
+				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
+			}
+		});
+		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
+		this.style.touchAction = "none";
+		this.style.userSelect = "none";
+		if (!this.#volumeState.value) logMissingFeature(this.localName, this.#volumeState.displayName);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#slider?.destroy();
+		this.#slider = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	willUpdate(_changed) {
+		super.willUpdate(_changed);
+		this.#core.setProps(this);
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#slider) return;
+		const media = this.#volumeState.value;
+		if (!media) return;
+		this.#core.setInput(this.#slider.input.current);
+		this.#core.setMedia(media);
+		const state = this.#core.getState();
+		const cssVars = getSliderCSSVars(state);
+		applyStyles(this, cssVars);
+		applyStateDataAttrs(this, state, SliderDataAttrs);
+		this.#provider.setValue({
+			state,
+			stateAttrMap: SliderDataAttrs,
+			pointerValue: this.#core.valueFromPercent(state.pointerPercent),
+			thumbAttrs: this.#core.getAttrs(state),
+			thumbProps: this.#slider.thumbProps,
+			formatValue: (value) => `${Math.round(value)}%`
+		});
+	}
+	#setVolume(percent) {
+		this.#volumeState.value?.changeVolume(this.#core.valueFromPercent(percent) / 100);
+	}
+};
+
+//#endregion
+export { VolumeSliderElement };
+//# sourceMappingURL=volume-slider-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"volume-slider-element.js","names":["#core","#provider","#volumeState","#disconnect","#slider","#setVolume"],"sources":["../../../../src/ui/volume-slider/volume-slider-element.ts"],"sourcesContent":["import { SliderDataAttrs, VolumeSliderCore } from '@videojs/core';\nimport {\n  applyStateDataAttrs,\n  createSlider,\n  getSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectVolume,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles, isRTL } from '@videojs/utils/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from '../slider/context';\n\nexport class VolumeSliderElement extends MediaElement {\n  static readonly tagName = 'media-volume-slider';\n\n  static override properties = {\n    label: { type: String },\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<Exclude<keyof VolumeSliderCore.Props, 'value' | 'min' | 'max'>>;\n\n  label = VolumeSliderCore.defaultProps.label;\n  step = VolumeSliderCore.defaultProps.step;\n  largeStep = VolumeSliderCore.defaultProps.largeStep;\n  orientation = VolumeSliderCore.defaultProps.orientation;\n  disabled = VolumeSliderCore.defaultProps.disabled;\n  thumbAlignment = VolumeSliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new VolumeSliderCore();\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #volumeState = new PlayerController(this, playerContext, selectVolume);\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\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      isRTL: () => isRTL(this),\n      isDisabled: () => this.disabled || !this.#volumeState.value,\n      getPercent: () => {\n        const media = this.#volumeState.value;\n        if (!media) return 0;\n        return media.volume * 100;\n      },\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: (percent) => {\n        this.#setVolume(percent);\n      },\n      onValueCommit: (percent) => {\n        this.#setVolume(percent);\n      },\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    });\n\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    // Prevent default touch gestures and text selection during interaction.\n    this.style.touchAction = 'none';\n    this.style.userSelect = 'none';\n\n    if (__DEV__ && !this.#volumeState.value) {\n      logMissingFeature(this.localName, this.#volumeState.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#slider?.destroy();\n    this.#slider = null;\n    this.#disconnect?.abort();\n    this.#disconnect = 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    if (!this.#slider) return;\n\n    const media = this.#volumeState.value;\n    if (!media) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n    const cssVars = getSliderCSSVars(state);\n\n    applyStyles(this, cssVars);\n\n    // Apply data attributes to root.\n    applyStateDataAttrs(this, state, SliderDataAttrs);\n\n    // Provide context to child elements.\n    this.#provider.setValue({\n      state,\n      stateAttrMap: SliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: this.#core.getAttrs(state),\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => `${Math.round(value)}%`,\n    });\n  }\n\n  #setVolume(percent: number): void {\n    const media = this.#volumeState.value;\n    media?.changeVolume(this.#core.valueFromPercent(percent) / 100);\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/html",
   "type": "module",
-  "version": "10.0.0-alpha.4",
+  "version": "10.0.0-alpha.6",
   "description": "HTML library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -24,6 +24,39 @@
       "development": "./dist/dev/index.js",
       "default": "./dist/default/index.js"
     },
+    "./video": {
+      "types": "./dist/dev/presets/video.d.ts",
+      "development": "./dist/dev/presets/video.js",
+      "default": "./dist/default/presets/video.js"
+    },
+    "./video/*.css": "./dist/default/define/video/*.css",
+    "./video/*": {
+      "types": "./dist/dev/define/video/*.d.ts",
+      "development": "./dist/dev/define/video/*.js",
+      "default": "./dist/default/define/video/*.js"
+    },
+    "./audio": {
+      "types": "./dist/dev/presets/audio.d.ts",
+      "development": "./dist/dev/presets/audio.js",
+      "default": "./dist/default/presets/audio.js"
+    },
+    "./audio/*.css": "./dist/default/define/audio/*.css",
+    "./audio/*": {
+      "types": "./dist/dev/define/audio/*.d.ts",
+      "development": "./dist/dev/define/audio/*.js",
+      "default": "./dist/default/define/audio/*.js"
+    },
+    "./background": {
+      "types": "./dist/dev/presets/background.d.ts",
+      "development": "./dist/dev/presets/background.js",
+      "default": "./dist/default/presets/background.js"
+    },
+    "./background/*.css": "./dist/default/define/background/*.css",
+    "./background/*": {
+      "types": "./dist/dev/define/background/*.d.ts",
+      "development": "./dist/dev/define/background/*.js",
+      "default": "./dist/default/define/background/*.js"
+    },
     "./ui/*": {
       "types": "./dist/dev/define/ui/*.d.ts",
       "development": "./dist/dev/define/ui/*.js",
@@ -47,17 +80,19 @@
     }
   },
   "dependencies": {
-    "@videojs/element": "10.0.0-alpha.4",
-    "@videojs/core": "10.0.0-alpha.4",
-    "@videojs/store": "10.0.0-alpha.4",
-    "@videojs/utils": "10.0.0-alpha.4"
+    "@videojs/skins": "10.0.0-alpha.4",
+    "@videojs/utils": "10.0.0-alpha.6",
+    "@videojs/core": "10.0.0-alpha.6",
+    "@videojs/store": "10.0.0-alpha.6",
+    "@videojs/element": "10.0.0-alpha.6"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
     "happy-dom": "^18.0.1",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "@videojs/icons": "10.0.0-alpha.6"
   },
   "publishConfig": {
     "access": "public"

package/dist/default/player/player-mixin.js

@@ -1,23 +0,0 @@
-import { createContainerMixin } from "../store/container-mixin.js";
-import { createProviderMixin } from "../store/provider-mixin.js";
-
-//#region src/player/player-mixin.ts
-/**
-* Creates a mixin that combines provider and container functionality.
-*
-* Use for a complete player element that owns the store and attaches media.
-*
-* @param context - Player context for descendant consumption.
-* @param factory - Factory function that creates a store instance.
-*/
-function createPlayerMixin(context, factory) {
-	const ProviderMixin = createProviderMixin(context, factory);
-	const ContainerMixin = createContainerMixin(context);
-	return (BaseClass) => {
-		return ProviderMixin(ContainerMixin(BaseClass));
-	};
-}
-
-//#endregion
-export { createPlayerMixin };
-//# sourceMappingURL=player-mixin.js.map

package/dist/default/player/player-mixin.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"player-mixin.js","names":[],"sources":["../../../src/player/player-mixin.ts"],"sourcesContent":["import type { PlayerStore } from '@videojs/core/dom';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport { createContainerMixin } from '../store/container-mixin';\nimport { createProviderMixin } from '../store/provider-mixin';\nimport type { PlayerProviderConstructor } from '../store/types';\nimport type { PlayerContext } from './context';\n\ntype Result<Class extends MediaElementConstructor, Store extends PlayerStore> = Class &\n  PlayerProviderConstructor<Store>;\n\nexport type PlayerMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n  BaseClass: Class\n) => Result<Class, Store>;\n\n/**\n * Creates a mixin that combines provider and container functionality.\n *\n * Use for a complete player element that owns the store and attaches media.\n *\n * @param context - Player context for descendant consumption.\n * @param factory - Factory function that creates a store instance.\n */\nexport function createPlayerMixin<Store extends PlayerStore>(\n  context: PlayerContext<Store>,\n  factory: () => Store\n): PlayerMixin<Store> {\n  const ProviderMixin = createProviderMixin<Store>(context, factory);\n  const ContainerMixin = createContainerMixin<Store>(context);\n\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    return ProviderMixin(ContainerMixin(BaseClass)) as unknown as Result<Class, Store>;\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAsBA,SAAgB,kBACd,SACA,SACoB;CACpB,MAAM,gBAAgB,oBAA2B,SAAS,QAAQ;CAClE,MAAM,iBAAiB,qBAA4B,QAAQ;AAE3D,SAA+C,cAAqB;AAClE,SAAO,cAAc,eAAe,UAAU,CAAC"}

package/dist/dev/player/player-mixin.d.ts

@@ -1,20 +0,0 @@
-import { PlayerContext } from "./context.js";
-import { MediaElementConstructor } from "../ui/media-element.js";
-import { PlayerProviderConstructor } from "../store/types.js";
-import { PlayerStore } from "@videojs/core/dom";
-
-//#region src/player/player-mixin.d.ts
-type Result<Class extends MediaElementConstructor, Store extends PlayerStore> = Class & PlayerProviderConstructor<Store>;
-type PlayerMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(BaseClass: Class) => Result<Class, Store>;
-/**
- * Creates a mixin that combines provider and container functionality.
- *
- * Use for a complete player element that owns the store and attaches media.
- *
- * @param context - Player context for descendant consumption.
- * @param factory - Factory function that creates a store instance.
- */
-declare function createPlayerMixin<Store extends PlayerStore>(context: PlayerContext<Store>, factory: () => Store): PlayerMixin<Store>;
-//#endregion
-export { PlayerMixin, createPlayerMixin };
-//# sourceMappingURL=player-mixin.d.ts.map

package/dist/dev/player/player-mixin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"player-mixin.d.ts","names":[],"sources":["../../../src/player/player-mixin.ts"],"mappings":";;;;;;KAOK,MAAA,eAAqB,uBAAA,gBAAuC,WAAA,IAAe,KAAA,GAC9E,yBAAA,CAA0B,KAAA;AAAA,KAEhB,WAAA,eAA0B,WAAA,mBAA8B,uBAAA,EAClE,SAAA,EAAW,KAAA,KACR,MAAA,CAAO,KAAA,EAAO,KAAA;AAP4B;;;;;;;;AAAA,iBAiB/B,iBAAA,eAAgC,WAAA,CAAA,CAC9C,OAAA,EAAS,aAAA,CAAc,KAAA,GACvB,OAAA,QAAe,KAAA,GACd,WAAA,CAAY,KAAA"}

package/dist/dev/player/player-mixin.js

@@ -1,23 +0,0 @@
-import { createContainerMixin } from "../store/container-mixin.js";
-import { createProviderMixin } from "../store/provider-mixin.js";
-
-//#region src/player/player-mixin.ts
-/**
-* Creates a mixin that combines provider and container functionality.
-*
-* Use for a complete player element that owns the store and attaches media.
-*
-* @param context - Player context for descendant consumption.
-* @param factory - Factory function that creates a store instance.
-*/
-function createPlayerMixin(context, factory) {
-	const ProviderMixin = createProviderMixin(context, factory);
-	const ContainerMixin = createContainerMixin(context);
-	return (BaseClass) => {
-		return ProviderMixin(ContainerMixin(BaseClass));
-	};
-}
-
-//#endregion
-export { createPlayerMixin };
-//# sourceMappingURL=player-mixin.js.map

package/dist/dev/player/player-mixin.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"player-mixin.js","names":[],"sources":["../../../src/player/player-mixin.ts"],"sourcesContent":["import type { PlayerStore } from '@videojs/core/dom';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport { createContainerMixin } from '../store/container-mixin';\nimport { createProviderMixin } from '../store/provider-mixin';\nimport type { PlayerProviderConstructor } from '../store/types';\nimport type { PlayerContext } from './context';\n\ntype Result<Class extends MediaElementConstructor, Store extends PlayerStore> = Class &\n  PlayerProviderConstructor<Store>;\n\nexport type PlayerMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n  BaseClass: Class\n) => Result<Class, Store>;\n\n/**\n * Creates a mixin that combines provider and container functionality.\n *\n * Use for a complete player element that owns the store and attaches media.\n *\n * @param context - Player context for descendant consumption.\n * @param factory - Factory function that creates a store instance.\n */\nexport function createPlayerMixin<Store extends PlayerStore>(\n  context: PlayerContext<Store>,\n  factory: () => Store\n): PlayerMixin<Store> {\n  const ProviderMixin = createProviderMixin<Store>(context, factory);\n  const ContainerMixin = createContainerMixin<Store>(context);\n\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    return ProviderMixin(ContainerMixin(BaseClass)) as unknown as Result<Class, Store>;\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAsBA,SAAgB,kBACd,SACA,SACoB;CACpB,MAAM,gBAAgB,oBAA2B,SAAS,QAAQ;CAClE,MAAM,iBAAiB,qBAA4B,QAAQ;AAE3D,SAA+C,cAAqB;AAClE,SAAO,cAAc,eAAe,UAAU,CAAC"}