@videojs/react 10.0.0-rc.2 → 10.0.0-rc.3

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

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/time-slider/root.tsx"],"sourcesContent":["import { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { hasTimeRange } from '@videojs/media';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\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      pauseOnDrag,\n      ...elementProps\n    } = componentProps;\n\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n    const playback = usePlayer(selectPlayback);\n\n    const translator = useTranslator();\n    const locale = useLocale();\n\n    const [core] = useState(() => new TimeSliderCore());\n\n    core.setProps({\n      label,\n      step,\n      largeStep,\n      orientation,\n      disabled,\n      thumbAlignment,\n      pauseOnDrag,\n      changeThrottle,\n    });\n    core.setFormatLocale(locale);\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    const playbackRef = useLatestRef(playback);\n\n    // Resume playback if the slider unmounts mid-drag — createSlider's destroy()\n    // does not fire onDragEnd, so without this the player would stay paused.\n    useEffect(() => {\n      return () => core.endDrag(playbackRef.current);\n    }, [core]);\n\n    const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } =\n      useSlider<TimeSliderCore.State>({\n        computeState: (input) => {\n          core.setInput(input);\n\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: () => core.percentFromValue(time?.currentTime ?? 0),\n        getStepPercent: () => core.getStepPercent(),\n        getLargeStepPercent: () => core.getLargeStepPercent(),\n        orientation,\n        disabled: disabled || !time || !buffer || !hasTimeRange({ ...time, ...buffer }),\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\n          if (media) media.seek(core.rawValueFromPercent(percent));\n        },\n        onDragStart: () => {\n          core.startDrag(playbackRef.current);\n          onDragStart?.();\n        },\n        onDragEnd: () => {\n          core.endDrag(playbackRef.current);\n          onDragEnd?.();\n        },\n      });\n\n    if (!time) {\n      if (__DEV__) logMissingFeature('TimeSlider', 'time');\n\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.rawValueFromPercent(state.pointerPercent),\n          input,\n          getPointerValue: (percent) => core.rawValueFromPercent(percent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => {\n            const attrs = core.getAttrs(sliderState as TimeSliderCore.State);\n\n            return {\n              ...attrs,\n              'aria-label': translateText(attrs['aria-label'], translator),\n              'aria-valuetext': translateText(\n                attrs['aria-valuetext'],\n                translator,\n                core.getValueTextParams(sliderState as TimeSliderCore.State)\n              ),\n            };\n          },\n          formatValue: (value) => formatTime(value, state.duration, { locale }),\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":";;;;;;;;;;;;;;AAeA,MAAM,iBAAkC,QAAQ,QAAQ,CAAC;AAOzD,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,aACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CAEzB,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAElD,KAAK,SAAS;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,KAAK,gBAAgB,MAAM;CAG3B,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;CAAO,IAAI,IAAI;CAC5E,MAAM,cAAc,aAAa,QAAQ;CAIzC,gBAAgB;EACd,aAAa,KAAK,QAAQ,YAAY,OAAO;CAC/C,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,EAAE,OAAO,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eACtE,UAAgC;EAC9B,eAAe,UAAU;GACvB,KAAK,SAAS,KAAK;GAEnB,IAAI,CAAC,QAAQ,CAAC,QACZ,KAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,CAAC;IACX,UAAU,CAAC;GACb,CAAC;QAED,KAAK,SAAS;IAAE,GAAG;IAAM,GAAG;GAAO,CAAC;GAGtC,OAAO,KAAK,SAAS;EACvB;EACA,kBAAkB,KAAK,iBAAiB,MAAM,eAAe,CAAC;EAC9D,sBAAsB,KAAK,eAAe;EAC1C,2BAA2B,KAAK,oBAAoB;EACpD;EACA,UAAU,YAAY,CAAC,QAAQ,CAAC,UAAU,CAAC,aAAa;GAAE,GAAG;GAAM,GAAG;EAAO,CAAC;EAC9E;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EACjE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;GAEvB,IAAI,OAAO,MAAM,KAAK,KAAK,oBAAoB,OAAO,CAAC;EACzD;EACA,mBAAmB;GACjB,KAAK,UAAU,YAAY,OAAO;GAClC,cAAc;EAChB;EACA,iBAAiB;GACf,KAAK,QAAQ,YAAY,OAAO;GAChC,YAAY;EACd;CACF,CAAC;CAEH,IAAI,CAAC,MAAM;EACI,kBAAkB,cAAc,MAAM;EAEnD,OAAO;CACT;CAEA,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,oBAAoB,MAAM,cAAc;GAC3D;GACA,kBAAkB,YAAY,KAAK,oBAAoB,OAAO;GAC9D;GACA;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAmC;IAE/D,OAAO;KACL,GAAG;KACH,cAAc,cAAc,MAAM,eAAe,UAAU;KAC3D,kBAAkB,cAChB,MAAM,mBACN,YACA,KAAK,mBAAmB,WAAmC,CAC7D;IACF;GACF;GACA,cAAc,UAAU,WAAW,OAAO,MAAM,UAAU,EAAE,OAAO,CAAC;EACtE;EAEC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,OAAO;GAC3B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;IAAU,EAAE;IAAG;IAAW;GAAY;EAC1E,CACF;CACc,CAAA;AAEpB,CACF"}
+{"version":3,"file":"root.js","names":["changeThrottle = TimeSliderCore.defaultProps.changeThrottle","step = TimeSliderCore.defaultProps.step","largeStep = TimeSliderCore.defaultProps.largeStep","() => new TimeSliderCore()","time ? { ...time, ...(buffer ?? { buffered: [], seekable: [] }) } : null","() => {\n      return () => core.endDrag(playbackRef.current);\n    }","playbackRef.current","[core]","(input) => {\n          core.setInput(input);\n\n          core.setMedia(\n            media ?? {\n              currentTime: 0,\n              duration: 0,\n              seeking: false,\n              seek: noopSeek,\n              buffered: [],\n              seekable: [],\n            }\n          );\n\n          return core.getState();\n        }","() => core.percentFromValue(time?.currentTime ?? 0)","currentTime","() => core.getStepPercent()","() => core.getLargeStepPercent()","disabled || !media || !hasTimeRange(media)","(rawPercent, thumbSize, trackSize) =>\n          core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize)","(percent) => {\n          const media = mediaRef.current;\n\n          if (media) media.seek(core.rawValueFromPercent(percent));\n        }","mediaRef.current","media","() => {\n          core.startDrag(playbackRef.current);\n          onDragStart?.();\n        }","() => {\n          core.endDrag(playbackRef.current);\n          onDragEnd?.();\n        }","{\n        computeState: (input) => {\n          core.setInput(input);\n\n          core.setMedia(\n            media ?? {\n              currentTime: 0,\n              duration: 0,\n              seeking: false,\n              seek: noopSeek,\n              buffered: [],\n              seekable: [],\n            }\n          );\n\n          return core.getState();\n        },\n        getPercent: () => core.percentFromValue(time?.currentTime ?? 0),\n        getStepPercent: () => core.getStepPercent(),\n        getLargeStepPercent: () => core.getLargeStepPercent(),\n        orientation,\n        disabled: disabled || !media || !hasTimeRange(media),\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\n          if (media) media.seek(core.rawValueFromPercent(percent));\n        },\n        onDragStart: () => {\n          core.startDrag(playbackRef.current);\n          onDragStart?.();\n        },\n        onDragEnd: () => {\n          core.endDrag(playbackRef.current);\n          onDragEnd?.();\n        },\n      }","core.rawValueFromPercent(state.pointerPercent)","pointerPercent","(percent) => core.rawValueFromPercent(percent)","percent","(sliderState) => {\n            const attrs = core.getAttrs(sliderState as TimeSliderCore.State);\n\n            return {\n              ...attrs,\n              'aria-label': translateText(attrs['aria-label'], translator),\n              'aria-valuetext': translateText(\n                attrs['aria-valuetext'],\n                translator,\n                core.getValueTextParams(sliderState as TimeSliderCore.State)\n              ),\n            };\n          }","(value) => formatTime(value, state.duration, { locale })","duration","{\n          state,\n          pointerValue: core.rawValueFromPercent(state.pointerPercent),\n          input,\n          getPointerValue: (percent) => core.rawValueFromPercent(percent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => {\n            const attrs = core.getAttrs(sliderState as TimeSliderCore.State);\n\n            return {\n              ...attrs,\n              'aria-label': translateText(attrs['aria-label'], translator),\n              'aria-valuetext': translateText(\n                attrs['aria-valuetext'],\n                translator,\n                core.getValueTextParams(sliderState as TimeSliderCore.State)\n              ),\n            };\n          },\n          formatValue: (value) => formatTime(value, state.duration, { locale }),\n        }","input","<SliderProvider\n        value={{\n          state,\n          pointerValue: core.rawValueFromPercent(state.pointerPercent),\n          input,\n          getPointerValue: (percent) => core.rawValueFromPercent(percent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => {\n            const attrs = core.getAttrs(sliderState as TimeSliderCore.State);\n\n            return {\n              ...attrs,\n              'aria-label': translateText(attrs['aria-label'], translator),\n              'aria-valuetext': translateText(\n                attrs['aria-valuetext'],\n                translator,\n                core.getValueTextParams(sliderState as TimeSliderCore.State)\n              ),\n            };\n          },\n          formatValue: (value) => formatTime(value, state.duration, { locale }),\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>","SliderProvider","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        )"],"sources":["../../../../src/ui/time-slider/root.tsx"],"sourcesContent":["import { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { hasTimeRange } from '@videojs/media';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\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      pauseOnDrag,\n      ...elementProps\n    } = componentProps;\n\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n    const playback = usePlayer(selectPlayback);\n\n    const translator = useTranslator();\n    const locale = useLocale();\n\n    const [core] = useState(() => new TimeSliderCore());\n\n    core.setProps({\n      label,\n      step,\n      largeStep,\n      orientation,\n      disabled,\n      thumbAlignment,\n      pauseOnDrag,\n      changeThrottle,\n    });\n    core.setFormatLocale(locale);\n\n    // `bufferFeature` is optional: compositions that omit it still get a working slider, with an empty buffer.\n    const media = time ? { ...time, ...(buffer ?? { buffered: [], seekable: [] }) } : null;\n\n    // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n    const mediaRef = useLatestRef(media);\n    const playbackRef = useLatestRef(playback);\n\n    // Resume playback if the slider unmounts mid-drag — createSlider's destroy()\n    // does not fire onDragEnd, so without this the player would stay paused.\n    useEffect(() => {\n      return () => core.endDrag(playbackRef.current);\n    }, [core]);\n\n    const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } =\n      useSlider<TimeSliderCore.State>({\n        computeState: (input) => {\n          core.setInput(input);\n\n          core.setMedia(\n            media ?? {\n              currentTime: 0,\n              duration: 0,\n              seeking: false,\n              seek: noopSeek,\n              buffered: [],\n              seekable: [],\n            }\n          );\n\n          return core.getState();\n        },\n        getPercent: () => core.percentFromValue(time?.currentTime ?? 0),\n        getStepPercent: () => core.getStepPercent(),\n        getLargeStepPercent: () => core.getLargeStepPercent(),\n        orientation,\n        disabled: disabled || !media || !hasTimeRange(media),\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\n          if (media) media.seek(core.rawValueFromPercent(percent));\n        },\n        onDragStart: () => {\n          core.startDrag(playbackRef.current);\n          onDragStart?.();\n        },\n        onDragEnd: () => {\n          core.endDrag(playbackRef.current);\n          onDragEnd?.();\n        },\n      });\n\n    if (!time) {\n      if (__DEV__) logMissingFeature('TimeSlider', 'time');\n\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.rawValueFromPercent(state.pointerPercent),\n          input,\n          getPointerValue: (percent) => core.rawValueFromPercent(percent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => {\n            const attrs = core.getAttrs(sliderState as TimeSliderCore.State);\n\n            return {\n              ...attrs,\n              'aria-label': translateText(attrs['aria-label'], translator),\n              'aria-valuetext': translateText(\n                attrs['aria-valuetext'],\n                translator,\n                core.getValueTextParams(sliderState as TimeSliderCore.State)\n              ),\n            };\n          },\n          formatValue: (value) => formatTime(value, state.duration, { locale }),\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":";;;;;;;;;;;;;;;AAeA,MAAM,iBAAkC,QAAQ,QAAQ,CAAC;AAOzD,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,gBAAA,IACA,MAAA,IACA,WAAA,IACA,aACA,UACA,gBACA,aACA,WACA,aACA,GAAG,iBACD;CAVF,MAAA,iBAAA,OAAA,KAAA,IAAiB,eAAe,aAAa,iBAA7CA;CACA,MAAA,OAAA,OAAA,KAAA,IAAO,eAAe,aAAa,OAAnCC;CACA,MAAA,YAAA,OAAA,KAAA,IAAY,eAAe,aAAa,YAAxCC;CAUF,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CAEzB,MAAM,CAAC,QAAQ,SAASC,KAA0B;CAElD,KAAK,SAAS;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,KAAK,gBAAgB,MAAM;CAGbC,IAAAA;CAAsB,IAAA,EAAA,OAAA,UAAA,EAAA,OAAtB,MAAA;EAAO,KAAA,OAAA;GAAE,GAAG;GAAM,GAAI,UAAU;IAAE,UAAU,CAAC;IAAG,UAAU,CAAC;GAAE;EAAG,IAAI;EAA9C,EAAA,KAAA;EAAtB,EAAA,KAAA;;;CAAd,MAAM,QAAQA;CAGd,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,cAAc,aAAa,QAAQ;CAI/BC,IAAAA;CACK,IAAA,EAAA,OAAA,QAAA,EAAA,OAAaC,aAAAA;EADlB,iBACK,KAAK,QAAQ,YAAY,OAAO;EAAhC,EAAA,KAAA;EAAaA,EAAAA,KAAAA;;;CACzBC,IAAAA;CAAC,IAAA,EAAA,OAAA,MAAA;EAAD,KAAA,CAAC,IAAI;EAAJ,EAAA,KAAA;;;CAFJ,UAAUF,IAEPE,EAAM;CAISC,IAAAA;CACZ,IAAA,EAAA,OAAA,QAAA,EAAA,OAGE,OAAA;EAJU,MAAC,UAAU;GACvB,KAAK,SAAS,KAAK;GAEnB,KAAK,SACH,SAAS;IACP,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,CAAC;IACX,UAAU,CAAC;GACb,CACF;GAEA,OAAO,KAAK,SAAS;EACvB;EAdE,EAAA,KAAA;EAGE,EAAA,KAAA;;;CAYQC,IAAAA;CAAM,IAAA,EAAA,QAAA,QAAA,EAAA,QAA4BC,MAAAA,aAAAA;EAAlC,WAAM,KAAK,iBAAiB,MAAM,eAAe,CAAC;EAA5C,EAAA,MAAA;EAA4BA,EAAAA,MAAAA,MAAAA;;;CAC9BC,IAAAA;CACKC,IAAAA;CADC,IAAA,EAAA,QAAA,MAAA;EAAN,WAAM,KAAK,eAAe;EACrB,WAAM,KAAK,oBAAoB;EAD9B,EAAA,MAAA;;;;;;;CAGZC,IAAAA;CAAa,IAAA,EAAA,QAAA,YAAA,EAAA,QAAA,OAAA;EAAb,MAAA,YAAY,CAAC,SAAS,CAAC,aAAa,KAAK;EAAzC,EAAA,MAAA;EAAa,EAAA,MAAA;;;CAERC,IAAAA;CACb,IAAA,EAAA,QAAA,MAAA;EADa,OAAC,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EAA/D,EAAA,MAAA;;;CAEaC,IAAAA;CAGS,IAAA,EAAA,QAAA,QAAA,EAAA,QAFRC,UAAAA;EADD,OAAC,YAAY;GAC1B,MAAMC,UAAQ,SAAS;GAEvB,IAAIA,SAAO,QAAM,KAAK,KAAK,oBAAoB,OAAO,CAAC;EACzD;EADwB,EAAA,MAAA;EAFRD,EAAAA,MAAAA;;;CAIHE,IAAAA;CACX,IAAA,EAAA,QAAA,QAAA,EAAA,QACA,eAAA,EAAA,QADeZ,aAAAA;EADJ,YAAM;GACjB,KAAK,UAAU,YAAY,OAAO;GAClC,cAAc;EAChB;EAFE,EAAA,MAAA;EACA,EAAA,MAAA;EADeA,EAAAA,MAAAA;;;CAGNa,IAAAA;CACT,IAAA,EAAA,QAAA,QAAA,EAAA,QACA,aAAA,EAAA,QADab,aAAAA;EADJ,YAAM;GACf,KAAK,QAAQ,YAAY,OAAO;GAChC,YAAY;EACd;EAFE,EAAA,MAAA;EACA,EAAA,MAAA;EADaA,EAAAA,MAAAA;;;CApCec,IAAAA;CAsB9B,IAAA,EAAA,QAAA,kBAAA,EAAA,QAFA,eAAA,EAAA,QACUP,OAAAA,EAAAA,QAEKC,OAAAA,EAAAA,QAGAC,OAAAA,EAAAA,QAKFG,OAAAA,EAAAA,QAIFC,OAAAA,EAAAA,QAlCGX,MAAAA,EAAAA,QAgBFC,MAAAA,EAAAA,QACIE,MAAAA,EAAAA,QACKC,IAAAA;EAnBS,MAAA;GAC9B,cAAcJ;GAgBd,YAAYC;GACZ,gBAAgBE;GAChB,qBAAqBC;GACrB;GACA,UAAUC;GACV;GACA,eAAeC;GAEf,YAAY;GACZ,eAAeC;GAKf,aAAaG;GAIb,WAAWC;EAIb;EAjBE,EAAA,MAAA;EAFA,EAAA,MAAA;EACUN,EAAAA,MAAAA;EAEKC,EAAAA,MAAAA;EAGAC,EAAAA,MAAAA;EAKFG,EAAAA,MAAAA;EAIFC,EAAAA,MAAAA;EAlCGX,EAAAA,MAAAA;EAgBFC,EAAAA,MAAAA;EACIE,EAAAA,MAAAA;EACKC,EAAAA,MAAAA;;;CApBzB,MAAM,EAAE,OAAO,OAAA,SAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eACtE,UAAgCQ,GAuC/B;CAEH,IAAI,CAAC,MAAM;EACI,kBAAkB,cAAc,MAAM;EAEnD,OAAO;CACT;CAGG,MAAA,KAAA;CAGiBC,IAAAA;CAA+BC,IAAAA,EAAAA,QAAAA,QAAAA,EAAAA,QAAAA,MAAAA,gBAAAA;EAA/B,MAAA,KAAK,oBAAoB,MAAM,cAAc;EAA7C,EAAA,MAAA;EAA+BA,EAAAA,MAAAA,MAAAA;;;CAE5BC,IAAAA;CAAa,IAAA,EAAA,QAAA,MAAA;EAAb,OAAC,cAAY,KAAK,oBAAoBC,SAAO;EAAhC,EAAA,MAAA;;;CAIpBC,IAAAA;CACM,IAAA,EAAA,QAAA,QAAA,EAAA,QAIqC,YAAA;EAL3C,OAAC,gBAAgB;GACzB,MAAM,QAAQ,KAAK,SAAS,WAAmC;GAE/D,OAAO;IACL,GAAG;IACH,cAAc,cAAc,MAAM,eAAe,UAAU;IAC3D,kBAAkB,cAChB,MAAM,mBACN,YACA,KAAK,mBAAmB,WAAmC,CAC7D;GACF;EACF;EAXgB,EAAA,MAAA;EAIqC,EAAA,MAAA;;;CAQxCC,IAAAA;CAA+C,IAAA,EAAA,QAAA,UAAA,EAAA,QAAZC,MAAAA,UAAAA;EAAnC,OAAC,UAAU,WAAW,OAAO,MAAM,UAAU,EAAE,OAAO,CAAC;EAAR,EAAA,MAAA;EAAZA,EAAAA,MAAAA,MAAAA;;;CArB3CC,IAAAA;CAGLC,IAAAA,EAAAA,QAAAA,WAAAA,EAAAA,QAFA,SAAA,EAAA,QACcR,OAAAA,EAAAA,QAEGE,OAAAA,EAAAA,QAIPE,OAAAA,EAAAA,QAaGC,OAAAA,EAAAA,QAfb,cAAA,EAAA,QADA,UAAA;EALK,MAAA;GACL;GACA,cAAcL;GACd,OAAA;GACA,iBAAiBE;GACjB;GACA;GACA,cAAc;GACd,UAAUE;GAaV,aAAaC;EACf;EAnBEG,EAAAA,MAAAA;EAFA,EAAA,MAAA;EACcR,EAAAA,MAAAA;EAEGE,EAAAA,MAAAA;EAIPE,EAAAA,MAAAA;EAaGC,EAAAA,MAAAA;EAfb,EAAA,MAAA;EADA,EAAA,MAAA;;;CAmBD,MAAA,MAAA,cACC,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,OAAO;EAC3B,OAAO;GAAC,EAAE,OAAO;IAAE,GAAG;IAAS,GAAG;GAAU,EAAE;GAAG;GAAW;EAAY;CAC1E,CACF;CAlCFI,IAAAA;CAACC,IAAAA,EAAAA,QAAAA,MAAAA,EAAAA,QACQH,OAAAA,EAAAA,QAwBNI,KAAAA;EAzBH,MAAA,oBAACD,IAAD;GACE,OAAOH;GAwBNI,UAAAA;EAUa,CAAA;EAnCfD,EAAAA,MAAAA;EACQH,EAAAA,MAAAA;EAwBNI,EAAAA,MAAAA;;;CA1BL,OACEF;AAqCJ,CACF;AAlH4B,SAAA,QAAA;CAAM,OAAA,IAAI,eAAe"}

package/dist/dev/ui/title/component.d.ts

@@ -1,22 +1,18 @@
 import { UIComponentProps } from "../../utils/types.js";
 import { TitleCore } from "@videojs/core";
 //#region src/ui/title/component.d.ts
-interface TitleProps extends Omit<UIComponentProps<'span', TitleCore.State>, 'children'> {}
+interface TitleProps extends Omit<UIComponentProps<'div', TitleCore.State>, 'children'> {}
 /**
- * Displays the resolved content title.
+ * Displays the resolved content title. Renders nothing when no title resolves.
  *
  * The component owns its text content. Set the title through the player's `title` prop rather than by passing children.
  *
- * Renders nothing when no title resolves.
- *
  * @example
  *   ```tsx
  *   <Title />
- *
- *   <Title className="title" />
  *   ```;
  */
-declare const Title: import("react").ForwardRefExoticComponent<Omit<TitleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Title: import("react").ForwardRefExoticComponent<Omit<TitleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace Title {
   type Props = TitleProps;
   type State = TitleCore.State;

package/dist/dev/ui/title/component.js

@@ -2,34 +2,31 @@
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { TitleCore, TitleDataAttrs } from "@videojs/core";
-import { logMissingFeature, selectMetadata } from "@videojs/core/dom";
+import { logMissingFeature, selectControls, selectMetadata } from "@videojs/core/dom";
 import { forwardRef, useState } from "react";
 //#region src/ui/title/component.tsx
 /**
-* Displays the resolved content title.
+* Displays the resolved content title. Renders nothing when no title resolves.
 *
 * The component owns its text content. Set the title through the player's `title` prop rather than by passing children.
 *
-* Renders nothing when no title resolves.
-*
 * @example
 *   ```tsx
 *   <Title />
-*
-*   <Title className="title" />
 *   ```;
 */
 const Title = forwardRef(function Title(componentProps, forwardedRef) {
 	const { render, className, style, ...elementProps } = componentProps;
 	const metadata = usePlayer(selectMetadata);
+	const controls = usePlayer(selectControls);
 	const [core] = useState(() => new TitleCore());
 	if (!metadata) {
 		logMissingFeature("Title", "metadata");
 		return null;
 	}
-	const state = core.getState(metadata);
+	const state = core.getState(metadata, controls);
 	if (state.hidden) return null;
-	return renderElement("span", {
+	return renderElement("div", {
 		render,
 		className,
 		style

package/dist/dev/ui/title/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/title/component.tsx"],"sourcesContent":["'use client';\n\nimport { TitleCore, TitleDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectMetadata } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface TitleProps extends Omit<UIComponentProps<'span', TitleCore.State>, 'children'> {}\n\n/**\n * Displays the resolved content title.\n *\n * The component owns its text content. Set the title through the player's `title` prop rather than by passing children.\n *\n * Renders nothing when no title resolves.\n *\n * @example\n *   ```tsx\n *   <Title />\n *\n *   <Title className=\"title\" />\n *   ```;\n */\nexport const Title = forwardRef(function Title(\n  componentProps: TitleProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const metadata = usePlayer(selectMetadata);\n\n  const [core] = useState(() => new TitleCore());\n\n  if (!metadata) {\n    if (__DEV__) logMissingFeature('Title', 'metadata');\n\n    return null;\n  }\n\n  const state = core.getState(metadata);\n  if (state.hidden) return null;\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TitleDataAttrs,\n      ref: [forwardedRef],\n      props: [{ children: state.title }, elementProps],\n    }\n  );\n});\n\nexport namespace Title {\n  export type Props = TitleProps;\n  export type State = TitleCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;CAE7C,IAAI,CAAC,UAAU;EACA,kBAAkB,SAAS,UAAU;EAElD,OAAO;CACT;CAEA,MAAM,QAAQ,KAAK,SAAS,QAAQ;CACpC,IAAI,MAAM,QAAQ,OAAO;CAEzB,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,UAAU,MAAM,MAAM,GAAG,YAAY;CACjD,CACF;AACF,CAAC"}
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/title/component.tsx"],"sourcesContent":["'use client';\n\nimport { TitleCore, TitleDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectControls, selectMetadata } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface TitleProps extends Omit<UIComponentProps<'div', TitleCore.State>, 'children'> {}\n\n/**\n * Displays the resolved content title. Renders nothing when no title resolves.\n *\n * The component owns its text content. Set the title through the player's `title` prop rather than by passing children.\n *\n * @example\n *   ```tsx\n *   <Title />\n *   ```;\n */\nexport const Title = forwardRef(function Title(componentProps: TitleProps, forwardedRef: ForwardedRef<HTMLDivElement>) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const metadata = usePlayer(selectMetadata);\n  const controls = usePlayer(selectControls);\n\n  const [core] = useState(() => new TitleCore());\n\n  if (!metadata) {\n    if (__DEV__) logMissingFeature('Title', 'metadata');\n\n    return null;\n  }\n\n  const state = core.getState(metadata, controls);\n  if (state.hidden) return null;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TitleDataAttrs,\n      ref: [forwardedRef],\n      props: [{ children: state.title }, elementProps],\n    }\n  );\n});\n\nexport namespace Title {\n  export type Props = TitleProps;\n  export type State = TitleCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,WAAW,SAAS,MAAM,gBAA4B,cAA4C;CACrH,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;CAE7C,IAAI,CAAC,UAAU;EACA,kBAAkB,SAAS,UAAU;EAElD,OAAO;CACT;CAEA,MAAM,QAAQ,KAAK,SAAS,UAAU,QAAQ;CAC9C,IAAI,MAAM,QAAQ,OAAO;CAEzB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,UAAU,MAAM,MAAM,GAAG,YAAY;CACjD,CACF;AACF,CAAC"}

package/dist/dev/ui/title/index.d.ts

@@ -1,2 +1,2 @@
 import { Title, TitleProps } from "./component.js";
-export { Title, type TitleProps };
+export { Title, TitleProps };

package/dist/dev/ui/tooltip/popup.js

@@ -5,37 +5,70 @@ import { usePopupPosition } from "../popover/use-popup-position.js";
 import { TooltipLabel } from "./label.js";
 import { TooltipShortcut } from "./shortcut.js";
 import { TooltipCSSVars } from "@videojs/core";
-import { forwardRef, useCallback, useMemo, useRef } from "react";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/tooltip/popup.tsx
 /**
 * Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
 * fallback.
 */
-const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style, children, ...elementProps }, forwardedRef) {
+const TooltipPopup = forwardRef(function TooltipPopup(t0, forwardedRef) {
+	const $ = c(15);
+	const { render, className, style, children, ...elementProps } = t0;
 	const { core, tooltip, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, popupId, boundary, container } = useTooltipContext();
 	const internalRef = useRef(null);
-	const popupRef = useCallback((el) => {
-		tooltip.setPopupElement(el);
-	}, [tooltip]);
-	const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);
-	const posOpts = useMemo(() => ({
-		side: preferredSide,
-		align: state.align
-	}), [preferredSide, state.align]);
-	const positioningStyle = usePopupPosition({
-		open: state.open,
-		anchorName,
-		position: posOpts,
-		triggerSource: tooltip,
-		popupRef: internalRef,
-		boundary,
-		container,
-		cssVars: TooltipCSSVars,
-		onSideChange: setPositionedSide
-	});
+	let t1;
+	if ($[0] !== tooltip) {
+		t1 = (el) => {
+			tooltip.setPopupElement(el);
+		};
+		$[0] = tooltip;
+		$[1] = t1;
+	} else t1 = $[1];
+	const composedRef = useComposedRefs(forwardedRef, t1, internalRef);
+	let t2;
+	if ($[2] !== preferredSide || $[3] !== state.align) {
+		t2 = {
+			side: preferredSide,
+			align: state.align
+		};
+		$[2] = preferredSide;
+		$[3] = state.align;
+		$[4] = t2;
+	} else t2 = $[4];
+	const posOpts = t2;
+	let t3;
+	if ($[5] !== anchorName || $[6] !== boundary || $[7] !== container || $[8] !== posOpts || $[9] !== setPositionedSide || $[10] !== state.open || $[11] !== tooltip) {
+		t3 = {
+			open: state.open,
+			anchorName,
+			position: posOpts,
+			triggerSource: tooltip,
+			popupRef: internalRef,
+			boundary,
+			container,
+			cssVars: TooltipCSSVars,
+			onSideChange: setPositionedSide
+		};
+		$[5] = anchorName;
+		$[6] = boundary;
+		$[7] = container;
+		$[8] = posOpts;
+		$[9] = setPositionedSide;
+		$[10] = state.open;
+		$[11] = tooltip;
+		$[12] = t3;
+	} else t3 = $[12];
+	const positioningStyle = usePopupPosition(t3);
 	if (!state.open) return null;
-	const body = children !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, {})] });
+	let t4;
+	if ($[13] !== children) {
+		t4 = children !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, {})] });
+		$[13] = children;
+		$[14] = t4;
+	} else t4 = $[14];
+	const body = t4;
 	const { onFocusOut, ...restPopupProps } = tooltip.popupProps;
 	return renderElement("div", {
 		render,

package/dist/dev/ui/tooltip/popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"popup.js","names":[],"sources":["../../../../src/ui/tooltip/popup.tsx"],"sourcesContent":["import { TooltipCSSVars, type TooltipState } from '@videojs/core';\nimport { forwardRef, useCallback, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopupPosition } from '../popover/use-popup-position';\nimport { useTooltipContext } from './context';\nimport { TooltipLabel } from './label';\nimport { TooltipShortcut } from './shortcut';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\n/**\n * Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript\n * fallback.\n */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n  { render, className, style, children, ...elementProps },\n  forwardedRef\n) {\n  const {\n    core,\n    tooltip,\n    state,\n    preferredSide,\n    setPositionedSide,\n    stateAttrMap,\n    anchorName,\n    popupId,\n    boundary,\n    container,\n  } = useTooltipContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      tooltip.setPopupElement(el);\n    },\n    [tooltip]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n  // --- Positioning ---\n\n  const posOpts = useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align]);\n\n  const positioningStyle = usePopupPosition({\n    open: state.open,\n    anchorName,\n    position: posOpts,\n    triggerSource: tooltip,\n    popupRef: internalRef,\n    boundary,\n    container,\n    cssVars: TooltipCSSVars,\n    onSideChange: setPositionedSide,\n  });\n\n  // --- Visibility ---\n\n  if (!state.open) {\n    return null;\n  }\n\n  const body =\n    children !== undefined ? (\n      children\n    ) : (\n      <>\n        <TooltipLabel />\n        <TooltipShortcut />\n      </>\n    );\n\n  // Remap DOM focus events to React synthetic event names.\n  const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: composedRef,\n      props: [\n        {\n          id: popupId,\n          style: positioningStyle,\n          ...core.getPopupAttrs(state),\n        },\n        { children: body },\n        { ...restPopupProps, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace TooltipPopup {\n  export type Props = TooltipPopupProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EACJ,MACA,SACA,OACA,eACA,mBACA,cACA,YACA,SACA,UACA,cACE,kBAAkB;CACtB,MAAM,cAAc,OAAuB,IAAI;CAE/C,MAAM,WAAW,aACd,OAA8B;EAC7B,QAAQ,gBAAgB,EAAE;CAC5B,GACA,CAAC,OAAO,CACV;CAEA,MAAM,cAAc,gBAAgB,cAAc,UAAU,WAAW;CAIvE,MAAM,UAAU,eAAe;EAAE,MAAM;EAAe,OAAO,MAAM;CAAM,IAAI,CAAC,eAAe,MAAM,KAAK,CAAC;CAEzG,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,MAAM;EACZ;EACA,UAAU;EACV,eAAe;EACf,UAAU;EACV;EACA;EACA,SAAS;EACT,cAAc;CAChB,CAAC;CAID,IAAI,CAAC,MAAM,MACT,OAAO;CAGT,MAAM,OACJ,aAAa,KAAA,IACX,WAEA,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,iBAAD,CAAkB,CAAA,CAClB,EAAA,CAAA;CAIN,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;CAElD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,KAAK;GAC7B;GACA,EAAE,UAAU,KAAK;GACjB;IAAE,GAAG;IAAgB,QAAQ;GAAW;GACxC;EACF;CACF,CACF;AACF,CAAC"}
+{"version":3,"file":"popup.js","names":["{ render, className, style, children, ...elementProps }","(el: HTMLDivElement | null) => {\n      tooltip.setPopupElement(el);\n    }","useCallback(\n    (el: HTMLDivElement | null) => {\n      tooltip.setPopupElement(el);\n    },\n    [tooltip]\n  )","{ side: preferredSide, align: state.align }","align","useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align])","{\n    open: state.open,\n    anchorName,\n    position: posOpts,\n    triggerSource: tooltip,\n    popupRef: internalRef,\n    boundary,\n    container,\n    cssVars: TooltipCSSVars,\n    onSideChange: setPositionedSide,\n  }","open","children !== undefined ? (\n      children\n    ) : (\n      <>\n        <TooltipLabel />\n        <TooltipShortcut />\n      </>\n    )"],"sources":["../../../../src/ui/tooltip/popup.tsx"],"sourcesContent":["import { TooltipCSSVars, type TooltipState } from '@videojs/core';\nimport { forwardRef, useCallback, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopupPosition } from '../popover/use-popup-position';\nimport { useTooltipContext } from './context';\nimport { TooltipLabel } from './label';\nimport { TooltipShortcut } from './shortcut';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\n/**\n * Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript\n * fallback.\n */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n  { render, className, style, children, ...elementProps },\n  forwardedRef\n) {\n  const {\n    core,\n    tooltip,\n    state,\n    preferredSide,\n    setPositionedSide,\n    stateAttrMap,\n    anchorName,\n    popupId,\n    boundary,\n    container,\n  } = useTooltipContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      tooltip.setPopupElement(el);\n    },\n    [tooltip]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n  // --- Positioning ---\n\n  const posOpts = useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align]);\n\n  const positioningStyle = usePopupPosition({\n    open: state.open,\n    anchorName,\n    position: posOpts,\n    triggerSource: tooltip,\n    popupRef: internalRef,\n    boundary,\n    container,\n    cssVars: TooltipCSSVars,\n    onSideChange: setPositionedSide,\n  });\n\n  // --- Visibility ---\n\n  if (!state.open) {\n    return null;\n  }\n\n  const body =\n    children !== undefined ? (\n      children\n    ) : (\n      <>\n        <TooltipLabel />\n        <TooltipShortcut />\n      </>\n    );\n\n  // Remap DOM focus events to React synthetic event names.\n  const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: composedRef,\n      props: [\n        {\n          id: popupId,\n          style: positioningStyle,\n          ...core.getPopupAttrs(state),\n        },\n        { children: body },\n        { ...restPopupProps, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace TooltipPopup {\n  export type Props = TooltipPopupProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAa,eAAe,WAA8C,SAAS,aAAA,IAEjF,cACA;;CAFA,MAAA,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAzCA;CAGA,MAAM,EACJ,MACA,SACA,OACA,eACA,mBACA,cACA,YACA,SACA,UACA,cACE,kBAAkB;CACtB,MAAM,cAAc,OAAuB,IAAI;CAG7CC,IAAAA;CACE,IAAA,EAAA,OAAA,SAAA;EADF,MAAC,OAA8B;GAC7B,QAAQ,gBAAgB,EAAE;EAC5B;EADE,EAAA,KAAA;;;CAKJ,MAAM,cAAc,gBAAgB,cAAc,IAAU,WAAW;CAIxCE,IAAAA;CAAQ,IAAA,EAAA,OAAA,iBAAA,EAAA,OAA4BC,MAAAA,OAAAA;EAApC,KAAA;GAAE,MAAM;GAAe,OAAO,MAAM;EAAM;EAAlC,EAAA,KAAA;EAA4BA,EAAAA,KAAAA,MAAAA;;;CAAnE,MAAM,UAAUC;CAE0BC,IAAAA;CAExC,IAAA,EAAA,OAAA,cAAA,EAAA,OAIA,YAAA,EAAA,OACA,aAAA,EAAA,OAJU,WAAA,EAAA,OAMI,qBAAA,EAAA,QARFC,MAAAA,QAAAA,EAAAA,QAGG,SAAA;EAJyB,KAAA;GACxC,MAAM,MAAM;GACZ;GACA,UAAU;GACV,eAAe;GACf,UAAU;GACV;GACA;GACA,SAAS;GACT,cAAc;EAChB;EARE,EAAA,KAAA;EAIA,EAAA,KAAA;EACA,EAAA,KAAA;EAJU,EAAA,KAAA;EAMI,EAAA,KAAA;EARFA,EAAAA,MAAAA,MAAAA;EAGG,EAAA,MAAA;;;CAJjB,MAAM,mBAAmB,iBAAiBD,EAUzC;CAID,IAAI,CAAC,MAAM,MACT,OAAO;CAIPE,IAAAA;;EAAa,KAAA,aAAA,KAAA,IACX,WAEA,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,iBAAD,CAAkB,CAAA,CAClB,EAAA,CAAA;EANJ,EAAA,MAAA;;;CADF,MAAM,OACJA;CAUF,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;CAElD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,KAAK;GAC7B;GACA,EAAE,UAAU,KAAK;GACjB;IAAE,GAAG;IAAgB,QAAQ;GAAW;GACxC;EACF;CACF,CACF;AACF,CAAC"}

package/dist/dev/ui/tooltip/provider.js

@@ -1,23 +1,47 @@
 import { TooltipGroupContextProvider } from "./group-context.js";
 import { TooltipGroupCore } from "@videojs/core";
+import { c } from "react-compiler-runtime";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/tooltip/provider.tsx
-function TooltipProvider({ delay, closeDelay, timeout, children }) {
-	const [group] = useState(() => new TooltipGroupCore({
-		delay,
-		closeDelay,
-		timeout
-	}));
+function TooltipProvider(t0) {
+	const $ = c(9);
+	const { delay, closeDelay, timeout, children } = t0;
+	let t1;
+	if ($[0] !== closeDelay || $[1] !== delay || $[2] !== timeout) {
+		t1 = () => new TooltipGroupCore({
+			delay,
+			closeDelay,
+			timeout
+		});
+		$[0] = closeDelay;
+		$[1] = delay;
+		$[2] = timeout;
+		$[3] = t1;
+	} else t1 = $[3];
+	const [group] = useState(t1);
 	group.setProps({
 		delay,
 		closeDelay,
 		timeout
 	});
-	return /* @__PURE__ */ jsx(TooltipGroupContextProvider, {
-		value: { group },
-		children
-	});
+	let t2;
+	if ($[4] !== group) {
+		t2 = { group };
+		$[4] = group;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== children || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(TooltipGroupContextProvider, {
+			value: t2,
+			children
+		});
+		$[6] = children;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
 }
 //#endregion
 export { TooltipProvider };

package/dist/dev/ui/tooltip/provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.js","names":[],"sources":["../../../../src/ui/tooltip/provider.tsx"],"sourcesContent":["import { TooltipGroupCore, type TooltipGroupProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { TooltipGroupContextProvider } from './group-context';\n\nexport interface TooltipProviderProps extends TooltipGroupProps {\n  children?: ReactNode;\n}\n\nexport function TooltipProvider({ delay, closeDelay, timeout, children }: TooltipProviderProps): ReactNode {\n  const [group] = useState(() => new TooltipGroupCore({ delay, closeDelay, timeout }));\n\n  group.setProps({ delay, closeDelay, timeout });\n\n  return <TooltipGroupContextProvider value={{ group }}>{children}</TooltipGroupContextProvider>;\n}\n\nexport namespace TooltipProvider {\n  export type Props = TooltipProviderProps;\n}\n"],"mappings":";;;;;AAUA,SAAgB,gBAAgB,EAAE,OAAO,YAAY,SAAS,YAA6C;CACzG,MAAM,CAAC,SAAS,eAAe,IAAI,iBAAiB;EAAE;EAAO;EAAY;CAAQ,CAAC,CAAC;CAEnF,MAAM,SAAS;EAAE;EAAO;EAAY;CAAQ,CAAC;CAE7C,OAAO,oBAAC,6BAAD;EAA6B,OAAO,EAAE,MAAM;EAAI;CAAsC,CAAA;AAC/F"}
+{"version":3,"file":"provider.js","names":["{ delay, closeDelay, timeout, children }: TooltipProviderProps","() => new TooltipGroupCore({ delay, closeDelay, timeout })","{ group }","<TooltipGroupContextProvider value={{ group }}>{children}</TooltipGroupContextProvider>"],"sources":["../../../../src/ui/tooltip/provider.tsx"],"sourcesContent":["import { TooltipGroupCore, type TooltipGroupProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { TooltipGroupContextProvider } from './group-context';\n\nexport interface TooltipProviderProps extends TooltipGroupProps {\n  children?: ReactNode;\n}\n\nexport function TooltipProvider({ delay, closeDelay, timeout, children }: TooltipProviderProps): ReactNode {\n  const [group] = useState(() => new TooltipGroupCore({ delay, closeDelay, timeout }));\n\n  group.setProps({ delay, closeDelay, timeout });\n\n  return <TooltipGroupContextProvider value={{ group }}>{children}</TooltipGroupContextProvider>;\n}\n\nexport namespace TooltipProvider {\n  export type Props = TooltipProviderProps;\n}\n"],"mappings":";;;;;;AAUA,SAAgB,gBAAA,IAA2F;;CAA3E,MAAA,EAAE,OAAO,YAAY,SAAS,aAA9BA;CACLC,IAAAA;CAAoC,IAAA,EAAA,OAAA,cAAA,EAAA,OAAP,SAAA,EAAA,OAAmB,SAAA;EAAhD,WAAM,IAAI,iBAAiB;GAAE;GAAO;GAAY;EAAQ,CAAC;EAArB,EAAA,KAAA;EAAP,EAAA,KAAA;EAAmB,EAAA,KAAA;;;CAAzE,MAAM,CAAC,SAAS,SAASA,EAA0D;CAEnF,MAAM,SAAS;EAAE;EAAO;EAAY;CAAQ,CAAC;CAEFC,IAAAA;CAAE,IAAA,EAAA,OAAA,OAAA;EAAF,KAAA,EAAE,MAAM;EAAN,EAAA,KAAA;;;CAAtCC,IAAAA;CAAgD,IAAA,EAAA,OAAA,YAAA,EAAA,OAAZD,IAAAA;EAApC,KAAA,oBAAC,6BAAD;GAA6B,OAAOA;GAAY;EAAsC,CAAA;EAAtC,EAAA,KAAA;EAAZA,EAAAA,KAAAA;;;CAA3C,OAAOC;AACT"}

package/dist/dev/ui/volume-indicator/context.js

@@ -1,12 +1,22 @@
+import { c } from "react-compiler-runtime";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/volume-indicator/context.tsx
 const VolumeIndicatorContext = createContext(null);
-function VolumeIndicatorProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(VolumeIndicatorContext.Provider, {
-		value,
-		children
-	});
+function VolumeIndicatorProvider(t0) {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(VolumeIndicatorContext.Provider, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 function useVolumeIndicatorContext() {
 	const ctx = useContext(VolumeIndicatorContext);

package/dist/dev/ui/volume-indicator/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/volume-indicator/context.tsx"],"sourcesContent":["import type { VolumeIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface VolumeIndicatorContextValue {\n  state: VolumeIndicatorCore.State;\n}\n\nconst VolumeIndicatorContext = createContext<VolumeIndicatorContextValue | null>(null);\n\nexport function VolumeIndicatorProvider({ value, children }: ProviderProps<VolumeIndicatorContextValue>) {\n  return <VolumeIndicatorContext.Provider value={value}>{children}</VolumeIndicatorContext.Provider>;\n}\n\nexport function useVolumeIndicatorContext(): VolumeIndicatorContextValue {\n  const ctx = useContext(VolumeIndicatorContext);\n  if (!ctx) throw new Error('VolumeIndicator child compounds must be used within a VolumeIndicator.Root');\n\n  return ctx;\n}\n"],"mappings":";;;AAOA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,SAAgB,wBAAwB,EAAE,OAAO,YAAwD;CACvG,OAAO,oBAAC,uBAAuB,UAAxB;EAAwC;EAAQ;CAA0C,CAAA;AACnG;AAEA,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,sBAAsB;CAC7C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,4EAA4E;CAEtG,OAAO;AACT"}
+{"version":3,"file":"context.js","names":["{ value, children }: ProviderProps<VolumeIndicatorContextValue>","<VolumeIndicatorContext.Provider value={value}>{children}</VolumeIndicatorContext.Provider>","VolumeIndicatorContext.Provider"],"sources":["../../../../src/ui/volume-indicator/context.tsx"],"sourcesContent":["import type { VolumeIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface VolumeIndicatorContextValue {\n  state: VolumeIndicatorCore.State;\n}\n\nconst VolumeIndicatorContext = createContext<VolumeIndicatorContextValue | null>(null);\n\nexport function VolumeIndicatorProvider({ value, children }: ProviderProps<VolumeIndicatorContextValue>) {\n  return <VolumeIndicatorContext.Provider value={value}>{children}</VolumeIndicatorContext.Provider>;\n}\n\nexport function useVolumeIndicatorContext(): VolumeIndicatorContextValue {\n  const ctx = useContext(VolumeIndicatorContext);\n  if (!ctx) throw new Error('VolumeIndicator child compounds must be used within a VolumeIndicator.Root');\n\n  return ctx;\n}\n"],"mappings":";;;;AAOA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,SAAgB,wBAAA,IAAyF;;CAAjE,MAAA,EAAE,OAAO,aAATA;CAC/BC,IAAAA;CAAgD,IAAA,EAAA,OAAA,YAAA,EAAA,OAAR,OAAA;EAAxC,KAAA,oBAACC,uBAAAA,UAAD;GAAwC;GAAQ;EAA0C,CAAA;EAA1C,EAAA,KAAA;EAAR,EAAA,KAAA;;;CAA/C,OAAOD;AACT;AAEA,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,sBAAsB;CAC7C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,4EAA4E;CAEtG,OAAO;AACT"}

package/dist/dev/ui/volume-indicator/root.js

@@ -3,31 +3,70 @@ import { renderElement } from "../../utils/use-render.js";
 import { useInputIndicatorRoot } from "../input-indicator/use-input-indicator-root.js";
 import { VolumeIndicatorProvider } from "./context.js";
 import { VolumeIndicatorCore, VolumeIndicatorDataAttrs, createInputIndicatorLabels } from "@videojs/core";
+import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/volume-indicator/root.tsx
 const VolumeIndicatorRoot = forwardRef(function VolumeIndicatorRoot(componentProps, forwardedRef) {
+	const $ = c(12);
 	const { render, className, style, closeDelay, ...elementProps } = componentProps;
 	const translator = useTranslator();
-	const { elementRef, present, state } = useInputIndicatorRoot(() => new VolumeIndicatorCore(), {
-		closeDelay,
-		labels: createInputIndicatorLabels(translator)
-	}, { replayOnUpdate: false });
+	let t0;
+	if ($[0] !== translator) {
+		t0 = createInputIndicatorLabels(translator);
+		$[0] = translator;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== closeDelay || $[3] !== t0) {
+		t1 = {
+			closeDelay,
+			labels: t0
+		};
+		$[2] = closeDelay;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { replayOnUpdate: false };
+		$[5] = t2;
+	} else t2 = $[5];
+	const { elementRef, present, state } = useInputIndicatorRoot(_temp, t1, t2);
 	if (!present) return null;
-	return /* @__PURE__ */ jsx(VolumeIndicatorProvider, {
-		value: { state },
-		children: renderElement("div", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			stateAttrMap: VolumeIndicatorDataAttrs,
-			ref: [forwardedRef, elementRef],
-			props: [elementProps]
-		})
+	const T0 = VolumeIndicatorProvider;
+	let t3;
+	if ($[6] !== state) {
+		t3 = { state };
+		$[6] = state;
+		$[7] = t3;
+	} else t3 = $[7];
+	const t4 = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: VolumeIndicatorDataAttrs,
+		ref: [forwardedRef, elementRef],
+		props: [elementProps]
 	});
+	let t5;
+	if ($[8] !== T0 || $[9] !== t3 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			value: t3,
+			children: t4
+		});
+		$[8] = T0;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
 });
+function _temp() {
+	return new VolumeIndicatorCore();
+}
 //#endregion
 export { VolumeIndicatorRoot };
 

package/dist/dev/ui/volume-indicator/root.js.map

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/volume-indicator/root.tsx"],"sourcesContent":["import { createInputIndicatorLabels, VolumeIndicatorCore, VolumeIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { VolumeIndicatorProvider } from './context';\n\nexport interface VolumeIndicatorRootProps\n  extends UIComponentProps<'div', VolumeIndicatorCore.State>, Omit<VolumeIndicatorCore.Props, 'labels'> {}\n\nexport const VolumeIndicatorRoot = forwardRef(function VolumeIndicatorRoot(\n  componentProps: VolumeIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, closeDelay, ...elementProps } = componentProps;\n  const translator = useTranslator();\n  const { elementRef, present, state } = useInputIndicatorRoot(\n    () => new VolumeIndicatorCore(),\n    {\n      closeDelay,\n      labels: createInputIndicatorLabels(translator),\n    },\n    { replayOnUpdate: false }\n  );\n  if (!present) return null;\n\n  return (\n    <VolumeIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: VolumeIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </VolumeIndicatorProvider>\n  );\n});\n\nexport namespace VolumeIndicatorRoot {\n  export type Props = VolumeIndicatorRootProps;\n  export type State = VolumeIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;CAClE,MAAM,aAAa,cAAc;CACjC,MAAM,EAAE,YAAY,SAAS,UAAU,4BAC/B,IAAI,oBAAoB,GAC9B;EACE;EACA,QAAQ,2BAA2B,UAAU;CAC/C,GACA,EAAE,gBAAgB,MAAM,CAC1B;CACA,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,MAAM;EACrC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CAAC,YAAY;EACtB,CACF;CACuB,CAAA;AAE7B,CAAC"}
+{"version":3,"file":"root.js","names":["createInputIndicatorLabels(translator)","{\n      closeDelay,\n      labels: createInputIndicatorLabels(translator),\n    }","{ replayOnUpdate: false }","() => new VolumeIndicatorCore()","{ state }","<VolumeIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: VolumeIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </VolumeIndicatorProvider>","VolumeIndicatorProvider","renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: VolumeIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )"],"sources":["../../../../src/ui/volume-indicator/root.tsx"],"sourcesContent":["import { createInputIndicatorLabels, VolumeIndicatorCore, VolumeIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { VolumeIndicatorProvider } from './context';\n\nexport interface VolumeIndicatorRootProps\n  extends UIComponentProps<'div', VolumeIndicatorCore.State>, Omit<VolumeIndicatorCore.Props, 'labels'> {}\n\nexport const VolumeIndicatorRoot = forwardRef(function VolumeIndicatorRoot(\n  componentProps: VolumeIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, closeDelay, ...elementProps } = componentProps;\n  const translator = useTranslator();\n  const { elementRef, present, state } = useInputIndicatorRoot(\n    () => new VolumeIndicatorCore(),\n    {\n      closeDelay,\n      labels: createInputIndicatorLabels(translator),\n    },\n    { replayOnUpdate: false }\n  );\n  if (!present) return null;\n\n  return (\n    <VolumeIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: VolumeIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </VolumeIndicatorProvider>\n  );\n});\n\nexport namespace VolumeIndicatorRoot {\n  export type Props = VolumeIndicatorRootProps;\n  export type State = VolumeIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;CAClE,MAAM,aAAa,cAAc;CAKrBA,IAAAA;CAA2B,IAAA,EAAA,OAAA,YAAA;EAA3B,KAAA,2BAA2B,UAAU;EAAV,EAAA,KAAA;;;CAFrCC,IAAAA;CACE,IAAA,EAAA,OAAA,cAAA,EAAA,OACQD,IAAAA;EAFV,KAAA;GACE;GACA,QAAQA;EACV;EAFE,EAAA,KAAA;EACQA,EAAAA,KAAAA;;;CAEVE,IAAAA;;EAAE,KAAA,EAAA,gBAAgB,MAAM;;;CAN1B,MAAM,EAAE,YAAY,SAAS,UAAU,sBACrCC,OACAF,IAIAC,EACF;CACA,IAAI,CAAC,SAAS,OAAO;CAGlB,MAAA,KAAA;CAA+BE,IAAAA;CAAE,IAAA,EAAA,OAAA,OAAA;EAAF,KAAA,EAAE,MAAM;EAAN,EAAA,KAAA;;;CAC/B,MAAA,KAAA,cACC,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CAAC,YAAY;CACtB,CACF;CAVFC,IAAAA;CAACC,IAAAA,EAAAA,OAAAA,MAAAA,EAAAA,OAA+BF,MAAAA,EAAAA,QAC7BG,IAAAA;EADH,KAAA,oBAACD,IAAD;GAAyB,OAAOF;GAC7BG,UAAAA;EAUsB,CAAA;EAXxBD,EAAAA,KAAAA;EAA+BF,EAAAA,KAAAA;EAC7BG,EAAAA,MAAAA;;;CAFL,OACEF;AAaJ,CAAC;AAvBG,SAAA,QAAA;CAAM,OAAA,IAAI,oBAAoB"}

package/dist/dev/ui/volume-popover/popup.js

@@ -2,18 +2,34 @@ import { PopoverPopup } from "../popover/popup.js";
 import { useVolumePopoverContext } from "./context.js";
 import { VolumePopoverDataAttrs } from "@videojs/core";
 import { getStateDataAttrs } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/volume-popover/popup.tsx
 /** Positioned volume content. Omitted when volume level controls are unavailable. */
 const VolumePopoverPopup = forwardRef(function VolumePopoverPopup(props, forwardedRef) {
+	const $ = c(6);
 	const { state } = useVolumePopoverContext();
 	if (state.hidden) return null;
-	return /* @__PURE__ */ jsx(PopoverPopup, {
-		ref: forwardedRef,
-		...getStateDataAttrs(state, VolumePopoverDataAttrs),
-		...props
-	});
+	let t0;
+	if ($[0] !== state) {
+		t0 = getStateDataAttrs(state, VolumePopoverDataAttrs);
+		$[0] = state;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== forwardedRef || $[3] !== props || $[4] !== t0) {
+		t1 = /* @__PURE__ */ jsx(PopoverPopup, {
+			ref: forwardedRef,
+			...t0,
+			...props
+		});
+		$[2] = forwardedRef;
+		$[3] = props;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
 });
 //#endregion
 export { VolumePopoverPopup };

package/dist/dev/ui/volume-popover/popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"popup.js","names":[],"sources":["../../../../src/ui/volume-popover/popup.tsx"],"sourcesContent":["import { VolumePopoverDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { forwardRef } from 'react';\n\nimport { PopoverPopup, type PopoverPopupProps } from '../popover/popup';\nimport { useVolumePopoverContext } from './context';\n\nexport interface VolumePopoverPopupProps extends PopoverPopupProps {}\n\n/** Positioned volume content. Omitted when volume level controls are unavailable. */\nexport const VolumePopoverPopup = forwardRef<HTMLDivElement, VolumePopoverPopupProps>(\n  function VolumePopoverPopup(props, forwardedRef) {\n    const { state } = useVolumePopoverContext();\n    if (state.hidden) return null;\n\n    return <PopoverPopup ref={forwardedRef} {...getStateDataAttrs(state, VolumePopoverDataAttrs)} {...props} />;\n  }\n);\n\nexport namespace VolumePopoverPopup {\n  export type Props = VolumePopoverPopupProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,OAAO,cAAc;CAC/C,MAAM,EAAE,UAAU,wBAAwB;CAC1C,IAAI,MAAM,QAAQ,OAAO;CAEzB,OAAO,oBAAC,cAAD;EAAc,KAAK;EAAc,GAAI,kBAAkB,OAAO,sBAAsB;EAAG,GAAI;CAAQ,CAAA;AAC5G,CACF"}
+{"version":3,"file":"popup.js","names":["getStateDataAttrs(state, VolumePopoverDataAttrs)","<PopoverPopup ref={forwardedRef} {...getStateDataAttrs(state, VolumePopoverDataAttrs)} {...props} />"],"sources":["../../../../src/ui/volume-popover/popup.tsx"],"sourcesContent":["import { VolumePopoverDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { forwardRef } from 'react';\n\nimport { PopoverPopup, type PopoverPopupProps } from '../popover/popup';\nimport { useVolumePopoverContext } from './context';\n\nexport interface VolumePopoverPopupProps extends PopoverPopupProps {}\n\n/** Positioned volume content. Omitted when volume level controls are unavailable. */\nexport const VolumePopoverPopup = forwardRef<HTMLDivElement, VolumePopoverPopupProps>(\n  function VolumePopoverPopup(props, forwardedRef) {\n    const { state } = useVolumePopoverContext();\n    if (state.hidden) return null;\n\n    return <PopoverPopup ref={forwardedRef} {...getStateDataAttrs(state, VolumePopoverDataAttrs)} {...props} />;\n  }\n);\n\nexport namespace VolumePopoverPopup {\n  export type Props = VolumePopoverPopupProps;\n}\n"],"mappings":";;;;;;;;;AAUA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,OAAO,cAAc;;CAC/C,MAAM,EAAE,UAAU,wBAAwB;CAC1C,IAAI,MAAM,QAAQ,OAAO;CAEmBA,IAAAA;CAAkB,IAAA,EAAA,OAAA,OAAA;EAAlB,KAAA,kBAAkB,OAAO,sBAAsB;EAA7B,EAAA,KAAA;;;CAAvDC,IAAAA;CAAmB,IAAA,EAAA,OAAA,gBAAA,EAAA,OAAwE,SAAA,EAAA,OAAtDD,IAAAA;EAArC,KAAA,oBAAC,cAAD;GAAc,KAAK;GAAc,GAAIA;GAAkD,GAAI;EAAQ,CAAA;EAAhF,EAAA,KAAA;EAAwE,EAAA,KAAA;EAAtDA,EAAAA,KAAAA;;;CAA5C,OAAOC;AACT,CACF"}

package/dist/dev/ui/volume-popover/root.d.ts

@@ -3,7 +3,7 @@ import { VolumePopoverCore } from "@videojs/core";
 import { ReactNode } from "react";
 //#region src/ui/volume-popover/root.d.ts
 interface VolumePopoverRootProps extends PopoverRootProps {}
-/** Owns volume availability and the popover interaction lifecycle. */
+/** Owns the popover interaction lifecycle and provides volume availability to the parts. */
 declare function VolumePopoverRoot({ children, ...props }: VolumePopoverRootProps): ReactNode;
 declare namespace VolumePopoverRoot {
   type Props = VolumePopoverRootProps;

package/dist/dev/ui/volume-popover/root.js

@@ -4,6 +4,7 @@ import { PopoverRoot } from "../popover/root.js";
 import { VolumePopoverContextProvider } from "./context.js";
 import { VolumePopoverCore } from "@videojs/core";
 import { selectVolume } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/volume-popover/root.tsx
@@ -15,23 +16,59 @@ const unavailableVolume = {
 	setVolume: () => 0,
 	toggleMuted: () => false
 };
-/** Owns volume availability and the popover interaction lifecycle. */
-function VolumePopoverRoot({ children, ...props }) {
+/** Owns the popover interaction lifecycle and provides volume availability to the parts. */
+function VolumePopoverRoot(t0) {
+	const $ = c(9);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== children || $[4] !== props) {
+		t1 = /* @__PURE__ */ jsx(VolumePopoverState, {
+			...props,
+			children
+		});
+		$[3] = children;
+		$[4] = props;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx(PopoverRoot, {
+			...props,
+			children: t1
+		});
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+}
+/**
+* Derives the volume-aware state inside the popover context. It subscribes to volume, owns the core, and reads the
+* core's state all in one component: a core mutated in one component and read in another is invisible to React
+* Compiler, which memoised the reading element and left the trigger in its mute-only fallback after volume became
+* available.
+*/
+function VolumePopoverState({ children, ...props }) {
+	"use no memo";
 	const volume = usePlayer(selectVolume);
+	const { popover, state: popoverState } = usePopoverContext();
 	const [core] = useState(() => new VolumePopoverCore(props));
 	core.setProps(props);
 	core.setMedia(volume ?? unavailableVolume);
-	return /* @__PURE__ */ jsx(PopoverRoot, {
-		...props,
-		children: /* @__PURE__ */ jsx(VolumePopoverState, {
-			core,
-			children
-		})
+	core.setInput({
+		active: popoverState.open,
+		status: popoverState.status
 	});
-}
-function VolumePopoverState({ core, children }) {
-	const { popover } = usePopoverContext();
-	core.setInput(popover.input.current);
 	const state = core.getState();
 	useEffect(() => {
 		if (state.hidden) popover.close("imperative-action");