npm - @videojs/html - Versions diffs - 10.0.0-rc.4 → 10.0.0-rc.5 - Mend

@videojs/html 10.0.0-rc.4 → 10.0.0-rc.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1020) hide show

package/dist/dev/ui/pip-button/element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/pip-button/element.ts"],"sourcesContent":["import { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\nimport type { MediaPictureInPictureState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PiPButtonElement extends MediaButtonElement<~~PiPButtonCore~~> {\n static readonly tagName = 'media-pip-button';\n\n protected readonly core = new PiPButtonCore();\n protected readonly stateAttrMap = PiPButtonDataAttrs;\n protected readonly mediaState = new PlayerController(this, playerContext, selectPiP);\n protected override readonly hotkeyAction = 'togglePictureInPicture';\n\n protected activate(state: MediaPictureInPictureState): Promise<void> {\n return this.core.toggle(state);\n }\n}\n"],"mappings":";;;;;;AAQA,IAAa,mBAAb,cAAsC,~~mBAAkC~~;;;~~EAG5C~~,KAAA,OAAA,IAAI,cAAc;EACV,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,SAAS;EACxC,KAAA,eAAA;;;EALjB,KAAA,UAAA;;CAO1B,SAAmB,OAAkD;EACnE,OAAO,KAAK,KAAK,OAAO,KAAK;CAC/B;AACF"}
1	+ {"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/pip-button/element.ts"],"sourcesContent":["import { PiPButtonCore, PiPButtonDataAttrs, type PiPButtonState } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\nimport type { MediaPictureInPictureState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PiPButtonElement extends MediaButtonElement<PiPButtonState, MediaPictureInPictureState> {\n static readonly tagName = 'media-pip-button';\n\n protected readonly core = new PiPButtonCore();\n protected readonly stateAttrMap = PiPButtonDataAttrs;\n protected readonly mediaState = new PlayerController(this, playerContext, selectPiP);\n protected override readonly hotkeyAction = 'togglePictureInPicture';\n\n protected activate(state: MediaPictureInPictureState): Promise<void> {\n return this.core.toggle(state);\n }\n}\n"],"mappings":";;;;;;AAQA,IAAa,mBAAb,cAAsC,mBAA+D;;;EAGzE,KAAA,OAAA,IAAI,cAAc;EACV,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,SAAS;EACxC,KAAA,eAAA;;;EALjB,KAAA,UAAA;;CAO1B,SAAmB,OAAkD;EACnE,OAAO,KAAK,KAAK,OAAO,KAAK;CAC/B;AACF"}

package/dist/dev/ui/play-button/element.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 import { PlayerController } from "../../player/controller.js";
 import { MediaButtonElement } from "../media-button-element.js";
 import { index_d_exports } from "../../index.js";
-import { PlayButtonCore } from "@videojs/core";
+import { PlayButtonCore, PlayButtonState } from "@videojs/core";
 import { MediaPlaybackState } from "@videojs/media";
 //#region src/ui/play-button/element.d.ts
-declare class PlayButtonElement extends MediaButtonElement<PlayButtonCore> {
+export declare class PlayButtonElement extends MediaButtonElement<PlayButtonState, MediaPlaybackState> {
   static readonly tagName = "media-play-button";
   protected readonly core: PlayButtonCore;
   protected readonly stateAttrMap: {
@@ -19,11 +19,9 @@ declare class PlayButtonElement extends MediaButtonElement<PlayButtonCore> {
     waiting: boolean;
     play: () => Promise<void>;
     pause: () => void;
-    togglePaused: () => boolean;
   } | undefined>;
   protected readonly hotkeyAction = "togglePaused";
-  protected activate(state: MediaPlaybackState): void;
+  protected activate(state: MediaPlaybackState): Promise<void>;
 }
 //#endregion
-export { PlayButtonElement };
 //# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/play-button/element.js CHANGED Viewed

@@ -16,7 +16,7 @@ var PlayButtonElement = class extends MediaButtonElement {
 		this.tagName = "media-play-button";
 	}
 	activate(state) {
-		this.core.toggle(state);
+		return this.core.toggle(state);
 	}
 };
 //#endregion

package/dist/dev/ui/play-button/element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/play-button/element.ts"],"sourcesContent":["import { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\nimport type { MediaPlaybackState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PlayButtonElement extends MediaButtonElement<~~PlayButtonCore~~> {\n static readonly tagName = 'media-play-button';\n\n protected readonly core = new PlayButtonCore();\n protected readonly stateAttrMap = PlayButtonDataAttrs;\n protected readonly mediaState = new PlayerController(this, playerContext, selectPlayback);\n protected override readonly hotkeyAction = 'togglePaused';\n\n protected activate(state: MediaPlaybackState): void {\n this.core.toggle(state);\n }\n}\n"],"mappings":";;;;;;AAQA,IAAa,oBAAb,cAAuC,~~mBAAmC~~;;;~~EAG9C~~,KAAA,OAAA,IAAI,eAAe;EACX,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,cAAc;EAC7C,KAAA,eAAA;;;EALjB,KAAA,UAAA;;CAO1B,SAAmB,~~OAAiC~~;~~EAClD~~,KAAK,KAAK,OAAO,KAAK;~~CACxB~~;AACF"}
1	+ {"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/play-button/element.ts"],"sourcesContent":["import { PlayButtonCore, PlayButtonDataAttrs, type PlayButtonState } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\nimport type { MediaPlaybackState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PlayButtonElement extends MediaButtonElement<PlayButtonState, MediaPlaybackState> {\n static readonly tagName = 'media-play-button';\n\n protected readonly core = new PlayButtonCore();\n protected readonly stateAttrMap = PlayButtonDataAttrs;\n protected readonly mediaState = new PlayerController(this, playerContext, selectPlayback);\n protected override readonly hotkeyAction = 'togglePaused';\n\n protected activate(state: MediaPlaybackState): Promise<void> {\n return this.core.toggle(state);\n }\n}\n"],"mappings":";;;;;;AAQA,IAAa,oBAAb,cAAuC,mBAAwD;;;EAGnE,KAAA,OAAA,IAAI,eAAe;EACX,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,cAAc;EAC7C,KAAA,eAAA;;;EALjB,KAAA,UAAA;;CAO1B,SAAmB,OAA0C;EAC3D,OAAO,KAAK,KAAK,OAAO,KAAK;CAC/B;AACF"}

package/dist/dev/ui/playback-rate-button/element.d.ts CHANGED Viewed

@@ -1,12 +1,12 @@
 import { PlayerController } from "../../player/controller.js";
 import { MediaButtonElement } from "../media-button-element.js";
 import { index_d_exports } from "../../index.js";
-import { PlaybackRateButtonCore } from "@videojs/core";
+import { PlaybackRateButtonCore, PlaybackRateButtonState } from "@videojs/core";
 import { UIEvent } from "@videojs/core/dom";
 import { PropertyValues } from "@videojs/element";
 import { MediaPlaybackRateState } from "@videojs/media";
 //#region src/ui/playback-rate-button/element.d.ts
-declare class PlaybackRateButtonElement extends MediaButtonElement<PlaybackRateButtonCore> {
+export declare class PlaybackRateButtonElement extends MediaButtonElement<PlaybackRateButtonState, MediaPlaybackRateState> {
   static readonly tagName = "media-playback-rate-button";
   static properties: {
     label: {
@@ -35,9 +35,8 @@ declare class PlaybackRateButtonElement extends MediaButtonElement<PlaybackRateB
   protected willUpdate(changed: PropertyValues): void;
   protected update(changed: PropertyValues): void;
 }
-declare namespace PlaybackRateButtonElement {
-  type State = PlaybackRateButtonCore.State;
+export declare namespace PlaybackRateButtonElement {
+  type State = PlaybackRateButtonState;
 }
 //#endregion
-export { PlaybackRateButtonElement };
 //# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/playback-rate-button/element.js CHANGED Viewed

@@ -38,8 +38,10 @@ var PlaybackRateButtonElement = class extends MediaButtonElement {
 	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
-		if (changed.has("commandfor")) if (this.commandfor) this.setAttribute("commandfor", this.commandfor);
-		else this.removeAttribute("commandfor");
+		if (changed.has("commandfor")) {
+			if (this.commandfor) this.setAttribute("commandfor", this.commandfor);
+			else this.removeAttribute("commandfor");
+		}
 	}
 	update(changed) {
 		super.update(changed);

package/dist/dev/ui/playback-rate-button/element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/playback-rate-button/element.ts"],"sourcesContent":["import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from '@videojs/core';\nimport { applyElementProps, selectPlaybackRate, type UIEvent } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { MediaPlaybackRateState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PlaybackRateButtonElement extends MediaButtonElement<~~PlaybackRateButtonCore~~> {\n static readonly tagName = 'media-playback-rate-button';\n\n static override properties = {\n label: { type: String },\n disabled: { type: Boolean },\n commandfor: { type: String },\n } satisfies PropertyDeclarationMap<'label' \| 'disabled' \| 'commandfor'>;\n\n commandfor: string \| undefined = undefined;\n\n protected readonly core = new PlaybackRateButtonCore();\n protected readonly stateAttrMap = PlaybackRateButtonDataAttrs;\n protected readonly mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n protected override readonly hotkeyAction = 'speedUp';\n\n protected activate(state: MediaPlaybackRateState, event?: UIEvent): void {\n if (this.commandfor) {\n if (event instanceof KeyboardEvent) {\n // Custom elements do not synthesize a click from keyboard activation.\n // Dispatch one so the linked menu follows its normal open lifecycle.\n this.click();\n }\n\n return;\n }\n\n this.core.cycle(state);\n }\n\n protected override getIsButtonDisabled(): boolean {\n const media = this.mediaState.value;\n\n if (super.getIsButtonDisabled()) return true;\n\n if (this.commandfor && media && media.playbackRates.length === 0) return true;\n\n return false;\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n super.willUpdate(changed);\n\n if (changed.has('commandfor')) {\n if (this.commandfor) {\n this.setAttribute('commandfor', this.commandfor);\n } else {\n this.removeAttribute('commandfor');\n }\n }\n }\n\n protected override update(changed: PropertyValues): void {\n super.update(changed);\n\n const media = this.mediaState.value;\n if (!media \|\| !this.commandfor) return;\n\n applyElementProps(this, {\n 'aria-disabled': this.getIsButtonDisabled() ? 'true' : undefined,\n });\n }\n}\n\nexport namespace PlaybackRateButtonElement {\n export type State = ~~PlaybackRateButtonCore.State~~;\n}\n"],"mappings":";;;;;;AASA,IAAa,4BAAb,cAA+C,~~mBAA2C~~;;;~~EASvD~~,KAAA,aAAA,KAAA;EAEP,KAAA,OAAA,IAAI,uBAAuB;EACnB,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,kBAAkB;EACjD,KAAA,eAAA;;;EAbjB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,OAAO,EAAE,MAAM,OAAO;GACtB,UAAU,EAAE,MAAM,QAAQ;GAC1B,YAAY,EAAE,MAAM,OAAO;EAC7B;;CASA,SAAmB,OAA+B,OAAuB;EACvE,IAAI,KAAK,YAAY;GACnB,IAAI,iBAAiB,eAGnB,KAAK,MAAM;GAGb;EACF;EAEA,KAAK,KAAK,MAAM,KAAK;CACvB;CAEA,sBAAkD;EAChD,MAAM,QAAQ,KAAK,WAAW;EAE9B,IAAI,MAAM,oBAAoB,GAAG,OAAO;EAExC,IAAI,KAAK,cAAc,SAAS,MAAM,cAAc,WAAW,GAAG,OAAO;EAEzE,OAAO;CACT;CAEA,WAA8B,SAA+B;EAC3D,MAAM,WAAW,OAAO;EAExB,IAAI,QAAQ,IAAI,YAAY,~~GAC1B~~,IAAI,KAAK,YACP,KAAK,aAAa,cAAc,KAAK,UAAU;~~OAE~~/C,KAAK,gBAAgB,YAAY;~~CAGvC~~;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAGpB,IAAI,CADU,KAAK,WAAW,SAChB,CAAC,KAAK,YAAY;EAEhC,kBAAkB,MAAM,EACtB,iBAAiB,KAAK,oBAAoB,IAAI,SAAS,KAAA,EACzD,CAAC;CACH;AACF"}
1	+ {"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/playback-rate-button/element.ts"],"sourcesContent":["import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs, type PlaybackRateButtonState } from '@videojs/core';\nimport { applyElementProps, selectPlaybackRate, type UIEvent } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { MediaPlaybackRateState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PlaybackRateButtonElement extends MediaButtonElement<PlaybackRateButtonState, MediaPlaybackRateState> {\n static readonly tagName = 'media-playback-rate-button';\n\n static override properties = {\n label: { type: String },\n disabled: { type: Boolean },\n commandfor: { type: String },\n } satisfies PropertyDeclarationMap<'label' \| 'disabled' \| 'commandfor'>;\n\n commandfor: string \| undefined = undefined;\n\n protected readonly core = new PlaybackRateButtonCore();\n protected readonly stateAttrMap = PlaybackRateButtonDataAttrs;\n protected readonly mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n protected override readonly hotkeyAction = 'speedUp';\n\n protected activate(state: MediaPlaybackRateState, event?: UIEvent): void {\n if (this.commandfor) {\n if (event instanceof KeyboardEvent) {\n // Custom elements do not synthesize a click from keyboard activation.\n // Dispatch one so the linked menu follows its normal open lifecycle.\n this.click();\n }\n\n return;\n }\n\n this.core.cycle(state);\n }\n\n protected override getIsButtonDisabled(): boolean {\n const media = this.mediaState.value;\n\n if (super.getIsButtonDisabled()) return true;\n\n if (this.commandfor && media && media.playbackRates.length === 0) return true;\n\n return false;\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n super.willUpdate(changed);\n\n if (changed.has('commandfor')) {\n if (this.commandfor) {\n this.setAttribute('commandfor', this.commandfor);\n } else {\n this.removeAttribute('commandfor');\n }\n }\n }\n\n protected override update(changed: PropertyValues): void {\n super.update(changed);\n\n const media = this.mediaState.value;\n if (!media \|\| !this.commandfor) return;\n\n applyElementProps(this, {\n 'aria-disabled': this.getIsButtonDisabled() ? 'true' : undefined,\n });\n }\n}\n\nexport namespace PlaybackRateButtonElement {\n export type State = PlaybackRateButtonState;\n}\n"],"mappings":";;;;;;AASA,IAAa,4BAAb,cAA+C,mBAAoE;;;EAShF,KAAA,aAAA,KAAA;EAEP,KAAA,OAAA,IAAI,uBAAuB;EACnB,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,kBAAkB;EACjD,KAAA,eAAA;;;EAbjB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,OAAO,EAAE,MAAM,OAAO;GACtB,UAAU,EAAE,MAAM,QAAQ;GAC1B,YAAY,EAAE,MAAM,OAAO;EAC7B;;CASA,SAAmB,OAA+B,OAAuB;EACvE,IAAI,KAAK,YAAY;GACnB,IAAI,iBAAiB,eAGnB,KAAK,MAAM;GAGb;EACF;EAEA,KAAK,KAAK,MAAM,KAAK;CACvB;CAEA,sBAAkD;EAChD,MAAM,QAAQ,KAAK,WAAW;EAE9B,IAAI,MAAM,oBAAoB,GAAG,OAAO;EAExC,IAAI,KAAK,cAAc,SAAS,MAAM,cAAc,WAAW,GAAG,OAAO;EAEzE,OAAO;CACT;CAEA,WAA8B,SAA+B;EAC3D,MAAM,WAAW,OAAO;EAExB,IAAI,QAAQ,IAAI,YAAY,GAAG;GAC7B,IAAI,KAAK,YACP,KAAK,aAAa,cAAc,KAAK,UAAU;QAE/C,KAAK,gBAAgB,YAAY;EAErC;CACF;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAGpB,IAAI,CADU,KAAK,WAAW,SAChB,CAAC,KAAK,YAAY;EAEhC,kBAAkB,MAAM,EACtB,iBAAiB,KAAK,oBAAoB,IAAI,SAAS,KAAA,EACzD,CAAC;CACH;AACF"}

package/dist/dev/ui/playback-rate-radio-group/element.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { MenuRadioGroupElement } from "../menu/radio-group.js";
-import { PlaybackRateRadioGroupCore } from "@videojs/core";
+import { PlaybackRateRadioGroupState } from "@videojs/core";
 import { PropertyValues } from "@videojs/element";
 //#region src/ui/playback-rate-radio-group/element.d.ts
 /**
@@ -7,7 +7,7 @@ import { PropertyValues } from "@videojs/element";
  * and availability with an enclosing menu. An optional `<template>` holding one `<media-menu-radio-item>` customizes
  * each generated item.
  */
-declare class PlaybackRateRadioGroupElement extends MenuRadioGroupElement {
+export declare class PlaybackRateRadioGroupElement extends MenuRadioGroupElement {
   #private;
   static readonly tagName = "media-playback-rate-radio-group";
   static properties: {
@@ -23,9 +23,8 @@ declare class PlaybackRateRadioGroupElement extends MenuRadioGroupElement {
   connectedCallback(): void;
   protected update(changed: PropertyValues): void;
 }
-declare namespace PlaybackRateRadioGroupElement {
-  type State = PlaybackRateRadioGroupCore.State;
+export declare namespace PlaybackRateRadioGroupElement {
+  type State = PlaybackRateRadioGroupState;
 }
 //#endregion
-export { PlaybackRateRadioGroupElement };
 //# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/playback-rate-radio-group/element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element.js","names":[~~"#mediaState","#core","#i18n","#options"~~],"sources":["../../../../src/ui/playback-rate-radio-group/element.ts"],"sourcesContent":["import {\n PlaybackRateRadioGroupCore,\n PlaybackRateRadioGroupDataAttrs,\n type PlaybackRateRadioGroupOption,\n} from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport { RadioOptionsController } from '../radio-options/controller';\n\n/*\n Menu radio group that generates a `<media-menu-radio-item>` per available playback rate and shares the selected label\n * and availability with an enclosing menu. An optional `<template>` holding one `<media-menu-radio-item>` customizes\n * each generated item.\n */\nexport class PlaybackRateRadioGroupElement extends MenuRadioGroupElement {\n static override readonly tagName = 'media-playback-rate-radio-group';\n\n static override properties = {\n ...MenuRadioGroupElement.properties,\n disabled: { type: Boolean },\n } satisfies PropertyDeclarationMap<'value' \| 'disabled'>;\n\n disabled = false;\n formatRate = PlaybackRateRadioGroupCore.defaultProps.formatRate;\n\n readonly #core = new PlaybackRateRadioGroupCore();\n readonly #i18n = new I18nController(this, i18nContext);\n readonly #mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n readonly #options = new RadioOptionsController<PlaybackRateRadioGroupOption>(this, {\n setItemAttributes: (item, option) => item.setAttribute('data-rate', option.value),\n onValueChange: (value) => {\n const media = this.#mediaState.value;\n\n if (media) this.#core.selectValue(media, value);\n },\n });\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (this.destroyed) return;\n\n if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n logMissingFeature(this.localName, this.#mediaState.displayName);\n }\n }\n\n protected override update(changed: PropertyValues): void {\n const media = this.#mediaState.value;\n let state: ~~PlaybackRateRadioGroupCore.State~~ \| null = null;\n\n if (media) {\n this.#core.setProps({ formatRate: this.formatRate, disabled: this.disabled });\n this.#core.setMedia(media);\n state = this.#core.getState();\n\n this.applyDefaultAriaLabel(\n translateText(this.#core.getLabel(state), this.#i18n.value, this.#core.getLabelParams(state))\n );\n this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n } else {\n this.publishMenuOptionState(true, true, 'unsupported');\n }\n\n super.update(changed);\n\n if (state) applyStateDataAttrs(this, state, PlaybackRateRadioGroupDataAttrs);\n }\n}\n\nexport namespace PlaybackRateRadioGroupElement {\n export type State = ~~PlaybackRateRadioGroupCore.State~~;\n}\n"],"mappings":";;;;;;;;;;;;;;;~~AAqBA~~,IAAa,gCAAb,cAAmD,sBAAsB;;;EAQ5D,KAAA,WAAA;EACE,KAAA,aAAA,2BAA2B,aAAa;EAEpC,KAAA,QAAA,IAAI,2BAA2B;EAC/B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,kBAAkB;EAC/D,KAAA,WAAA,IAAI,uBAAqD,MAAM;GACjF,oBAAoB,MAAM,WAAW,KAAK,aAAa,aAAa,OAAO,KAAK;GAChF,gBAAgB,UAAU;IACxB,MAAM,QAAQ,~~KAAKA~~,YAAY;IAE/B,IAAI,OAAO,~~KAAKC~~,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EApBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CAKA;CACA;CACA;CACA;CASA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,~~KAAKD~~,YAAY,SAAS,~~KAAKA~~,YAAY,aACzD,kBAAkB,KAAK,WAAW,~~KAAKA~~,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,~~KAAKA~~,YAAY;EAC/B,IAAI,~~QAAiD~~;~~EAErD~~,IAAI,OAAO;GACT,~~KAAKC~~,MAAM,SAAS;IAAE,YAAY,KAAK;IAAY,UAAU,KAAK;GAAS,CAAC;GAC5E,~~KAAKA~~,MAAM,SAAS,KAAK;GACzB,QAAQ,~~KAAKA~~,MAAM,SAAS;GAE5B,KAAK,sBACH,cAAc,~~KAAKA~~,MAAM,SAAS,KAAK,GAAG,~~KAAKC~~,MAAM,OAAO,~~KAAKD~~,MAAM,eAAe,KAAK,CAAC,CAC9F;GACA,~~KAAKE~~,SAAS,KAAK,OAAO,~~KAAKD~~,MAAM,OAAO,~~KAAKA~~,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,+BAA+B;CAC7E;AACF"}
1	+ {"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/element.ts"],"sourcesContent":["import {\n PlaybackRateRadioGroupCore,\n PlaybackRateRadioGroupDataAttrs,\n type PlaybackRateRadioGroupOption,\n type PlaybackRateRadioGroupState,\n} from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport { RadioOptionsController } from '../radio-options/controller';\n\n/*\n Menu radio group that generates a `<media-menu-radio-item>` per available playback rate and shares the selected label\n * and availability with an enclosing menu. An optional `<template>` holding one `<media-menu-radio-item>` customizes\n * each generated item.\n */\nexport class PlaybackRateRadioGroupElement extends MenuRadioGroupElement {\n static override readonly tagName = 'media-playback-rate-radio-group';\n\n static override properties = {\n ...MenuRadioGroupElement.properties,\n disabled: { type: Boolean },\n } satisfies PropertyDeclarationMap<'value' \| 'disabled'>;\n\n disabled = false;\n formatRate = PlaybackRateRadioGroupCore.defaultProps.formatRate;\n\n readonly #core = new PlaybackRateRadioGroupCore();\n readonly #i18n = new I18nController(this, i18nContext);\n readonly #mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n readonly #options = new RadioOptionsController<PlaybackRateRadioGroupOption>(this, {\n setItemAttributes: (item, option) => item.setAttribute('data-rate', option.value),\n onValueChange: (value) => {\n const media = this.#mediaState.value;\n\n if (media) this.#core.selectValue(media, value);\n },\n });\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (this.destroyed) return;\n\n if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n logMissingFeature(this.localName, this.#mediaState.displayName);\n }\n }\n\n protected override update(changed: PropertyValues): void {\n const media = this.#mediaState.value;\n let state: PlaybackRateRadioGroupState \| null = null;\n\n if (media) {\n this.#core.setProps({ formatRate: this.formatRate, disabled: this.disabled });\n this.#core.setMedia(media);\n state = this.#core.getState();\n\n this.applyDefaultAriaLabel(\n translateText(this.#core.getLabel(state), this.#i18n.value, this.#core.getLabelParams(state))\n );\n this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n } else {\n this.publishMenuOptionState(true, true, 'unsupported');\n }\n\n super.update(changed);\n\n if (state) applyStateDataAttrs(this, state, PlaybackRateRadioGroupDataAttrs);\n }\n}\n\nexport namespace PlaybackRateRadioGroupElement {\n export type State = PlaybackRateRadioGroupState;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAa,gCAAb,cAAmD,sBAAsB;;;EAQ5D,KAAA,WAAA;EACE,KAAA,aAAA,2BAA2B,aAAa;EAEpC,KAAA,QAAA,IAAI,2BAA2B;EAC/B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,kBAAkB;EAC/D,KAAA,WAAA,IAAI,uBAAqD,MAAM;GACjF,oBAAoB,MAAM,WAAW,KAAK,aAAa,aAAa,OAAO,KAAK;GAChF,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAK,YAAY;IAE/B,IAAI,OAAO,KAAK,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EApBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CAKA;CACA;CACA;CACA;CASA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,KAAK,YAAY,SAAS,KAAK,YAAY,aACzD,kBAAkB,KAAK,WAAW,KAAK,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAK,YAAY;EAC/B,IAAI,QAA4C;EAEhD,IAAI,OAAO;GACT,KAAK,MAAM,SAAS;IAAE,YAAY,KAAK;IAAY,UAAU,KAAK;GAAS,CAAC;GAC5E,KAAK,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAK,MAAM,SAAS;GAE5B,KAAK,sBACH,cAAc,KAAK,MAAM,SAAS,KAAK,GAAG,KAAK,MAAM,OAAO,KAAK,MAAM,eAAe,KAAK,CAAC,CAC9F;GACA,KAAK,SAAS,KAAK,OAAO,KAAK,MAAM,OAAO,KAAK,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,+BAA+B;CAC7E;AACF"}

package/dist/dev/ui/popover/element.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import { PopoverOpenChangeReason, PositioningBoundary } from "@videojs/core/dom"
 import { PropertyValues } from "@videojs/element";
 //#region src/ui/popover/element.d.ts
 /** @fires open-change - Fired when the popover's open state changes. */
-declare class PopoverElement extends UIElement {
+export declare class PopoverElement extends UIElement {
   #private;
   static readonly tagName: string;
   static properties: {
@@ -68,5 +68,4 @@ declare class PopoverElement extends UIElement {
   protected update(_changed: PropertyValues): void;
 }
 //#endregion
-export { PopoverElement };
 //# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/popover/element.js CHANGED Viewed

@@ -129,8 +129,10 @@ var PopoverElement = class extends UIElement {
 		this.#core.setProps(this);
 		if (this.#popover && changed.has("open")) {
 			const { active: interactionOpen } = this.#popover.input.current;
-			if (this.open !== interactionOpen) if (this.open) this.#popover.open();
-			else this.#popover.close();
+			if (this.open !== interactionOpen) {
+				if (this.open) this.#popover.open();
+				else this.#popover.close();
+			}
 		}
 	}
 	update(_changed) {

package/dist/dev/ui/popover/element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element.js","names":["#core","#containerCtx","#popupGroupCtx","#position","#disconnect","#popover","#snapshot","#cleanupTrigger","#currentTrigger","#syncTrigger","#triggerAbort"],"sources":["../../../../src/ui/popover/element.ts"],"sourcesContent":["import { POPUP_HOST_ATTR, PopoverCore, PopoverDataAttrs, type PopoverInput, type PopoverProps } from '@videojs/core';\nimport {\n applyElementProps,\n applyStateDataAttrs,\n createPopover,\n createTransition,\n type PopoverApi,\n type PopoverChangeDetails,\n type PopoverOpenChangeReason,\n type PositioningBoundary,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { SnapshotController } from '@videojs/store/html';\nimport { tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\n\nimport { containerContext } from '../../player/context';\nimport { popupGroupContext } from '../../player/popup-group-context';\nimport { PositionController } from '../position-controller';\nimport { UIElement } from '../ui-element';\n\n/** @fires open-change - Fired when the popover's open state changes. */\nexport class PopoverElement extends UIElement {\n static readonly tagName: string = 'media-popover';\n\n static override properties = {\n open: { type: Boolean },\n defaultOpen: { type: Boolean, attribute: 'default-open' },\n side: { type: String },\n align: { type: String },\n modal: { type: Boolean },\n closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n closeOnOutsideClick: { type: Boolean, attribute: 'close-on-outside-click' },\n openOnHover: { type: Boolean, attribute: 'open-on-hover' },\n delay: { type: Number },\n closeDelay: { type: Number, attribute: 'close-delay' },\n boundary: { type: String },\n } satisfies PropertyDeclarationMap<keyof PopoverCore.Props \| 'boundary'>;\n\n open = PopoverCore.defaultProps.open;\n defaultOpen = PopoverCore.defaultProps.defaultOpen;\n side = PopoverCore.defaultProps.side;\n align = PopoverCore.defaultProps.align;\n modal: PopoverProps['modal'] = PopoverCore.defaultProps.modal;\n closeOnEscape = PopoverCore.defaultProps.closeOnEscape;\n closeOnOutsideClick = PopoverCore.defaultProps.closeOnOutsideClick;\n openOnHover = PopoverCore.defaultProps.openOnHover;\n delay = PopoverCore.defaultProps.delay;\n closeDelay = PopoverCore.defaultProps.closeDelay;\n boundary: PositioningBoundary = 'container';\n\n readonly #core = new PopoverCore();\n readonly #containerCtx = new ContextConsumer(this, { context: containerContext, subscribe: true });\n readonly #popupGroupCtx = new ContextConsumer(this, { context: popupGroupContext });\n readonly #position = new PositionController(this);\n #popover: PopoverApi \| null = null;\n #snapshot: SnapshotController<PopoverInput> \| null = null;\n\n // Cleanup controllers\n #disconnect: AbortController \| null = null;\n #triggerAbort: AbortController \| null = null;\n #currentTrigger: HTMLElement \| null = null;\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (this.destroyed) return;\n\n this.setAttribute(POPUP_HOST_ATTR, '');\n\n this.#disconnect = new AbortController();\n\n this.#popover = createPopover({\n transition: createTransition(),\n onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n this.open = nextOpen;\n this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n },\n closeOnEscape: () => this.closeOnEscape,\n closeOnOutsideClick: () => this.closeOnOutsideClick,\n openOnHover: () => this.openOnHover,\n delay: () => this.delay,\n closeDelay: () => this.closeDelay,\n group: () => this.#popupGroupCtx.value,\n });\n\n // Register self as the popup element — the element IS the popup.\n this.#popover.setPopupElement(this);\n\n // Apply popup event handlers (pointerenter/leave, focusout) to self.\n applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });\n\n // Subscribe to interaction state for reactive updates.\n // Reuse the controller across connect/disconnect cycles to avoid\n // leaking stale controllers in the host's controller set.\n if (this.#snapshot) {\n this.#snapshot.track(this.#popover.input);\n } else {\n this.#snapshot = new SnapshotController(this, this.#popover.input);\n }\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n\n // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n // is already synced by `willUpdate` on the first render cycle.\n if (this.defaultOpen && !this.open) {\n this.#popover?.open();\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.#disconnect?.abort();\n this.#disconnect = null;\n }\n\n override destroyCallback(): void {\n this.#cleanupTrigger();\n this.#popover?.destroy();\n super.destroyCallback();\n }\n\n close(reason: PopoverOpenChangeReason = 'imperative-action'): void {\n this.#popover?.close(reason);\n }\n\n protected get triggerElement(): HTMLElement \| null {\n return this.#currentTrigger;\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n super.willUpdate(changed);\n this.#core.setProps(this);\n\n // Sync controlled open state\n if (this.#popover && changed.has('open')) {\n const { active: interactionOpen } = this.#popover.input.current;\n\n if (this.open !== interactionOpen) {\n if (this.open) {\n this.#popover.open();\n } else {\n this.#popover.close();\n }\n }\n }\n }\n\n protected override update(_changed: PropertyValues): void {\n super.update(_changed);\n\n if (!this.#popover) return;\n\n // Discover trigger via commandfor linkage.\n const triggerEl = this.#position.findTrigger();\n\n this.#syncTrigger(triggerEl);\n\n // Derive state from core + input.\n const input = this.#popover.input.current;\n\n this.#core.setInput(input);\n const state = this.#core.getState();\n\n // Apply popup ARIA and data attributes to self.\n applyElementProps(this, this.#core.getPopupAttrs(state));\n applyStateDataAttrs(this, state, PopoverDataAttrs);\n\n // Show/hide via Popover API AFTER data attributes are applied so\n // `data-starting-style` is present before the first visible frame.\n if (state.open) {\n tryShowPopover(this);\n } else {\n tryHidePopover(this);\n }\n\n // Apply trigger ARIA to the discovered trigger.\n if (this.#currentTrigger) {\n applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));\n }\n\n // Skip positioning when closed — no rects to measure.\n if (!state.open) {\n this.#position.cleanup();\n return;\n }\n\n this.#position.sync({\n anchorName: this.id,\n position: { side: state.side, align: state.align },\n trigger: this.#currentTrigger,\n boundary: this.boundary,\n container: this.#containerCtx.value?.container ?? null,\n onSideChange: (side) => this.setAttribute(PopoverDataAttrs.side, side),\n });\n }\n\n // --- Trigger management ---\n\n #syncTrigger(triggerEl: HTMLElement \| null): void {\n if (triggerEl === this.#currentTrigger) return;\n\n this.#position.cleanup();\n this.#cleanupTrigger();\n this.#currentTrigger = triggerEl;\n this.#popover?.setTriggerElement(triggerEl);\n\n if (triggerEl && this.#popover) {\n this.#triggerAbort = new AbortController();\n applyElementProps(triggerEl, this.#popover.triggerProps, { signal: this.#triggerAbort.signal });\n }\n }\n\n #cleanupTrigger(): void {\n if (this.#currentTrigger) {\n applyElementProps(this.#currentTrigger, {\n 'aria-expanded': undefined,\n 'aria-haspopup': undefined,\n 'aria-controls': undefined,\n });\n }\n\n this.#triggerAbort?.abort();\n this.#triggerAbort = null;\n this.#currentTrigger = null;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/popover/element.ts"],"sourcesContent":["import { POPUP_HOST_ATTR, PopoverCore, PopoverDataAttrs, type PopoverInput, type PopoverProps } from '@videojs/core';\nimport {\n applyElementProps,\n applyStateDataAttrs,\n createPopover,\n createTransition,\n type PopoverApi,\n type PopoverChangeDetails,\n type PopoverOpenChangeReason,\n type PositioningBoundary,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { SnapshotController } from '@videojs/store/html';\nimport { tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\n\nimport { containerContext } from '../../player/context';\nimport { popupGroupContext } from '../../player/popup-group-context';\nimport { PositionController } from '../position-controller';\nimport { UIElement } from '../ui-element';\n\n/** @fires open-change - Fired when the popover's open state changes. */\nexport class PopoverElement extends UIElement {\n static readonly tagName: string = 'media-popover';\n\n static override properties = {\n open: { type: Boolean },\n defaultOpen: { type: Boolean, attribute: 'default-open' },\n side: { type: String },\n align: { type: String },\n modal: { type: Boolean },\n closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n closeOnOutsideClick: { type: Boolean, attribute: 'close-on-outside-click' },\n openOnHover: { type: Boolean, attribute: 'open-on-hover' },\n delay: { type: Number },\n closeDelay: { type: Number, attribute: 'close-delay' },\n boundary: { type: String },\n } satisfies PropertyDeclarationMap<keyof PopoverProps>;\n\n open = PopoverCore.defaultProps.open;\n defaultOpen = PopoverCore.defaultProps.defaultOpen;\n side = PopoverCore.defaultProps.side;\n align = PopoverCore.defaultProps.align;\n modal: PopoverProps['modal'] = PopoverCore.defaultProps.modal;\n closeOnEscape = PopoverCore.defaultProps.closeOnEscape;\n closeOnOutsideClick = PopoverCore.defaultProps.closeOnOutsideClick;\n openOnHover = PopoverCore.defaultProps.openOnHover;\n delay = PopoverCore.defaultProps.delay;\n closeDelay = PopoverCore.defaultProps.closeDelay;\n boundary: PositioningBoundary = 'container';\n\n readonly #core = new PopoverCore();\n readonly #containerCtx = new ContextConsumer(this, { context: containerContext, subscribe: true });\n readonly #popupGroupCtx = new ContextConsumer(this, { context: popupGroupContext });\n readonly #position = new PositionController(this);\n #popover: PopoverApi \| null = null;\n #snapshot: SnapshotController<PopoverInput> \| null = null;\n\n // Cleanup controllers\n #disconnect: AbortController \| null = null;\n #triggerAbort: AbortController \| null = null;\n #currentTrigger: HTMLElement \| null = null;\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (this.destroyed) return;\n\n this.setAttribute(POPUP_HOST_ATTR, '');\n\n this.#disconnect = new AbortController();\n\n this.#popover = createPopover({\n transition: createTransition(),\n onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n this.open = nextOpen;\n this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n },\n closeOnEscape: () => this.closeOnEscape,\n closeOnOutsideClick: () => this.closeOnOutsideClick,\n openOnHover: () => this.openOnHover,\n delay: () => this.delay,\n closeDelay: () => this.closeDelay,\n group: () => this.#popupGroupCtx.value,\n });\n\n // Register self as the popup element — the element IS the popup.\n this.#popover.setPopupElement(this);\n\n // Apply popup event handlers (pointerenter/leave, focusout) to self.\n applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });\n\n // Subscribe to interaction state for reactive updates.\n // Reuse the controller across connect/disconnect cycles to avoid\n // leaking stale controllers in the host's controller set.\n if (this.#snapshot) {\n this.#snapshot.track(this.#popover.input);\n } else {\n this.#snapshot = new SnapshotController(this, this.#popover.input);\n }\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n\n // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n // is already synced by `willUpdate` on the first render cycle.\n if (this.defaultOpen && !this.open) {\n this.#popover?.open();\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.#disconnect?.abort();\n this.#disconnect = null;\n }\n\n override destroyCallback(): void {\n this.#cleanupTrigger();\n this.#popover?.destroy();\n super.destroyCallback();\n }\n\n close(reason: PopoverOpenChangeReason = 'imperative-action'): void {\n this.#popover?.close(reason);\n }\n\n protected get triggerElement(): HTMLElement \| null {\n return this.#currentTrigger;\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n super.willUpdate(changed);\n this.#core.setProps(this);\n\n // Sync controlled open state\n if (this.#popover && changed.has('open')) {\n const { active: interactionOpen } = this.#popover.input.current;\n\n if (this.open !== interactionOpen) {\n if (this.open) {\n this.#popover.open();\n } else {\n this.#popover.close();\n }\n }\n }\n }\n\n protected override update(_changed: PropertyValues): void {\n super.update(_changed);\n\n if (!this.#popover) return;\n\n // Discover trigger via commandfor linkage.\n const triggerEl = this.#position.findTrigger();\n\n this.#syncTrigger(triggerEl);\n\n // Derive state from core + input.\n const input = this.#popover.input.current;\n\n this.#core.setInput(input);\n const state = this.#core.getState();\n\n // Apply popup ARIA and data attributes to self.\n applyElementProps(this, this.#core.getPopupAttrs(state));\n applyStateDataAttrs(this, state, PopoverDataAttrs);\n\n // Show/hide via Popover API AFTER data attributes are applied so\n // `data-starting-style` is present before the first visible frame.\n if (state.open) {\n tryShowPopover(this);\n } else {\n tryHidePopover(this);\n }\n\n // Apply trigger ARIA to the discovered trigger.\n if (this.#currentTrigger) {\n applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));\n }\n\n // Skip positioning when closed — no rects to measure.\n if (!state.open) {\n this.#position.cleanup();\n return;\n }\n\n this.#position.sync({\n anchorName: this.id,\n position: { side: state.side, align: state.align },\n trigger: this.#currentTrigger,\n boundary: this.boundary,\n container: this.#containerCtx.value?.container ?? null,\n onSideChange: (side) => this.setAttribute(PopoverDataAttrs.side, side),\n });\n }\n\n // --- Trigger management ---\n\n #syncTrigger(triggerEl: HTMLElement \| null): void {\n if (triggerEl === this.#currentTrigger) return;\n\n this.#position.cleanup();\n this.#cleanupTrigger();\n this.#currentTrigger = triggerEl;\n this.#popover?.setTriggerElement(triggerEl);\n\n if (triggerEl && this.#popover) {\n this.#triggerAbort = new AbortController();\n applyElementProps(triggerEl, this.#popover.triggerProps, { signal: this.#triggerAbort.signal });\n }\n }\n\n #cleanupTrigger(): void {\n if (this.#currentTrigger) {\n applyElementProps(this.#currentTrigger, {\n 'aria-expanded': undefined,\n 'aria-haspopup': undefined,\n 'aria-controls': undefined,\n });\n }\n\n this.#triggerAbort?.abort();\n this.#triggerAbort = null;\n this.#currentTrigger = null;\n }\n}\n"],"mappings":"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"}

package/dist/dev/ui/position-controller.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"position-controller.js","names":[~~"#host","#positioner","#releaseImplicitBinding","#implicitBinding"~~],"sources":["../../../src/ui/position-controller.ts"],"sourcesContent":["import { PopupPositioner, type PopupPositionerOptions } from '@videojs/core/dom';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\n\nexport type PositionControllerHost = ReactiveControllerHost & HTMLElement;\n\nexport type PositionControllerOptions = Omit<PopupPositionerOptions, 'popup'>;\n\nlet popupId = 0;\n\ninterface ImplicitTriggerBinding {\n id: string;\n trigger: HTMLElement;\n}\n\n/** Connects a popup element to the shared positioning lifecycle. /\nexport class PositionController implements ReactiveController {\n readonly #host: PositionControllerHost;\n readonly #positioner = new PopupPositioner();\n #implicitBinding: ImplicitTriggerBinding \| null = null;\n\n constructor(host: PositionControllerHost) {\n this.#host = host;\n host.addController(this);\n }\n\n /* Discover an explicit trigger by ID or one linked via `commandfor`. */\n findTrigger(trigger?: string): HTMLElement \| null {\n const root = this.#host.getRootNode();\n\n if (root.nodeType !== Node.DOCUMENT_NODE && root.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {\n this.#releaseImplicitBinding();\n return null;\n }\n\n const scopedRoot = root as Document \| DocumentFragment;\n\n if (trigger) {\n this.#releaseImplicitBinding();\n return scopedRoot.getElementById(trigger);\n }\n\n if (this.#implicitBinding) {\n const { id, trigger: boundTrigger } = this.#implicitBinding;\n\n if (\n this.#host.id === id &&\n boundTrigger.getAttribute('commandfor') === id &&\n this.#host.previousElementSibling === boundTrigger\n ) {\n return boundTrigger;\n }\n\n this.#releaseImplicitBinding();\n }\n\n if (this.#host.id) {\n return scopedRoot.querySelector<HTMLElement>(`[commandfor=\"${this.#host.id}\"]`);\n }\n\n const adjacent = this.#host.previousElementSibling;\n\n if (!(adjacent instanceof HTMLElement)) {\n if (__DEV__) {\n console.warn(\n `[${this.#host.localName}] No trigger was found. Place the popup immediately after its trigger or link them explicitly.`\n );\n }\n\n return null;\n }\n\n const claimedTarget = adjacent.getAttribute('commandfor');\n\n if (claimedTarget) {\n if (__DEV__) {\n console.warn(\n `[${this.#host.localName}] The adjacent trigger already targets \\`${claimedTarget}\\`; link this popup explicitly.`\n );\n }\n\n return null;\n }\n\n const id = nextPopupId(scopedRoot);\n\n this.#host.id = id;\n adjacent.setAttribute('commandfor', id);\n this.#implicitBinding = { id, trigger: adjacent };\n return adjacent;\n }\n\n sync(options: PositionControllerOptions): void {\n this.#positioner.sync({ ...options, popup: this.#host });\n }\n\n cleanup(): void {\n this.#positioner.cleanup();\n }\n\n hostDisconnected(): void {\n this.cleanup();\n this.#releaseImplicitBinding();\n }\n\n hostDestroyed(): void {\n this.cleanup();\n this.#releaseImplicitBinding();\n }\n\n #releaseImplicitBinding(): void {\n const binding = this.#implicitBinding;\n if (!binding) return;\n\n if (binding.trigger.getAttribute('commandfor') === binding.id) {\n binding.trigger.removeAttribute('commandfor');\n }\n\n if (this.#host.id === binding.id) {\n this.#host.removeAttribute('id');\n }\n\n this.#implicitBinding = null;\n }\n}\n\nfunction nextPopupId(root: Document \| DocumentFragment): string {\n let id: string;\n\n do id = `vjs-popup-${++popupId}`;\n while (root.getElementById(id));\n\n return id;\n}\n"],"mappings":";;AAOA,IAAI,UAAU;;AAQd,IAAa,qBAAb,MAA8D;CAC5D;CACA,cAAuB,IAAI,gBAAgB;CAC3C,mBAAkD;CAElD,YAAY,MAA8B;EACxC,~~KAAKA~~,QAAQ;EACb,KAAK,cAAc,IAAI;CACzB;;CAGA,YAAY,SAAsC;EAChD,MAAM,OAAO,~~KAAKA~~,MAAM,YAAY;EAEpC,IAAI,KAAK,aAAa,KAAK,iBAAiB,KAAK,aAAa,KAAK,wBAAwB;GACzF,~~KAAKE~~,wBAAwB;GAC7B,OAAO;EACT;EAEA,MAAM,aAAa;EAEnB,IAAI,SAAS;GACX,~~KAAKA~~,wBAAwB;GAC7B,OAAO,WAAW,eAAe,OAAO;EAC1C;EAEA,IAAI,~~KAAKC~~,kBAAkB;GACzB,MAAM,EAAE,IAAI,SAAS,iBAAiB,~~KAAKA~~;GAE3C,IACE,~~KAAKH~~,MAAM,OAAO,MAClB,aAAa,aAAa,YAAY,MAAM,MAC5C,~~KAAKA~~,MAAM,2BAA2B,cAEtC,OAAO;GAGT,~~KAAKE~~,wBAAwB;EAC/B;EAEA,IAAI,~~KAAKF~~,MAAM,IACb,OAAO,WAAW,cAA2B,gBAAgB,~~KAAKA~~,MAAM,GAAG,GAAG;EAGhF,MAAM,WAAW,~~KAAKA~~,MAAM;EAE5B,IAAI,EAAE,oBAAoB,cAAc;GAEpC,QAAQ,KACN,IAAI,~~KAAKA~~,MAAM,UAAU,+FAC3B;GAGF,OAAO;EACT;EAEA,MAAM,gBAAgB,SAAS,aAAa,YAAY;EAExD,IAAI,eAAe;GAEf,QAAQ,KACN,IAAI,~~KAAKA~~,MAAM,UAAU,2CAA2C,cAAc,gCACpF;GAGF,OAAO;EACT;EAEA,MAAM,KAAK,YAAY,UAAU;EAEjC,~~KAAKA~~,MAAM,KAAK;EAChB,SAAS,aAAa,cAAc,EAAE;EACtC,~~KAAKG~~,mBAAmB;GAAE;GAAI,SAAS;EAAS;EAChD,OAAO;CACT;CAEA,KAAK,SAA0C;EAC7C,~~KAAKF~~,YAAY,KAAK;GAAE,GAAG;GAAS,OAAO,~~KAAKD~~;EAAM,CAAC;CACzD;CAEA,UAAgB;EACd,~~KAAKC~~,YAAY,QAAQ;CAC3B;CAEA,mBAAyB;EACvB,KAAK,QAAQ;EACb,~~KAAKC~~,wBAAwB;CAC/B;CAEA,gBAAsB;EACpB,KAAK,QAAQ;EACb,~~KAAKA~~,wBAAwB;CAC/B;CAEA,0BAAgC;EAC9B,MAAM,UAAU,~~KAAKC~~;EACrB,IAAI,CAAC,SAAS;EAEd,IAAI,QAAQ,QAAQ,aAAa,YAAY,MAAM,QAAQ,IACzD,QAAQ,QAAQ,gBAAgB,YAAY;EAG9C,IAAI,~~KAAKH~~,MAAM,OAAO,QAAQ,IAC5B,~~KAAKA~~,MAAM,gBAAgB,IAAI;EAGjC,~~KAAKG~~,mBAAmB;CAC1B;AACF;AAEA,SAAS,YAAY,MAA2C;CAC9D,IAAI;CAEJ;EAAG,KAAK,aAAa,EAAE;QAChB,KAAK,eAAe,EAAE;CAE7B,OAAO;AACT"}
1	+ {"version":3,"file":"position-controller.js","names":[],"sources":["../../../src/ui/position-controller.ts"],"sourcesContent":["import { PopupPositioner, type PopupPositionerOptions } from '@videojs/core/dom';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\n\nexport type PositionControllerHost = ReactiveControllerHost & HTMLElement;\n\nexport type PositionControllerOptions = Omit<PopupPositionerOptions, 'popup'>;\n\nlet popupId = 0;\n\ninterface ImplicitTriggerBinding {\n id: string;\n trigger: HTMLElement;\n}\n\n/** Connects a popup element to the shared positioning lifecycle. /\nexport class PositionController implements ReactiveController {\n readonly #host: PositionControllerHost;\n readonly #positioner = new PopupPositioner();\n #implicitBinding: ImplicitTriggerBinding \| null = null;\n\n constructor(host: PositionControllerHost) {\n this.#host = host;\n host.addController(this);\n }\n\n /* Discover an explicit trigger by ID or one linked via `commandfor`. */\n findTrigger(trigger?: string): HTMLElement \| null {\n const root = this.#host.getRootNode();\n\n if (root.nodeType !== Node.DOCUMENT_NODE && root.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {\n this.#releaseImplicitBinding();\n return null;\n }\n\n const scopedRoot = root as Document \| DocumentFragment;\n\n if (trigger) {\n this.#releaseImplicitBinding();\n return scopedRoot.getElementById(trigger);\n }\n\n if (this.#implicitBinding) {\n const { id, trigger: boundTrigger } = this.#implicitBinding;\n\n if (\n this.#host.id === id &&\n boundTrigger.getAttribute('commandfor') === id &&\n this.#host.previousElementSibling === boundTrigger\n ) {\n return boundTrigger;\n }\n\n this.#releaseImplicitBinding();\n }\n\n if (this.#host.id) {\n return scopedRoot.querySelector<HTMLElement>(`[commandfor=\"${this.#host.id}\"]`);\n }\n\n const adjacent = this.#host.previousElementSibling;\n\n if (!(adjacent instanceof HTMLElement)) {\n if (__DEV__) {\n console.warn(\n `[${this.#host.localName}] No trigger was found. Place the popup immediately after its trigger or link them explicitly.`\n );\n }\n\n return null;\n }\n\n const claimedTarget = adjacent.getAttribute('commandfor');\n\n if (claimedTarget) {\n if (__DEV__) {\n console.warn(\n `[${this.#host.localName}] The adjacent trigger already targets \\`${claimedTarget}\\`; link this popup explicitly.`\n );\n }\n\n return null;\n }\n\n const id = nextPopupId(scopedRoot);\n\n this.#host.id = id;\n adjacent.setAttribute('commandfor', id);\n this.#implicitBinding = { id, trigger: adjacent };\n return adjacent;\n }\n\n sync(options: PositionControllerOptions): void {\n this.#positioner.sync({ ...options, popup: this.#host });\n }\n\n cleanup(): void {\n this.#positioner.cleanup();\n }\n\n hostDisconnected(): void {\n this.cleanup();\n this.#releaseImplicitBinding();\n }\n\n hostDestroyed(): void {\n this.cleanup();\n this.#releaseImplicitBinding();\n }\n\n #releaseImplicitBinding(): void {\n const binding = this.#implicitBinding;\n if (!binding) return;\n\n if (binding.trigger.getAttribute('commandfor') === binding.id) {\n binding.trigger.removeAttribute('commandfor');\n }\n\n if (this.#host.id === binding.id) {\n this.#host.removeAttribute('id');\n }\n\n this.#implicitBinding = null;\n }\n}\n\nfunction nextPopupId(root: Document \| DocumentFragment): string {\n let id: string;\n\n do id = `vjs-popup-${++popupId}`;\n while (root.getElementById(id));\n\n return id;\n}\n"],"mappings":";;AAOA,IAAI,UAAU;;AAQd,IAAa,qBAAb,MAA8D;CAC5D;CACA,cAAuB,IAAI,gBAAgB;CAC3C,mBAAkD;CAElD,YAAY,MAA8B;EACxC,KAAK,QAAQ;EACb,KAAK,cAAc,IAAI;CACzB;;CAGA,YAAY,SAAsC;EAChD,MAAM,OAAO,KAAK,MAAM,YAAY;EAEpC,IAAI,KAAK,aAAa,KAAK,iBAAiB,KAAK,aAAa,KAAK,wBAAwB;GACzF,KAAK,wBAAwB;GAC7B,OAAO;EACT;EAEA,MAAM,aAAa;EAEnB,IAAI,SAAS;GACX,KAAK,wBAAwB;GAC7B,OAAO,WAAW,eAAe,OAAO;EAC1C;EAEA,IAAI,KAAK,kBAAkB;GACzB,MAAM,EAAE,IAAI,SAAS,iBAAiB,KAAK;GAE3C,IACE,KAAK,MAAM,OAAO,MAClB,aAAa,aAAa,YAAY,MAAM,MAC5C,KAAK,MAAM,2BAA2B,cAEtC,OAAO;GAGT,KAAK,wBAAwB;EAC/B;EAEA,IAAI,KAAK,MAAM,IACb,OAAO,WAAW,cAA2B,gBAAgB,KAAK,MAAM,GAAG,GAAG;EAGhF,MAAM,WAAW,KAAK,MAAM;EAE5B,IAAI,EAAE,oBAAoB,cAAc;GAEpC,QAAQ,KACN,IAAI,KAAK,MAAM,UAAU,+FAC3B;GAGF,OAAO;EACT;EAEA,MAAM,gBAAgB,SAAS,aAAa,YAAY;EAExD,IAAI,eAAe;GAEf,QAAQ,KACN,IAAI,KAAK,MAAM,UAAU,2CAA2C,cAAc,gCACpF;GAGF,OAAO;EACT;EAEA,MAAM,KAAK,YAAY,UAAU;EAEjC,KAAK,MAAM,KAAK;EAChB,SAAS,aAAa,cAAc,EAAE;EACtC,KAAK,mBAAmB;GAAE;GAAI,SAAS;EAAS;EAChD,OAAO;CACT;CAEA,KAAK,SAA0C;EAC7C,KAAK,YAAY,KAAK;GAAE,GAAG;GAAS,OAAO,KAAK;EAAM,CAAC;CACzD;CAEA,UAAgB;EACd,KAAK,YAAY,QAAQ;CAC3B;CAEA,mBAAyB;EACvB,KAAK,QAAQ;EACb,KAAK,wBAAwB;CAC/B;CAEA,gBAAsB;EACpB,KAAK,QAAQ;EACb,KAAK,wBAAwB;CAC/B;CAEA,0BAAgC;EAC9B,MAAM,UAAU,KAAK;EACrB,IAAI,CAAC,SAAS;EAEd,IAAI,QAAQ,QAAQ,aAAa,YAAY,MAAM,QAAQ,IACzD,QAAQ,QAAQ,gBAAgB,YAAY;EAG9C,IAAI,KAAK,MAAM,OAAO,QAAQ,IAC5B,KAAK,MAAM,gBAAgB,IAAI;EAGjC,KAAK,mBAAmB;CAC1B;AACF;AAEA,SAAS,YAAY,MAA2C;CAC9D,IAAI;CAEJ;EAAG,KAAK,aAAa,EAAE;QAChB,KAAK,eAAe,EAAE;CAE7B,OAAO;AACT"}

package/dist/dev/ui/poster/element.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ import { PropertyValues } from "@videojs/element";
  * it: `<media-poster><img alt="Keynote speaker"></media-poster>`. Inside a skin, an `<img slot="poster">` of yours
  * replaces the one the skin carries.
  */
-declare class PosterElement extends UIElement {
+export declare class PosterElement extends UIElement {
   #private;
   static readonly tagName = "media-poster";
   constructor();
@@ -21,5 +21,4 @@ declare class PosterElement extends UIElement {
   protected update(changed: PropertyValues): void;
 }
 //#endregion
-export { PosterElement };
 //# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/poster/element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element.js","names":["#core","#shadow","#fallback","#children","#playback","#metadata","#disconnect","#adopt","#loadState","#image","#imageLoadState","#applySource","#owned","#imageEvents"],"sources":["../../../../src/ui/poster/element.ts"],"sourcesContent":["import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { findComposedElement, isHTMLImageElement } 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: block;\n}\nimg {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: var(--media-object-fit, contain);\n object-position: var(--media-object-position, center);\n}\nimg:not([src]) {\n visibility: hidden;\n}`;\n\n/*\n Whether anything already points this image somewhere, which answers both whether the author owns the source and\n * whether there is a download to wait for. A `<source>` counts: inside a `<picture>` it can win over the `src`.\n /\nfunction hasSource(img: HTMLImageElement): boolean {\n if (img.hasAttribute('src') \|\| img.hasAttribute('srcset')) return true;\n\n const parent = img.parentElement;\n\n return parent?.localName === 'picture' && parent.querySelector('source') !== null;\n}\n\n/\n Whether `complete` on this image describes a request. It is also true for one that omits both `src` and `srcset`,\n * whatever a parent `<picture>` is fetching on its behalf, so only an image sourced from its own attributes can be\n * read.\n /\nfunction hasOwnSource(img: HTMLImageElement): boolean {\n return !!img.getAttribute('src') \|\| img.hasAttribute('srcset');\n}\n\n/\n The image the element draws when none is supplied, reachable from outside as `::part(image)`. Decorative by default,\n * like the one each skin carries: a resolved URL says nothing about what it depicts.\n /\nfunction createFallbackImage(): HTMLImageElement {\n const img = document.createElement('img');\n\n img.alt = '';\n img.setAttribute('part', 'image');\n img.setAttribute('decoding', 'async');\n\n return img;\n}\n\n/* How the current source is faring. /\ntype ImageLoadState = 'pending' \| 'loaded' \| 'error';\n\n/\n `<media-poster>` — sets `src` on a poster image it does not own.\n \n The image is a child, as in `<picture>`, but sourcing runs the other way around: `<picture>` treats the `src` on its\n * `<img>` as the fallback, while here an image with no source of its own is the one this element fills in. Give the\n * child a `src`, a `srcset`, or `<source>` candidates and it is yours, left alone.\n \n Left empty, the element draws an image of its own in its shadow root. Supply one as a child to describe it or wrap\n * it: `<media-poster><img alt=\"Keynote speaker\"></media-poster>`. Inside a skin, an `<img slot=\"poster\">` of yours\n * replaces the one the skin carries.\n /\nexport class PosterElement extends UIElement {\n static readonly tagName = 'media-poster';\n\n readonly #core = new PosterCore();\n readonly #shadow = this.attachShadow({ mode: 'open' });\n readonly #fallback = createFallbackImage();\n readonly #children = new MutationObserver(() => this.requestUpdate());\n\n readonly #playback = new PlayerController(this, playerContext, selectPlayback);\n readonly #metadata = new PlayerController(this, playerContext, selectMetadata);\n\n #image: HTMLImageElement \| null = null;\n /* Whether `#image` had no source of its own when it became active. /\n #owned = false;\n #imageLoadState: ImageLoadState = 'pending';\n\n #imageEvents: AbortController \| null = null;\n #disconnect: AbortController \| 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 override connectedCallback(): void {\n super.connectedCallback();\n\n if (this.destroyed) return;\n\n this.#disconnect = new AbortController();\n const { signal } = this.#disconnect;\n\n // Two ways the image can change: a skin's forwarding slot fills or empties,\n // which bubbles here, or a child is added or removed, which announces nothing.\n this.addEventListener('slotchange', () => this.requestUpdate(), { signal });\n this.#children.observe(this, { childList: true, subtree: true });\n\n if (__DEV__ && !this.#playback.value) {\n logMissingFeature(this.localName, this.#playback.displayName ?? 'playback');\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n\n this.#adopt(null);\n this.#children.disconnect();\n this.#disconnect?.abort();\n this.#disconnect = null;\n }\n\n get #loadState(): PosterImageLoadState {\n if (!this.#image \|\| !hasSource(this.#image)) return 'none';\n\n return this.#imageLoadState === 'pending' ? 'loading' : this.#imageLoadState;\n }\n\n protected override update(changed: PropertyValues): void {\n super.update(changed);\n\n const playback = this.#playback.value;\n if (!playback) return;\n\n // `metadata` is optional: without it nothing resolves a URL, and this stays\n // a visibility wrapper around whatever the author supplied.\n this.#core.setMedia({\n started: playback.started,\n poster: this.#metadata.value?.poster ?? '',\n });\n\n const { src } = this.#core.getState();\n\n // A skin forwards its own `<slot name=\"poster\">` in, so the image may sit a slot or two down inside a `<picture>`.\n this.#adopt(findComposedElement(this, isHTMLImageElement) ?? this.#fallback);\n this.#applySource(src);\n\n this.#core.setImageLoadState(this.#loadState);\n applyStateDataAttrs(this, this.#core.getState(), PosterDataAttrs);\n }\n\n /\n Ownership is settled once, when an image becomes active: after the first fill the `src` we set would itself look\n * authored. Re-slot an image with a source to hand it back, the way React decides a field is controlled at mount.\n */\n #adopt(next: HTMLImageElement \| null): void {\n if (next === this.#image) return;\n\n // An image that steps aside keeps downloading whatever we pointed it at.\n if (this.#owned) this.#image?.removeAttribute('src');\n\n this.#imageEvents?.abort();\n this.#imageEvents = null;\n\n this.#image = next;\n this.#owned = next !== null && !hasSource(next);\n this.#imageLoadState = 'pending';\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 if (!next) return;\n\n // An image that finished before we started listening never fires again, so\n // its load state has to be read off it. Decoded pixels stand on their own;\n // the absence of them only means failure once `complete` can be trusted.\n if (next.naturalWidth > 0) this.#imageLoadState = 'loaded';\n else if (next.complete && hasOwnSource(next)) this.#imageLoadState = 'error';\n\n this.#imageEvents = new AbortController();\n const { signal } = this.#imageEvents;\n const settle = (loadState: ImageLoadState) => () => {\n this.#imageLoadState = loadState;\n this.requestUpdate();\n };\n\n next.addEventListener('load', settle('loaded'), { signal });\n next.addEventListener('error', settle('error'), { signal });\n }\n\n #applySource(src: string): void {\n const img = this.#image;\n if (!img \|\| !this.#owned) return;\n\n if (!src) {\n this.#imageLoadState = 'pending';\n img.removeAttribute('src');\n } else if (img.getAttribute('src') !== src) {\n // Reset before the write, not after: how the last source fared says\n // nothing about this one, and the write itself can settle it.\n this.#imageLoadState = 'pending';\n img.setAttribute('src', src);\n }\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/poster/element.ts"],"sourcesContent":["import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { findComposedElement, isHTMLImageElement } 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: block;\n}\nimg {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: var(--media-object-fit, contain);\n object-position: var(--media-object-position, center);\n}\nimg:not([src]) {\n visibility: hidden;\n}`;\n\n/*\n Whether anything already points this image somewhere, which answers both whether the author owns the source and\n * whether there is a download to wait for. A `<source>` counts: inside a `<picture>` it can win over the `src`.\n /\nfunction hasSource(img: HTMLImageElement): boolean {\n if (img.hasAttribute('src') \|\| img.hasAttribute('srcset')) return true;\n\n const parent = img.parentElement;\n\n return parent?.localName === 'picture' && parent.querySelector('source') !== null;\n}\n\n/\n Whether `complete` on this image describes a request. It is also true for one that omits both `src` and `srcset`,\n * whatever a parent `<picture>` is fetching on its behalf, so only an image sourced from its own attributes can be\n * read.\n /\nfunction hasOwnSource(img: HTMLImageElement): boolean {\n return !!img.getAttribute('src') \|\| img.hasAttribute('srcset');\n}\n\n/\n The image the element draws when none is supplied, reachable from outside as `::part(image)`. Decorative by default,\n * like the one each skin carries: a resolved URL says nothing about what it depicts.\n /\nfunction createFallbackImage(): HTMLImageElement {\n const img = document.createElement('img');\n\n img.alt = '';\n img.setAttribute('part', 'image');\n img.setAttribute('decoding', 'async');\n\n return img;\n}\n\n/* How the current source is faring. /\ntype ImageLoadState = 'pending' \| 'loaded' \| 'error';\n\n/\n `<media-poster>` — sets `src` on a poster image it does not own.\n \n The image is a child, as in `<picture>`, but sourcing runs the other way around: `<picture>` treats the `src` on its\n * `<img>` as the fallback, while here an image with no source of its own is the one this element fills in. Give the\n * child a `src`, a `srcset`, or `<source>` candidates and it is yours, left alone.\n \n Left empty, the element draws an image of its own in its shadow root. Supply one as a child to describe it or wrap\n * it: `<media-poster><img alt=\"Keynote speaker\"></media-poster>`. Inside a skin, an `<img slot=\"poster\">` of yours\n * replaces the one the skin carries.\n /\nexport class PosterElement extends UIElement {\n static readonly tagName = 'media-poster';\n\n readonly #core = new PosterCore();\n readonly #shadow = this.attachShadow({ mode: 'open' });\n readonly #fallback = createFallbackImage();\n readonly #children = new MutationObserver(() => this.requestUpdate());\n\n readonly #playback = new PlayerController(this, playerContext, selectPlayback);\n readonly #metadata = new PlayerController(this, playerContext, selectMetadata);\n\n #image: HTMLImageElement \| null = null;\n /* Whether `#image` had no source of its own when it became active. /\n #owned = false;\n #imageLoadState: ImageLoadState = 'pending';\n\n #imageEvents: AbortController \| null = null;\n #disconnect: AbortController \| 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 override connectedCallback(): void {\n super.connectedCallback();\n\n if (this.destroyed) return;\n\n this.#disconnect = new AbortController();\n const { signal } = this.#disconnect;\n\n // Two ways the image can change: a skin's forwarding slot fills or empties,\n // which bubbles here, or a child is added or removed, which announces nothing.\n this.addEventListener('slotchange', () => this.requestUpdate(), { signal });\n this.#children.observe(this, { childList: true, subtree: true });\n\n if (__DEV__ && !this.#playback.value) {\n logMissingFeature(this.localName, this.#playback.displayName ?? 'playback');\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n\n this.#adopt(null);\n this.#children.disconnect();\n this.#disconnect?.abort();\n this.#disconnect = null;\n }\n\n get #loadState(): PosterImageLoadState {\n if (!this.#image \|\| !hasSource(this.#image)) return 'none';\n\n return this.#imageLoadState === 'pending' ? 'loading' : this.#imageLoadState;\n }\n\n protected override update(changed: PropertyValues): void {\n super.update(changed);\n\n const playback = this.#playback.value;\n if (!playback) return;\n\n // `metadata` is optional: without it nothing resolves a URL, and this stays\n // a visibility wrapper around whatever the author supplied.\n this.#core.setMedia({\n started: playback.started,\n poster: this.#metadata.value?.poster ?? '',\n });\n\n const { src } = this.#core.getState();\n\n // A skin forwards its own `<slot name=\"poster\">` in, so the image may sit a slot or two down inside a `<picture>`.\n this.#adopt(findComposedElement(this, isHTMLImageElement) ?? this.#fallback);\n this.#applySource(src);\n\n this.#core.setImageLoadState(this.#loadState);\n applyStateDataAttrs(this, this.#core.getState(), PosterDataAttrs);\n }\n\n /\n Ownership is settled once, when an image becomes active: after the first fill the `src` we set would itself look\n * authored. Re-slot an image with a source to hand it back, the way React decides a field is controlled at mount.\n */\n #adopt(next: HTMLImageElement \| null): void {\n if (next === this.#image) return;\n\n // An image that steps aside keeps downloading whatever we pointed it at.\n if (this.#owned) this.#image?.removeAttribute('src');\n\n this.#imageEvents?.abort();\n this.#imageEvents = null;\n\n this.#image = next;\n this.#owned = next !== null && !hasSource(next);\n this.#imageLoadState = 'pending';\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 if (!next) return;\n\n // An image that finished before we started listening never fires again, so\n // its load state has to be read off it. Decoded pixels stand on their own;\n // the absence of them only means failure once `complete` can be trusted.\n if (next.naturalWidth > 0) this.#imageLoadState = 'loaded';\n else if (next.complete && hasOwnSource(next)) this.#imageLoadState = 'error';\n\n this.#imageEvents = new AbortController();\n const { signal } = this.#imageEvents;\n const settle = (loadState: ImageLoadState) => () => {\n this.#imageLoadState = loadState;\n this.requestUpdate();\n };\n\n next.addEventListener('load', settle('loaded'), { signal });\n next.addEventListener('error', settle('error'), { signal });\n }\n\n #applySource(src: string): void {\n const img = this.#image;\n if (!img \|\| !this.#owned) return;\n\n if (!src) {\n this.#imageLoadState = 'pending';\n img.removeAttribute('src');\n } else if (img.getAttribute('src') !== src) {\n // Reset before the write, not after: how the last source fared says\n // nothing about this one, and the write itself can settle it.\n this.#imageLoadState = 'pending';\n img.setAttribute('src', src);\n }\n }\n}\n"],"mappings":"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"}

package/dist/dev/ui/quality-radio-group/element.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { MenuRadioGroupElement } from "../menu/radio-group.js";
-import { QualityRadioGroupCore } from "@videojs/core";
+import { QualityRadioGroupState } from "@videojs/core";
 import { PropertyValues } from "@videojs/element";
 import { Text } from "@videojs/core/i18n";
 //#region src/ui/quality-radio-group/element.d.ts
@@ -9,7 +9,7 @@ import { Text } from "@videojs/core/i18n";
  * `<media-menu-radio-item>` customizes each generated item; its `data-part` `label`, `tier`, and `badge` descendants
  * receive the rendition's text.
  */
-declare class QualityRadioGroupElement extends MenuRadioGroupElement {
+export declare class QualityRadioGroupElement extends MenuRadioGroupElement {
   #private;
   static readonly tagName = "media-quality-radio-group";
   static properties: {
@@ -29,9 +29,8 @@ declare class QualityRadioGroupElement extends MenuRadioGroupElement {
   connectedCallback(): void;
   protected update(changed: PropertyValues): void;
 }
-declare namespace QualityRadioGroupElement {
-  type State = QualityRadioGroupCore.State;
+export declare namespace QualityRadioGroupElement {
+  type State = QualityRadioGroupState;
 }
 //#endregion
-export { QualityRadioGroupElement };
 //# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/quality-radio-group/element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element.js","names":[~~"#setContent","#mediaState","#core","#i18n","#options"~~],"sources":["../../../../src/ui/quality-radio-group/element.ts"],"sourcesContent":["import { QualityRadioGroupCore, QualityRadioGroupDataAttrs, type QualityRadioGroupOption } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectQuality } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport type { MenuRadioItemElement } from '../menu/radio-item';\nimport { RadioOptionsController } from '../radio-options/controller';\n\n/*\n Menu radio group that generates an Auto `<media-menu-radio-item>` plus one per video rendition, and shares the\n * selected label and availability with an enclosing menu. An optional `<template>` holding one\n * `<media-menu-radio-item>` customizes each generated item; its `data-part` `label`, `tier`, and `badge` descendants\n * receive the rendition's text.\n */\nexport class QualityRadioGroupElement extends MenuRadioGroupElement {\n static override readonly tagName = 'media-quality-radio-group';\n\n static override properties = {\n ...MenuRadioGroupElement.properties,\n disabled: { type: Boolean },\n label: { type: String },\n } satisfies PropertyDeclarationMap<'value' \| 'label' \| 'disabled'>;\n\n disabled = false;\n label: Text \| string = '';\n formatRendition = QualityRadioGroupCore.defaultProps.formatRendition;\n\n readonly #core = new QualityRadioGroupCore();\n readonly #i18n = new I18nController(this, i18nContext);\n readonly #mediaState = new PlayerController(this, playerContext, selectQuality);\n readonly #options = new RadioOptionsController<QualityRadioGroupOption>(this, {\n renderItem: (item, label, option) => this.#setContent(item, label, option.tier, option.badge),\n setItemAttributes: (item, option) => item.setAttribute('data-rendition', option.value),\n getOptionCacheKey: (option) => `${option.tier ?? ''}:${option.badge ?? ''}`,\n onValueChange: (value) => {\n const media = this.#mediaState.value;\n\n if (media) this.#core.selectValue(media, value);\n },\n });\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (this.destroyed) return;\n\n if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n logMissingFeature(this.localName, this.#mediaState.displayName);\n }\n }\n\n protected override update(changed: PropertyValues): void {\n const media = this.#mediaState.value;\n let state: ~~QualityRadioGroupCore.State~~ \| null = null;\n\n if (media) {\n this.#core.setProps({ formatRendition: this.formatRendition, disabled: this.disabled, label: this.label });\n this.#core.setMedia(media);\n state = this.#core.getState();\n\n this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));\n this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n } else {\n this.publishMenuOptionState(true, true, 'unsupported');\n }\n\n super.update(changed);\n\n if (state) applyStateDataAttrs(this, state, QualityRadioGroupDataAttrs);\n }\n\n #setContent(item: MenuRadioItemElement, label: string, tier: string \| undefined, badge: string \| undefined): void {\n const labelPart = item.querySelector<HTMLElement>('[data-part~=\"label\"]');\n const tierPart = item.querySelector<HTMLElement>('[data-part~=\"tier\"]');\n const badgePart = item.querySelector<HTMLElement>('[data-part~=\"badge\"]');\n\n if (labelPart) {\n labelPart.textContent = label;\n }\n\n if (tierPart) {\n tierPart.textContent = tier ?? '';\n tierPart.hidden = !tier;\n }\n\n if (badgePart) {\n badgePart.textContent = badge ?? '';\n badgePart.hidden = !badge;\n }\n\n if (!labelPart && !tierPart && !badgePart) {\n item.textContent = [label, tier, badge].filter(Boolean).join(' ');\n }\n }\n}\n\nexport namespace QualityRadioGroupElement {\n export type State = ~~QualityRadioGroupCore.State~~;\n}\n"],"mappings":";;;;;;;;;;;;;;;;~~AAmBA~~,IAAa,2BAAb,cAA8C,sBAAsB;;;EASvD,KAAA,WAAA;EACY,KAAA,QAAA;EACL,KAAA,kBAAA,sBAAsB,aAAa;EAEpC,KAAA,QAAA,IAAI,sBAAsB;EAC1B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,aAAa;EAC1D,KAAA,WAAA,IAAI,uBAAgD,MAAM;GAC5E,aAAa,MAAM,OAAO,WAAW,~~KAAKA~~,YAAY,MAAM,OAAO,OAAO,MAAM,OAAO,KAAK;GAC5F,oBAAoB,MAAM,WAAW,KAAK,aAAa,kBAAkB,OAAO,KAAK;GACrF,oBAAoB,WAAW,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,SAAS;GACvE,gBAAgB,UAAU;IACxB,MAAM,QAAQ,~~KAAKC~~,YAAY;IAE/B,IAAI,OAAO,~~KAAKC~~,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EAxBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;GAC1B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAMA;CACA;CACA;CACA;CAWA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,~~KAAKD~~,YAAY,SAAS,~~KAAKA~~,YAAY,aACzD,kBAAkB,KAAK,WAAW,~~KAAKA~~,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,~~KAAKA~~,YAAY;EAC/B,IAAI,~~QAA4C~~;~~EAEhD~~,IAAI,OAAO;GACT,~~KAAKC~~,MAAM,SAAS;IAAE,iBAAiB,KAAK;IAAiB,UAAU,KAAK;IAAU,OAAO,KAAK;GAAM,CAAC;GACzG,~~KAAKA~~,MAAM,SAAS,KAAK;GACzB,QAAQ,~~KAAKA~~,MAAM,SAAS;GAE5B,KAAK,sBAAsB,cAAc,~~KAAKA~~,MAAM,SAAS,KAAK,GAAG,~~KAAKC~~,MAAM,KAAK,CAAC;GACtF,~~KAAKC~~,SAAS,KAAK,OAAO,~~KAAKD~~,MAAM,OAAO,~~KAAKA~~,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,0BAA0B;CACxE;CAEA,YAAY,MAA4B,OAAe,MAA0B,OAAiC;EAChH,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EACxE,MAAM,WAAW,KAAK,cAA2B,uBAAqB;EACtE,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EAExE,IAAI,WACF,UAAU,cAAc;EAG1B,IAAI,UAAU;GACZ,SAAS,cAAc,QAAQ;GAC/B,SAAS,SAAS,CAAC;EACrB;EAEA,IAAI,WAAW;GACb,UAAU,cAAc,SAAS;GACjC,UAAU,SAAS,CAAC;EACtB;EAEA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,WAC9B,KAAK,cAAc;GAAC;GAAO;GAAM;EAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEpE;AACF"}
1	+ {"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/quality-radio-group/element.ts"],"sourcesContent":["import {\n QualityRadioGroupCore,\n QualityRadioGroupDataAttrs,\n type QualityRadioGroupOption,\n type QualityRadioGroupState,\n} from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectQuality } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport type { MenuRadioItemElement } from '../menu/radio-item';\nimport { RadioOptionsController } from '../radio-options/controller';\n\n/*\n Menu radio group that generates an Auto `<media-menu-radio-item>` plus one per video rendition, and shares the\n * selected label and availability with an enclosing menu. An optional `<template>` holding one\n * `<media-menu-radio-item>` customizes each generated item; its `data-part` `label`, `tier`, and `badge` descendants\n * receive the rendition's text.\n */\nexport class QualityRadioGroupElement extends MenuRadioGroupElement {\n static override readonly tagName = 'media-quality-radio-group';\n\n static override properties = {\n ...MenuRadioGroupElement.properties,\n disabled: { type: Boolean },\n label: { type: String },\n } satisfies PropertyDeclarationMap<'value' \| 'label' \| 'disabled'>;\n\n disabled = false;\n label: Text \| string = '';\n formatRendition = QualityRadioGroupCore.defaultProps.formatRendition;\n\n readonly #core = new QualityRadioGroupCore();\n readonly #i18n = new I18nController(this, i18nContext);\n readonly #mediaState = new PlayerController(this, playerContext, selectQuality);\n readonly #options = new RadioOptionsController<QualityRadioGroupOption>(this, {\n renderItem: (item, label, option) => this.#setContent(item, label, option.tier, option.badge),\n setItemAttributes: (item, option) => item.setAttribute('data-rendition', option.value),\n getOptionCacheKey: (option) => `${option.tier ?? ''}:${option.badge ?? ''}`,\n onValueChange: (value) => {\n const media = this.#mediaState.value;\n\n if (media) this.#core.selectValue(media, value);\n },\n });\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (this.destroyed) return;\n\n if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n logMissingFeature(this.localName, this.#mediaState.displayName);\n }\n }\n\n protected override update(changed: PropertyValues): void {\n const media = this.#mediaState.value;\n let state: QualityRadioGroupState \| null = null;\n\n if (media) {\n this.#core.setProps({ formatRendition: this.formatRendition, disabled: this.disabled, label: this.label });\n this.#core.setMedia(media);\n state = this.#core.getState();\n\n this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));\n this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n } else {\n this.publishMenuOptionState(true, true, 'unsupported');\n }\n\n super.update(changed);\n\n if (state) applyStateDataAttrs(this, state, QualityRadioGroupDataAttrs);\n }\n\n #setContent(item: MenuRadioItemElement, label: string, tier: string \| undefined, badge: string \| undefined): void {\n const labelPart = item.querySelector<HTMLElement>('[data-part~=\"label\"]');\n const tierPart = item.querySelector<HTMLElement>('[data-part~=\"tier\"]');\n const badgePart = item.querySelector<HTMLElement>('[data-part~=\"badge\"]');\n\n if (labelPart) {\n labelPart.textContent = label;\n }\n\n if (tierPart) {\n tierPart.textContent = tier ?? '';\n tierPart.hidden = !tier;\n }\n\n if (badgePart) {\n badgePart.textContent = badge ?? '';\n badgePart.hidden = !badge;\n }\n\n if (!labelPart && !tierPart && !badgePart) {\n item.textContent = [label, tier, badge].filter(Boolean).join(' ');\n }\n }\n}\n\nexport namespace QualityRadioGroupElement {\n export type State = QualityRadioGroupState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,IAAa,2BAAb,cAA8C,sBAAsB;;;EASvD,KAAA,WAAA;EACY,KAAA,QAAA;EACL,KAAA,kBAAA,sBAAsB,aAAa;EAEpC,KAAA,QAAA,IAAI,sBAAsB;EAC1B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,aAAa;EAC1D,KAAA,WAAA,IAAI,uBAAgD,MAAM;GAC5E,aAAa,MAAM,OAAO,WAAW,KAAK,YAAY,MAAM,OAAO,OAAO,MAAM,OAAO,KAAK;GAC5F,oBAAoB,MAAM,WAAW,KAAK,aAAa,kBAAkB,OAAO,KAAK;GACrF,oBAAoB,WAAW,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,SAAS;GACvE,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAK,YAAY;IAE/B,IAAI,OAAO,KAAK,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EAxBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;GAC1B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAMA;CACA;CACA;CACA;CAWA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,KAAK,YAAY,SAAS,KAAK,YAAY,aACzD,kBAAkB,KAAK,WAAW,KAAK,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAK,YAAY;EAC/B,IAAI,QAAuC;EAE3C,IAAI,OAAO;GACT,KAAK,MAAM,SAAS;IAAE,iBAAiB,KAAK;IAAiB,UAAU,KAAK;IAAU,OAAO,KAAK;GAAM,CAAC;GACzG,KAAK,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAK,MAAM,SAAS;GAE5B,KAAK,sBAAsB,cAAc,KAAK,MAAM,SAAS,KAAK,GAAG,KAAK,MAAM,KAAK,CAAC;GACtF,KAAK,SAAS,KAAK,OAAO,KAAK,MAAM,OAAO,KAAK,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,0BAA0B;CACxE;CAEA,YAAY,MAA4B,OAAe,MAA0B,OAAiC;EAChH,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EACxE,MAAM,WAAW,KAAK,cAA2B,uBAAqB;EACtE,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EAExE,IAAI,WACF,UAAU,cAAc;EAG1B,IAAI,UAAU;GACZ,SAAS,cAAc,QAAQ;GAC/B,SAAS,SAAS,CAAC;EACrB;EAEA,IAAI,WAAW;GACb,UAAU,cAAc,SAAS;GACjC,UAAU,SAAS,CAAC;EACtB;EAEA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,WAC9B,KAAK,cAAc;GAAC;GAAO;GAAM;EAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEpE;AACF"}

package/dist/dev/ui/radio-group/context.d.ts CHANGED Viewed

@@ -1,11 +1,12 @@
 //#region src/ui/radio-group/context.d.ts
-interface RadioGroupContextValue {
+/** @internal */
+export interface RadioGroupContextValue {
   value: string;
   onValueChange: (value: string) => void;
 }
-declare const radioGroupContext: {
+/** @internal */
+export declare const radioGroupContext: {
   __context__: RadioGroupContextValue;
 };
 //#endregion
-export { RadioGroupContextValue, radioGroupContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/dev/ui/radio-group/context.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { createContext } from "@videojs/element/context";
+/** @internal */
 const radioGroupContext = createContext(Symbol("@videojs/radio-group"));
 //#endregion
 export { radioGroupContext };

package/dist/dev/ui/radio-group/context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/radio-group/context.ts"],"sourcesContent":["import { createContext } from '@videojs/element/context';\n\nexport interface RadioGroupContextValue {\n value: string;\n onValueChange: (value: string) => void;\n}\n\nconst RADIO_GROUP_CONTEXT_KEY = Symbol('@videojs/radio-group');\n\nexport const radioGroupContext = createContext<RadioGroupContextValue>(RADIO_GROUP_CONTEXT_KEY);\n"],"mappings":"~~;AASA~~,MAAa,oBAAoB,~~cAFD~~,OAAO,~~sBAEgC~~,CAAuB"}
1	+ {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/radio-group/context.ts"],"sourcesContent":["import { createContext } from '@videojs/element/context';\n\n/** @internal /\nexport interface RadioGroupContextValue {\n value: string;\n onValueChange: (value: string) => void;\n}\n\nconst RADIO_GROUP_CONTEXT_KEY = Symbol('@videojs/radio-group');\n\n/* @internal */\nexport const radioGroupContext = createContext<RadioGroupContextValue>(RADIO_GROUP_CONTEXT_KEY);\n"],"mappings":";;AAWA,MAAa,oBAAoB,cAHD,OAAO,sBAGgC,CAAuB"}

package/dist/dev/ui/radio-group/element.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { UIElement } from "../ui-element.js";
 import { PropertyValues } from "@videojs/element";
 //#region src/ui/radio-group/element.d.ts
 /** @fires value-change - Fired when the selected value changes. */
-declare class RadioGroupElement extends UIElement {
+export declare class RadioGroupElement extends UIElement {
   #private;
   static properties: {
     value: {
@@ -13,5 +13,4 @@ declare class RadioGroupElement extends UIElement {
   protected update(changed: PropertyValues): void;
 }
 //#endregion
-export { RadioGroupElement };
 //# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/radio-group/element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element.js","names":[~~"#provider"~~],"sources":["../../../../src/ui/radio-group/element.ts"],"sourcesContent":["import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { radioGroupContext } from './context';\n\n/** @fires value-change - Fired when the selected value changes. */\nexport class RadioGroupElement extends UIElement {\n static override properties = {\n value: { type: String },\n } satisfies PropertyDeclarationMap<'value'>;\n\n value = '';\n\n readonly #provider = new ContextProvider(this, { context: radioGroupContext });\n\n protected override update(changed: PropertyValues): void {\n super.update(changed);\n\n this.#provider.setValue({\n value: this.value,\n onValueChange: (next: string) => {\n this.value = next;\n this.dispatchEvent(new CustomEvent('value-change', { detail: { value: next }, bubbles: true }));\n },\n });\n }\n}\n"],"mappings":";;;;;AAOA,IAAa,oBAAb,cAAuC,UAAU;;;EAKvC,KAAA,QAAA;EAEa,KAAA,YAAA,IAAI,gBAAgB,MAAM,EAAE,SAAS,kBAAkB,CAAC;;;EANhD,KAAA,aAAA,EAC3B,OAAO,EAAE,MAAM,OAAO,EACxB;;CAIA;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,~~KAAKA~~,UAAU,SAAS;GACtB,OAAO,KAAK;GACZ,gBAAgB,SAAiB;IAC/B,KAAK,QAAQ;IACb,KAAK,cAAc,IAAI,YAAY,gBAAgB;KAAE,QAAQ,EAAE,OAAO,KAAK;KAAG,SAAS;IAAK,CAAC,CAAC;GAChG;EACF,CAAC;CACH;AACF"}
1	+ {"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/radio-group/element.ts"],"sourcesContent":["import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { radioGroupContext } from './context';\n\n/** @fires value-change - Fired when the selected value changes. */\nexport class RadioGroupElement extends UIElement {\n static override properties = {\n value: { type: String },\n } satisfies PropertyDeclarationMap<'value'>;\n\n value = '';\n\n readonly #provider = new ContextProvider(this, { context: radioGroupContext });\n\n protected override update(changed: PropertyValues): void {\n super.update(changed);\n\n this.#provider.setValue({\n value: this.value,\n onValueChange: (next: string) => {\n this.value = next;\n this.dispatchEvent(new CustomEvent('value-change', { detail: { value: next }, bubbles: true }));\n },\n });\n }\n}\n"],"mappings":";;;;;AAOA,IAAa,oBAAb,cAAuC,UAAU;;;EAKvC,KAAA,QAAA;EAEa,KAAA,YAAA,IAAI,gBAAgB,MAAM,EAAE,SAAS,kBAAkB,CAAC;;;EANhD,KAAA,aAAA,EAC3B,OAAO,EAAE,MAAM,OAAO,EACxB;;CAIA;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,KAAK,UAAU,SAAS;GACtB,OAAO,KAAK;GACZ,gBAAgB,SAAiB;IAC/B,KAAK,QAAQ;IACb,KAAK,cAAc,IAAI,YAAY,gBAAgB;KAAE,QAAQ,EAAE,OAAO,KAAK;KAAG,SAAS;IAAK,CAAC,CAAC;GAChG;EACF,CAAC;CACH;AACF"}

package/dist/dev/ui/radio-options/controller.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"controller.js","names":[~~"#host","#config","#disconnect","#handleValueChange","#contentKey","#translator","#setItemLabel"~~],"sources":["../../../../src/ui/radio-options/controller.ts"],"sourcesContent":["import type { RadioOption, RadioOptionsState } from '@videojs/core';\nimport { applyElementProps } from '@videojs/core/dom';\nimport { type Translator, translateText } from '@videojs/core/i18n';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\nimport { cloneTemplateRoot, getTemplateElement, getTemplateRoot } from '@videojs/utils/dom';\n\nimport { cacheKey } from '../../i18n/cache-key';\nimport { MenuItemIndicatorElement } from '../menu/item-indicator';\nimport { MenuRadioItemElement } from '../menu/radio-item';\n\nexport type RadioOptionsControllerHost = ReactiveControllerHost &\n HTMLElement & {\n value: string;\n };\n\nexport interface RadioOptionsControllerConfig<Option extends RadioOption> {\n renderItem?: ((item: MenuRadioItemElement, label: string, option: Option) => void) \| undefined;\n setItemAttributes?: ((item: MenuRadioItemElement, option: Option) => void) \| undefined;\n getOptionCacheKey?: ((option: Option) => string) \| undefined;\n onValueChange: (value: string) => void;\n}\n\n/** Renders normalized options into menu radio items and manages their interaction lifecycle. */\nexport class RadioOptionsController<Option extends RadioOption> implements ReactiveController {\n readonly #host: RadioOptionsControllerHost;\n readonly #config: RadioOptionsControllerConfig<Option>;\n\n #contentKey = '';\n #translator: Translator \| null = null;\n #disconnect: AbortController \| null = null;\n\n constructor(host: RadioOptionsControllerHost, config: RadioOptionsControllerConfig<Option>) {\n this.#host = host;\n this.#config = config;\n host.addController(this);\n }\n\n hostConnected(): void {\n this.#disconnect = new AbortController();\n this.#host.addEventListener('value-change', this.#handleValueChange, { signal: this.#disconnect.signal });\n }\n\n hostDisconnected(): void {\n this.#disconnect?.abort();\n this.#disconnect = null;\n }\n\n hostDestroyed(): void {\n this.hostDisconnected();\n }\n\n sync(state: RadioOptionsState<Option>, translator: Translator, locale: string): void {\n this.#host.value = state.value;\n applyElementProps(this.#host, {\n 'aria-disabled': state.disabled ? 'true' : undefined,\n hidden: state.hidden ? '' : undefined,\n });\n\n const template = getTemplateElement(this.#host);\n const templateRoot = template ? getTemplateRoot(template) : null;\n const itemRoot = templateRoot?.localName === MenuRadioItemElement.tagName ? templateRoot : null;\n\n const contentKey = `${state.options\n .map(\n (option) =>\n `${option.value}:${cacheKey(option.label, option.labelParams)}:${this.#config.getOptionCacheKey?.(option) ?? ''}`\n )\n .join('\|')}::${locale}::${template?.innerHTML ?? ''}`;\n\n if (contentKey !== this.#contentKey \|\| translator !== this.#translator) {\n this.#contentKey = contentKey;\n this.#translator = translator;\n\n for (const child of [...this.#host.children]) {\n if (child === template) continue;\n\n child.remove();\n }\n\n const items = state.options.map((option) => {\n const item = itemRoot\n ? (cloneTemplateRoot(itemRoot, this.#host.ownerDocument) as MenuRadioItemElement)\n : (this.#host.ownerDocument.createElement(MenuRadioItemElement.tagName) as MenuRadioItemElement);\n\n item.value = option.value;\n this.#config.setItemAttributes?.(item, option);\n const label = translateText(option.label, translator, option.labelParams);\n\n if (this.#config.renderItem) this.#config.renderItem(item, label, option);\n else this.#setItemLabel(item, label);\n\n return item;\n });\n\n this.#host.append(...items);\n }\n\n const optionsByValue = new Map(state.options.map((option) => [option.value, option]));\n\n for (const item of this.#host.querySelectorAll<MenuRadioItemElement>(MenuRadioItemElement.tagName)) {\n const checked = item.value === state.value;\n const option = optionsByValue.get(item.value);\n\n item.disabled = state.disabled \|\| option?.disabled === true;\n\n for (const indicator of item.querySelectorAll<MenuItemIndicatorElement>(MenuItemIndicatorElement.tagName)) {\n indicator.checked = checked;\n }\n }\n }\n\n #handleValueChange = (event: Event): void => {\n if (event.target !== this.#host) return;\n\n const { value } = (event as CustomEvent<{ value: string }>).detail;\n\n this.#config.onValueChange(value);\n };\n\n #setItemLabel(item: MenuRadioItemElement, label: string): void {\n const labelPart = item.querySelector<HTMLElement>('[data-part~=\"label\"]');\n\n if (labelPart) labelPart.textContent = label;\n else item.textContent = label;\n }\n}\n"],"mappings":";;;;;;;;AAuBA,IAAa,yBAAb,MAA8F;CAC5F;CACA;CAEA,cAAc;CACd,cAAiC;CACjC,cAAsC;CAEtC,YAAY,MAAkC,QAA8C;EAC1F,~~KAAKA~~,QAAQ;EACb,~~KAAKC~~,UAAU;EACf,KAAK,cAAc,IAAI;CACzB;CAEA,gBAAsB;EACpB,~~KAAKC~~,cAAc,IAAI,gBAAgB;EACvC,~~KAAKF~~,MAAM,iBAAiB,gBAAgB,~~KAAKG~~,oBAAoB,EAAE,QAAQ,~~KAAKD~~,YAAY,OAAO,CAAC;CAC1G;CAEA,mBAAyB;EACvB,~~KAAKA~~,aAAa,MAAM;EACxB,~~KAAKA~~,cAAc;CACrB;CAEA,gBAAsB;EACpB,KAAK,iBAAiB;CACxB;CAEA,KAAK,OAAkC,YAAwB,QAAsB;EACnF,~~KAAKF~~,MAAM,QAAQ,MAAM;EACzB,kBAAkB,~~KAAKA~~,OAAO;GAC5B,iBAAiB,MAAM,WAAW,SAAS,KAAA;GAC3C,QAAQ,MAAM,SAAS,KAAK,KAAA;EAC9B,CAAC;EAED,MAAM,WAAW,mBAAmB,~~KAAKA~~,KAAK;EAC9C,MAAM,eAAe,WAAW,gBAAgB,QAAQ,IAAI;EAC5D,MAAM,WAAW,cAAc,cAAc,qBAAqB,UAAU,eAAe;EAE3F,MAAM,aAAa,GAAG,MAAM,QACzB,KACE,WACC,GAAG,OAAO,MAAM,GAAG,SAAS,OAAO,OAAO,OAAO,WAAW,EAAE,GAAG,~~KAAKC~~,QAAQ,oBAAoB,MAAM,KAAK,IACjH,CAAC,CACA,KAAK,GAAG,EAAE,IAAI,OAAO,IAAI,UAAU,aAAa;EAEnD,IAAI,eAAe,~~KAAKG~~,eAAe,eAAe,~~KAAKC~~,aAAa;GACtE,~~KAAKD~~,cAAc;GACnB,~~KAAKC~~,cAAc;GAEnB,KAAK,MAAM,SAAS,CAAC,GAAG,~~KAAKL~~,MAAM,QAAQ,GAAG;IAC5C,IAAI,UAAU,UAAU;IAExB,MAAM,OAAO;GACf;GAEA,MAAM,QAAQ,MAAM,QAAQ,KAAK,WAAW;IAC1C,MAAM,OAAO,WACR,kBAAkB,UAAU,~~KAAKA~~,MAAM,aAAa,IACpD,~~KAAKA~~,MAAM,cAAc,cAAc,qBAAqB,OAAO;IAExE,KAAK,QAAQ,OAAO;IACpB,~~KAAKC~~,QAAQ,oBAAoB,MAAM,MAAM;IAC7C,MAAM,QAAQ,cAAc,OAAO,OAAO,YAAY,OAAO,WAAW;IAExE,IAAI,~~KAAKA~~,QAAQ,YAAY,~~KAAKA~~,QAAQ,WAAW,MAAM,OAAO,MAAM;SACnE,~~KAAKK~~,cAAc,MAAM,KAAK;IAEnC,OAAO;GACT,CAAC;GAED,~~KAAKN~~,MAAM,OAAO,GAAG,KAAK;EAC5B;EAEA,MAAM,iBAAiB,IAAI,IAAI,MAAM,QAAQ,KAAK,WAAW,CAAC,OAAO,OAAO,MAAM,CAAC,CAAC;EAEpF,KAAK,MAAM,QAAQ,~~KAAKA~~,MAAM,iBAAuC,qBAAqB,OAAO,GAAG;GAClG,MAAM,UAAU,KAAK,UAAU,MAAM;GACrC,MAAM,SAAS,eAAe,IAAI,KAAK,KAAK;GAE5C,KAAK,WAAW,MAAM,YAAY,QAAQ,aAAa;GAEvD,KAAK,MAAM,aAAa,KAAK,iBAA2C,yBAAyB,OAAO,GACtG,UAAU,UAAU;EAExB;CACF;CAEA,sBAAsB,UAAuB;EAC3C,IAAI,MAAM,WAAW,~~KAAKA~~,OAAO;EAEjC,MAAM,EAAE,UAAW,MAAyC;EAE5D,~~KAAKC~~,QAAQ,cAAc,KAAK;CAClC;CAEA,cAAc,MAA4B,OAAqB;EAC7D,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EAExE,IAAI,WAAW,UAAU,cAAc;OAClC,KAAK,cAAc;CAC1B;AACF"}
1	+ {"version":3,"file":"controller.js","names":[],"sources":["../../../../src/ui/radio-options/controller.ts"],"sourcesContent":["import type { RadioOption, RadioOptionsState } from '@videojs/core';\nimport { applyElementProps } from '@videojs/core/dom';\nimport { type Translator, translateText } from '@videojs/core/i18n';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\nimport { cloneTemplateRoot, getTemplateElement, getTemplateRoot } from '@videojs/utils/dom';\n\nimport { cacheKey } from '../../i18n/cache-key';\nimport { MenuItemIndicatorElement } from '../menu/item-indicator';\nimport { MenuRadioItemElement } from '../menu/radio-item';\n\nexport type RadioOptionsControllerHost = ReactiveControllerHost &\n HTMLElement & {\n value: string;\n };\n\nexport interface RadioOptionsControllerConfig<Option extends RadioOption> {\n renderItem?: ((item: MenuRadioItemElement, label: string, option: Option) => void) \| undefined;\n setItemAttributes?: ((item: MenuRadioItemElement, option: Option) => void) \| undefined;\n getOptionCacheKey?: ((option: Option) => string) \| undefined;\n onValueChange: (value: string) => void;\n}\n\n/** Renders normalized options into menu radio items and manages their interaction lifecycle. */\nexport class RadioOptionsController<Option extends RadioOption> implements ReactiveController {\n readonly #host: RadioOptionsControllerHost;\n readonly #config: RadioOptionsControllerConfig<Option>;\n\n #contentKey = '';\n #translator: Translator \| null = null;\n #disconnect: AbortController \| null = null;\n\n constructor(host: RadioOptionsControllerHost, config: RadioOptionsControllerConfig<Option>) {\n this.#host = host;\n this.#config = config;\n host.addController(this);\n }\n\n hostConnected(): void {\n this.#disconnect = new AbortController();\n this.#host.addEventListener('value-change', this.#handleValueChange, { signal: this.#disconnect.signal });\n }\n\n hostDisconnected(): void {\n this.#disconnect?.abort();\n this.#disconnect = null;\n }\n\n hostDestroyed(): void {\n this.hostDisconnected();\n }\n\n sync(state: RadioOptionsState<Option>, translator: Translator, locale: string): void {\n this.#host.value = state.value;\n applyElementProps(this.#host, {\n 'aria-disabled': state.disabled ? 'true' : undefined,\n hidden: state.hidden ? '' : undefined,\n });\n\n const template = getTemplateElement(this.#host);\n const templateRoot = template ? getTemplateRoot(template) : null;\n const itemRoot = templateRoot?.localName === MenuRadioItemElement.tagName ? templateRoot : null;\n\n const contentKey = `${state.options\n .map(\n (option) =>\n `${option.value}:${cacheKey(option.label, option.labelParams)}:${this.#config.getOptionCacheKey?.(option) ?? ''}`\n )\n .join('\|')}::${locale}::${template?.innerHTML ?? ''}`;\n\n if (contentKey !== this.#contentKey \|\| translator !== this.#translator) {\n this.#contentKey = contentKey;\n this.#translator = translator;\n\n for (const child of [...this.#host.children]) {\n if (child === template) continue;\n\n child.remove();\n }\n\n const items = state.options.map((option) => {\n const item = itemRoot\n ? (cloneTemplateRoot(itemRoot, this.#host.ownerDocument) as MenuRadioItemElement)\n : (this.#host.ownerDocument.createElement(MenuRadioItemElement.tagName) as MenuRadioItemElement);\n\n item.value = option.value;\n this.#config.setItemAttributes?.(item, option);\n const label = translateText(option.label, translator, option.labelParams);\n\n if (this.#config.renderItem) this.#config.renderItem(item, label, option);\n else this.#setItemLabel(item, label);\n\n return item;\n });\n\n this.#host.append(...items);\n }\n\n const optionsByValue = new Map(state.options.map((option) => [option.value, option]));\n\n for (const item of this.#host.querySelectorAll<MenuRadioItemElement>(MenuRadioItemElement.tagName)) {\n const checked = item.value === state.value;\n const option = optionsByValue.get(item.value);\n\n item.disabled = state.disabled \|\| option?.disabled === true;\n\n for (const indicator of item.querySelectorAll<MenuItemIndicatorElement>(MenuItemIndicatorElement.tagName)) {\n indicator.checked = checked;\n }\n }\n }\n\n #handleValueChange = (event: Event): void => {\n if (event.target !== this.#host) return;\n\n const { value } = (event as CustomEvent<{ value: string }>).detail;\n\n this.#config.onValueChange(value);\n };\n\n #setItemLabel(item: MenuRadioItemElement, label: string): void {\n const labelPart = item.querySelector<HTMLElement>('[data-part~=\"label\"]');\n\n if (labelPart) labelPart.textContent = label;\n else item.textContent = label;\n }\n}\n"],"mappings":";;;;;;;;AAuBA,IAAa,yBAAb,MAA8F;CAC5F;CACA;CAEA,cAAc;CACd,cAAiC;CACjC,cAAsC;CAEtC,YAAY,MAAkC,QAA8C;EAC1F,KAAK,QAAQ;EACb,KAAK,UAAU;EACf,KAAK,cAAc,IAAI;CACzB;CAEA,gBAAsB;EACpB,KAAK,cAAc,IAAI,gBAAgB;EACvC,KAAK,MAAM,iBAAiB,gBAAgB,KAAK,oBAAoB,EAAE,QAAQ,KAAK,YAAY,OAAO,CAAC;CAC1G;CAEA,mBAAyB;EACvB,KAAK,aAAa,MAAM;EACxB,KAAK,cAAc;CACrB;CAEA,gBAAsB;EACpB,KAAK,iBAAiB;CACxB;CAEA,KAAK,OAAkC,YAAwB,QAAsB;EACnF,KAAK,MAAM,QAAQ,MAAM;EACzB,kBAAkB,KAAK,OAAO;GAC5B,iBAAiB,MAAM,WAAW,SAAS,KAAA;GAC3C,QAAQ,MAAM,SAAS,KAAK,KAAA;EAC9B,CAAC;EAED,MAAM,WAAW,mBAAmB,KAAK,KAAK;EAC9C,MAAM,eAAe,WAAW,gBAAgB,QAAQ,IAAI;EAC5D,MAAM,WAAW,cAAc,cAAc,qBAAqB,UAAU,eAAe;EAE3F,MAAM,aAAa,GAAG,MAAM,QACzB,KACE,WACC,GAAG,OAAO,MAAM,GAAG,SAAS,OAAO,OAAO,OAAO,WAAW,EAAE,GAAG,KAAK,QAAQ,oBAAoB,MAAM,KAAK,IACjH,CAAC,CACA,KAAK,GAAG,EAAE,IAAI,OAAO,IAAI,UAAU,aAAa;EAEnD,IAAI,eAAe,KAAK,eAAe,eAAe,KAAK,aAAa;GACtE,KAAK,cAAc;GACnB,KAAK,cAAc;GAEnB,KAAK,MAAM,SAAS,CAAC,GAAG,KAAK,MAAM,QAAQ,GAAG;IAC5C,IAAI,UAAU,UAAU;IAExB,MAAM,OAAO;GACf;GAEA,MAAM,QAAQ,MAAM,QAAQ,KAAK,WAAW;IAC1C,MAAM,OAAO,WACR,kBAAkB,UAAU,KAAK,MAAM,aAAa,IACpD,KAAK,MAAM,cAAc,cAAc,qBAAqB,OAAO;IAExE,KAAK,QAAQ,OAAO;IACpB,KAAK,QAAQ,oBAAoB,MAAM,MAAM;IAC7C,MAAM,QAAQ,cAAc,OAAO,OAAO,YAAY,OAAO,WAAW;IAExE,IAAI,KAAK,QAAQ,YAAY,KAAK,QAAQ,WAAW,MAAM,OAAO,MAAM;SACnE,KAAK,cAAc,MAAM,KAAK;IAEnC,OAAO;GACT,CAAC;GAED,KAAK,MAAM,OAAO,GAAG,KAAK;EAC5B;EAEA,MAAM,iBAAiB,IAAI,IAAI,MAAM,QAAQ,KAAK,WAAW,CAAC,OAAO,OAAO,MAAM,CAAC,CAAC;EAEpF,KAAK,MAAM,QAAQ,KAAK,MAAM,iBAAuC,qBAAqB,OAAO,GAAG;GAClG,MAAM,UAAU,KAAK,UAAU,MAAM;GACrC,MAAM,SAAS,eAAe,IAAI,KAAK,KAAK;GAE5C,KAAK,WAAW,MAAM,YAAY,QAAQ,aAAa;GAEvD,KAAK,MAAM,aAAa,KAAK,iBAA2C,yBAAyB,OAAO,GACtG,UAAU,UAAU;EAExB;CACF;CAEA,sBAAsB,UAAuB;EAC3C,IAAI,MAAM,WAAW,KAAK,OAAO;EAEjC,MAAM,EAAE,UAAW,MAAyC;EAE5D,KAAK,QAAQ,cAAc,KAAK;CAClC;CAEA,cAAc,MAA4B,OAAqB;EAC7D,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EAExE,IAAI,WAAW,UAAU,cAAc;OAClC,KAAK,cAAc;CAC1B;AACF"}

package/dist/dev/ui/seek-button/element.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 import { PlayerController } from "../../player/controller.js";
 import { MediaButtonElement } from "../media-button-element.js";
 import { index_d_exports } from "../../index.js";
-import { SeekButtonCore } from "@videojs/core";
+import { SeekButtonCore, SeekButtonState } from "@videojs/core";
 import { PropertyDeclarationMap } from "@videojs/element";
 import { MediaTimeState } from "@videojs/media";
 //#region src/ui/seek-button/element.d.ts
-declare class SeekButtonElement extends MediaButtonElement<SeekButtonCore> {
+export declare class SeekButtonElement extends MediaButtonElement<SeekButtonState, MediaTimeState> {
   static readonly tagName = "media-seek-button";
   static properties: PropertyDeclarationMap;
   seconds: number;
@@ -25,5 +25,4 @@ declare class SeekButtonElement extends MediaButtonElement<SeekButtonCore> {
   protected activate(state: MediaTimeState): void;
 }
 //#endregion
-export { SeekButtonElement };
 //# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/seek-button/element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/seek-button/element.ts"],"sourcesContent":["import { SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { selectTime } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\nimport type { MediaTimeState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class SeekButtonElement extends MediaButtonElement<~~SeekButtonCore~~> {\n static readonly tagName = 'media-seek-button';\n\n static override properties: PropertyDeclarationMap = {\n ...MediaButtonElement.properties,\n seconds: { type: Number },\n };\n\n seconds = SeekButtonCore.defaultProps.seconds;\n\n protected readonly core = new SeekButtonCore();\n protected readonly stateAttrMap = SeekButtonDataAttrs;\n protected readonly mediaState = new PlayerController(this, playerContext, selectTime);\n protected override readonly hotkeyAction = 'seekStep';\n\n protected override get hotkeyValue(): number \| undefined {\n return this.seconds;\n }\n\n protected activate(state: MediaTimeState): void {\n this.core.seek(state);\n }\n}\n"],"mappings":";;;;;;AASA,IAAa,oBAAb,cAAuC,~~mBAAmC~~;;;~~EAQ9D~~,KAAA,UAAA,eAAe,aAAa;EAEZ,KAAA,OAAA,IAAI,eAAe;EACX,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,UAAU;EACzC,KAAA,eAAA;;;EAZjB,KAAA,UAAA;;;EAE2B,KAAA,aAAA;GACnD,GAAG,mBAAmB;GACtB,SAAS,EAAE,MAAM,OAAO;EAC1B;;CASA,IAAuB,cAAkC;EACvD,OAAO,KAAK;CACd;CAEA,SAAmB,OAA6B;EAC9C,KAAK,KAAK,KAAK,KAAK;CACtB;AACF"}
1	+ {"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/seek-button/element.ts"],"sourcesContent":["import { SeekButtonCore, SeekButtonDataAttrs, type SeekButtonState } from '@videojs/core';\nimport { selectTime } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\nimport type { MediaTimeState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class SeekButtonElement extends MediaButtonElement<SeekButtonState, MediaTimeState> {\n static readonly tagName = 'media-seek-button';\n\n static override properties: PropertyDeclarationMap = {\n ...MediaButtonElement.properties,\n seconds: { type: Number },\n };\n\n seconds = SeekButtonCore.defaultProps.seconds;\n\n protected readonly core = new SeekButtonCore();\n protected readonly stateAttrMap = SeekButtonDataAttrs;\n protected readonly mediaState = new PlayerController(this, playerContext, selectTime);\n protected override readonly hotkeyAction = 'seekStep';\n\n protected override get hotkeyValue(): number \| undefined {\n return this.seconds;\n }\n\n protected activate(state: MediaTimeState): void {\n this.core.seek(state);\n }\n}\n"],"mappings":";;;;;;AASA,IAAa,oBAAb,cAAuC,mBAAoD;;;EAQ/E,KAAA,UAAA,eAAe,aAAa;EAEZ,KAAA,OAAA,IAAI,eAAe;EACX,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,UAAU;EACzC,KAAA,eAAA;;;EAZjB,KAAA,UAAA;;;EAE2B,KAAA,aAAA;GACnD,GAAG,mBAAmB;GACtB,SAAS,EAAE,MAAM,OAAO;EAC1B;;CASA,IAAuB,cAAkC;EACvD,OAAO,KAAK;CACd;CAEA,SAAmB,OAA6B;EAC9C,KAAK,KAAK,KAAK,KAAK;CACtB;AACF"}

package/dist/dev/ui/seek-indicator/element.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 import { LiveIndicator } from "../input-indicator/live-indicator.js";
 import { InputIndicatorElement } from "../input-indicator/element.js";
 import { index_d_exports } from "../../index.js";
-import { SeekIndicatorCore } from "@videojs/core";
+import { SeekIndicatorCore, SeekIndicatorState } from "@videojs/core";
 //#region src/ui/seek-indicator/element.d.ts
-declare class SeekIndicatorElement extends InputIndicatorElement<SeekIndicatorCore.State> {
+export declare class SeekIndicatorElement extends InputIndicatorElement<SeekIndicatorState> {
   #private;
   static readonly tagName = "media-seek-indicator";
   static properties: {
@@ -15,9 +15,8 @@ declare class SeekIndicatorElement extends InputIndicatorElement<SeekIndicatorCo
   closeDelay: number | undefined;
   protected get core(): SeekIndicatorCore;
   protected get transition(): index_d_exports.TransitionApi;
-  protected get liveIndicator(): LiveIndicator<import("@videojs/core").SeekIndicatorState>;
+  protected get liveIndicator(): LiveIndicator<SeekIndicatorState>;
   protected syncCoreProps(): void;
 }
 //#endregion
-export { SeekIndicatorElement };
 //# sourceMappingURL=element.d.ts.map