@videojs/html 0.1.0-preview.8 → 0.1.0-preview.9

package/dist/{media-volume-slider-B-n6b3Y8.js → media-volume-slider-BB6GhrzS.js}

@@ -1,4 +1,4 @@
-import { a as VolumeSliderTrackElement, i as VolumeSliderThumbElement, n as VolumeSliderIndicatorElement, r as VolumeSliderRootElement } from "./volume-slider-CbFzCHX4.js";
+import { a as VolumeSliderTrackElement, i as VolumeSliderThumbElement, n as VolumeSliderIndicatorElement, r as VolumeSliderRootElement } from "./volume-slider-CUyfwehe.js";
 import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
 
 //#region src/define/media-volume-slider.ts
@@ -8,4 +8,4 @@ defineCustomElement("media-volume-slider-indicator", VolumeSliderIndicatorElemen
 defineCustomElement("media-volume-slider-thumb", VolumeSliderThumbElement);
 
 //#endregion
-//# sourceMappingURL=media-volume-slider-B-n6b3Y8.js.map
+//# sourceMappingURL=media-volume-slider-BB6GhrzS.js.map

package/dist/{media-volume-slider-B-n6b3Y8.js.map → media-volume-slider-BB6GhrzS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"media-volume-slider-B-n6b3Y8.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"}
+{"version":3,"file":"media-volume-slider-BB6GhrzS.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/{mute-button-BSDoCZs3.js → mute-button-C7XQB6iK.js}

@@ -1,4 +1,4 @@
-import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { n as toConnectedHTMLComponent } from "./component-factory-C0cl1nrL.js";
 import { t as ButtonElement } from "./button-Bu1mGG-F.js";
 import { muteButtonStateDefinition } from "@videojs/core/store";
 import { setAttributes } from "@videojs/utils/dom";
@@ -26,13 +26,12 @@ var MuteButton = class extends ButtonElement {
 		setAttributes(this, props);
 	}
 };
-const getMuteButtonState = {
-	keys: muteButtonStateDefinition.keys,
-	transform: (rawState, mediaStore) => ({
-		...muteButtonStateDefinition.stateTransform(rawState),
+function getMuteButtonState(mediaStore) {
+	return {
+		...muteButtonStateDefinition.stateTransform(mediaStore.getState()),
 		...muteButtonStateDefinition.createRequestMethods(mediaStore.dispatch)
-	})
-};
+	};
+}
 const getMuteButtonProps = (state, _element) => {
 	return {
 		"data-muted": state.muted,
@@ -47,4 +46,4 @@ const MuteButtonElement = toConnectedHTMLComponent(MuteButton, getMuteButtonStat
 
 //#endregion
 export { MuteButtonElement as t };
-//# sourceMappingURL=mute-button-BSDoCZs3.js.map
+//# sourceMappingURL=mute-button-C7XQB6iK.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mute-button-C7XQB6iK.js","names":["getMuteButtonProps: PropsHook<{\n  muted: boolean;\n  volumeLevel: string;\n}>","MuteButtonElement: ConnectedComponentConstructor<MuteButtonStateWithMethods>"],"sources":["../src/elements/mute-button.ts"],"sourcesContent":["import type { MediaStore, MuteButtonState } from '@videojs/core/store';\nimport type { Prettify } from '../types';\nimport type { ConnectedComponentConstructor, PropsHook } 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\ntype MuteButtonStateWithMethods = Prettify<MuteButtonState & ReturnType<typeof muteButtonStateDefinition.createRequestMethods>>;\n\nexport function getMuteButtonState(mediaStore: MediaStore): MuteButtonStateWithMethods {\n  return {\n    ...muteButtonStateDefinition.stateTransform(mediaStore.getState()),\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<MuteButtonStateWithMethods> = toConnectedHTMLComponent(\n  MuteButton,\n  getMuteButtonState,\n  getMuteButtonProps,\n  'MuteButton',\n);\n"],"mappings":";;;;;;AAUA,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;;;AAM9B,SAAgB,mBAAmB,YAAoD;AACrF,QAAO;EACL,GAAG,0BAA0B,eAAe,WAAW,UAAU,CAAC;EAClE,GAAG,0BAA0B,qBAAqB,WAAW,SAAS;EACvE;;AAGH,MAAaA,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,oBAA+E,yBAC1F,YACA,oBACA,oBACA,aACD"}

package/dist/{play-button-gaqIKsrv.js → play-button-DFbxwrrq.js}

@@ -1,4 +1,4 @@
-import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { n as toConnectedHTMLComponent } from "./component-factory-C0cl1nrL.js";
 import { t as ButtonElement } from "./button-Bu1mGG-F.js";
 import { playButtonStateDefinition } from "@videojs/core/store";
 import { setAttributes } from "@videojs/utils/dom";
@@ -21,13 +21,16 @@ var PlayButton = class extends ButtonElement {
 		setAttributes(this, props);
 	}
 };
-const getPlayButtonState = {
-	keys: playButtonStateDefinition.keys,
-	transform: (rawState, mediaStore) => ({
-		...playButtonStateDefinition.stateTransform(rawState),
+/**
+* PlayButton state hook - equivalent to React's usePlayButtonState
+* Handles media store state subscription and transformation
+*/
+function getPlayButtonState(mediaStore) {
+	return {
+		...playButtonStateDefinition.stateTransform(mediaStore.getState()),
 		...playButtonStateDefinition.createRequestMethods(mediaStore.dispatch)
-	})
-};
+	};
+}
 const getPlayButtonProps = (state, _element) => {
 	return {
 		"data-paused": state.paused,
@@ -41,4 +44,4 @@ const PlayButtonElement = toConnectedHTMLComponent(PlayButton, getPlayButtonStat
 
 //#endregion
 export { PlayButtonElement as t };
-//# sourceMappingURL=play-button-gaqIKsrv.js.map
+//# sourceMappingURL=play-button-DFbxwrrq.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"play-button-DFbxwrrq.js","names":["getPlayButtonProps: PropsHook<{ paused: boolean }>","PlayButtonElement: ConnectedComponentConstructor<PlayButtonStateWithMethods>"],"sources":["../src/elements/play-button.ts"],"sourcesContent":["import type { MediaStore, PlayButtonState } from '@videojs/core/store';\nimport type { Prettify } from '../types';\nimport type { ConnectedComponentConstructor, PropsHook } 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\ntype PlayButtonStateWithMethods = Prettify<PlayButtonState & ReturnType<typeof playButtonStateDefinition.createRequestMethods>>;\n\n/**\n * PlayButton state hook - equivalent to React's usePlayButtonState\n * Handles media store state subscription and transformation\n */\nexport function getPlayButtonState(mediaStore: MediaStore): PlayButtonStateWithMethods {\n  return {\n    ...playButtonStateDefinition.stateTransform(mediaStore.getState()),\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<PlayButtonStateWithMethods> = toConnectedHTMLComponent(\n  PlayButton,\n  getPlayButtonState,\n  getPlayButtonProps,\n  'PlayButton',\n);\n"],"mappings":";;;;;;AAUA,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;;;;;;;AAU9B,SAAgB,mBAAmB,YAAoD;AACrF,QAAO;EACL,GAAG,0BAA0B,eAAe,WAAW,UAAU,CAAC;EAClE,GAAG,0BAA0B,qBAAqB,WAAW,SAAS;EACvE;;AAGH,MAAaA,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,oBAA+E,yBAC1F,YACA,oBACA,oBACA,aACD"}

package/dist/{preview-time-display-Dax0FQ2X.js → preview-time-display-CtA58pCS.js}

@@ -1,4 +1,4 @@
-import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { n as toConnectedHTMLComponent } from "./component-factory-C0cl1nrL.js";
 import { previewTimeDisplayStateDefinition } from "@videojs/core/store";
 import { formatDisplayTime } from "@videojs/utils";
 
@@ -30,15 +30,14 @@ var PreviewTimeDisplay = class extends HTMLElement {
 		if (this.shadowRoot) this.shadowRoot.textContent = timeLabel;
 	}
 };
-const usePreviewTimeDisplayState = {
-	keys: [...previewTimeDisplayStateDefinition.keys],
-	transform: (rawState, _mediaStore) => ({ ...previewTimeDisplayStateDefinition.stateTransform(rawState) })
-};
+function getPreviewTimeDisplayState(mediaStore) {
+	return { ...previewTimeDisplayStateDefinition.stateTransform(mediaStore.getState()) };
+}
 const getPreviewTimeDisplayProps = (_state, _element) => {
 	return {};
 };
-const PreviewTimeDisplayElement = toConnectedHTMLComponent(PreviewTimeDisplay, usePreviewTimeDisplayState, getPreviewTimeDisplayProps, "PreviewTimeDisplay");
+const PreviewTimeDisplayElement = toConnectedHTMLComponent(PreviewTimeDisplay, getPreviewTimeDisplayState, getPreviewTimeDisplayProps, "PreviewTimeDisplay");
 
 //#endregion
 export { PreviewTimeDisplayElement as t };
-//# sourceMappingURL=preview-time-display-Dax0FQ2X.js.map
+//# sourceMappingURL=preview-time-display-CtA58pCS.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"preview-time-display-CtA58pCS.js","names":["getPreviewTimeDisplayProps: PropsHook<{\n  previewTime: number | undefined;\n}>","PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState>"],"sources":["../src/elements/preview-time-display.ts"],"sourcesContent":["import type { MediaStore, PreviewTimeDisplayState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook } 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 function getPreviewTimeDisplayState(mediaStore: MediaStore): {\n  previewTime: number | undefined;\n} {\n  return {\n    ...previewTimeDisplayStateDefinition.stateTransform(mediaStore.getState()),\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  getPreviewTimeDisplayState,\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,SAAgB,2BAA2B,YAEzC;AACA,QAAO,EACL,GAAG,kCAAkC,eAAe,WAAW,UAAU,CAAC,EAE3E;;AAGH,MAAaA,8BAEP,QAAQ,aAAa;AAEzB,QADuC,EAAE;;AAI3C,MAAaC,4BAAoF,yBAC/F,oBACA,4BACA,4BACA,qBACD"}

package/dist/skins/frosted.js

@@ -1,15 +1,15 @@
-import "../component-factory-DeAN6cjC.js";
-import "../current-time-display-C3qndGf5.js";
-import "../duration-display-JOPp3bdU.js";
+import "../component-factory-C0cl1nrL.js";
+import "../current-time-display-DpoDrQu9.js";
+import "../duration-display-BFRQmaOz.js";
 import "../button-Bu1mGG-F.js";
-import "../fullscreen-button-C1nq8yP-.js";
-import "../mute-button-BSDoCZs3.js";
-import "../play-button-gaqIKsrv.js";
+import "../fullscreen-button-B0R9K3GV.js";
+import "../mute-button-C7XQB6iK.js";
+import "../play-button-DFbxwrrq.js";
 import "../popover-BUCVOjnO.js";
-import "../preview-time-display-Dax0FQ2X.js";
-import "../time-slider-DKamO_2Q.js";
+import "../preview-time-display-CtA58pCS.js";
+import "../time-slider-DHpKPCI1.js";
 import "../tooltip-B-glki2f.js";
-import "../volume-slider-CbFzCHX4.js";
+import "../volume-slider-CUyfwehe.js";
 import "../media-container-BOL0PKuG.js";
 import { t as MediaSkinElement } from "../media-skin-CxnuHwhu.js";
 import "../video-provider-BKDqoKFf.js";
@@ -17,14 +17,14 @@ import { t as defineCustomElement } from "../custom-element-3bDlB2XO.js";
 import "../icons-CuxuONCk.js";
 import "../video-provider-BPPI5e47.js";
 import "../media-container-DwKSOa1h.js";
-import "../media-play-button-DhSK0JQk.js";
-import "../media-mute-button-CHHISH91.js";
-import "../media-volume-slider-B-n6b3Y8.js";
-import "../media-time-slider-SuxR3Rep.js";
-import "../media-fullscreen-button-CIpcLhtU.js";
-import "../media-duration-display-BLMr7VHo.js";
-import "../media-current-time-display-B-4Cp845.js";
-import "../media-preview-time-display-DAiMgLPX.js";
+import "../media-play-button-CDBZrhmx.js";
+import "../media-mute-button-Uy18NpPx.js";
+import "../media-volume-slider-BB6GhrzS.js";
+import "../media-time-slider-BOdJr4QE.js";
+import "../media-fullscreen-button-DDQ6EdLz.js";
+import "../media-duration-display-tzVLafRm.js";
+import "../media-current-time-display-DVCqNt7c.js";
+import "../media-preview-time-display-ufqXiNXg.js";
 import "../media-popover-Cw9d_Bh3.js";
 import "../media-tooltip-CMRN_X4D.js";
 

package/dist/skins/minimal.js

@@ -1,15 +1,15 @@
-import "../component-factory-DeAN6cjC.js";
-import "../current-time-display-C3qndGf5.js";
-import "../duration-display-JOPp3bdU.js";
+import "../component-factory-C0cl1nrL.js";
+import "../current-time-display-DpoDrQu9.js";
+import "../duration-display-BFRQmaOz.js";
 import "../button-Bu1mGG-F.js";
-import "../fullscreen-button-C1nq8yP-.js";
-import "../mute-button-BSDoCZs3.js";
-import "../play-button-gaqIKsrv.js";
+import "../fullscreen-button-B0R9K3GV.js";
+import "../mute-button-C7XQB6iK.js";
+import "../play-button-DFbxwrrq.js";
 import "../popover-BUCVOjnO.js";
-import "../preview-time-display-Dax0FQ2X.js";
-import "../time-slider-DKamO_2Q.js";
+import "../preview-time-display-CtA58pCS.js";
+import "../time-slider-DHpKPCI1.js";
 import "../tooltip-B-glki2f.js";
-import "../volume-slider-CbFzCHX4.js";
+import "../volume-slider-CUyfwehe.js";
 import "../media-container-BOL0PKuG.js";
 import { t as MediaSkinElement } from "../media-skin-CxnuHwhu.js";
 import "../video-provider-BKDqoKFf.js";
@@ -17,14 +17,14 @@ import { t as defineCustomElement } from "../custom-element-3bDlB2XO.js";
 import "../icons-CuxuONCk.js";
 import "../video-provider-BPPI5e47.js";
 import "../media-container-DwKSOa1h.js";
-import "../media-play-button-DhSK0JQk.js";
-import "../media-mute-button-CHHISH91.js";
-import "../media-volume-slider-B-n6b3Y8.js";
-import "../media-time-slider-SuxR3Rep.js";
-import "../media-fullscreen-button-CIpcLhtU.js";
-import "../media-duration-display-BLMr7VHo.js";
-import "../media-current-time-display-B-4Cp845.js";
-import "../media-preview-time-display-DAiMgLPX.js";
+import "../media-play-button-CDBZrhmx.js";
+import "../media-mute-button-Uy18NpPx.js";
+import "../media-volume-slider-BB6GhrzS.js";
+import "../media-time-slider-BOdJr4QE.js";
+import "../media-fullscreen-button-DDQ6EdLz.js";
+import "../media-duration-display-tzVLafRm.js";
+import "../media-current-time-display-DVCqNt7c.js";
+import "../media-preview-time-display-ufqXiNXg.js";
 import "../media-popover-Cw9d_Bh3.js";
 import "../media-tooltip-CMRN_X4D.js";
 

package/dist/{time-slider-DKamO_2Q.js → time-slider-DHpKPCI1.js}

@@ -1,19 +1,23 @@
-import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { n as toConnectedHTMLComponent, t as getCoreState } from "./component-factory-C0cl1nrL.js";
 import { timeSliderStateDefinition } from "@videojs/core/store";
 import { setAttributes } from "@videojs/utils/dom";
 import { TimeSlider } from "@videojs/core";
 
 //#region src/elements/time-slider.ts
+function getTimeSliderRootState(mediaStore) {
+	const mediaState = timeSliderStateDefinition.stateTransform(mediaStore.getState());
+	const mediaMethods = timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch);
+	return { ...getCoreState(TimeSlider, {
+		...mediaState,
+		...mediaMethods
+	}) };
+}
 /**
 * TimeSlider Root props hook - equivalent to React's useTimeSliderRootProps
 * Handles element attributes and properties based on state
 */
 const getTimeSliderRootProps = (state, element) => {
-	const formatTime = (time) => {
-		return `${Math.floor(time / 60)}:${Math.floor(time % 60).toString().padStart(2, "0")}`;
-	};
-	const currentTimeText = formatTime(state.currentTime);
-	const durationText = formatTime(state.duration);
+	if (state._rootElement !== element) state._setRootElement(element);
 	return {
 		role: "slider",
 		tabindex: element.getAttribute("tabindex") ?? "0",
@@ -24,15 +28,11 @@ const getTimeSliderRootProps = (state, element) => {
 		"aria-valuemin": "0",
 		"aria-valuemax": Math.round(state.duration).toString(),
 		"aria-valuenow": Math.round(state.currentTime).toString(),
-		"aria-valuetext": `${currentTimeText} of ${durationText}`,
+		"aria-valuetext": `${state._currentTimeText} of ${state._durationText}`,
 		"aria-orientation": element.orientation || "horizontal"
 	};
 };
 var TimeSliderRoot = class extends HTMLElement {
-	constructor(..._args) {
-		super(..._args);
-		this._core = null;
-	}
 	static {
 		this.observedAttributes = ["commandfor", "orientation"];
 	}
@@ -46,35 +46,23 @@ var TimeSliderRoot = class extends HTMLElement {
 		return this.getAttribute("orientation") || "horizontal";
 	}
 	attributeChangedCallback(name, _oldValue, newValue) {
-		if (name === "orientation" && this._state) this._render(getTimeSliderRootProps(this._state, this), this._state);
+		if (name === "orientation" && this._state) this._update(getTimeSliderRootProps(this._state, this), this._state);
 		else if (name === "commandfor") this.style.setProperty("anchor-name", `--${newValue}`);
 	}
-	_update(_props, state) {
+	_update(props, state) {
 		this._state = state;
-		if (state && !this._core) {
-			this._core = new TimeSlider();
-			this._core.subscribe(() => this._render(getTimeSliderRootProps(state, this), state));
-			this._core.attach(this);
-			state.core = this._core;
-		}
-		this._core?.setState(state);
-	}
-	_render(props, state) {
-		const coreState = state?.core?.getState();
-		if (!coreState) return;
-		this.style.setProperty("--slider-fill", `${Math.round(coreState._fillWidth)}%`);
-		this.style.setProperty("--slider-pointer", `${Math.round(coreState._pointerWidth)}%`);
+		this.style.setProperty("--slider-fill", `${state._fillWidth.toFixed(3)}%`);
+		this.style.setProperty("--slider-pointer", `${(state._pointerWidth * 100).toFixed(3)}%`);
 		setAttributes(this, props);
 	}
 };
+const TimeSliderRootElement = toConnectedHTMLComponent(TimeSliderRoot, getTimeSliderRootState, getTimeSliderRootProps, "TimeSliderRoot");
+const getTimeSliderTrackProps = (_state, element) => {
+	const rootElement = element.closest("media-time-slider");
+	if (rootElement._state?._trackElement !== element) rootElement._state?._setTrackElement?.(element);
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
 var TimeSliderTrack = class extends HTMLElement {
-	constructor() {
-		super();
-	}
-	connectedCallback() {
-		const rootElement = this.closest("media-time-slider");
-		if (rootElement?._state?.core) rootElement._state.core.setState({ _trackElement: this });
-	}
 	_update(props, _state) {
 		setAttributes(this, props);
 		if (props["data-orientation"] === "horizontal") {
@@ -86,6 +74,11 @@ var TimeSliderTrack = class extends HTMLElement {
 		}
 	}
 };
+const TimeSliderTrackElement = toConnectedHTMLComponent(TimeSliderTrack, void 0, getTimeSliderTrackProps, "TimeSliderTrack");
+const getTimeSliderProgressProps = (_state, element) => {
+	const rootElement = element.closest("media-time-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
 var TimeSliderProgress = class extends HTMLElement {
 	constructor() {
 		super();
@@ -108,6 +101,11 @@ var TimeSliderProgress = class extends HTMLElement {
 		}
 	}
 };
+const TimeSliderProgressElement = toConnectedHTMLComponent(TimeSliderProgress, void 0, getTimeSliderProgressProps, "TimeSliderProgress");
+const getTimeSliderPointerProps = (_state, element) => {
+	const rootElement = element.closest("media-time-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
 var TimeSliderPointer = class extends HTMLElement {
 	constructor() {
 		super();
@@ -130,6 +128,11 @@ var TimeSliderPointer = class extends HTMLElement {
 		}
 	}
 };
+const TimeSliderPointerElement = toConnectedHTMLComponent(TimeSliderPointer, void 0, getTimeSliderPointerProps, "TimeSliderPointer");
+const getTimeSliderThumbProps = (_state, element) => {
+	const rootElement = element.closest("media-time-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
 var TimeSliderThumb = class extends HTMLElement {
 	constructor() {
 		super();
@@ -148,47 +151,7 @@ var TimeSliderThumb = class extends HTMLElement {
 		}
 	}
 };
-const useTimeSliderRootState = {
-	keys: timeSliderStateDefinition.keys,
-	transform: (rawState, mediaStore) => ({
-		...timeSliderStateDefinition.stateTransform(rawState),
-		...timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),
-		core: null
-	})
-};
-const getTimeSliderTrackProps = (_state, element) => {
-	const rootElement = element.closest("media-time-slider");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-const getTimeSliderProgressProps = (_state, element) => {
-	const rootElement = element.closest("media-time-slider");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-const getTimeSliderPointerProps = (_state, element) => {
-	const rootElement = element.closest("media-time-slider");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-const getTimeSliderThumbProps = (_state, element) => {
-	const rootElement = element.closest("media-time-slider");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-const TimeSliderRootElement = toConnectedHTMLComponent(TimeSliderRoot, useTimeSliderRootState, getTimeSliderRootProps, "TimeSliderRoot");
-const TimeSliderTrackElement = toConnectedHTMLComponent(TimeSliderTrack, {
-	keys: [],
-	transform: () => ({})
-}, getTimeSliderTrackProps, "TimeSliderTrack");
-const TimeSliderProgressElement = toConnectedHTMLComponent(TimeSliderProgress, {
-	keys: [],
-	transform: () => ({})
-}, getTimeSliderProgressProps, "TimeSliderProgress");
-const TimeSliderPointerElement = toConnectedHTMLComponent(TimeSliderPointer, {
-	keys: [],
-	transform: () => ({})
-}, getTimeSliderPointerProps, "TimeSliderPointer");
-const TimeSliderThumbElement = toConnectedHTMLComponent(TimeSliderThumb, {
-	keys: [],
-	transform: () => ({})
-}, getTimeSliderThumbProps, "TimeSliderThumb");
+const TimeSliderThumbElement = toConnectedHTMLComponent(TimeSliderThumb, void 0, getTimeSliderThumbProps, "TimeSliderThumb");
 const TimeSliderElement = Object.assign({}, {
 	Root: TimeSliderRootElement,
 	Track: TimeSliderTrackElement,
@@ -199,4 +162,4 @@ const TimeSliderElement = Object.assign({}, {
 
 //#endregion
 export { TimeSliderThumbElement as a, TimeSliderRootElement as i, TimeSliderPointerElement as n, TimeSliderTrackElement as o, TimeSliderProgressElement as r, TimeSliderElement as t };
-//# sourceMappingURL=time-slider-DKamO_2Q.js.map
+//# sourceMappingURL=time-slider-DHpKPCI1.js.map

package/dist/time-slider-DHpKPCI1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slider-DHpKPCI1.js","names":["CoreTimeSlider","getTimeSliderRootProps: PropsHook<TimeSliderState>","TimeSliderRootElement: ConnectedComponentConstructor<TimeSliderState>","getTimeSliderTrackProps: PropsHook<Record<string, never>>","TimeSliderTrackElement: ConnectedComponentConstructor<any>","getTimeSliderProgressProps: PropsHook<Record<string, never>>","TimeSliderProgressElement: ConnectedComponentConstructor<any>","getTimeSliderPointerProps: PropsHook<Record<string, never>>","TimeSliderPointerElement: ConnectedComponentConstructor<any>","getTimeSliderThumbProps: PropsHook<Record<string, never>>","TimeSliderThumbElement: ConnectedComponentConstructor<any>"],"sources":["../src/elements/time-slider.ts"],"sourcesContent":["import type { MediaStore } from '@videojs/core/store';\nimport type { Prettify } from '../types';\n\nimport type { ConnectedComponentConstructor, PropsHook } from '../utils/component-factory';\nimport { TimeSlider as CoreTimeSlider } from '@videojs/core';\nimport { timeSliderStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { getCoreState, toConnectedHTMLComponent } from '../utils/component-factory';\n\ntype TimeSliderState = Prettify<ReturnType<CoreTimeSlider['getState']>>;\n\n// ============================================================================\n// ROOT COMPONENT\n// ============================================================================\n\nexport function getTimeSliderRootState(mediaStore: MediaStore): TimeSliderState {\n  const mediaState = timeSliderStateDefinition.stateTransform(mediaStore.getState());\n  const mediaMethods = timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch);\n  const coreState = getCoreState(CoreTimeSlider, { ...mediaState, ...mediaMethods });\n  return {\n    ...coreState,\n  };\n}\n\n/**\n * TimeSlider Root props hook - equivalent to React's useTimeSliderRootProps\n * Handles element attributes and properties based on state\n */\nexport const getTimeSliderRootProps: PropsHook<TimeSliderState> = (state, element) => {\n  if (state._rootElement !== element) {\n    state._setRootElement(element);\n  }\n\n  return {\n    role: 'slider',\n    tabindex: element.getAttribute('tabindex') ?? '0',\n    'data-current-time': state.currentTime.toString(),\n    'data-duration': state.duration.toString(),\n    'data-orientation': (element as any).orientation || 'horizontal',\n    'aria-label': 'Seek',\n    'aria-valuemin': '0',\n    'aria-valuemax': Math.round(state.duration).toString(),\n    'aria-valuenow': Math.round(state.currentTime).toString(),\n    'aria-valuetext': `${state._currentTimeText} of ${state._durationText}`,\n    'aria-orientation': (element as any).orientation || 'horizontal',\n  };\n};\n\nexport class TimeSliderRoot extends HTMLElement {\n  static readonly observedAttributes: readonly string[] = [\n    'commandfor',\n    'orientation',\n  ];\n\n  _state: TimeSliderState | undefined;\n\n  get currentTime(): number {\n    return this._state?.currentTime ?? 0;\n  }\n\n  get duration(): number {\n    return this._state?.duration ?? 0;\n  }\n\n  get orientation(): 'horizontal' | 'vertical' {\n    return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal';\n  }\n\n  attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void {\n    if (name === 'orientation' && this._state) {\n      this._update(getTimeSliderRootProps(this._state, this), this._state);\n    } else if (name === 'commandfor') {\n      this.style.setProperty('anchor-name', `--${newValue}`);\n    }\n  }\n\n  _update(props: any, state: TimeSliderState): void {\n    this._state = state;\n\n    this.style.setProperty('--slider-fill', `${state._fillWidth.toFixed(3)}%`);\n    this.style.setProperty('--slider-pointer', `${(state._pointerWidth * 100).toFixed(3)}%`);\n\n    setAttributes(this, props);\n  }\n}\n\nexport const TimeSliderRootElement: ConnectedComponentConstructor<TimeSliderState>\n  = toConnectedHTMLComponent(\n    TimeSliderRoot,\n    getTimeSliderRootState,\n    getTimeSliderRootProps,\n    'TimeSliderRoot',\n  );\n\n// ============================================================================\n// TRACK COMPONENT\n// ============================================================================\n\nexport const getTimeSliderTrackProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n\n  if (rootElement._state?._trackElement !== element) {\n    rootElement._state?._setTrackElement?.(element);\n  }\n\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport class TimeSliderTrack extends HTMLElement {\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = '100%';\n      this.style.removeProperty('height');\n    } else {\n      this.style.height = '100%';\n      this.style.removeProperty('width');\n    }\n  }\n}\n\nexport const TimeSliderTrackElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderTrack,\n  undefined,\n  getTimeSliderTrackProps,\n  'TimeSliderTrack',\n);\n\n// ============================================================================\n// PROGRESS COMPONENT\n// ============================================================================\n\nexport const getTimeSliderProgressProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport class TimeSliderProgress extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n    this.style.width = 'var(--slider-fill, 0%)';\n    this.style.height = '100%';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = 'var(--slider-fill, 0%)';\n      this.style.height = '100%';\n      this.style.top = '0';\n      this.style.removeProperty('bottom');\n    } else {\n      this.style.height = 'var(--slider-fill, 0%)';\n      this.style.width = '100%';\n      this.style.bottom = '0';\n      this.style.removeProperty('top');\n    }\n  }\n}\n\nexport const TimeSliderProgressElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderProgress,\n  undefined,\n  getTimeSliderProgressProps,\n  'TimeSliderProgress',\n);\n\n// ============================================================================\n// POINTER COMPONENT\n// ============================================================================\n\nexport const getTimeSliderPointerProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport class TimeSliderPointer extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n    this.style.width = 'var(--slider-pointer, 0%)';\n    this.style.height = '100%';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = 'var(--slider-pointer, 0%)';\n      this.style.height = '100%';\n      this.style.top = '0';\n      this.style.removeProperty('bottom');\n    } else {\n      this.style.height = 'var(--slider-pointer, 0%)';\n      this.style.width = '100%';\n      this.style.bottom = '0';\n      this.style.removeProperty('top');\n    }\n  }\n}\n\nexport const TimeSliderPointerElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderPointer,\n  undefined,\n  getTimeSliderPointerProps,\n  'TimeSliderPointer',\n);\n\n// ============================================================================\n// THUMB COMPONENT\n// ============================================================================\n\nexport const getTimeSliderThumbProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport class TimeSliderThumb extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    // Set appropriate positioning based on orientation\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.left = 'var(--slider-fill, 0%)';\n      this.style.top = '50%';\n      this.style.translate = '-50% -50%';\n    } else {\n      this.style.bottom = 'var(--slider-fill, 0%)';\n      this.style.left = '50%';\n      this.style.translate = '-50% 50%';\n    }\n  }\n}\n\nexport const TimeSliderThumbElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderThumb,\n  undefined,\n  getTimeSliderThumbProps,\n  'TimeSliderThumb',\n);\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport const TimeSliderElement = Object.assign(\n  {},\n  {\n    Root: TimeSliderRootElement,\n    Track: TimeSliderTrackElement,\n    Progress: TimeSliderProgressElement,\n    Pointer: TimeSliderPointerElement,\n    Thumb: TimeSliderThumbElement,\n  },\n) as {\n  Root: typeof TimeSliderRootElement;\n  Track: typeof TimeSliderTrackElement;\n  Progress: typeof TimeSliderProgressElement;\n  Pointer: typeof TimeSliderPointerElement;\n  Thumb: typeof TimeSliderThumbElement;\n};\n"],"mappings":"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"}