@videojs/html 0.1.0-preview.2 → 0.1.0-preview.4

package/dist/media-mute-button-BOVhZ3aP.js

@@ -0,0 +1,8 @@
+import { t as MuteButtonElement } from "./mute-button-vW2sLqqY.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-mute-button.ts
+defineCustomElement("media-mute-button", MuteButtonElement);
+
+//#endregion
+//# sourceMappingURL=media-mute-button-BOVhZ3aP.js.map

package/dist/media-mute-button-BOVhZ3aP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-mute-button-BOVhZ3aP.js","names":[],"sources":["../src/define/media-mute-button.ts"],"sourcesContent":["import { MuteButtonElement } from '@/elements/mute-button';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-mute-button', MuteButtonElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,kBAAkB"}

package/dist/media-mute-button-NVJF2EEW.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/media-play-button-CLj-hkwn.js

@@ -0,0 +1,8 @@
+import { t as PlayButtonElement } from "./play-button-aVb0g10G.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-play-button.ts
+defineCustomElement("media-play-button", PlayButtonElement);
+
+//#endregion
+//# sourceMappingURL=media-play-button-CLj-hkwn.js.map

package/dist/media-play-button-CLj-hkwn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-play-button-CLj-hkwn.js","names":[],"sources":["../src/define/media-play-button.ts"],"sourcesContent":["import { PlayButtonElement } from '@/elements/play-button';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-play-button', PlayButtonElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,kBAAkB"}

package/dist/media-play-button-oq8yDlxe.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/media-popover-BtJmPv0E.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/media-popover-F4M4Tq4z.js

@@ -0,0 +1,8 @@
+import { t as PopoverElement } from "./popover-Dc0hyhwB.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-popover.ts
+defineCustomElement("media-popover", PopoverElement);
+
+//#endregion
+//# sourceMappingURL=media-popover-F4M4Tq4z.js.map

package/dist/media-popover-F4M4Tq4z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-popover-F4M4Tq4z.js","names":[],"sources":["../src/define/media-popover.ts"],"sourcesContent":["import { PopoverElement } from '@/elements/popover';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-popover', PopoverElement);\n"],"mappings":";;;;AAGA,oBAAoB,iBAAiB,eAAe"}

package/dist/media-preview-time-display-4YX5Rics.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/media-preview-time-display-DAiMgLPX.js

@@ -0,0 +1,8 @@
+import { t as PreviewTimeDisplayElement } from "./preview-time-display-Dax0FQ2X.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-preview-time-display.ts
+defineCustomElement("media-preview-time-display", PreviewTimeDisplayElement);
+
+//#endregion
+//# sourceMappingURL=media-preview-time-display-DAiMgLPX.js.map

package/dist/media-preview-time-display-DAiMgLPX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-preview-time-display-DAiMgLPX.js","names":[],"sources":["../src/define/media-preview-time-display.ts"],"sourcesContent":["import { PreviewTimeDisplayElement } from '@/elements/preview-time-display';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-preview-time-display', PreviewTimeDisplayElement);\n"],"mappings":";;;;AAGA,oBAAoB,8BAA8B,0BAA0B"}

package/dist/media-provider-CyoL0bCx.js

@@ -0,0 +1,17 @@
+import { createMediaStore } from "@videojs/core/store";
+import { ProviderMixin } from "@open-wc/context-protocol";
+
+//#region src/media/media-provider.ts
+const ProviderHTMLElement = ProviderMixin(HTMLElement);
+var MediaProviderElement = class extends ProviderHTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		this.contexts = { mediaStore: () => {
+			return createMediaStore();
+		} };
+	}
+};
+
+//#endregion
+export { MediaProviderElement as t };
+//# sourceMappingURL=media-provider-CyoL0bCx.js.map

package/dist/media-provider-CyoL0bCx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-provider-CyoL0bCx.js","names":["ProviderHTMLElement: Constructor<CustomElement & HTMLElement>"],"sources":["../src/media/media-provider.ts"],"sourcesContent":["import type { Constructor, CustomElement } from '@open-wc/context-protocol';\nimport type { MediaStore } from '@videojs/core/store';\n\nimport { ProviderMixin } from '@open-wc/context-protocol';\nimport { createMediaStore } from '@videojs/core/store';\n\nconst ProviderHTMLElement: Constructor<CustomElement & HTMLElement> = ProviderMixin(HTMLElement);\n\nexport class MediaProviderElement extends ProviderHTMLElement {\n  contexts = {\n    mediaStore: (): MediaStore => {\n      return createMediaStore();\n    },\n  };\n}\n"],"mappings":";;;;AAMA,MAAMA,sBAAgE,cAAc,YAAY;AAEhG,IAAa,uBAAb,cAA0C,oBAAoB;;;kBACjD,EACT,kBAA8B;AAC5B,UAAO,kBAAkB;KAE5B"}

package/dist/media-provider-D7P2TLXG.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/media-provider-D_GL2_DN.js

@@ -0,0 +1,8 @@
+import { t as MediaProviderElement } from "./media-provider-CyoL0bCx.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-provider.ts
+defineCustomElement("media-provider", MediaProviderElement);
+
+//#endregion
+//# sourceMappingURL=media-provider-D_GL2_DN.js.map

package/dist/media-provider-D_GL2_DN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-provider-D_GL2_DN.js","names":[],"sources":["../src/define/media-provider.ts"],"sourcesContent":["import { MediaProviderElement } from '@/media/media-provider';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-provider', MediaProviderElement);\n"],"mappings":";;;;AAGA,oBAAoB,kBAAkB,qBAAqB"}

package/dist/media-skin-Di3vSHvS.d.ts

@@ -0,0 +1,11 @@
+//#region src/media/media-skin.d.ts
+declare class MediaSkinElement extends HTMLElement {
+  static shadowRootOptions: {
+    mode: ShadowRootMode;
+  };
+  static getTemplateHTML: () => string;
+  constructor();
+}
+//#endregion
+export { MediaSkinElement as t };
+//# sourceMappingURL=media-skin-Di3vSHvS.d.ts.map

package/dist/media-skin-Di3vSHvS.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-skin-Di3vSHvS.d.ts","names":[],"sources":["../src/media/media-skin.ts"],"sourcesContent":[],"mappings":";AAiBa,cAAA,gBAAA,SAAyB,WAAA,CAAA;;UACS"}

package/dist/media-skin-mHWwUPg3.js

@@ -0,0 +1,36 @@
+//#region src/media/media-skin.ts
+function getTemplateHTML() {
+	return `
+    <style>
+      :host {
+        display: block;
+      }
+
+      media-container {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+    <slot></slot>
+  `;
+}
+var MediaSkinElement = class extends HTMLElement {
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	constructor() {
+		super();
+		if (!this.shadowRoot) {
+			this.attachShadow(this.constructor.shadowRootOptions);
+			this.shadowRoot.innerHTML = this.constructor.getTemplateHTML();
+		}
+	}
+};
+
+//#endregion
+export { MediaSkinElement as t };
+//# sourceMappingURL=media-skin-mHWwUPg3.js.map

package/dist/media-skin-mHWwUPg3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-skin-mHWwUPg3.js","names":[],"sources":["../src/media/media-skin.ts"],"sourcesContent":["export function getTemplateHTML() {\n  return /* html */ `\n    <style>\n      :host {\n        display: block;\n      }\n\n      media-container {\n        display: block;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n    <slot></slot>\n  `;\n}\n\nexport class MediaSkinElement extends HTMLElement {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML: () => string = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof MediaSkinElement).shadowRootOptions);\n      this.shadowRoot!.innerHTML = (this.constructor as typeof MediaSkinElement).getTemplateHTML();\n    }\n  }\n}\n"],"mappings":";AAAA,SAAgB,kBAAkB;AAChC,QAAkB;;;;;;;;;;;;;;;AAgBpB,IAAa,mBAAb,cAAsC,YAAY;;2BACrB,EAAE,MAAM,QAA0B;;;yBACtB;;CAEvC,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAwC,kBAAkB;AAClF,QAAK,WAAY,YAAa,KAAK,YAAwC,iBAAiB"}

package/dist/media-time-slider-Bp2qnwsW.js

@@ -0,0 +1,12 @@
+import { a as TimeSliderThumbElement, i as TimeSliderRootElement, n as TimeSliderPointerElement, o as TimeSliderTrackElement, r as TimeSliderProgressElement } from "./time-slider-CA1GMs6A.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-time-slider.ts
+defineCustomElement("media-time-slider", TimeSliderRootElement);
+defineCustomElement("media-time-slider-track", TimeSliderTrackElement);
+defineCustomElement("media-time-slider-progress", TimeSliderProgressElement);
+defineCustomElement("media-time-slider-pointer", TimeSliderPointerElement);
+defineCustomElement("media-time-slider-thumb", TimeSliderThumbElement);
+
+//#endregion
+//# sourceMappingURL=media-time-slider-Bp2qnwsW.js.map

package/dist/media-time-slider-Bp2qnwsW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-time-slider-Bp2qnwsW.js","names":[],"sources":["../src/define/media-time-slider.ts"],"sourcesContent":["import { TimeSliderPointerElement, TimeSliderProgressElement, TimeSliderRootElement, TimeSliderThumbElement, TimeSliderTrackElement } from '@/elements/time-slider';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-time-slider', TimeSliderRootElement);\ndefineCustomElement('media-time-slider-track', TimeSliderTrackElement);\ndefineCustomElement('media-time-slider-progress', TimeSliderProgressElement);\ndefineCustomElement('media-time-slider-pointer', TimeSliderPointerElement);\ndefineCustomElement('media-time-slider-thumb', TimeSliderThumbElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,sBAAsB;AAC/D,oBAAoB,2BAA2B,uBAAuB;AACtE,oBAAoB,8BAA8B,0BAA0B;AAC5E,oBAAoB,6BAA6B,yBAAyB;AAC1E,oBAAoB,2BAA2B,uBAAuB"}

package/dist/media-time-slider-DvMnfYXZ.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/media-tooltip-BqV17mdM.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/media-tooltip-ClcVafMb.js

@@ -0,0 +1,14 @@
+import { a as TooltipPositionerElement, i as TooltipPortalElement, o as TooltipRootElement, r as TooltipPopupElement, s as TooltipTriggerElement, t as TooltipArrowElement } from "./tooltip-54fBUUpb.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-tooltip.ts
+defineCustomElement("media-tooltip", TooltipRootElement);
+defineCustomElement("media-tooltip-trigger", TooltipTriggerElement);
+defineCustomElement("media-tooltip-portal", TooltipPortalElement);
+defineCustomElement("media-tooltip-positioner", TooltipPositionerElement);
+defineCustomElement("media-tooltip-portal", TooltipPortalElement);
+defineCustomElement("media-tooltip-popup", TooltipPopupElement);
+defineCustomElement("media-tooltip-arrow", TooltipArrowElement);
+
+//#endregion
+//# sourceMappingURL=media-tooltip-ClcVafMb.js.map

package/dist/media-tooltip-ClcVafMb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-tooltip-ClcVafMb.js","names":[],"sources":["../src/define/media-tooltip.ts"],"sourcesContent":["import { TooltipArrowElement, TooltipPopupElement, TooltipPortalElement, TooltipPositionerElement, TooltipRootElement, TooltipTriggerElement } from '@/elements/tooltip';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-tooltip', TooltipRootElement);\ndefineCustomElement('media-tooltip-trigger', TooltipTriggerElement);\ndefineCustomElement('media-tooltip-portal', TooltipPortalElement);\ndefineCustomElement('media-tooltip-positioner', TooltipPositionerElement);\ndefineCustomElement('media-tooltip-portal', TooltipPortalElement);\ndefineCustomElement('media-tooltip-popup', TooltipPopupElement);\ndefineCustomElement('media-tooltip-arrow', TooltipArrowElement);\n"],"mappings":";;;;AAGA,oBAAoB,iBAAiB,mBAAmB;AACxD,oBAAoB,yBAAyB,sBAAsB;AACnE,oBAAoB,wBAAwB,qBAAqB;AACjE,oBAAoB,4BAA4B,yBAAyB;AACzE,oBAAoB,wBAAwB,qBAAqB;AACjE,oBAAoB,uBAAuB,oBAAoB;AAC/D,oBAAoB,uBAAuB,oBAAoB"}

package/dist/media-volume-slider-CKSxmdQv.js

@@ -0,0 +1,11 @@
+import { a as VolumeSliderTrackElement, i as VolumeSliderThumbElement, n as VolumeSliderIndicatorElement, r as VolumeSliderRootElement } from "./volume-slider-guD8gqpi.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-volume-slider.ts
+defineCustomElement("media-volume-slider", VolumeSliderRootElement);
+defineCustomElement("media-volume-slider-track", VolumeSliderTrackElement);
+defineCustomElement("media-volume-slider-indicator", VolumeSliderIndicatorElement);
+defineCustomElement("media-volume-slider-thumb", VolumeSliderThumbElement);
+
+//#endregion
+//# sourceMappingURL=media-volume-slider-CKSxmdQv.js.map

package/dist/media-volume-slider-CKSxmdQv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-volume-slider-CKSxmdQv.js","names":[],"sources":["../src/define/media-volume-slider.ts"],"sourcesContent":["import { VolumeSliderIndicatorElement, VolumeSliderRootElement, VolumeSliderThumbElement, VolumeSliderTrackElement } from '@/elements/volume-slider';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-volume-slider', VolumeSliderRootElement);\ndefineCustomElement('media-volume-slider-track', VolumeSliderTrackElement);\ndefineCustomElement('media-volume-slider-indicator', VolumeSliderIndicatorElement);\ndefineCustomElement('media-volume-slider-thumb', VolumeSliderThumbElement);\n"],"mappings":";;;;AAGA,oBAAoB,uBAAuB,wBAAwB;AACnE,oBAAoB,6BAA6B,yBAAyB;AAC1E,oBAAoB,iCAAiC,6BAA6B;AAClF,oBAAoB,6BAA6B,yBAAyB"}

package/dist/media-volume-slider-DP47VLVi.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/mute-button-vW2sLqqY.js

@@ -0,0 +1,50 @@
+import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { t as ButtonElement } from "./button-D1DWjsQu.js";
+import { muteButtonStateDefinition } from "@videojs/core/store";
+import { setAttributes } from "@videojs/utils/dom";
+
+//#region src/elements/mute-button.ts
+var MuteButton = class extends ButtonElement {
+	handleEvent(event) {
+		super.handleEvent(event);
+		const { type } = event;
+		const state = this._state;
+		if (state) {
+			if (type === "click") if (state.volumeLevel === "off") state.requestUnmute();
+			else state.requestMute();
+		}
+	}
+	get muted() {
+		return this._state?.muted ?? false;
+	}
+	get volumeLevel() {
+		return this._state?.volumeLevel ?? "high";
+	}
+	_update(props, state) {
+		this._state = state;
+		/** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP)  */
+		setAttributes(this, props);
+	}
+};
+const getMuteButtonState = {
+	keys: muteButtonStateDefinition.keys,
+	transform: (rawState, mediaStore) => ({
+		...muteButtonStateDefinition.stateTransform(rawState),
+		...muteButtonStateDefinition.createRequestMethods(mediaStore.dispatch)
+	})
+};
+const getMuteButtonProps = (state, _element) => {
+	return {
+		"data-muted": state.muted,
+		"data-volume-level": state.volumeLevel,
+		role: "button",
+		tabindex: "0",
+		"aria-label": state.muted ? "unmute" : "mute",
+		"data-tooltip": state.muted ? "Unmute" : "Mute"
+	};
+};
+const MuteButtonElement = toConnectedHTMLComponent(MuteButton, getMuteButtonState, getMuteButtonProps, "MuteButton");
+
+//#endregion
+export { MuteButtonElement as t };
+//# sourceMappingURL=mute-button-vW2sLqqY.js.map

package/dist/mute-button-vW2sLqqY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mute-button-vW2sLqqY.js","names":["getMuteButtonState: StateHook<{\n  muted: boolean;\n  volumeLevel: string;\n}>","getMuteButtonProps: PropsHook<{\n  muted: boolean;\n  volumeLevel: string;\n}>","MuteButtonElement: ConnectedComponentConstructor<MuteButtonState>"],"sources":["../src/elements/mute-button.ts"],"sourcesContent":["import type { MuteButtonState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { muteButtonStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\nimport { ButtonElement } from './button';\n\nexport class MuteButton extends ButtonElement {\n  _state:\n    | {\n      muted: boolean;\n      volumeLevel: string;\n      requestMute: () => void;\n      requestUnmute: () => void;\n    }\n    | undefined;\n\n  handleEvent(event: Event): void {\n    super.handleEvent(event);\n\n    const { type } = event;\n    const state = this._state;\n\n    if (state) {\n      if (type === 'click') {\n        if (state.volumeLevel === 'off') {\n          state.requestUnmute();\n        } else {\n          state.requestMute();\n        }\n      }\n    }\n  }\n\n  get muted(): boolean {\n    return this._state?.muted ?? false;\n  }\n\n  get volumeLevel(): string {\n    return this._state?.volumeLevel ?? 'high';\n  }\n\n  _update(props: any, state: any): void {\n    this._state = state;\n    /** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP)  */\n    setAttributes(this, props);\n  }\n}\n\nexport const getMuteButtonState: StateHook<{\n  muted: boolean;\n  volumeLevel: string;\n}> = {\n  keys: muteButtonStateDefinition.keys,\n  transform: (rawState, mediaStore) => ({\n    ...muteButtonStateDefinition.stateTransform(rawState),\n    ...muteButtonStateDefinition.createRequestMethods(mediaStore.dispatch),\n  }),\n};\n\nexport const getMuteButtonProps: PropsHook<{\n  muted: boolean;\n  volumeLevel: string;\n}> = (state, _element) => {\n  const baseProps: Record<string, any> = {\n    /** data attributes/props */\n    'data-muted': state.muted,\n    'data-volume-level': state.volumeLevel,\n    /** @TODO Need another state provider in core for i18n (CJP) */\n    /** aria attributes/props */\n    role: 'button',\n    tabindex: '0',\n    'aria-label': state.muted ? 'unmute' : 'mute',\n    /** tooltip */\n    'data-tooltip': state.muted ? 'Unmute' : 'Mute',\n    /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */\n    /** external props spread last to allow for overriding */\n    // ...props,\n  };\n\n  return baseProps;\n};\n\nexport const MuteButtonElement: ConnectedComponentConstructor<MuteButtonState> = toConnectedHTMLComponent(\n  MuteButton,\n  getMuteButtonState,\n  getMuteButtonProps,\n  'MuteButton',\n);\n"],"mappings":";;;;;;AASA,IAAa,aAAb,cAAgC,cAAc;CAU5C,YAAY,OAAoB;AAC9B,QAAM,YAAY,MAAM;EAExB,MAAM,EAAE,SAAS;EACjB,MAAM,QAAQ,KAAK;AAEnB,MAAI,OACF;OAAI,SAAS,QACX,KAAI,MAAM,gBAAgB,MACxB,OAAM,eAAe;OAErB,OAAM,aAAa;;;CAM3B,IAAI,QAAiB;AACnB,SAAO,KAAK,QAAQ,SAAS;;CAG/B,IAAI,cAAsB;AACxB,SAAO,KAAK,QAAQ,eAAe;;CAGrC,QAAQ,OAAY,OAAkB;AACpC,OAAK,SAAS;;AAEd,gBAAc,MAAM,MAAM;;;AAI9B,MAAaA,qBAGR;CACH,MAAM,0BAA0B;CAChC,YAAY,UAAU,gBAAgB;EACpC,GAAG,0BAA0B,eAAe,SAAS;EACrD,GAAG,0BAA0B,qBAAqB,WAAW,SAAS;EACvE;CACF;AAED,MAAaC,sBAGP,OAAO,aAAa;AAiBxB,QAhBuC;EAErC,cAAc,MAAM;EACpB,qBAAqB,MAAM;EAG3B,MAAM;EACN,UAAU;EACV,cAAc,MAAM,QAAQ,WAAW;EAEvC,gBAAgB,MAAM,QAAQ,WAAW;EAI1C;;AAKH,MAAaC,oBAAoE,yBAC/E,YACA,oBACA,oBACA,aACD"}

package/dist/play-button-aVb0g10G.js

@@ -0,0 +1,44 @@
+import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { t as ButtonElement } from "./button-D1DWjsQu.js";
+import { playButtonStateDefinition } from "@videojs/core/store";
+import { setAttributes } from "@videojs/utils/dom";
+
+//#region src/elements/play-button.ts
+var PlayButton = class extends ButtonElement {
+	handleEvent(event) {
+		super.handleEvent(event);
+		const { type } = event;
+		const state = this._state;
+		if (state && type === "click") if (state.paused) state.requestPlay();
+		else state.requestPause();
+	}
+	get paused() {
+		return this._state?.paused ?? true;
+	}
+	_update(props, state, _mediaStore) {
+		this._state = state;
+		/** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP)  */
+		setAttributes(this, props);
+	}
+};
+const getPlayButtonState = {
+	keys: playButtonStateDefinition.keys,
+	transform: (rawState, mediaStore) => ({
+		...playButtonStateDefinition.stateTransform(rawState),
+		...playButtonStateDefinition.createRequestMethods(mediaStore.dispatch)
+	})
+};
+const getPlayButtonProps = (state, _element) => {
+	return {
+		"data-paused": state.paused,
+		role: "button",
+		tabindex: "0",
+		"aria-label": state.paused ? "play" : "pause",
+		"data-tooltip": state.paused ? "Play" : "Pause"
+	};
+};
+const PlayButtonElement = toConnectedHTMLComponent(PlayButton, getPlayButtonState, getPlayButtonProps, "PlayButton");
+
+//#endregion
+export { PlayButtonElement as t };
+//# sourceMappingURL=play-button-aVb0g10G.js.map

package/dist/play-button-aVb0g10G.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"play-button-aVb0g10G.js","names":["getPlayButtonState: StateHook<{ paused: boolean }>","getPlayButtonProps: PropsHook<{ paused: boolean }>","PlayButtonElement: ConnectedComponentConstructor<PlayButtonState>"],"sources":["../src/elements/play-button.ts"],"sourcesContent":["import type { PlayButtonState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { playButtonStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\nimport { ButtonElement } from './button';\n\nexport class PlayButton extends ButtonElement {\n  _state: { paused: boolean; requestPlay: () => void; requestPause: () => void } | undefined;\n\n  handleEvent(event: Event): void {\n    super.handleEvent(event);\n\n    const { type } = event;\n    const state = this._state;\n    if (state && type === 'click') {\n      if (state.paused) {\n        state.requestPlay();\n      } else {\n        state.requestPause();\n      }\n    }\n  }\n\n  get paused(): boolean {\n    return this._state?.paused ?? true;\n  }\n\n  _update(props: any, state: any, _mediaStore?: any): void {\n    this._state = state;\n    /** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP)  */\n    setAttributes(this, props);\n  }\n}\n\nexport const getPlayButtonState: StateHook<{ paused: boolean }> = {\n  keys: playButtonStateDefinition.keys,\n  transform: (rawState, mediaStore) => ({\n    ...playButtonStateDefinition.stateTransform(rawState),\n    ...playButtonStateDefinition.createRequestMethods(mediaStore.dispatch),\n  }),\n};\n\nexport const getPlayButtonProps: PropsHook<{ paused: boolean }> = (state, _element) => {\n  const baseProps: Record<string, any> = {\n    /** data attributes/props */\n    'data-paused': state.paused,\n    /** @TODO Need another state provider in core for i18n (CJP) */\n    /** aria attributes/props */\n    role: 'button',\n    tabindex: '0',\n    'aria-label': state.paused ? 'play' : 'pause',\n    /** tooltip */\n    'data-tooltip': state.paused ? 'Play' : 'Pause',\n    /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */\n    /** external props spread last to allow for overriding */\n    // ...props,\n  };\n\n  return baseProps;\n};\n\nexport const PlayButtonElement: ConnectedComponentConstructor<PlayButtonState> = toConnectedHTMLComponent(\n  PlayButton,\n  getPlayButtonState,\n  getPlayButtonProps,\n  'PlayButton',\n);\n"],"mappings":";;;;;;AASA,IAAa,aAAb,cAAgC,cAAc;CAG5C,YAAY,OAAoB;AAC9B,QAAM,YAAY,MAAM;EAExB,MAAM,EAAE,SAAS;EACjB,MAAM,QAAQ,KAAK;AACnB,MAAI,SAAS,SAAS,QACpB,KAAI,MAAM,OACR,OAAM,aAAa;MAEnB,OAAM,cAAc;;CAK1B,IAAI,SAAkB;AACpB,SAAO,KAAK,QAAQ,UAAU;;CAGhC,QAAQ,OAAY,OAAY,aAAyB;AACvD,OAAK,SAAS;;AAEd,gBAAc,MAAM,MAAM;;;AAI9B,MAAaA,qBAAqD;CAChE,MAAM,0BAA0B;CAChC,YAAY,UAAU,gBAAgB;EACpC,GAAG,0BAA0B,eAAe,SAAS;EACrD,GAAG,0BAA0B,qBAAqB,WAAW,SAAS;EACvE;CACF;AAED,MAAaC,sBAAsD,OAAO,aAAa;AAgBrF,QAfuC;EAErC,eAAe,MAAM;EAGrB,MAAM;EACN,UAAU;EACV,cAAc,MAAM,SAAS,SAAS;EAEtC,gBAAgB,MAAM,SAAS,SAAS;EAIzC;;AAKH,MAAaC,oBAAoE,yBAC/E,YACA,oBACA,oBACA,aACD"}

package/dist/popover-Dc0hyhwB.js

@@ -0,0 +1,187 @@
+import { contains, getDocument, getDocumentOrShadowRoot, safePolygon } from "@videojs/utils/dom";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+
+//#region src/elements/popover.ts
+var PopoverElement = class extends HTMLElement {
+	#open = false;
+	#transitionStatus = "initial";
+	#hoverTimeout = null;
+	#cleanup = null;
+	#abortController = null;
+	#floatingContext = null;
+	connectedCallback() {
+		this.#abortController ??= new AbortController();
+		const { signal } = this.#abortController;
+		const trigger = this.#triggerElement;
+		if (trigger) {
+			if (globalThis.matchMedia?.("(hover: hover)")?.matches) {
+				trigger.addEventListener("pointerenter", this, { signal });
+				trigger.addEventListener("pointerleave", this, { signal });
+			}
+			trigger.addEventListener("focusin", this, { signal });
+			trigger.addEventListener("focusout", this, { signal });
+		}
+		this.addEventListener("pointerenter", this, { signal });
+		this.addEventListener("focusout", this, { signal });
+	}
+	disconnectedCallback() {
+		this.#clearHoverTimeout();
+		this.#cleanup?.();
+		this.#abortController?.abort();
+		this.#abortController = null;
+	}
+	handleEvent(event) {
+		switch (event.type) {
+			case "pointerenter":
+				this.#handlePointerEnter(event);
+				break;
+			case "pointerleave":
+				this.#handlePointerLeave(event);
+				break;
+			case "pointermove":
+				this.#handlePointerMove(event);
+				break;
+			case "focusin":
+				this.#handleFocusIn(event);
+				break;
+			case "focusout":
+				this.#handleFocusOut(event);
+				break;
+			default: break;
+		}
+	}
+	static get observedAttributes() {
+		return [
+			"open-on-hover",
+			"delay",
+			"close-delay",
+			"side",
+			"side-offset"
+		];
+	}
+	get openOnHover() {
+		return this.hasAttribute("open-on-hover");
+	}
+	get delay() {
+		return Number.parseInt(this.getAttribute("delay") ?? "0", 10);
+	}
+	get closeDelay() {
+		return Number.parseInt(this.getAttribute("close-delay") ?? "0", 10);
+	}
+	get side() {
+		return this.getAttribute("side");
+	}
+	get sideOffset() {
+		return Number.parseInt(this.getAttribute("side-offset") ?? "0", 10);
+	}
+	get #triggerElement() {
+		return getDocumentOrShadowRoot(this)?.querySelector(`[popovertarget="${this.id}"]`);
+	}
+	#setOpen(open) {
+		if (this.#open === open) return;
+		this.#open = open;
+		if (open) {
+			this.#setupFloating();
+			this.#transitionStatus = "initial";
+			this.#updateVisibility();
+			this.showPopover();
+			requestAnimationFrame(() => {
+				this.#transitionStatus = "open";
+				this.#updateVisibility();
+			});
+		} else {
+			this.#transitionStatus = "close";
+			this.#updateVisibility();
+			const transitions = this.getAnimations().filter((anim) => anim instanceof CSSTransition);
+			if (transitions.length > 0) Promise.all(transitions.map((t) => t.finished)).then(() => this.hidePopover()).catch(() => this.hidePopover());
+			else this.hidePopover();
+		}
+	}
+	#updateVisibility() {
+		this.toggleAttribute("data-starting-style", this.#transitionStatus === "initial");
+		this.toggleAttribute("data-open", this.#transitionStatus === "initial" || this.#transitionStatus === "open");
+		this.toggleAttribute("data-ending-style", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
+		this.toggleAttribute("data-closed", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
+	}
+	#setupFloating() {
+		const trigger = this.#triggerElement;
+		if (!trigger) return;
+		const placement = this.side ?? "top";
+		const sideOffset = this.sideOffset;
+		const updatePosition = () => {
+			computePosition(trigger, this, {
+				placement,
+				middleware: [
+					offset(sideOffset),
+					flip(),
+					shift()
+				],
+				strategy: "fixed"
+			}).then((data) => {
+				this.#floatingContext = {
+					...data,
+					elements: {
+						domReference: trigger,
+						floating: this
+					}
+				};
+				Object.assign(this.style, {
+					left: `${data.x}px`,
+					top: `${data.y}px`
+				});
+			});
+		};
+		updatePosition();
+		this.#cleanup = autoUpdate(trigger, this, updatePosition);
+	}
+	#clearHoverTimeout() {
+		if (this.#hoverTimeout) {
+			globalThis.clearTimeout(this.#hoverTimeout);
+			this.#hoverTimeout = null;
+		}
+	}
+	#handlePointerEnter(event) {
+		if (!this.openOnHover) return;
+		this.#clearHoverTimeout();
+		if (event.currentTarget === this) this.#addPointerMoveListener();
+		if (this.#open) return;
+		this.#hoverTimeout = globalThis.setTimeout(() => {
+			this.#setOpen(true);
+		}, this.delay);
+	}
+	#handlePointerLeave(_event) {
+		this.#addPointerMoveListener();
+	}
+	#addPointerMoveListener() {
+		if (!globalThis.matchMedia?.("(hover: hover)")?.matches) return;
+		const { signal } = this.#abortController;
+		getDocument(this).documentElement.addEventListener("pointermove", this, { signal });
+	}
+	#handlePointerMove(event) {
+		if (!this.openOnHover || !this.#floatingContext) return;
+		safePolygon({ blockPointerEvents: true })({
+			...this.#floatingContext,
+			x: event.clientX,
+			y: event.clientY,
+			onClose: () => {
+				getDocument(this).documentElement.removeEventListener("pointermove", this);
+				this.#clearHoverTimeout();
+				this.#hoverTimeout = globalThis.setTimeout(() => {
+					this.#setOpen(false);
+				}, this.closeDelay);
+			}
+		})(event);
+	}
+	#handleFocusIn(_event) {
+		this.#setOpen(true);
+	}
+	#handleFocusOut(event) {
+		const relatedTarget = event.relatedTarget;
+		if (relatedTarget && contains(this, relatedTarget)) return;
+		this.#setOpen(false);
+	}
+};
+
+//#endregion
+export { PopoverElement as t };
+//# sourceMappingURL=popover-Dc0hyhwB.js.map

package/dist/popover-Dc0hyhwB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-Dc0hyhwB.js","names":["#abortController","#triggerElement","#clearHoverTimeout","#cleanup","#handlePointerEnter","#handlePointerLeave","#handlePointerMove","#handleFocusIn","#handleFocusOut","#open","#setupFloating","#transitionStatus","#updateVisibility","#floatingContext","#hoverTimeout","#addPointerMoveListener","#setOpen"],"sources":["../src/elements/popover.ts"],"sourcesContent":["import type { ComputePositionReturn } from '@floating-ui/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { contains, getDocument, getDocumentOrShadowRoot, safePolygon } from '@videojs/utils/dom';\n\ntype Prettify<T> = {\n  [K in keyof T]: T[K];\n};\n\ntype FloatingContext = Prettify<ComputePositionReturn> & {\n  elements: {\n    domReference: HTMLElement;\n    floating: HTMLElement;\n  };\n};\n\nexport class PopoverElement extends HTMLElement {\n  #open = false;\n  #transitionStatus: 'initial' | 'open' | 'close' | 'unmounted' = 'initial';\n  #hoverTimeout: ReturnType<typeof setTimeout> | null = null;\n  #cleanup: (() => void) | null = null;\n  #abortController: AbortController | null = null;\n  #floatingContext: FloatingContext | null = null;\n\n  connectedCallback(): void {\n    this.#abortController ??= new AbortController();\n    const { signal } = this.#abortController;\n\n    const trigger = this.#triggerElement as HTMLElement;\n    if (trigger) {\n      if (globalThis.matchMedia?.('(hover: hover)')?.matches) {\n        trigger.addEventListener('pointerenter', this, { signal });\n        trigger.addEventListener('pointerleave', this, { signal });\n      }\n\n      trigger.addEventListener('focusin', this, { signal });\n      trigger.addEventListener('focusout', this, { signal });\n    }\n\n    this.addEventListener('pointerenter', this, { signal });\n    this.addEventListener('focusout', this, { signal });\n  }\n\n  disconnectedCallback(): void {\n    this.#clearHoverTimeout();\n    this.#cleanup?.();\n\n    this.#abortController?.abort();\n    this.#abortController = null;\n  }\n\n  handleEvent(event: Event): void {\n    switch (event.type) {\n      case 'pointerenter':\n        this.#handlePointerEnter(event as PointerEvent);\n        break;\n      case 'pointerleave':\n        this.#handlePointerLeave(event as PointerEvent);\n        break;\n      case 'pointermove':\n        this.#handlePointerMove(event as PointerEvent);\n        break;\n      case 'focusin':\n        this.#handleFocusIn(event as FocusEvent);\n        break;\n      case 'focusout':\n        this.#handleFocusOut(event as FocusEvent);\n        break;\n      default:\n        break;\n    }\n  }\n\n  static get observedAttributes(): string[] {\n    return ['open-on-hover', 'delay', 'close-delay', 'side', 'side-offset'];\n  }\n\n  get openOnHover(): boolean {\n    return this.hasAttribute('open-on-hover');\n  }\n\n  get delay(): number {\n    return Number.parseInt(this.getAttribute('delay') ?? '0', 10);\n  }\n\n  get closeDelay(): number {\n    return Number.parseInt(this.getAttribute('close-delay') ?? '0', 10);\n  }\n\n  get side(): Placement {\n    return this.getAttribute('side') as Placement;\n  }\n\n  get sideOffset(): number {\n    return Number.parseInt(this.getAttribute('side-offset') ?? '0', 10);\n  }\n\n  get #triggerElement(): HTMLElement | null {\n    return getDocumentOrShadowRoot(this)?.querySelector(`[popovertarget=\"${this.id}\"]`) as HTMLElement | null;\n  }\n\n  #setOpen(open: boolean): void {\n    if (this.#open === open) return;\n\n    this.#open = open;\n\n    if (open) {\n      this.#setupFloating();\n\n      this.#transitionStatus = 'initial';\n      this.#updateVisibility();\n\n      this.showPopover();\n\n      requestAnimationFrame(() => {\n        this.#transitionStatus = 'open';\n        this.#updateVisibility();\n      });\n    } else {\n      this.#transitionStatus = 'close';\n      this.#updateVisibility();\n\n      const transitions = this.getAnimations().filter(anim => anim instanceof CSSTransition);\n      if (transitions.length > 0) {\n        Promise.all(transitions.map(t => t.finished))\n          .then(() => this.hidePopover())\n          .catch(() => this.hidePopover());\n      } else {\n        this.hidePopover();\n      }\n    }\n  }\n\n  #updateVisibility(): void {\n    this.toggleAttribute('data-starting-style', this.#transitionStatus === 'initial');\n    this.toggleAttribute('data-open', this.#transitionStatus === 'initial' || this.#transitionStatus === 'open');\n    this.toggleAttribute('data-ending-style', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted');\n    this.toggleAttribute('data-closed', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted');\n  }\n\n  #setupFloating(): void {\n    const trigger = this.#triggerElement as HTMLElement;\n    if (!trigger) return;\n\n    const placement = this.side ?? 'top';\n    const sideOffset = this.sideOffset;\n\n    const updatePosition = () => {\n      computePosition(trigger, this, {\n        placement,\n        middleware: [offset(sideOffset), flip(), shift()],\n        strategy: 'fixed',\n      }).then((data: ComputePositionReturn) => {\n        this.#floatingContext = {\n          ...data,\n          elements: {\n            domReference: trigger,\n            floating: this,\n          },\n        };\n\n        Object.assign(this.style, {\n          left: `${data.x}px`,\n          top: `${data.y}px`,\n        });\n      });\n    };\n\n    updatePosition();\n    this.#cleanup = autoUpdate(trigger, this, updatePosition);\n  }\n\n  #clearHoverTimeout(): void {\n    if (this.#hoverTimeout) {\n      globalThis.clearTimeout(this.#hoverTimeout);\n      this.#hoverTimeout = null;\n    }\n  }\n\n  #handlePointerEnter(event: PointerEvent): void {\n    if (!this.openOnHover) return;\n\n    this.#clearHoverTimeout();\n\n    if (event.currentTarget === this) {\n      this.#addPointerMoveListener();\n    }\n\n    if (this.#open) {\n      return;\n    }\n\n    this.#hoverTimeout = globalThis.setTimeout(() => {\n      this.#setOpen(true);\n    }, this.delay);\n  }\n\n  #handlePointerLeave(_event: PointerEvent): void {\n    this.#addPointerMoveListener();\n  }\n\n  #addPointerMoveListener(): void {\n    if (!globalThis.matchMedia?.('(hover: hover)')?.matches) return;\n\n    const { signal } = this.#abortController as AbortController;\n    getDocument(this).documentElement.addEventListener('pointermove', this, { signal });\n  }\n\n  #handlePointerMove(event: PointerEvent): void {\n    if (!this.openOnHover || !this.#floatingContext) return;\n\n    const close = safePolygon({ blockPointerEvents: true })({\n      ...this.#floatingContext,\n      x: event.clientX,\n      y: event.clientY,\n      onClose: () => {\n        getDocument(this).documentElement.removeEventListener('pointermove', this);\n\n        this.#clearHoverTimeout();\n        this.#hoverTimeout = globalThis.setTimeout(() => {\n          this.#setOpen(false);\n        }, this.closeDelay);\n      },\n    });\n    close(event);\n  }\n\n  #handleFocusIn(_event: FocusEvent): void {\n    this.#setOpen(true);\n  }\n\n  #handleFocusOut(event: FocusEvent): void {\n    const relatedTarget = event.relatedTarget as HTMLElement;\n    if (relatedTarget && contains(this, relatedTarget)) return;\n\n    this.#setOpen(false);\n  };\n}\n"],"mappings":"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"}

package/dist/preview-time-display-Dax0FQ2X.js

@@ -0,0 +1,44 @@
+import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { previewTimeDisplayStateDefinition } from "@videojs/core/store";
+import { formatDisplayTime } from "@videojs/utils";
+
+//#region src/elements/preview-time-display.ts
+var PreviewTimeDisplay = class extends HTMLElement {
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.observedAttributes = ["show-remaining"];
+	}
+	constructor() {
+		super();
+		if (!this.shadowRoot) this.attachShadow(this.constructor.shadowRootOptions);
+	}
+	get previewTime() {
+		return this._state?.previewTime ?? 0;
+	}
+	get showRemaining() {
+		return this.hasAttribute("show-remaining");
+	}
+	attributeChangedCallback(name, _oldValue, _newValue) {
+		if (name === "show-remaining" && this._state) this._update({}, this._state);
+	}
+	_update(_props, state) {
+		this._state = state;
+		/** @TODO Should this live here or elsewhere? (CJP) */
+		const timeLabel = formatDisplayTime(state.previewTime);
+		if (this.shadowRoot) this.shadowRoot.textContent = timeLabel;
+	}
+};
+const usePreviewTimeDisplayState = {
+	keys: [...previewTimeDisplayStateDefinition.keys],
+	transform: (rawState, _mediaStore) => ({ ...previewTimeDisplayStateDefinition.stateTransform(rawState) })
+};
+const getPreviewTimeDisplayProps = (_state, _element) => {
+	return {};
+};
+const PreviewTimeDisplayElement = toConnectedHTMLComponent(PreviewTimeDisplay, usePreviewTimeDisplayState, getPreviewTimeDisplayProps, "PreviewTimeDisplay");
+
+//#endregion
+export { PreviewTimeDisplayElement as t };
+//# sourceMappingURL=preview-time-display-Dax0FQ2X.js.map

package/dist/preview-time-display-Dax0FQ2X.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-time-display-Dax0FQ2X.js","names":["usePreviewTimeDisplayState: StateHook<{\n  previewTime: number | undefined;\n}>","getPreviewTimeDisplayProps: PropsHook<{\n  previewTime: number | undefined;\n}>","PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState>"],"sources":["../src/elements/preview-time-display.ts"],"sourcesContent":["import type { PreviewTimeDisplayState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { previewTimeDisplayStateDefinition } from '@videojs/core/store';\n\nimport { formatDisplayTime } from '@videojs/utils';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\nexport class PreviewTimeDisplay extends HTMLElement {\n  static shadowRootOptions = {\n    mode: 'open' as ShadowRootMode,\n  };\n\n  static observedAttributes: string[] = ['show-remaining'];\n\n  _state:\n    | {\n      previewTime: number | undefined;\n    }\n    | undefined;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof PreviewTimeDisplay).shadowRootOptions);\n    }\n  }\n\n  get previewTime(): number {\n    return this._state?.previewTime ?? 0;\n  }\n\n  get showRemaining(): boolean {\n    return this.hasAttribute('show-remaining');\n  }\n\n  attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void {\n    if (name === 'show-remaining' && this._state) {\n      // Re-render with current state when show-remaining attribute changes\n      this._update({}, this._state);\n    }\n  }\n\n  _update(_props: any, state: any): void {\n    this._state = state;\n\n    /** @TODO Should this live here or elsewhere? (CJP) */\n    const timeLabel = formatDisplayTime(state.previewTime);\n\n    if (this.shadowRoot) {\n      this.shadowRoot.textContent = timeLabel;\n    }\n  }\n}\n\nexport const usePreviewTimeDisplayState: StateHook<{\n  previewTime: number | undefined;\n}> = {\n  keys: [...previewTimeDisplayStateDefinition.keys],\n  transform: (rawState, _mediaStore) => ({\n    ...previewTimeDisplayStateDefinition.stateTransform(rawState),\n    // Preview time display is read-only, so no request methods needed\n  }),\n};\n\nexport const getPreviewTimeDisplayProps: PropsHook<{\n  previewTime: number | undefined;\n}> = (_state, _element) => {\n  const baseProps: Record<string, any> = {};\n  return baseProps;\n};\n\nexport const PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState> = toConnectedHTMLComponent(\n  PreviewTimeDisplay,\n  usePreviewTimeDisplayState,\n  getPreviewTimeDisplayProps,\n  'PreviewTimeDisplay',\n);\n"],"mappings":";;;;;AAQA,IAAa,qBAAb,cAAwC,YAAY;;2BACvB,EACzB,MAAM,QACP;;;4BAEqC,CAAC,iBAAiB;;CAQxD,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,WACR,MAAK,aAAc,KAAK,YAA0C,kBAAkB;;CAIxF,IAAI,cAAsB;AACxB,SAAO,KAAK,QAAQ,eAAe;;CAGrC,IAAI,gBAAyB;AAC3B,SAAO,KAAK,aAAa,iBAAiB;;CAG5C,yBAAyB,MAAc,WAA0B,WAAgC;AAC/F,MAAI,SAAS,oBAAoB,KAAK,OAEpC,MAAK,QAAQ,EAAE,EAAE,KAAK,OAAO;;CAIjC,QAAQ,QAAa,OAAkB;AACrC,OAAK,SAAS;;EAGd,MAAM,YAAY,kBAAkB,MAAM,YAAY;AAEtD,MAAI,KAAK,WACP,MAAK,WAAW,cAAc;;;AAKpC,MAAaA,6BAER;CACH,MAAM,CAAC,GAAG,kCAAkC,KAAK;CACjD,YAAY,UAAU,iBAAiB,EACrC,GAAG,kCAAkC,eAAe,SAAS,EAE9D;CACF;AAED,MAAaC,8BAEP,QAAQ,aAAa;AAEzB,QADuC,EAAE;;AAI3C,MAAaC,4BAAoF,yBAC/F,oBACA,4BACA,4BACA,qBACD"}