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

package/dist/dev/ui/thumbnail/root.js.map

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/thumbnail/root.tsx"],"sourcesContent":["import { mapCuesToThumbnails, ThumbnailCore, ThumbnailDataAttrs } from '@videojs/core';\nimport { createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { CSSProperties, ForwardedRef } from 'react';\nimport { forwardRef, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { useOptionalPlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\nimport { ThumbnailProvider } from './context';\n\nexport interface ThumbnailRootProps extends UIComponentProps<'div', ThumbnailCore.State>, ThumbnailCore.RootProps {}\n\n/**\n * Resolves, sizes, and clips a thumbnail for a point in time.\n *\n * Renders a `div` and exposes `data-hidden`, `data-loading`, and `data-error` for styling every layer in the preview.\n * Render `Thumbnail.Image` inside it for the image the root controls and measures.\n */\nexport const ThumbnailRoot = forwardRef(function ThumbnailRoot(\n  componentProps: ThumbnailRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, time = 0, thumbnails: externalThumbnails, ...elementProps } = componentProps;\n\n  const [core] = useState(() => new ThumbnailCore());\n  const divRef = useRef<HTMLDivElement>(null);\n  const imgRef = useRef<HTMLImageElement>(null);\n  const textTrack = useOptionalPlayer(selectTextTrack);\n\n  // Force a render when the image loads, fails, or the root is resized.\n  const [, setRenderToken] = useState(0);\n  const [handle] = useState(() =>\n    createThumbnail({\n      getContainer: () => divRef.current,\n      getImg: () => imgRef.current,\n      onStateChange: () => setRenderToken((token) => token + 1),\n    })\n  );\n\n  useDestroy(handle, () => handle.connect());\n\n  // The image reports itself through this ref, so a mount, unmount, or `render` swap rebinds without an effect.\n  const imageRef = useCallback(\n    (img: HTMLImageElement | null) => {\n      const previous = imgRef.current;\n\n      imgRef.current = img;\n\n      if (img) handle.connect();\n      else if (previous) handle.disconnectImg(previous);\n    },\n    [handle]\n  );\n\n  // A supplied list takes priority over automatic <track> detection.\n  const thumbnails = useMemo(() => {\n    if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;\n\n    return textTrack && textTrack.thumbnailCues.length > 0\n      ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined)\n      : [];\n  }, [externalThumbnails, textTrack]);\n\n  const thumbnail = useMemo(() => core.findActiveThumbnail(thumbnails, time), [core, thumbnails, time]);\n\n  handle.updateSrc(thumbnail?.url);\n\n  const state = core.getState(handle.loading, handle.error, thumbnail);\n\n  let containerStyle: CSSProperties = { overflow: 'hidden' };\n  let imageStyle: CSSProperties | undefined;\n\n  if (thumbnail && handle.naturalWidth && handle.naturalHeight) {\n    const constraints = handle.readConstraints();\n    const result = core.resize(thumbnail, handle.naturalWidth, handle.naturalHeight, constraints);\n\n    if (result) {\n      containerStyle = {\n        overflow: 'hidden',\n        width: result.containerWidth,\n        height: result.containerHeight,\n      };\n      imageStyle = {\n        width: result.imageWidth,\n        height: result.imageHeight,\n        maxWidth: 'none',\n        transform:\n          result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : undefined,\n      };\n    }\n  }\n\n  return (\n    <ThumbnailProvider\n      value={{\n        core,\n        state,\n        src: thumbnail?.url,\n        imageStyle,\n        // Only `<track>`-sourced thumbnails follow the media element's CORS mode.\n        inheritedCrossOrigin: externalThumbnails?.length ? undefined : textTrack?.thumbnailTrackCrossOrigin,\n        imageRef,\n      }}\n    >\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: ThumbnailDataAttrs,\n          ref: [forwardedRef, divRef],\n          props: [core.getAttrs(state), { style: containerStyle }, elementProps],\n        }\n      )}\n    </ThumbnailProvider>\n  );\n});\n\nexport namespace ThumbnailRoot {\n  export type Props = ThumbnailRootProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,YAAY,oBAAoB,GAAG,iBAAiB;CAEhG,MAAM,CAAC,QAAQ,eAAe,IAAI,cAAc,CAAC;CACjD,MAAM,SAAS,OAAuB,IAAI;CAC1C,MAAM,SAAS,OAAyB,IAAI;CAC5C,MAAM,YAAY,kBAAkB,eAAe;CAGnD,MAAM,GAAG,kBAAkB,SAAS,CAAC;CACrC,MAAM,CAAC,UAAU,eACf,gBAAgB;EACd,oBAAoB,OAAO;EAC3B,cAAc,OAAO;EACrB,qBAAqB,gBAAgB,UAAU,QAAQ,CAAC;CAC1D,CAAC,CACH;CAEA,WAAW,cAAc,OAAO,QAAQ,CAAC;CAGzC,MAAM,WAAW,aACd,QAAiC;EAChC,MAAM,WAAW,OAAO;EAExB,OAAO,UAAU;EAEjB,IAAI,KAAK,OAAO,QAAQ;OACnB,IAAI,UAAU,OAAO,cAAc,QAAQ;CAClD,GACA,CAAC,MAAM,CACT;CAGA,MAAM,aAAa,cAAc;EAC/B,IAAI,sBAAsB,mBAAmB,SAAS,GAAG,OAAO;EAEhE,OAAO,aAAa,UAAU,cAAc,SAAS,IACjD,oBAAoB,UAAU,eAAe,UAAU,qBAAqB,KAAA,CAAS,IACrF,CAAC;CACP,GAAG,CAAC,oBAAoB,SAAS,CAAC;CAElC,MAAM,YAAY,cAAc,KAAK,oBAAoB,YAAY,IAAI,GAAG;EAAC;EAAM;EAAY;CAAI,CAAC;CAEpG,OAAO,UAAU,WAAW,GAAG;CAE/B,MAAM,QAAQ,KAAK,SAAS,OAAO,SAAS,OAAO,OAAO,SAAS;CAEnE,IAAI,iBAAgC,EAAE,UAAU,SAAS;CACzD,IAAI;CAEJ,IAAI,aAAa,OAAO,gBAAgB,OAAO,eAAe;EAC5D,MAAM,cAAc,OAAO,gBAAgB;EAC3C,MAAM,SAAS,KAAK,OAAO,WAAW,OAAO,cAAc,OAAO,eAAe,WAAW;EAE5F,IAAI,QAAQ;GACV,iBAAiB;IACf,UAAU;IACV,OAAO,OAAO;IACd,QAAQ,OAAO;GACjB;GACA,aAAa;IACX,OAAO,OAAO;IACd,QAAQ,OAAO;IACf,UAAU;IACV,WACE,OAAO,WAAW,OAAO,UAAU,cAAc,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO,KAAA;GACjG;EACF;CACF;CAEA,OACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA;GACA,KAAK,WAAW;GAChB;GAEA,sBAAsB,oBAAoB,SAAS,KAAA,IAAY,WAAW;GAC1E;EACF;EAEC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,MAAM;GAC1B,OAAO;IAAC,KAAK,SAAS,KAAK;IAAG,EAAE,OAAO,eAAe;IAAG;GAAY;EACvE,CACF;CACiB,CAAA;AAEvB,CAAC"}
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/thumbnail/root.tsx"],"sourcesContent":["import { mapCuesToThumbnails, ThumbnailCore, ThumbnailDataAttrs } from '@videojs/core';\nimport { createThumbnail, selectFullscreen, selectTextTrack } from '@videojs/core/dom';\nimport type { CSSProperties, ForwardedRef } from 'react';\nimport { forwardRef, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { useOptionalPlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\nimport { ThumbnailProvider } from './context';\n\nexport interface ThumbnailRootProps extends UIComponentProps<'div', ThumbnailCore.State>, ThumbnailCore.RootProps {}\n\n/**\n * Resolves, sizes, and clips a thumbnail for a point in time.\n *\n * Renders a `div` and exposes `data-hidden`, `data-loading`, and `data-error` for styling every layer in the preview.\n * Render `Thumbnail.Image` inside it for the image the root controls and measures.\n */\nexport const ThumbnailRoot = forwardRef(function ThumbnailRoot(\n  componentProps: ThumbnailRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  // Image state and measured CSS constraints mutate outside React, so every forced render must recompute them.\n  'use no memo';\n\n  const { render, className, style, time = 0, thumbnails: externalThumbnails, ...elementProps } = componentProps;\n\n  const [core] = useState(() => new ThumbnailCore());\n  const divRef = useRef<HTMLDivElement>(null);\n  const imgRef = useRef<HTMLImageElement>(null);\n  const textTrack = useOptionalPlayer(selectTextTrack);\n\n  // Fullscreen container queries change the constraints without resizing an explicitly sized thumbnail.\n  useOptionalPlayer(selectFullscreen);\n\n  // Force a render when the image loads, fails, or the root is resized.\n  const [, setRenderToken] = useState(0);\n  const [handle] = useState(() =>\n    createThumbnail({\n      getContainer: () => divRef.current,\n      getImg: () => imgRef.current,\n      onStateChange: () => setRenderToken((token) => token + 1),\n    })\n  );\n\n  useDestroy(handle, () => handle.connect());\n\n  // The image reports itself through this ref, so a mount, unmount, or `render` swap rebinds without an effect.\n  const imageRef = useCallback(\n    (img: HTMLImageElement | null) => {\n      const previous = imgRef.current;\n\n      imgRef.current = img;\n\n      if (img) handle.connect();\n      else if (previous) handle.disconnectImg(previous);\n    },\n    [handle]\n  );\n\n  // A supplied list takes priority over automatic <track> detection.\n  const thumbnails = useMemo(() => {\n    if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;\n\n    return textTrack && textTrack.thumbnailCues.length > 0\n      ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined)\n      : [];\n  }, [externalThumbnails, textTrack]);\n\n  const thumbnail = useMemo(() => core.findActiveThumbnail(thumbnails, time), [core, thumbnails, time]);\n\n  handle.updateSrc(thumbnail?.url);\n\n  const state = core.getState(handle.loading, handle.error, thumbnail);\n\n  let containerStyle: CSSProperties = { overflow: 'hidden' };\n  let imageStyle: CSSProperties | undefined;\n\n  if (thumbnail && handle.naturalWidth && handle.naturalHeight) {\n    const constraints = handle.readConstraints();\n    const result = core.resize(thumbnail, handle.naturalWidth, handle.naturalHeight, constraints);\n\n    if (result) {\n      containerStyle = {\n        overflow: 'hidden',\n        width: result.containerWidth,\n        height: result.containerHeight,\n      };\n      imageStyle = {\n        width: result.imageWidth,\n        height: result.imageHeight,\n        maxWidth: 'none',\n        transform:\n          result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : undefined,\n      };\n    }\n  }\n\n  return (\n    <ThumbnailProvider\n      value={{\n        core,\n        state,\n        src: thumbnail?.url,\n        imageStyle,\n        // Only `<track>`-sourced thumbnails follow the media element's CORS mode.\n        inheritedCrossOrigin: externalThumbnails?.length ? undefined : textTrack?.thumbnailTrackCrossOrigin,\n        imageRef,\n      }}\n    >\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: ThumbnailDataAttrs,\n          ref: [forwardedRef, divRef],\n          props: [core.getAttrs(state), { style: containerStyle }, elementProps],\n        }\n      )}\n    </ThumbnailProvider>\n  );\n});\n\nexport namespace ThumbnailRoot {\n  export type Props = ThumbnailRootProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CAEA;CAEA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,YAAY,oBAAoB,GAAG,iBAAiB;CAEhG,MAAM,CAAC,QAAQ,eAAe,IAAI,cAAc,CAAC;CACjD,MAAM,SAAS,OAAuB,IAAI;CAC1C,MAAM,SAAS,OAAyB,IAAI;CAC5C,MAAM,YAAY,kBAAkB,eAAe;CAGnD,kBAAkB,gBAAgB;CAGlC,MAAM,GAAG,kBAAkB,SAAS,CAAC;CACrC,MAAM,CAAC,UAAU,eACf,gBAAgB;EACd,oBAAoB,OAAO;EAC3B,cAAc,OAAO;EACrB,qBAAqB,gBAAgB,UAAU,QAAQ,CAAC;CAC1D,CAAC,CACH;CAEA,WAAW,cAAc,OAAO,QAAQ,CAAC;CAGzC,MAAM,WAAW,aACd,QAAiC;EAChC,MAAM,WAAW,OAAO;EAExB,OAAO,UAAU;EAEjB,IAAI,KAAK,OAAO,QAAQ;OACnB,IAAI,UAAU,OAAO,cAAc,QAAQ;CAClD,GACA,CAAC,MAAM,CACT;CAGA,MAAM,aAAa,cAAc;EAC/B,IAAI,sBAAsB,mBAAmB,SAAS,GAAG,OAAO;EAEhE,OAAO,aAAa,UAAU,cAAc,SAAS,IACjD,oBAAoB,UAAU,eAAe,UAAU,qBAAqB,KAAA,CAAS,IACrF,CAAC;CACP,GAAG,CAAC,oBAAoB,SAAS,CAAC;CAElC,MAAM,YAAY,cAAc,KAAK,oBAAoB,YAAY,IAAI,GAAG;EAAC;EAAM;EAAY;CAAI,CAAC;CAEpG,OAAO,UAAU,WAAW,GAAG;CAE/B,MAAM,QAAQ,KAAK,SAAS,OAAO,SAAS,OAAO,OAAO,SAAS;CAEnE,IAAI,iBAAgC,EAAE,UAAU,SAAS;CACzD,IAAI;CAEJ,IAAI,aAAa,OAAO,gBAAgB,OAAO,eAAe;EAC5D,MAAM,cAAc,OAAO,gBAAgB;EAC3C,MAAM,SAAS,KAAK,OAAO,WAAW,OAAO,cAAc,OAAO,eAAe,WAAW;EAE5F,IAAI,QAAQ;GACV,iBAAiB;IACf,UAAU;IACV,OAAO,OAAO;IACd,QAAQ,OAAO;GACjB;GACA,aAAa;IACX,OAAO,OAAO;IACd,QAAQ,OAAO;IACf,UAAU;IACV,WACE,OAAO,WAAW,OAAO,UAAU,cAAc,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO,KAAA;GACjG;EACF;CACF;CAEA,OACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA;GACA,KAAK,WAAW;GAChB;GAEA,sBAAsB,oBAAoB,SAAS,KAAA,IAAY,WAAW;GAC1E;EACF;EAEC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,MAAM;GAC1B,OAAO;IAAC,KAAK,SAAS,KAAK;IAAG,EAAE,OAAO,eAAe;IAAG;GAAY;EACvE,CACF;CACiB,CAAA;AAEvB,CAAC"}

package/dist/dev/ui/time/group.js.map

@@ -1 +1 @@
-{"version":3,"file":"group.js","names":[],"sources":["../../../../src/ui/time/group.tsx"],"sourcesContent":["import type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Group (no dynamic state)\ntype GroupState = Record<string, never>;\n\nexport interface GroupProps extends UIComponentProps<'span', GroupState> {\n  /** Time value components to render inside the group. */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Container for composed time displays. Renders a `<span>` element.\n *\n * @example\n *   ```tsx\n *   <Time.Group>\n *     <Time.Value type=\"current\" />\n *     <Time.Separator />\n *     <Time.Value type=\"duration\" />\n *   </Time.Group>;\n *   ```;\n */\nexport const Group = forwardRef(function Group(\n  componentProps: GroupProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const state: GroupState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ children }, elementProps],\n    }\n  );\n});\n\nexport namespace Group {\n  export type Props = GroupProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAIhE,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAA,CAAI;EACJ,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY;CACpC,CACF;AACF,CAAC"}
+{"version":3,"file":"group.js","names":[],"sources":["../../../../src/ui/time/group.tsx"],"sourcesContent":["import type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Group (no dynamic state)\ntype GroupState = Record<string, never>;\n\nexport interface GroupProps extends UIComponentProps<'span', GroupState> {\n  /** Time value components to render inside the group. */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Container for composed time displays. Renders a `<span>` element.\n *\n * @example\n *   ```tsx\n *   <Time.Group>\n *     <Time.Value type=\"current\" />\n *     <Time.Separator />\n *     <Time.Value type=\"duration\" />\n *   </Time.Group>;\n *   ```;\n */\nexport const Group = forwardRef(function Group(\n  componentProps: GroupProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const state: GroupState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ children }, elementProps],\n    }\n  );\n});\n\nexport namespace Group {\n  export type Props = GroupProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAIhE,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAA,CAAA;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY;CACpC,CACF;AACF,CAAC"}

package/dist/dev/ui/time/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","names":[],"sources":["../../../../src/ui/time/separator.tsx"],"sourcesContent":["import type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Separator (no dynamic state)\ntype SeparatorState = Record<string, never>;\n\nexport interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {\n  /** Separator content. Defaults to \"/\". */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Divider between time values. Hidden from screen readers.\n *\n * @example\n *   ```tsx\n *   <Time.Separator />\n *   <Time.Separator> of </Time.Separator>\n *   ```;\n */\nexport const Separator = forwardRef(function Separator(\n  componentProps: SeparatorProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children = '/', ...elementProps } = componentProps;\n\n  const state: SeparatorState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ 'aria-hidden': 'true', children }, elementProps],\n    }\n  );\n});\n\nexport namespace Separator {\n  export type Props = SeparatorProps;\n}\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAa,YAAY,WAAW,SAAS,UAC3C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,KAAK,GAAG,iBAAiB;CAItE,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAA,CAAI;EACJ,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC;GAAE,eAAe;GAAQ;EAAS,GAAG,YAAY;CAC3D,CACF;AACF,CAAC"}
+{"version":3,"file":"separator.js","names":[],"sources":["../../../../src/ui/time/separator.tsx"],"sourcesContent":["import type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Separator (no dynamic state)\ntype SeparatorState = Record<string, never>;\n\nexport interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {\n  /** Separator content. Defaults to \"/\". */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Divider between time values. Hidden from screen readers.\n *\n * @example\n *   ```tsx\n *   <Time.Separator />\n *   <Time.Separator> of </Time.Separator>\n *   ```;\n */\nexport const Separator = forwardRef(function Separator(\n  componentProps: SeparatorProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children = '/', ...elementProps } = componentProps;\n\n  const state: SeparatorState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ 'aria-hidden': 'true', children }, elementProps],\n    }\n  );\n});\n\nexport namespace Separator {\n  export type Props = SeparatorProps;\n}\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAa,YAAY,WAAW,SAAS,UAC3C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,KAAK,GAAG,iBAAiB;CAItE,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAA,CAAA;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC;GAAE,eAAe;GAAQ;EAAS,GAAG,YAAY;CAC3D,CACF;AACF,CAAC"}

package/dist/dev/ui/time-slider/chapter-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"chapter-title.js","names":[],"sources":["../../../../src/ui/time-slider/chapter-title.tsx"],"sourcesContent":["import { TimeSliderChaptersCore } from '@videojs/core';\nimport { selectTextTrack, selectTime } from '@videojs/core/dom';\nimport type { MediaTextCue } from '@videojs/media';\nimport { forwardRef, useMemo, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSliderContext, useSliderPointerValue } from '../slider/context';\n\nexport interface TimeSliderChapterTitleState {\n  /** Chapter at the current interaction value. */\n  cue: MediaTextCue | null;\n  /** Chapter cue text, or an empty string for an uncovered interval. */\n  text: string;\n}\n\nexport interface TimeSliderChapterTitleProps extends UIComponentProps<'span', TimeSliderChapterTitleState> {}\n\n/** Displays the chapter title at the current pointer or keyboard position. */\nexport const TimeSliderChapterTitle = forwardRef<HTMLSpanElement, TimeSliderChapterTitleProps>(\n  function TimeSliderChapterTitle(componentProps, ref) {\n    const { render, className, style, ...elementProps } = componentProps;\n    const slider = useSliderContext();\n    const pointerValue = useSliderPointerValue();\n    const textTrack = usePlayer(selectTextTrack);\n    const time = usePlayer(selectTime);\n    const [core] = useState(() => new TimeSliderChaptersCore());\n    const { chapters } = useMemo(\n      () => core.getRanges(textTrack?.chaptersCues ?? [], 0, time?.duration ?? 0),\n      [core, textTrack?.chaptersCues, time?.duration]\n    );\n    const keyboard = slider.state.interactive && !slider.state.pointing && !slider.state.dragging;\n    const value = slider.state.pointing || slider.state.dragging ? pointerValue : slider.state.value;\n    const chapter = core.findChapter(chapters, value);\n    const cue = chapter?.cue ?? null;\n    const state = { cue, text: cue?.text ?? '' };\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      {\n        state,\n        ref,\n        props: [\n          {\n            'aria-hidden': keyboard ? undefined : true,\n            'aria-live': keyboard ? 'polite' : undefined,\n            children: state.text,\n          },\n          elementProps,\n        ],\n      }\n    );\n  }\n);\n\nexport namespace TimeSliderChapterTitle {\n  export type Props = TimeSliderChapterTitleProps;\n  export type State = TimeSliderChapterTitleState;\n}\n"],"mappings":";;;;;;;;AAoBA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,gBAAgB,KAAK;CACnD,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,SAAS,iBAAiB;CAChC,MAAM,eAAe,sBAAsB;CAC3C,MAAM,YAAY,UAAU,eAAe;CAC3C,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;CAC1D,MAAM,EAAE,aAAa,cACb,KAAK,UAAU,WAAW,gBAAgB,CAAC,GAAG,GAAG,MAAM,YAAY,CAAC,GAC1E;EAAC;EAAM,WAAW;EAAc,MAAM;CAAQ,CAChD;CACA,MAAM,WAAW,OAAO,MAAM,eAAe,CAAC,OAAO,MAAM,YAAY,CAAC,OAAO,MAAM;CACrF,MAAM,QAAQ,OAAO,MAAM,YAAY,OAAO,MAAM,WAAW,eAAe,OAAO,MAAM;CAE3F,MAAM,MADU,KAAK,YAAY,UAAU,KACzB,CAAC,EAAE,OAAO;CAC5B,MAAM,QAAQ;EAAE;EAAK,MAAM,KAAK,QAAQ;CAAG;CAE3C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,OAAO,CACL;GACE,eAAe,WAAW,KAAA,IAAY;GACtC,aAAa,WAAW,WAAW,KAAA;GACnC,UAAU,MAAM;EAClB,GACA,YACF;CACF,CACF;AACF,CACF"}
+{"version":3,"file":"chapter-title.js","names":[],"sources":["../../../../src/ui/time-slider/chapter-title.tsx"],"sourcesContent":["import { TimeSliderChaptersCore } from '@videojs/core';\nimport { selectTextTrack, selectTime } from '@videojs/core/dom';\nimport type { MediaTextCue } from '@videojs/media';\nimport { forwardRef, useMemo, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSliderContext, useSliderPointerValue } from '../slider/context';\n\nexport interface TimeSliderChapterTitleState {\n  /** Chapter at the current interaction value. */\n  cue: MediaTextCue | null;\n  /** Chapter cue text, or an empty string for an uncovered interval. */\n  text: string;\n}\n\nexport interface TimeSliderChapterTitleProps extends UIComponentProps<'span', TimeSliderChapterTitleState> {}\n\n/** Displays the chapter title at the current pointer or keyboard position. */\nexport const TimeSliderChapterTitle = forwardRef<HTMLSpanElement, TimeSliderChapterTitleProps>(\n  function TimeSliderChapterTitle(componentProps, ref) {\n    const { render, className, style, ...elementProps } = componentProps;\n    const slider = useSliderContext();\n    const pointerValue = useSliderPointerValue();\n    const textTrack = usePlayer(selectTextTrack);\n    const time = usePlayer(selectTime);\n    const [core] = useState(() => new TimeSliderChaptersCore());\n    const { chapters } = useMemo(\n      () => core.getRanges(textTrack?.chaptersCues ?? [], 0, time?.duration ?? 0),\n      [core, textTrack?.chaptersCues, time?.duration]\n    );\n    const keyboard = slider.state.interactive && !slider.state.pointing && !slider.state.dragging;\n    const value = slider.state.pointing || slider.state.dragging ? pointerValue : slider.state.value;\n    const chapter = core.findChapter(chapters, value);\n    const cue = chapter?.cue ?? null;\n    const state = { cue, text: cue?.text ?? '' };\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      {\n        state,\n        ref,\n        props: [\n          {\n            'aria-hidden': keyboard ? undefined : true,\n            'aria-live': keyboard ? 'polite' : undefined,\n            children: state.text,\n          },\n          elementProps,\n        ],\n      }\n    );\n  }\n);\n\nexport namespace TimeSliderChapterTitle {\n  export type Props = TimeSliderChapterTitleProps;\n  export type State = TimeSliderChapterTitleState;\n}\n"],"mappings":";;;;;;;;AAoBA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,gBAAgB,KAAK;CACnD,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,SAAS,iBAAiB;CAChC,MAAM,eAAe,sBAAsB;CAC3C,MAAM,YAAY,UAAU,eAAe;CAC3C,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;CAC1D,MAAM,EAAE,aAAa,cACb,KAAK,UAAU,WAAW,gBAAgB,CAAC,GAAG,GAAG,MAAM,YAAY,CAAC,GAC1E;EAAC;EAAM,WAAW;EAAc,MAAM;CAAQ,CAChD;CACA,MAAM,WAAW,OAAO,MAAM,eAAe,CAAC,OAAO,MAAM,YAAY,CAAC,OAAO,MAAM;CACrF,MAAM,QAAQ,OAAO,MAAM,YAAY,OAAO,MAAM,WAAW,eAAe,OAAO,MAAM;CAE3F,MAAM,MADU,KAAK,YAAY,UAAU,KAC/B,CAAA,EAAS,OAAO;CAC5B,MAAM,QAAQ;EAAE;EAAK,MAAM,KAAK,QAAQ;CAAG;CAE3C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,OAAO,CACL;GACE,eAAe,WAAW,KAAA,IAAY;GACtC,aAAa,WAAW,WAAW,KAAA;GACnC,UAAU,MAAM;EAClB,GACA,YACF;CACF,CACF;AACF,CACF"}

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

@@ -2,49 +2,139 @@ import { usePlayer } from "../../player/context.js";
 import { SliderSegments } from "./segments.js";
 import { TimeSliderChapterCSSVars, TimeSliderChapterDataAttrs, TimeSliderChaptersCore } from "@videojs/core";
 import { getStateDataAttrs, selectBuffer, selectTextTrack, selectTime } from "@videojs/core/dom";
-import { forwardRef, useMemo, useState } from "react";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/time-slider/chapters.tsx
 /** Renders normalized chapter ranges across the full slider, including one full range when chapter cues are absent. */
 const TimeSliderChapters = forwardRef(function TimeSliderChapters(componentProps, ref) {
-	const { renderChapter, className, style, render, ...props } = componentProps;
+	const $ = c(39);
+	let className;
+	let props;
+	let render;
+	let renderChapter;
+	let style;
+	if ($[0] !== componentProps) {
+		({renderChapter, className, style, render, ...props} = componentProps);
+		$[0] = componentProps;
+		$[1] = className;
+		$[2] = props;
+		$[3] = render;
+		$[4] = renderChapter;
+		$[5] = style;
+	} else {
+		className = $[1];
+		props = $[2];
+		render = $[3];
+		renderChapter = $[4];
+		style = $[5];
+	}
 	const textTrack = usePlayer(selectTextTrack);
 	const buffer = usePlayer(selectBuffer);
 	const duration = usePlayer(selectTime)?.duration ?? 0;
-	const [core] = useState(() => new TimeSliderChaptersCore());
-	const { chapters, ranges, max } = useMemo(() => core.getRanges(textTrack?.chaptersCues ?? [], 0, duration), [
-		core,
-		textTrack?.chaptersCues,
-		duration
-	]);
+	const [core] = useState(_temp);
+	textTrack?.chaptersCues;
+	let t0;
+	if ($[6] !== core || $[7] !== duration || $[8] !== textTrack?.chaptersCues) {
+		let t1;
+		if ($[10] !== textTrack?.chaptersCues) {
+			t1 = textTrack?.chaptersCues ?? [];
+			$[10] = textTrack?.chaptersCues;
+			$[11] = t1;
+		} else t1 = $[11];
+		t0 = core.getRanges(t1, 0, duration);
+		$[6] = core;
+		$[7] = duration;
+		$[8] = textTrack?.chaptersCues;
+		$[9] = t0;
+	} else t0 = $[9];
+	const { chapters, ranges, max } = t0;
 	const bufferedEnd = buffer?.buffered.length ? buffer.buffered[buffer.buffered.length - 1][1] : 0;
-	const getChapterState = (segment) => core.getState(segment, chapters, bufferedEnd);
-	const state = useMemo(() => ({ chapters }), [chapters]);
-	return /* @__PURE__ */ jsx(SliderSegments, {
-		ref,
-		...props,
-		className: isFunction(className) ? className(state) : className,
-		style: isFunction(style) ? style(state) : style,
-		render: isFunction(render) ? (renderProps) => render(renderProps, state) : render,
-		ranges,
-		min: 0,
-		max,
-		renderSegment: (segmentProps, segment) => {
-			const state = getChapterState(segment);
+	let t1;
+	if ($[12] !== bufferedEnd || $[13] !== chapters || $[14] !== core) {
+		t1 = (segment) => core.getState(segment, chapters, bufferedEnd);
+		$[12] = bufferedEnd;
+		$[13] = chapters;
+		$[14] = core;
+		$[15] = t1;
+	} else t1 = $[15];
+	const getChapterState = t1;
+	let t2;
+	if ($[16] !== chapters) {
+		t2 = { chapters };
+		$[16] = chapters;
+		$[17] = t2;
+	} else t2 = $[17];
+	const state = t2;
+	let t3;
+	if ($[18] !== className || $[19] !== state) {
+		t3 = isFunction(className) ? className(state) : className;
+		$[18] = className;
+		$[19] = state;
+		$[20] = t3;
+	} else t3 = $[20];
+	let t4;
+	if ($[21] !== state || $[22] !== style) {
+		t4 = isFunction(style) ? style(state) : style;
+		$[21] = state;
+		$[22] = style;
+		$[23] = t4;
+	} else t4 = $[23];
+	let t5;
+	if ($[24] !== render || $[25] !== state) {
+		t5 = isFunction(render) ? (renderProps) => render(renderProps, state) : render;
+		$[24] = render;
+		$[25] = state;
+		$[26] = t5;
+	} else t5 = $[26];
+	let t6;
+	if ($[27] !== getChapterState || $[28] !== renderChapter) {
+		t6 = (segmentProps, segment_0) => {
+			const state_0 = getChapterState(segment_0);
 			const chapterProps = {
 				...segmentProps,
-				...getStateDataAttrs(state, TimeSliderChapterDataAttrs),
+				...getStateDataAttrs(state_0, TimeSliderChapterDataAttrs),
 				style: {
 					...segmentProps.style,
-					pointerEvents: state.cue ? void 0 : "none",
-					[TimeSliderChapterCSSVars.buffer]: `${state.bufferPercent}%`
+					pointerEvents: state_0.cue ? void 0 : "none",
+					[TimeSliderChapterCSSVars.buffer]: `${state_0.bufferPercent}%`
 				}
 			};
-			return renderChapter(chapterProps, state);
-		}
-	});
+			return renderChapter(chapterProps, state_0);
+		};
+		$[27] = getChapterState;
+		$[28] = renderChapter;
+		$[29] = t6;
+	} else t6 = $[29];
+	let t7;
+	if ($[30] !== max || $[31] !== props || $[32] !== ranges || $[33] !== ref || $[34] !== t3 || $[35] !== t4 || $[36] !== t5 || $[37] !== t6) {
+		t7 = /* @__PURE__ */ jsx(SliderSegments, {
+			ref,
+			...props,
+			className: t3,
+			style: t4,
+			render: t5,
+			ranges,
+			min: 0,
+			max,
+			renderSegment: t6
+		});
+		$[30] = max;
+		$[31] = props;
+		$[32] = ranges;
+		$[33] = ref;
+		$[34] = t3;
+		$[35] = t4;
+		$[36] = t5;
+		$[37] = t6;
+		$[38] = t7;
+	} else t7 = $[38];
+	return t7;
 });
+function _temp() {
+	return new TimeSliderChaptersCore();
+}
 //#endregion
 export { TimeSliderChapters };
 

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

@@ -1 +1 @@
-{"version":3,"file":"chapters.js","names":[],"sources":["../../../../src/ui/time-slider/chapters.tsx"],"sourcesContent":["import {\n  type SliderSegmentState,\n  TimeSliderChapterCSSVars,\n  TimeSliderChapterDataAttrs,\n  type TimeSliderChapterRange,\n  TimeSliderChaptersCore,\n} from '@videojs/core';\nimport { getStateDataAttrs, selectBuffer, selectTextTrack, selectTime } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement } from 'react';\nimport { forwardRef, useMemo, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { SliderSegments } from './segments';\n\nexport type TimeSliderChapterState = TimeSliderChaptersCore.State;\n\nexport interface TimeSliderChaptersState {\n  /** Normalized ranges spanning the full slider domain. */\n  chapters: readonly TimeSliderChapterRange[];\n}\n\nexport interface TimeSliderChaptersProps extends Omit<UIComponentProps<'div', TimeSliderChaptersState>, 'children'> {\n  /** Render one consumer-owned subtree for every normalized chapter range. */\n  renderChapter: (props: Omit<HTMLProps<HTMLElement>, 'ref'>, state: TimeSliderChapterState) => ReactElement;\n}\n\n/** Renders normalized chapter ranges across the full slider, including one full range when chapter cues are absent. */\nexport const TimeSliderChapters = forwardRef<HTMLDivElement, TimeSliderChaptersProps>(\n  function TimeSliderChapters(componentProps, ref) {\n    const { renderChapter, className, style, render, ...props } = componentProps;\n    const textTrack = usePlayer(selectTextTrack);\n    const buffer = usePlayer(selectBuffer);\n    const time = usePlayer(selectTime);\n    const duration = time?.duration ?? 0;\n    const [core] = useState(() => new TimeSliderChaptersCore());\n    const { chapters, ranges, max } = useMemo(\n      () => core.getRanges(textTrack?.chaptersCues ?? [], 0, duration),\n      [core, textTrack?.chaptersCues, duration]\n    );\n    const bufferedEnd = buffer?.buffered.length ? buffer.buffered[buffer.buffered.length - 1]![1] : 0;\n    const getChapterState = (segment: SliderSegmentState) => core.getState(segment, chapters, bufferedEnd);\n    const state = useMemo(() => ({ chapters }), [chapters]);\n\n    return (\n      <SliderSegments\n        ref={ref}\n        {...props}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (renderProps) => render(renderProps, state) : render}\n        ranges={ranges}\n        min={0}\n        max={max}\n        renderSegment={(segmentProps, segment) => {\n          const state = getChapterState(segment);\n          const chapterProps = {\n            ...segmentProps,\n            ...getStateDataAttrs(state, TimeSliderChapterDataAttrs),\n            style: {\n              ...segmentProps.style,\n              pointerEvents: state.cue ? undefined : 'none',\n              [TimeSliderChapterCSSVars.buffer]: `${state.bufferPercent}%`,\n            } as CSSProperties,\n          };\n\n          return renderChapter(chapterProps, state);\n        }}\n      />\n    );\n  }\n);\n\nexport namespace TimeSliderChapters {\n  export type Props = TimeSliderChaptersProps;\n  export type State = TimeSliderChaptersState;\n}\n"],"mappings":";;;;;;;;;AA6BA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,gBAAgB,KAAK;CAC/C,MAAM,EAAE,eAAe,WAAW,OAAO,QAAQ,GAAG,UAAU;CAC9D,MAAM,YAAY,UAAU,eAAe;CAC3C,MAAM,SAAS,UAAU,YAAY;CAErC,MAAM,WADO,UAAU,UACH,CAAC,EAAE,YAAY;CACnC,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;CAC1D,MAAM,EAAE,UAAU,QAAQ,QAAQ,cAC1B,KAAK,UAAU,WAAW,gBAAgB,CAAC,GAAG,GAAG,QAAQ,GAC/D;EAAC;EAAM,WAAW;EAAc;CAAQ,CAC1C;CACA,MAAM,cAAc,QAAQ,SAAS,SAAS,OAAO,SAAS,OAAO,SAAS,SAAS,EAAE,CAAE,KAAK;CAChG,MAAM,mBAAmB,YAAgC,KAAK,SAAS,SAAS,UAAU,WAAW;CACrG,MAAM,QAAQ,eAAe,EAAE,SAAS,IAAI,CAAC,QAAQ,CAAC;CAEtD,OACE,oBAAC,gBAAD;EACO;EACL,GAAI;EACJ,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,gBAAgB,OAAO,aAAa,KAAK,IAAI;EACnE;EACR,KAAK;EACA;EACL,gBAAgB,cAAc,YAAY;GACxC,MAAM,QAAQ,gBAAgB,OAAO;GACrC,MAAM,eAAe;IACnB,GAAG;IACH,GAAG,kBAAkB,OAAO,0BAA0B;IACtD,OAAO;KACL,GAAG,aAAa;KAChB,eAAe,MAAM,MAAM,KAAA,IAAY;MACtC,yBAAyB,SAAS,GAAG,MAAM,cAAc;IAC5D;GACF;GAEA,OAAO,cAAc,cAAc,KAAK;EAC1C;CACD,CAAA;AAEL,CACF"}
+{"version":3,"file":"chapters.js","names":["() => new TimeSliderChaptersCore()","core.getRanges(textTrack?.chaptersCues ?? [], 0, duration)","chaptersCues","textTrack?.chaptersCues ?? []","useMemo(\n      () => core.getRanges(textTrack?.chaptersCues ?? [], 0, duration),\n      [core, textTrack?.chaptersCues, duration]\n    )","(segment: SliderSegmentState) => core.getState(segment, chapters, bufferedEnd)","{ chapters }","useMemo(() => ({ chapters }), [chapters])","isFunction(className) ? className(state) : className","isFunction(style) ? style(state) : style","isFunction(render) ? (renderProps) => render(renderProps, state) : render","(segmentProps, segment) => {\n          const state = getChapterState(segment);\n          const chapterProps = {\n            ...segmentProps,\n            ...getStateDataAttrs(state, TimeSliderChapterDataAttrs),\n            style: {\n              ...segmentProps.style,\n              pointerEvents: state.cue ? undefined : 'none',\n              [TimeSliderChapterCSSVars.buffer]: `${state.bufferPercent}%`,\n            } as CSSProperties,\n          };\n\n          return renderChapter(chapterProps, state);\n        }","state","segment","<SliderSegments\n        ref={ref}\n        {...props}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (renderProps) => render(renderProps, state) : render}\n        ranges={ranges}\n        min={0}\n        max={max}\n        renderSegment={(segmentProps, segment) => {\n          const state = getChapterState(segment);\n          const chapterProps = {\n            ...segmentProps,\n            ...getStateDataAttrs(state, TimeSliderChapterDataAttrs),\n            style: {\n              ...segmentProps.style,\n              pointerEvents: state.cue ? undefined : 'none',\n              [TimeSliderChapterCSSVars.buffer]: `${state.bufferPercent}%`,\n            } as CSSProperties,\n          };\n\n          return renderChapter(chapterProps, state);\n        }}\n      />"],"sources":["../../../../src/ui/time-slider/chapters.tsx"],"sourcesContent":["import {\n  type SliderSegmentState,\n  TimeSliderChapterCSSVars,\n  TimeSliderChapterDataAttrs,\n  type TimeSliderChapterRange,\n  TimeSliderChaptersCore,\n} from '@videojs/core';\nimport { getStateDataAttrs, selectBuffer, selectTextTrack, selectTime } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement } from 'react';\nimport { forwardRef, useMemo, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { SliderSegments } from './segments';\n\nexport type TimeSliderChapterState = TimeSliderChaptersCore.State;\n\nexport interface TimeSliderChaptersState {\n  /** Normalized ranges spanning the full slider domain. */\n  chapters: readonly TimeSliderChapterRange[];\n}\n\nexport interface TimeSliderChaptersProps extends Omit<UIComponentProps<'div', TimeSliderChaptersState>, 'children'> {\n  /** Render one consumer-owned subtree for every normalized chapter range. */\n  renderChapter: (props: Omit<HTMLProps<HTMLElement>, 'ref'>, state: TimeSliderChapterState) => ReactElement;\n}\n\n/** Renders normalized chapter ranges across the full slider, including one full range when chapter cues are absent. */\nexport const TimeSliderChapters = forwardRef<HTMLDivElement, TimeSliderChaptersProps>(\n  function TimeSliderChapters(componentProps, ref) {\n    const { renderChapter, className, style, render, ...props } = componentProps;\n    const textTrack = usePlayer(selectTextTrack);\n    const buffer = usePlayer(selectBuffer);\n    const time = usePlayer(selectTime);\n    const duration = time?.duration ?? 0;\n    const [core] = useState(() => new TimeSliderChaptersCore());\n    const { chapters, ranges, max } = useMemo(\n      () => core.getRanges(textTrack?.chaptersCues ?? [], 0, duration),\n      [core, textTrack?.chaptersCues, duration]\n    );\n    const bufferedEnd = buffer?.buffered.length ? buffer.buffered[buffer.buffered.length - 1]![1] : 0;\n    const getChapterState = (segment: SliderSegmentState) => core.getState(segment, chapters, bufferedEnd);\n    const state = useMemo(() => ({ chapters }), [chapters]);\n\n    return (\n      <SliderSegments\n        ref={ref}\n        {...props}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (renderProps) => render(renderProps, state) : render}\n        ranges={ranges}\n        min={0}\n        max={max}\n        renderSegment={(segmentProps, segment) => {\n          const state = getChapterState(segment);\n          const chapterProps = {\n            ...segmentProps,\n            ...getStateDataAttrs(state, TimeSliderChapterDataAttrs),\n            style: {\n              ...segmentProps.style,\n              pointerEvents: state.cue ? undefined : 'none',\n              [TimeSliderChapterCSSVars.buffer]: `${state.bufferPercent}%`,\n            } as CSSProperties,\n          };\n\n          return renderChapter(chapterProps, state);\n        }}\n      />\n    );\n  }\n);\n\nexport namespace TimeSliderChapters {\n  export type Props = TimeSliderChaptersProps;\n  export type State = TimeSliderChaptersState;\n}\n"],"mappings":"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"}

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

@@ -8,19 +8,24 @@ import { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
 import { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from "@videojs/core/dom";
 import { hasTimeRange } from "@videojs/media";
 import { translateText } from "@videojs/core/i18n";
+import { c } from "react-compiler-runtime";
 import { forwardRef, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { formatTime } from "@videojs/utils/time";
 //#region src/ui/time-slider/root.tsx
 const noopSeek = () => Promise.resolve(0);
 const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwardedRef) {
-	const { render, className, style, label, changeThrottle = TimeSliderCore.defaultProps.changeThrottle, step = TimeSliderCore.defaultProps.step, largeStep = TimeSliderCore.defaultProps.largeStep, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, pauseOnDrag, ...elementProps } = componentProps;
+	const $ = c(69);
+	const { render, className, style, label, changeThrottle: t0, step: t1, largeStep: t2, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, pauseOnDrag, ...elementProps } = componentProps;
+	const changeThrottle = t0 === void 0 ? TimeSliderCore.defaultProps.changeThrottle : t0;
+	const step = t1 === void 0 ? TimeSliderCore.defaultProps.step : t1;
+	const largeStep = t2 === void 0 ? TimeSliderCore.defaultProps.largeStep : t2;
 	const time = usePlayer(selectTime);
 	const buffer = usePlayer(selectBuffer);
 	const playback = usePlayer(selectPlayback);
 	const translator = useTranslator();
 	const locale = useLocale();
-	const [core] = useState(() => new TimeSliderCore());
+	const [core] = useState(_temp);
 	core.setProps({
 		label,
 		step,
@@ -32,18 +37,41 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 		changeThrottle
 	});
 	core.setFormatLocale(locale);
-	const mediaRef = useLatestRef(time && buffer ? {
-		...time,
-		...buffer
-	} : null);
+	let t3;
+	if ($[0] !== buffer || $[1] !== time) {
+		t3 = time ? {
+			...time,
+			...buffer ?? {
+				buffered: [],
+				seekable: []
+			}
+		} : null;
+		$[0] = buffer;
+		$[1] = time;
+		$[2] = t3;
+	} else t3 = $[2];
+	const media = t3;
+	const mediaRef = useLatestRef(media);
 	const playbackRef = useLatestRef(playback);
-	useEffect(() => {
-		return () => core.endDrag(playbackRef.current);
-	}, [core]);
-	const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
-		computeState: (input) => {
+	let t4;
+	if ($[3] !== core || $[4] !== playbackRef) {
+		t4 = () => () => core.endDrag(playbackRef.current);
+		$[3] = core;
+		$[4] = playbackRef;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== core) {
+		t5 = [core];
+		$[6] = core;
+		$[7] = t5;
+	} else t5 = $[7];
+	useEffect(t4, t5);
+	let t6;
+	if ($[8] !== core || $[9] !== media) {
+		t6 = (input) => {
 			core.setInput(input);
-			if (!time || !buffer) core.setMedia({
+			core.setMedia(media ?? {
 				currentTime: 0,
 				duration: 0,
 				seeking: false,
@@ -51,78 +79,201 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 				buffered: [],
 				seekable: []
 			});
-			else core.setMedia({
-				...time,
-				...buffer
-			});
 			return core.getState();
-		},
-		getPercent: () => core.percentFromValue(time?.currentTime ?? 0),
-		getStepPercent: () => core.getStepPercent(),
-		getLargeStepPercent: () => core.getLargeStepPercent(),
-		orientation,
-		disabled: disabled || !time || !buffer || !hasTimeRange({
-			...time,
-			...buffer
-		}),
-		changeThrottle,
-		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
-		getCSSVars: getTimeSliderCSSVars,
-		onValueCommit: (percent) => {
-			const media = mediaRef.current;
-			if (media) media.seek(core.rawValueFromPercent(percent));
-		},
-		onDragStart: () => {
+		};
+		$[8] = core;
+		$[9] = media;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== core || $[12] !== time?.currentTime) {
+		t7 = () => core.percentFromValue(time?.currentTime ?? 0);
+		$[11] = core;
+		$[12] = time?.currentTime;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	let t9;
+	if ($[14] !== core) {
+		t8 = () => core.getStepPercent();
+		t9 = () => core.getLargeStepPercent();
+		$[14] = core;
+		$[15] = t8;
+		$[16] = t9;
+	} else {
+		t8 = $[15];
+		t9 = $[16];
+	}
+	let t10;
+	if ($[17] !== disabled || $[18] !== media) {
+		t10 = disabled || !media || !hasTimeRange(media);
+		$[17] = disabled;
+		$[18] = media;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== core) {
+		t11 = (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize);
+		$[20] = core;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== core || $[23] !== mediaRef) {
+		t12 = (percent) => {
+			const media_0 = mediaRef.current;
+			if (media_0) media_0.seek(core.rawValueFromPercent(percent));
+		};
+		$[22] = core;
+		$[23] = mediaRef;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== core || $[26] !== onDragStart || $[27] !== playbackRef) {
+		t13 = () => {
 			core.startDrag(playbackRef.current);
 			onDragStart?.();
-		},
-		onDragEnd: () => {
+		};
+		$[25] = core;
+		$[26] = onDragStart;
+		$[27] = playbackRef;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== core || $[30] !== onDragEnd || $[31] !== playbackRef) {
+		t14 = () => {
 			core.endDrag(playbackRef.current);
 			onDragEnd?.();
-		}
-	});
+		};
+		$[29] = core;
+		$[30] = onDragEnd;
+		$[31] = playbackRef;
+		$[32] = t14;
+	} else t14 = $[32];
+	let t15;
+	if ($[33] !== changeThrottle || $[34] !== orientation || $[35] !== t10 || $[36] !== t11 || $[37] !== t12 || $[38] !== t13 || $[39] !== t14 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9) {
+		t15 = {
+			computeState: t6,
+			getPercent: t7,
+			getStepPercent: t8,
+			getLargeStepPercent: t9,
+			orientation,
+			disabled: t10,
+			changeThrottle,
+			adjustPercent: t11,
+			getCSSVars: getTimeSliderCSSVars,
+			onValueCommit: t12,
+			onDragStart: t13,
+			onDragEnd: t14
+		};
+		$[33] = changeThrottle;
+		$[34] = orientation;
+		$[35] = t10;
+		$[36] = t11;
+		$[37] = t12;
+		$[38] = t13;
+		$[39] = t14;
+		$[40] = t6;
+		$[41] = t7;
+		$[42] = t8;
+		$[43] = t9;
+		$[44] = t15;
+	} else t15 = $[44];
+	const { state, input: input_0, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider(t15);
 	if (!time) {
 		logMissingFeature("TimeSlider", "time");
 		return null;
 	}
-	return /* @__PURE__ */ jsx(SliderProvider, {
-		value: {
+	const T0 = SliderProvider;
+	let t16;
+	if ($[45] !== core || $[46] !== state.pointerPercent) {
+		t16 = core.rawValueFromPercent(state.pointerPercent);
+		$[45] = core;
+		$[46] = state.pointerPercent;
+		$[47] = t16;
+	} else t16 = $[47];
+	let t17;
+	if ($[48] !== core) {
+		t17 = (percent_0) => core.rawValueFromPercent(percent_0);
+		$[48] = core;
+		$[49] = t17;
+	} else t17 = $[49];
+	let t18;
+	if ($[50] !== core || $[51] !== translator) {
+		t18 = (sliderState) => {
+			const attrs = core.getAttrs(sliderState);
+			return {
+				...attrs,
+				"aria-label": translateText(attrs["aria-label"], translator),
+				"aria-valuetext": translateText(attrs["aria-valuetext"], translator, core.getValueTextParams(sliderState))
+			};
+		};
+		$[50] = core;
+		$[51] = translator;
+		$[52] = t18;
+	} else t18 = $[52];
+	let t19;
+	if ($[53] !== locale || $[54] !== state.duration) {
+		t19 = (value) => formatTime(value, state.duration, { locale });
+		$[53] = locale;
+		$[54] = state.duration;
+		$[55] = t19;
+	} else t19 = $[55];
+	let t20;
+	if ($[56] !== input_0 || $[57] !== state || $[58] !== t16 || $[59] !== t17 || $[60] !== t18 || $[61] !== t19 || $[62] !== thumbProps || $[63] !== thumbRef) {
+		t20 = {
 			state,
-			pointerValue: core.rawValueFromPercent(state.pointerPercent),
-			input,
-			getPointerValue: (percent) => core.rawValueFromPercent(percent),
+			pointerValue: t16,
+			input: input_0,
+			getPointerValue: t17,
 			thumbRef,
 			thumbProps,
 			stateAttrMap: TimeSliderDataAttrs,
-			getAttrs: (sliderState) => {
-				const attrs = core.getAttrs(sliderState);
-				return {
-					...attrs,
-					"aria-label": translateText(attrs["aria-label"], translator),
-					"aria-valuetext": translateText(attrs["aria-valuetext"], translator, core.getValueTextParams(sliderState))
-				};
-			},
-			formatValue: (value) => formatTime(value, state.duration, { locale })
-		},
-		children: renderElement("div", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			stateAttrMap: TimeSliderDataAttrs,
-			ref: [forwardedRef, rootRef],
-			props: [
-				{ style: {
-					...cssVars,
-					...rootStyle
-				} },
-				rootProps,
-				elementProps
-			]
-		})
+			getAttrs: t18,
+			formatValue: t19
+		};
+		$[56] = input_0;
+		$[57] = state;
+		$[58] = t16;
+		$[59] = t17;
+		$[60] = t18;
+		$[61] = t19;
+		$[62] = thumbProps;
+		$[63] = thumbRef;
+		$[64] = t20;
+	} else t20 = $[64];
+	const t21 = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: TimeSliderDataAttrs,
+		ref: [forwardedRef, rootRef],
+		props: [
+			{ style: {
+				...cssVars,
+				...rootStyle
+			} },
+			rootProps,
+			elementProps
+		]
 	});
+	let t22;
+	if ($[65] !== T0 || $[66] !== t20 || $[67] !== t21) {
+		t22 = /* @__PURE__ */ jsx(T0, {
+			value: t20,
+			children: t21
+		});
+		$[65] = T0;
+		$[66] = t20;
+		$[67] = t21;
+		$[68] = t22;
+	} else t22 = $[68];
+	return t22;
 });
+function _temp() {
+	return new TimeSliderCore();
+}
 //#endregion
 export { TimeSliderRoot };