feat: add a solution for React preview time display

[luwes]

demo: https://vjs-10-demo-react-git-preview-time-mux.vercel.app/?skin=default

There's many ways to go about this. I didn't like the idea of coupling the preview time or any preview feature too closely to the time slider. Made it possible to use this with a regular Tooltip component with an added option trackCursorAxis.

          <Tooltip.Root trackCursorAxis="x">
            <Tooltip.Trigger>
              <TimeSlider.Root className={styles.SliderRoot}>
                <TimeSlider.Track className={styles.SliderTrack}>
                  <TimeSlider.Progress className={styles.SliderProgress} />
                  <TimeSlider.Pointer className={styles.SliderPointer} />
                </TimeSlider.Track>
                <TimeSlider.Thumb className={styles.SliderThumb} />
              </TimeSlider.Root>
            </Tooltip.Trigger>
            <Tooltip.Portal>
              <Tooltip.Positioner side="top" sideOffset={18} collisionPadding={12}>
                <Tooltip.Popup className={`${styles.TooltipPopup}`}>
                  <PreviewTimeDisplay />
                </Tooltip.Popup>
              </Tooltip.Positioner>
            </Tooltip.Portal>
          </Tooltip.Root>

---

This pull request introduces support for previewing the time when hovering or interacting with the time slider, enabling features like displaying a tooltip with the previewed time. The main changes include expanding the state and actions for the time slider, adding a new preview time display component, and updating the media store and tooltip logic to support these features.

Time Slider Preview Functionality:

• Added a previewTime state and requestPreview method to the TimeSliderState and connected them to pointer movement in the TimeSlider component, enabling tracking of the time under the pointer for preview purposes. [1] [2] [3]
• Updated the media store's state mediator, factory, and initialization logic to support the new previewTime property, including a new preview state mediator and associated action handling. [1] [2] [3] [4] [5] [6] [7]

Preview Time Display Component:

• Introduced a new state definition for preview time display and exported it from the media store, allowing UI components to consume and display the previewed time. [1] [2]
• Added a new PreviewTimeDisplay React component, including its state hook and rendering logic, to display the formatted preview time in the UI.

Tooltip Enhancements:

• Enhanced the tooltip system to support tracking the cursor axis (x, y, or both) for scenarios like time slider tooltips, including new props and integration with the floating UI logic. [1] [2] [3] [4] [5] [6] [7]

React Component Improvements:

• Improved TimeSlider and related components to better support refs and composed refs, and made minor type improvements for props and state. [1] [2] [3] [4]
• Cleaned up and clarified types in CurrentTimeDisplay for consistency. [1] [2] [3]

These changes collectively enable a richer, more interactive time slider experience, supporting features like preview tooltips and improved accessibility.

References: [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26] [27]

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
vjs-10-demo-html	Error			Oct 13, 2025 5:46pm
vjs-10-demo-react	Error			Oct 13, 2025 5:46pm
vjs-10-website	Ready	Preview	Comment	Oct 13, 2025 5:46pm

[Copilot]

Pull Request Overview

Adds time preview functionality to the TimeSlider component, allowing users to preview the time at the cursor position when hovering over the slider. This feature is implemented with a new PreviewTimeDisplay component and enhanced Tooltip system that can track cursor position.

• Added preview time state management to media store with new preview mediator
• Created PreviewTimeDisplay component for showing previewed time in tooltips
• Enhanced Tooltip component with cursor tracking capabilities

Reviewed Changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/react/react/src/utils/component-factory.tsx	Improved ref handling and component type definitions
packages/react/react/src/skins/default/styles.ts	Added background color to SliderPointer for visual consistency
packages/react/react/src/skins/default/MediaSkinDefault.tsx	Integrated preview tooltip with TimeSlider component
packages/react/react/src/index.ts	Added PreviewTimeDisplay to public exports
packages/react/react/src/components/Tooltip.tsx	Added cursor tracking functionality for tooltips
packages/react/react/src/components/TimeSlider.tsx	Enhanced with ref composition and prop types
packages/react/react/src/components/PreviewTimeDisplay.tsx	New component for displaying preview time
packages/react/react/src/components/CurrentTimeDisplay.tsx	Cleaned up type definitions for consistency
packages/core/media-store/src/state-mediators/preview.ts	New preview state mediator for handling preview time
packages/core/media-store/src/state-mediators/index.ts	Added preview mediator to exports
packages/core/media-store/src/media-store.ts	Integrated preview mediator into default store
packages/core/media-store/src/index.ts	Added preview time display to exports
packages/core/media-store/src/factory.ts	Enhanced factory to support preview state and action handling
packages/core/media-store/src/component-state-definitions/time-slider.ts	Added preview time state and request method
packages/core/media-store/src/component-state-definitions/preview-time-display.ts	New state definition for preview time display
packages/core/core/src/components/time-slider.ts	Added preview time dispatching on pointer movement

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}