@videojs/react 10.0.0-beta.15 → 10.0.0-beta.16

package/dist/dev/ui/pip-button/pip-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pip-button.d.ts","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"mappings":";;;;;UAQiB,cAAA,SAAuB,gBAAA,WAA2B,aAAA,CAAc,KAAA,GAAQ,aAAA,CAAc,KAAA;;cAG1F,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;EAAA,KACR,KAAA,GAAQ,aAAA,CAAc,KAAA;AAAA"}
+{"version":3,"file":"pip-button.d.ts","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"mappings":";;;;;UAQiB,cAAA,SAAuB,gBAAA,WAA2B,aAAA,CAAc,KAAA,GAAQ,aAAA,CAAc,KAAA;;cAG1F,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;EAAA,KACR,KAAA,GAAQ,aAAA,CAAc,KAAA;AAAA"}

package/dist/dev/ui/pip-button/pip-button.js

@@ -9,7 +9,8 @@ const PiPButton = createMediaButton({
 	core: PiPButtonCore,
 	stateAttrMap: PiPButtonDataAttrs,
 	selector: selectPiP,
-	action: (core, state) => core.toggle(state)
+	action: (core, state) => core.toggle(state),
+	hotkeyAction: "togglePiP"
 });
 //#endregion
 export { PiPButton };

package/dist/dev/ui/pip-button/pip-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["'use client';\n\nimport { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\n/** A button that toggles picture-in-picture. */\nexport const PiPButton = createMediaButton<PiPButtonCore, PiPButtonProps>({\n  displayName: 'PiPButton',\n  core: PiPButtonCore,\n  stateAttrMap: PiPButtonDataAttrs,\n  selector: selectPiP,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace PiPButton {\n  export type Props = PiPButtonProps;\n  export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;;AAWA,MAAa,YAAY,kBAAiD;CACxE,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}
+{"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["'use client';\n\nimport { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\n/** A button that toggles picture-in-picture. */\nexport const PiPButton = createMediaButton<PiPButtonCore, PiPButtonProps>({\n  displayName: 'PiPButton',\n  core: PiPButtonCore,\n  stateAttrMap: PiPButtonDataAttrs,\n  selector: selectPiP,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'togglePiP',\n});\n\nexport namespace PiPButton {\n  export type Props = PiPButtonProps;\n  export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;;AAWA,MAAa,YAAY,kBAAiD;CACxE,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC3C,cAAc;CACf,CAAC"}

package/dist/dev/ui/play-button/play-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"play-button.d.ts","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;cAkBa,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}
+{"version":3,"file":"play-button.d.ts","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;cAkBa,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}

package/dist/dev/ui/play-button/play-button.js

@@ -24,7 +24,8 @@ const PlayButton = createMediaButton({
 	core: PlayButtonCore,
 	stateAttrMap: PlayButtonDataAttrs,
 	selector: selectPlayback,
-	action: (core, state) => core.toggle(state)
+	action: (core, state) => core.toggle(state),
+	hotkeyAction: "togglePaused"
 });
 //#endregion
 export { PlayButton };

package/dist/dev/ui/play-button/play-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}\n\n/**\n * A button that toggles playback.\n *\n * @example\n * ```tsx\n * <PlayButton />\n *\n * <PlayButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.paused ? <PlayIcon /> : <PauseIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlayButton = createMediaButton<PlayButtonCore, PlayButtonProps>({\n  displayName: 'PlayButton',\n  core: PlayButtonCore,\n  stateAttrMap: PlayButtonDataAttrs,\n  selector: selectPlayback,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace PlayButton {\n  export type Props = PlayButtonProps;\n  export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}
+{"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}\n\n/**\n * A button that toggles playback.\n *\n * @example\n * ```tsx\n * <PlayButton />\n *\n * <PlayButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.paused ? <PlayIcon /> : <PauseIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlayButton = createMediaButton<PlayButtonCore, PlayButtonProps>({\n  displayName: 'PlayButton',\n  core: PlayButtonCore,\n  stateAttrMap: PlayButtonDataAttrs,\n  selector: selectPlayback,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'togglePaused',\n});\n\nexport namespace PlayButton {\n  export type Props = PlayButtonProps;\n  export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC3C,cAAc;CACf,CAAC"}

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

@@ -12,7 +12,7 @@ import { formatTime } from "@videojs/utils/time";
 //#region src/ui/time-slider/time-slider-root.tsx
 const noopSeek = () => Promise.resolve(0);
 const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwardedRef) {
-	const { render, className, style, label, commitThrottle = TimeSliderCore.defaultProps.commitThrottle, step = TimeSliderCore.defaultProps.step, largeStep = TimeSliderCore.defaultProps.largeStep, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, ...elementProps } = componentProps;
+	const { render, className, style, label, changeThrottle = TimeSliderCore.defaultProps.changeThrottle, step = TimeSliderCore.defaultProps.step, largeStep = TimeSliderCore.defaultProps.largeStep, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, ...elementProps } = componentProps;
 	const time = usePlayer(selectTime);
 	const buffer = usePlayer(selectBuffer);
 	const [core] = useState(() => new TimeSliderCore());
@@ -51,7 +51,7 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 		getLargeStepPercent: () => core.getLargeStepPercent(),
 		orientation,
 		disabled,
-		commitThrottle,
+		changeThrottle,
 		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
 		getCSSVars: getTimeSliderCSSVars,
 		onValueCommit: (percent) => {

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

@@ -1 +1 @@
-{"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n  function TimeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      commitThrottle = TimeSliderCore.defaultProps.commitThrottle,\n      step = TimeSliderCore.defaultProps.step,\n      largeStep = TimeSliderCore.defaultProps.largeStep,\n      orientation,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n\n    const [core] = useState(() => new TimeSliderCore());\n    core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment });\n\n    // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n    const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n\n    const duration = time?.duration ?? 0;\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<TimeSliderCore.State>({\n      computeState: (input) => {\n        core.setInput(input);\n        if (!time || !buffer) {\n          core.setMedia({\n            currentTime: 0,\n            duration: 0,\n            seeking: false,\n            seek: noopSeek,\n            buffered: [],\n            seekable: [],\n          });\n        } else {\n          core.setMedia({ ...time, ...buffer });\n        }\n\n        return core.getState();\n      },\n      getPercent: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 0),\n      getStepPercent: () => core.getStepPercent(),\n      getLargeStepPercent: () => core.getLargeStepPercent(),\n      orientation,\n      disabled,\n      commitThrottle,\n      adjustPercent: (rawPercent, thumbSize, trackSize) =>\n        core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n      getCSSVars: getTimeSliderCSSVars,\n      onValueCommit: (percent) => {\n        const media = mediaRef.current;\n        if (media) media.seek(core.rawValueFromPercent(percent));\n      },\n      onDragStart,\n      onDragEnd,\n    });\n\n    if (!time) {\n      if (__DEV__) logMissingFeature('TimeSlider', 'time');\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n          formatValue: (value) => formatTime(value, duration),\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: TimeSliderDataAttrs,\n            ref: [forwardedRef, rootRef],\n            props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>\n    );\n  }\n);\n\nexport namespace TimeSliderRoot {\n  export type Props = TimeSliderRootProps;\n  export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,EAAE;AAO1D,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAGhF,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAE7E,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAgC;EAC9G,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,oBAAoB,QAAQ,CAAC;;EAE1D;EACA;EACD,CAAC;AAEF,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,QACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;EACc,CAAA;EAGtB"}
+{"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n  function TimeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      changeThrottle = TimeSliderCore.defaultProps.changeThrottle,\n      step = TimeSliderCore.defaultProps.step,\n      largeStep = TimeSliderCore.defaultProps.largeStep,\n      orientation,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n\n    const [core] = useState(() => new TimeSliderCore());\n    core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment });\n\n    // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n    const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n\n    const duration = time?.duration ?? 0;\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<TimeSliderCore.State>({\n      computeState: (input) => {\n        core.setInput(input);\n        if (!time || !buffer) {\n          core.setMedia({\n            currentTime: 0,\n            duration: 0,\n            seeking: false,\n            seek: noopSeek,\n            buffered: [],\n            seekable: [],\n          });\n        } else {\n          core.setMedia({ ...time, ...buffer });\n        }\n\n        return core.getState();\n      },\n      getPercent: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 0),\n      getStepPercent: () => core.getStepPercent(),\n      getLargeStepPercent: () => core.getLargeStepPercent(),\n      orientation,\n      disabled,\n      changeThrottle,\n      adjustPercent: (rawPercent, thumbSize, trackSize) =>\n        core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n      getCSSVars: getTimeSliderCSSVars,\n      onValueCommit: (percent) => {\n        const media = mediaRef.current;\n        if (media) media.seek(core.rawValueFromPercent(percent));\n      },\n      onDragStart,\n      onDragEnd,\n    });\n\n    if (!time) {\n      if (__DEV__) logMissingFeature('TimeSlider', 'time');\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n          formatValue: (value) => formatTime(value, duration),\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: TimeSliderDataAttrs,\n            ref: [forwardedRef, rootRef],\n            props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>\n    );\n  }\n);\n\nexport namespace TimeSliderRoot {\n  export type Props = TimeSliderRootProps;\n  export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,EAAE;AAO1D,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAGhF,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAE7E,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAgC;EAC9G,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,oBAAoB,QAAQ,CAAC;;EAE1D;EACA;EACD,CAAC;AAEF,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,QACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;EACc,CAAA;EAGtB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "10.0.0-beta.15",
+  "version": "10.0.0-beta.16",
   "description": "React library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -62,25 +62,25 @@
     }
   },
   "peerDependencies": {
-    "react": ">=16.8.0"
+    "react": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-beta.15",
-    "@videojs/store": "10.0.0-beta.15",
-    "@videojs/spf": "10.0.0-beta.15",
-    "@videojs/utils": "10.0.0-beta.15"
+    "@videojs/core": "10.0.0-beta.16",
+    "@videojs/spf": "10.0.0-beta.16",
+    "@videojs/store": "10.0.0-beta.16",
+    "@videojs/utils": "10.0.0-beta.16"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
     "jsdom": "^26.1.0",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "tsdown": "^0.21.4",
     "typescript": "^6.0.2",
     "vitest": "^4.1.0",
-    "@videojs/icons": "10.0.0-beta.15",
-    "@videojs/skins": "10.0.0-beta.15"
+    "@videojs/icons": "10.0.0-beta.16",
+    "@videojs/skins": "10.0.0-beta.16"
   },
   "publishConfig": {
     "access": "public"