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

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

@@ -0,0 +1,128 @@
+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, 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";
+	}
+	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/default/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/default/ui/volume-slider/volume-slider-element.js

@@ -0,0 +1,117 @@
+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, 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";
+	}
+	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/default/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":";;;;;;;;;;AAkBA,IAAa,sBAAb,cAAyC,aAAa;;;eAY5C,iBAAiB,aAAa;cAC/B,iBAAiB,aAAa;mBACzB,iBAAiB,aAAa;qBAC5B,iBAAiB,aAAa;kBACjC,iBAAiB,aAAa;wBACxB,iBAAiB,aAAa;;;iBAhBrB;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,MAAM,EAAE,MAAM,QAAQ;GACtB,WAAW;IAAE,MAAM;IAAQ,WAAW;IAAc;GACpD,aAAa,EAAE,MAAM,QAAQ;GAC7B,UAAU,EAAE,MAAM,SAAS;GAC3B,gBAAgB;IAAE,MAAM;IAAQ,WAAW;IAAmB;GAC/D;;CASD,CAASA,OAAQ,IAAI,kBAAkB;CACvC,CAASC,WAAY,IAAI,gBAAgB,MAAM,EAAE,SAAS,eAAe,CAAC;CAC1E,CAASC,cAAe,IAAI,iBAAiB,MAAM,eAAe,aAAa;CAE/E,UAA4B;CAC5B,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;EACxC,MAAM,SAAS,MAAKA,WAAY;AAEhC,QAAKC,SAAU,aAAa;GAC1B,kBAAkB;GAClB,uBAAuB,KAAK,cAA2B,qBAAqB;GAC5E,sBAAsB,KAAK;GAC3B,aAAa,MAAM,KAAK;GACxB,kBAAkB,KAAK,YAAY,CAAC,MAAKF,YAAa;GACtD,kBAAkB;IAChB,MAAM,QAAQ,MAAKA,YAAa;AAChC,QAAI,CAAC,MAAO,QAAO;AACnB,WAAO,MAAM,SAAS;;GAExB,sBAAsB,MAAKF,KAAM,gBAAgB;GACjD,2BAA2B,MAAKA,KAAM,qBAAqB;GAC3D,gBAAgB,YAAY;AAC1B,UAAKK,UAAW,QAAQ;;GAE1B,gBAAgB,YAAY;AAC1B,UAAKA,UAAW,QAAQ;;GAE1B,mBAAmB;AACjB,SAAK,cAAc,IAAI,YAAY,cAAc,EAAE,SAAS,MAAM,CAAC,CAAC;;GAEtE,iBAAiB;AACf,SAAK,cAAc,IAAI,YAAY,YAAY,EAAE,SAAS,MAAM,CAAC,CAAC;;GAErE,CAAC;AAEF,QAAKD,OAAQ,MAAM,gBAAgB,KAAK,eAAe,EAAE,EAAE,QAAQ,CAAC;AAGpE,OAAK,MAAM,cAAc;AACzB,OAAK,MAAM,aAAa;;CAO1B,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,QAAS,SAAS;AACvB,QAAKA,SAAU;AACf,QAAKD,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,WAAW,UAAgC;AAC5D,QAAM,WAAW,SAAS;AAC1B,QAAKH,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,MAAI,CAAC,MAAKI,OAAS;EAEnB,MAAM,QAAQ,MAAKF,YAAa;AAChC,MAAI,CAAC,MAAO;AAEZ,QAAKF,KAAM,SAAS,MAAKI,OAAQ,MAAM,QAAQ;AAC/C,QAAKJ,KAAM,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAKA,KAAM,UAAU;EACnC,MAAM,UAAU,iBAAiB,MAAM;AAEvC,cAAY,MAAM,QAAQ;AAG1B,sBAAoB,MAAM,OAAO,gBAAgB;AAGjD,QAAKC,SAAU,SAAS;GACtB;GACA,cAAc;GACd,cAAc,MAAKD,KAAM,iBAAiB,MAAM,eAAe;GAC/D,YAAY,MAAKA,KAAM,SAAS,MAAM;GACtC,YAAY,MAAKI,OAAQ;GACzB,cAAc,UAAU,GAAG,KAAK,MAAM,MAAM,CAAC;GAC9C,CAAC;;CAGJ,WAAW,SAAuB;AAEhC,EADc,MAAKF,YAAa,OACzB,aAAa,MAAKF,KAAM,iBAAiB,QAAQ,GAAG,IAAI"}

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

@@ -0,0 +1,11 @@
+.media-minimal-skin {
+  color: var(--media-color, red);
+}
+
+audio-player {
+  display: contents;
+}
+
+audio-minimal-skin {
+  display: contents;
+}

package/dist/dev/define/audio/minimal-skin.d.ts

@@ -0,0 +1,17 @@
+import { ReactiveElement } from "@videojs/element";
+
+//#region src/define/audio/minimal-skin.d.ts
+declare function getTemplateHTML(): string;
+declare class MinimalAudioSkinElement extends ReactiveElement {
+  static readonly tagName = "audio-minimal-skin";
+  static getTemplateHTML: typeof getTemplateHTML;
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [MinimalAudioSkinElement.tagName]: MinimalAudioSkinElement;
+  }
+}
+//#endregion
+export { MinimalAudioSkinElement };
+//# sourceMappingURL=minimal-skin.d.ts.map

package/dist/dev/define/audio/minimal-skin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"minimal-skin.d.ts","names":[],"sources":["../../../../src/define/audio/minimal-skin.ts"],"mappings":";;;iBAES,eAAA,CAAA;AAAA,cAII,uBAAA,SAAgC,eAAA;EAAA,gBAC3B,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;;;QAahB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,uBAAA,CAAwB,OAAA,GAAU,uBAAA;EAAA;AAAA"}

package/dist/dev/define/audio/minimal-skin.js

@@ -0,0 +1,26 @@
+import { ReactiveElement } from "@videojs/element";
+
+//#region src/define/audio/minimal-skin.ts
+function getTemplateHTML() {
+	return `<div></div>`;
+}
+var MinimalAudioSkinElement = class extends ReactiveElement {
+	static {
+		this.tagName = "audio-minimal-skin";
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	constructor() {
+		super();
+		const children = [...this.childNodes];
+		this.innerHTML = getTemplateHTML();
+		const container = this.firstElementChild;
+		if (container) for (const child of children) container.append(child);
+	}
+};
+customElements.define(MinimalAudioSkinElement.tagName, MinimalAudioSkinElement);
+
+//#endregion
+export { MinimalAudioSkinElement };
+//# sourceMappingURL=minimal-skin.js.map

package/dist/dev/define/audio/minimal-skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\n\nfunction getTemplateHTML() {\n  return /*html*/ `<div></div>`;\n}\n\nexport class MinimalAudioSkinElement extends ReactiveElement {\n  static readonly tagName = 'audio-minimal-skin';\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n    const children = [...this.childNodes];\n    this.innerHTML = getTemplateHTML();\n    const container = this.firstElementChild;\n    if (container) for (const child of children) container.append(child);\n  }\n}\n\ncustomElements.define(MinimalAudioSkinElement.tagName, MinimalAudioSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalAudioSkinElement.tagName]: MinimalAudioSkinElement;\n  }\n}\n"],"mappings":";;;AAEA,SAAS,kBAAkB;AACzB,QAAgB;;AAGlB,IAAa,0BAAb,cAA6C,gBAAgB;;iBACjC;;;yBACD;;CAEzB,cAAc;AACZ,SAAO;EACP,MAAM,WAAW,CAAC,GAAG,KAAK,WAAW;AACrC,OAAK,YAAY,iBAAiB;EAClC,MAAM,YAAY,KAAK;AACvB,MAAI,UAAW,MAAK,MAAM,SAAS,SAAU,WAAU,OAAO,MAAM;;;AAIxE,eAAe,OAAO,wBAAwB,SAAS,wBAAwB"}

package/dist/dev/define/audio/player.d.ts

@@ -1,10 +1,11 @@
-import { PlayerElementConstructor } from "../../store/types.js";
+import { MediaElement } from "../../ui/media-element.js";
+import { PlayerProviderConstructor } from "../../store/types.js";
 import "../../index.js";
 import * as _videojs_core_dom0 from "@videojs/core/dom";
 
 //#region src/define/audio/player.d.ts
-declare const PlayerElement: PlayerElementConstructor<_videojs_core_dom0.AudioPlayerStore>;
-declare class AudioPlayerElement extends PlayerElement {
+declare const AudioPlayerElement_base: typeof MediaElement & PlayerProviderConstructor<_videojs_core_dom0.AudioPlayerStore>;
+declare class AudioPlayerElement extends AudioPlayerElement_base {
   static readonly tagName = "audio-player";
 }
 declare global {

package/dist/dev/define/audio/player.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"player.d.ts","names":[],"sources":["../../../../src/define/audio/player.ts"],"mappings":";;;;;cAGQ,aAAA,EAAa,wBAAA,CAEnB,kBAAA,CAFmB,gBAAA;AAAA,cAIR,kBAAA,SAA2B,aAAA;EAAA,gBACtB,OAAA;AAAA;AAAA,QAKV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,kBAAA,CAAmB,OAAA,GAAU,kBAAA;EAAA;AAAA"}
+{"version":3,"file":"player.d.ts","names":[],"sources":["../../../../src/define/audio/player.ts"],"mappings":";;;;;;cAGsD,uBAAA;cAOzC,kBAAA,SAA2B,uBAAA;EAAA,gBACtB,OAAA;AAAA;AAAA,QAOV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,kBAAA,CAAmB,OAAA,GAAU,kBAAA;EAAA;AAAA"}

package/dist/dev/define/audio/player.js

@@ -1,14 +1,18 @@
+import { MediaElement } from "../../ui/media-element.js";
+import { MediaContainerElement } from "../../media/container-element.js";
 import { createPlayer } from "../../player/create-player.js";
-import { features } from "@videojs/core/dom";
+import { safeDefine } from "../safe-define.js";
+import { audioFeatures } from "@videojs/core/dom";
 
 //#region src/define/audio/player.ts
-const { PlayerElement } = createPlayer({ features: features.audio });
-var AudioPlayerElement = class extends PlayerElement {
+const { ProviderMixin } = createPlayer({ features: audioFeatures });
+var AudioPlayerElement = class extends ProviderMixin(MediaElement) {
 	static {
 		this.tagName = "audio-player";
 	}
 };
-customElements.define(AudioPlayerElement.tagName, AudioPlayerElement);
+safeDefine(AudioPlayerElement);
+safeDefine(MediaContainerElement);
 
 //#endregion
 export { AudioPlayerElement };

package/dist/dev/define/audio/player.js.map

@@ -1 +1 @@
-{"version":3,"file":"player.js","names":[],"sources":["../../../../src/define/audio/player.ts"],"sourcesContent":["import { features } from '@videojs/core/dom';\nimport { createPlayer } from '../../player/create-player';\n\nconst { PlayerElement } = createPlayer({\n  features: features.audio,\n});\n\nexport class AudioPlayerElement extends PlayerElement {\n  static readonly tagName = 'audio-player';\n}\n\ncustomElements.define(AudioPlayerElement.tagName, AudioPlayerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioPlayerElement.tagName]: AudioPlayerElement;\n  }\n}\n"],"mappings":";;;;AAGA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,SAAS,OACpB,CAAC;AAEF,IAAa,qBAAb,cAAwC,cAAc;;iBAC1B;;;AAG5B,eAAe,OAAO,mBAAmB,SAAS,mBAAmB"}
+{"version":3,"file":"player.js","names":[],"sources":["../../../../src/define/audio/player.ts"],"sourcesContent":["import { audioFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n  features: audioFeatures,\n});\n\nexport class AudioPlayerElement extends ProviderMixin(MediaElement) {\n  static readonly tagName = 'audio-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(AudioPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioPlayerElement.tagName]: AudioPlayerElement;\n  }\n}\n"],"mappings":";;;;;;;AAMA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,eACX,CAAC;AAEF,IAAa,qBAAb,cAAwC,cAAc,aAAa,CAAC;;iBACxC;;;AAI5B,WAAW,mBAAmB;AAC9B,WAAW,sBAAsB"}

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

@@ -0,0 +1,12 @@
+.media-skin {
+  color: var(--media-color, red);
+}
+
+
+audio-player {
+  display: contents;
+}
+
+audio-skin {
+  display: contents;
+}

package/dist/dev/define/audio/skin.d.ts

@@ -1 +1,17 @@
-export { };
+import { ReactiveElement } from "@videojs/element";
+
+//#region src/define/audio/skin.d.ts
+declare function getTemplateHTML(): string;
+declare class AudioSkinElement extends ReactiveElement {
+  static readonly tagName = "audio-skin";
+  static getTemplateHTML: typeof getTemplateHTML;
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [AudioSkinElement.tagName]: AudioSkinElement;
+  }
+}
+//#endregion
+export { AudioSkinElement };
+//# sourceMappingURL=skin.d.ts.map

package/dist/dev/define/audio/skin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/audio/skin.ts"],"mappings":";;;iBAES,eAAA,CAAA;AAAA,cAII,gBAAA,SAAyB,eAAA;EAAA,gBACpB,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;;;QAahB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,gBAAA,CAAiB,OAAA,GAAU,gBAAA;EAAA;AAAA"}

package/dist/dev/define/audio/skin.js

@@ -0,0 +1,26 @@
+import { ReactiveElement } from "@videojs/element";
+
+//#region src/define/audio/skin.ts
+function getTemplateHTML() {
+	return `<div></div>`;
+}
+var AudioSkinElement = class extends ReactiveElement {
+	static {
+		this.tagName = "audio-skin";
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	constructor() {
+		super();
+		const children = [...this.childNodes];
+		this.innerHTML = getTemplateHTML();
+		const container = this.firstElementChild;
+		if (container) for (const child of children) container.append(child);
+	}
+};
+customElements.define(AudioSkinElement.tagName, AudioSkinElement);
+
+//#endregion
+export { AudioSkinElement };
+//# sourceMappingURL=skin.js.map

package/dist/dev/define/audio/skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/audio/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\n\nfunction getTemplateHTML() {\n  return /*html*/ `<div></div>`;\n}\n\nexport class AudioSkinElement extends ReactiveElement {\n  static readonly tagName = 'audio-skin';\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n    const children = [...this.childNodes];\n    this.innerHTML = getTemplateHTML();\n    const container = this.firstElementChild;\n    if (container) for (const child of children) container.append(child);\n  }\n}\n\ncustomElements.define(AudioSkinElement.tagName, AudioSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioSkinElement.tagName]: AudioSkinElement;\n  }\n}\n"],"mappings":";;;AAEA,SAAS,kBAAkB;AACzB,QAAgB;;AAGlB,IAAa,mBAAb,cAAsC,gBAAgB;;iBAC1B;;;yBACD;;CAEzB,cAAc;AACZ,SAAO;EACP,MAAM,WAAW,CAAC,GAAG,KAAK,WAAW;AACrC,OAAK,YAAY,iBAAiB;EAClC,MAAM,YAAY,KAAK;AACvB,MAAI,UAAW,MAAK,MAAM,SAAS,SAAU,WAAU,OAAO,MAAM;;;AAIxE,eAAe,OAAO,iBAAiB,SAAS,iBAAiB"}

package/dist/dev/define/background/player.d.ts

@@ -1,10 +1,11 @@
-import { PlayerElementConstructor } from "../../store/types.js";
+import { MediaElement } from "../../ui/media-element.js";
+import { PlayerProviderConstructor } from "../../store/types.js";
 import "../../index.js";
 import * as _videojs_core_dom0 from "@videojs/core/dom";
 
 //#region src/define/background/player.d.ts
-declare const PlayerElement: PlayerElementConstructor<_videojs_core_dom0.PlayerStore<[]>>;
-declare class BackgroundVideoPlayerElement extends PlayerElement {
+declare const BackgroundVideoPlayerElement_base: typeof MediaElement & PlayerProviderConstructor<_videojs_core_dom0.PlayerStore<[]>>;
+declare class BackgroundVideoPlayerElement extends BackgroundVideoPlayerElement_base {
   static readonly tagName = "background-video-player";
 }
 declare global {

package/dist/dev/define/background/player.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"player.d.ts","names":[],"sources":["../../../../src/define/background/player.ts"],"mappings":";;;;;cAGQ,aAAA,EAAa,wBAAA,CAEnB,kBAAA,CAFmB,WAAA;AAAA,cAIR,4BAAA,SAAqC,aAAA;EAAA,gBAChC,OAAA;AAAA;AAAA,QAKV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,4BAAA,CAA6B,OAAA,GAAU,4BAAA;EAAA;AAAA"}
+{"version":3,"file":"player.d.ts","names":[],"sources":["../../../../src/define/background/player.ts"],"mappings":";;;;;;cAGsD,iCAAA;cAOzC,4BAAA,SAAqC,iCAAA;EAAA,gBAChC,OAAA;AAAA;AAAA,QAOV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,4BAAA,CAA6B,OAAA,GAAU,4BAAA;EAAA;AAAA"}

package/dist/dev/define/background/player.js

@@ -1,14 +1,18 @@
+import { MediaElement } from "../../ui/media-element.js";
+import { MediaContainerElement } from "../../media/container-element.js";
 import { createPlayer } from "../../player/create-player.js";
-import { features } from "@videojs/core/dom";
+import { safeDefine } from "../safe-define.js";
+import { backgroundFeatures } from "@videojs/core/dom";
 
 //#region src/define/background/player.ts
-const { PlayerElement } = createPlayer({ features: features.background });
-var BackgroundVideoPlayerElement = class extends PlayerElement {
+const { ProviderMixin } = createPlayer({ features: backgroundFeatures });
+var BackgroundVideoPlayerElement = class extends ProviderMixin(MediaElement) {
 	static {
 		this.tagName = "background-video-player";
 	}
 };
-customElements.define(BackgroundVideoPlayerElement.tagName, BackgroundVideoPlayerElement);
+safeDefine(BackgroundVideoPlayerElement);
+safeDefine(MediaContainerElement);
 
 //#endregion
 export { BackgroundVideoPlayerElement };

package/dist/dev/define/background/player.js.map

@@ -1 +1 @@
-{"version":3,"file":"player.js","names":[],"sources":["../../../../src/define/background/player.ts"],"sourcesContent":["import { features } from '@videojs/core/dom';\nimport { createPlayer } from '../../player/create-player';\n\nconst { PlayerElement } = createPlayer({\n  features: features.background,\n});\n\nexport class BackgroundVideoPlayerElement extends PlayerElement {\n  static readonly tagName = 'background-video-player';\n}\n\ncustomElements.define(BackgroundVideoPlayerElement.tagName, BackgroundVideoPlayerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoPlayerElement.tagName]: BackgroundVideoPlayerElement;\n  }\n}\n"],"mappings":";;;;AAGA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,SAAS,YACpB,CAAC;AAEF,IAAa,+BAAb,cAAkD,cAAc;;iBACpC;;;AAG5B,eAAe,OAAO,6BAA6B,SAAS,6BAA6B"}
+{"version":3,"file":"player.js","names":[],"sources":["../../../../src/define/background/player.ts"],"sourcesContent":["import { backgroundFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n  features: backgroundFeatures,\n});\n\nexport class BackgroundVideoPlayerElement extends ProviderMixin(MediaElement) {\n  static readonly tagName = 'background-video-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(BackgroundVideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoPlayerElement.tagName]: BackgroundVideoPlayerElement;\n  }\n}\n"],"mappings":";;;;;;;AAMA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,oBACX,CAAC;AAEF,IAAa,+BAAb,cAAkD,cAAc,aAAa,CAAC;;iBAClD;;;AAI5B,WAAW,6BAA6B;AACxC,WAAW,sBAAsB"}

package/dist/dev/define/background/skin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/background/skin.ts"],"mappings":";;;iBAGS,eAAA,CAAgB,MAAA,EAAQ,MAAA;AAAA,cAQpB,0BAAA,SAAmC,eAAA;EAAA,gBAC9B,OAAA;EAAA,OACT,iBAAA;UAAsC,cAAA;EAAA;EAAA,OACtC,eAAA,SAAe,eAAA;;;QAchB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,0BAAA,CAA2B,OAAA,GAAU,0BAAA;EAAA;AAAA"}
+{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/background/skin.ts"],"mappings":";;;iBAIS,eAAA,CAAgB,MAAA,EAAQ,MAAA;AAAA,cAQpB,0BAAA,SAAmC,eAAA;EAAA,gBAC9B,OAAA;EAAA,OACT,iBAAA;UAAsC,cAAA;EAAA;EAAA,OACtC,eAAA,SAAe,eAAA;;;QAchB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,0BAAA,CAA2B,OAAA,GAAU,0BAAA;EAAA;AAAA"}

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

@@ -1,3 +1,4 @@
+import { safeDefine } from "../safe-define.js";
 import { ReactiveElement } from "@videojs/element";
 import { namedNodeMapToObject } from "@videojs/utils/dom";
 
@@ -27,7 +28,7 @@ var BackgroundVideoSkinElement = class extends ReactiveElement {
 		}
 	}
 };
-customElements.define(BackgroundVideoSkinElement.tagName, BackgroundVideoSkinElement);
+safeDefine(BackgroundVideoSkinElement);
 
 //#endregion
 export { BackgroundVideoSkinElement };

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

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\n\nfunction getTemplateHTML(_attrs: Record<string, string>) {\n  return /*html*/ `\n    <media-container>\n      <slot name=\"media\" slot=\"media\"></slot>\n    </media-container>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));\n    }\n  }\n}\n\ncustomElements.define(BackgroundVideoSkinElement.tagName, BackgroundVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;AAGA,SAAS,gBAAgB,QAAgC;AACvD,QAAgB;;;;;;AAOlB,IAAa,6BAAb,cAAgD,gBAAgB;;iBACpC;;;2BACC,EAAE,MAAM,QAA0B;;;yBACpC;;CAEzB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAkD,kBAAkB;AAC5F,QAAK,WAAY,YAAY,gBAAgB,qBAAqB,KAAK,WAAW,CAAC;;;;AAKzF,eAAe,OAAO,2BAA2B,SAAS,2BAA2B"}
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\n\nfunction getTemplateHTML(_attrs: Record<string, string>) {\n  return /*html*/ `\n    <media-container>\n      <slot name=\"media\" slot=\"media\"></slot>\n    </media-container>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));\n    }\n  }\n}\n\nsafeDefine(BackgroundVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;AAIA,SAAS,gBAAgB,QAAgC;AACvD,QAAgB;;;;;;AAOlB,IAAa,6BAAb,cAAgD,gBAAgB;;iBACpC;;;2BACC,EAAE,MAAM,QAA0B;;;yBACpC;;CAEzB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAkD,kBAAkB;AAC5F,QAAK,WAAY,YAAY,gBAAgB,qBAAqB,KAAK,WAAW,CAAC;;;;AAKzF,WAAW,2BAA2B"}

package/dist/dev/define/media/background-video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"background-video.d.ts","names":[],"sources":["../../../../src/define/media/background-video.ts"],"mappings":";;;cAEa,sBAAA,SAA+B,eAAA;EAAA,gBAC1B,OAAA;AAAA;AAAA,QAKV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,sBAAA,CAAuB,OAAA,GAAU,sBAAA;EAAA;AAAA"}
+{"version":3,"file":"background-video.d.ts","names":[],"sources":["../../../../src/define/media/background-video.ts"],"mappings":";;;cAGa,sBAAA,SAA+B,eAAA;EAAA,gBAC1B,OAAA;AAAA;AAAA,QAKV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,sBAAA,CAAuB,OAAA,GAAU,sBAAA;EAAA;AAAA"}

package/dist/dev/define/media/background-video.js

@@ -1,3 +1,4 @@
+import { safeDefine } from "../safe-define.js";
 import { BackgroundVideo } from "../../media/background-video/index.js";
 
 //#region src/define/media/background-video.ts
@@ -6,7 +7,7 @@ var BackgroundVideoElement = class extends BackgroundVideo {
 		this.tagName = "background-video";
 	}
 };
-customElements.define(BackgroundVideoElement.tagName, BackgroundVideoElement);
+safeDefine(BackgroundVideoElement);
 
 //#endregion
 export { BackgroundVideoElement };

package/dist/dev/define/media/background-video.js.map

@@ -1 +1 @@
-{"version":3,"file":"background-video.js","names":[],"sources":["../../../../src/define/media/background-video.ts"],"sourcesContent":["import { BackgroundVideo } from '../../media/background-video';\n\nexport class BackgroundVideoElement extends BackgroundVideo {\n  static readonly tagName = 'background-video';\n}\n\ncustomElements.define(BackgroundVideoElement.tagName, BackgroundVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoElement.tagName]: BackgroundVideoElement;\n  }\n}\n"],"mappings":";;;AAEA,IAAa,yBAAb,cAA4C,gBAAgB;;iBAChC;;;AAG5B,eAAe,OAAO,uBAAuB,SAAS,uBAAuB"}
+{"version":3,"file":"background-video.js","names":[],"sources":["../../../../src/define/media/background-video.ts"],"sourcesContent":["import { BackgroundVideo } from '../../media/background-video';\nimport { safeDefine } from '../safe-define';\n\nexport class BackgroundVideoElement extends BackgroundVideo {\n  static readonly tagName = 'background-video';\n}\n\nsafeDefine(BackgroundVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoElement.tagName]: BackgroundVideoElement;\n  }\n}\n"],"mappings":";;;;AAGA,IAAa,yBAAb,cAA4C,gBAAgB;;iBAChC;;;AAG5B,WAAW,uBAAuB"}

package/dist/dev/define/media/container.d.ts

@@ -0,0 +1,9 @@
+import { MediaContainerElement } from "../../media/container-element.js";
+
+//#region src/define/media/container.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [MediaContainerElement.tagName]: MediaContainerElement;
+  }
+} //# sourceMappingURL=container.d.ts.map
+//# sourceMappingURL=container.d.ts.map

package/dist/dev/define/media/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","names":[],"sources":["../../../../src/define/media/container.ts"],"mappings":";;;QAKQ,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,qBAAA,CAAsB,OAAA,GAAU,qBAAA;EAAA;AAAA"}

package/dist/dev/define/media/container.js

@@ -0,0 +1,8 @@
+import { MediaContainerElement } from "../../media/container-element.js";
+import { safeDefine } from "../safe-define.js";
+
+//#region src/define/media/container.ts
+safeDefine(MediaContainerElement);
+
+//#endregion
+//# sourceMappingURL=container.js.map

package/dist/dev/define/media/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","names":[],"sources":["../../../../src/define/media/container.ts"],"sourcesContent":["import { MediaContainerElement } from '../../media/container-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MediaContainerElement.tagName]: MediaContainerElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,sBAAsB"}

package/dist/dev/define/media/hls-video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hls-video.d.ts","names":[],"sources":["../../../../src/define/media/hls-video.ts"],"mappings":";;;cAEa,eAAA,SAAwB,QAAA;EAAA,gBACnB,OAAA;AAAA;AAAA,QAKV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,eAAA,CAAgB,OAAA,GAAU,eAAA;EAAA;AAAA"}
+{"version":3,"file":"hls-video.d.ts","names":[],"sources":["../../../../src/define/media/hls-video.ts"],"mappings":";;;cAGa,eAAA,SAAwB,QAAA;EAAA,gBACnB,OAAA;AAAA;AAAA,QAKV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,eAAA,CAAgB,OAAA,GAAU,eAAA;EAAA;AAAA"}

package/dist/dev/define/media/hls-video.js

@@ -1,3 +1,4 @@
+import { safeDefine } from "../safe-define.js";
 import { HlsVideo } from "../../media/hls-video/index.js";
 
 //#region src/define/media/hls-video.ts
@@ -6,7 +7,7 @@ var HlsVideoElement = class extends HlsVideo {
 		this.tagName = "hls-video";
 	}
 };
-customElements.define(HlsVideoElement.tagName, HlsVideoElement);
+safeDefine(HlsVideoElement);
 
 //#endregion
 export { HlsVideoElement };