time-slider

import { TimeSlider } from '@videojs/react-preview';
import styles from './TimeSlider.module.css';

/**
 * Basic TimeSlider example demonstrating:
 * - Progress and pointer visualization
 * - Horizontal orientation
 * - CSS Modules for scoped styling
 * - Data attribute selectors for state-based styling
 *
 * Note: This component must be used within a VideoProvider context.
 * See the usage example in the documentation.
 */
export function BasicTimeSlider() {
  return (
    <TimeSlider.Root className={styles.root} orientation="horizontal">
      <TimeSlider.Track className={styles.track}>
        <TimeSlider.Progress className={styles.progress} />
        <TimeSlider.Pointer className={styles.pointer} />
      </TimeSlider.Track>
      <TimeSlider.Thumb className={styles.thumb} />
    </TimeSlider.Root>
  );
}

.root {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Horizontal orientation */
.root[data-orientation='horizontal'] {
  width: 100%;
  min-width: 100px;
  height: 20px;
}

/* Vertical orientation */
.root[data-orientation='vertical'] {
  width: 20px;
  height: 100px;
  flex-direction: column;
}

.track {
  position: relative;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  overflow: hidden;
}

/* Horizontal track */
.track[data-orientation='horizontal'] {
  width: 100%;
  height: 0.375rem;
}

/* Vertical track */
.track[data-orientation='vertical'] {
  width: 0.375rem;
  height: 100%;
}

.progress {
  background-color: #007bff;
  border-radius: inherit;
  position: absolute;
}

.pointer {
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  pointer-events: none;
}

.thumb {
  width: 0.75rem;
  height: 0.75rem;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 150ms ease;
}

.thumb:hover {
  transform: scale(1.2);
}

<media-time-slider orientation="horizontal">
  <media-time-slider-track>
    <media-time-slider-progress></media-time-slider-progress>
    <media-time-slider-pointer></media-time-slider-pointer>
  </media-time-slider-track>
  <media-time-slider-thumb></media-time-slider-thumb>
</media-time-slider>

<media-time-slider orientation="vertical">
  <media-time-slider-track>
    <media-time-slider-progress></media-time-slider-progress>
    <media-time-slider-pointer></media-time-slider-pointer>
  </media-time-slider-track>
  <media-time-slider-thumb></media-time-slider-thumb>
</media-time-slider>

media-time-slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Horizontal orientation */
media-time-slider[data-orientation='horizontal'] {
  width: 100%;
  min-width: 100px;
  height: 20px;
}

/* Vertical orientation */
media-time-slider[data-orientation='vertical'] {
  width: 20px;
  height: 100px;
  flex-direction: column;
}

media-time-slider-track {
  position: relative;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  overflow: hidden;
}

/* Horizontal track */
media-time-slider-track[data-orientation='horizontal'] {
  width: 100%;
  height: 0.375rem;
}

/* Vertical track */
media-time-slider-track[data-orientation='vertical'] {
  width: 0.375rem;
  height: 100%;
}

media-time-slider-progress {
  background-color: #007bff;
  border-radius: inherit;
  position: absolute;
}

media-time-slider-pointer {
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  pointer-events: none;
}

media-time-slider-thumb {
  width: 0.75rem;
  height: 0.75rem;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 150ms ease;
}

media-time-slider:hover media-time-slider-thumb {
  transform: scale(1.2);
}