cctv-video-bar

A highly customizable React timeline component for CCTV video playback. Visualize and navigate through recorded video segments with an interactive scrollable timeline.

Installation

npm install cctv-video-bar

CSS Setup

Create a CSS file with the following classes and import it in your root file:

.timeline-container::-webkit-scrollbar {
  display: none;
}

.timeline-container::-webkit-scrollbar {
  height: 0px !important;
  width: 1px !important;
}

.timeline-container:hover::-webkit-scrollbar {
  display: block;
}

Usage

import {ProgressScale} from 'cctv-video-bar'

const App = () => {
  const [currentTime,setCurrentTime]=useState(0)

    const segments = [[
    { startTime: "12:00am", endTime: "12:01am" },
    { start_time: "01:46:58", end_time: "02:47:13" }, 
    { start_time: "03:06:58", end_time: "05:04:13" },// <================Currently, we accept three different time formats.
    { start_time: new Date(), end_time: new Date() },// <================Currently, we accept three different time formats.
    { start_time: "2025-05-31 08:38:51", end_time: "2025-05-31 08:43:52" },// <=========Currently, we accept three different time formats.
    ],[
    { startTime: "12:00am", endTime: "12:01am" },
    { start_time: "01:46:58", end_time: "02:47:13" }, 
    { start_time: "03:06:58", end_time: "05:04:13" },
    { start_time: new Date(), end_time: new Date() },
    { start_time: "2025-05-31 08:38:51", end_time: "2025-05-31 08:43:52" },
    ],
    [
    { startTime: "12:00am", endTime: "12:01am" },
    { start_time: "01:46:58", end_time: "02:47:13" }, 
    { start_time: "03:06:58", end_time: "05:04:13" },
    { start_time: new Date(), end_time: new Date() }
    { start_time: "2025-05-31 08:38:51", end_time: "2025-05-31 08:43:52" },
    ]];

  return (
    <ProgressScaleBar
      segmentHeight={60}
      onTimeChange={setCurrentTime}
      value={currentTime}
      containerStyle={{}}
      midLineStyle={{}}
      timeTextStyle={{}}
      timeTextContainerStyle={{}}
      barStyle={{}}
      emptyBarColor="#d1d5db"
      scrollContainerStyle={{}}
      maxWidth="100%"
      scrollbarHeight={10}
      scrollbarStyle={{}}
      scrollbarSegmentStyle={{}}
      viewportIndicatorStyle={{}}
      timeVisibility={true}
      segments={segments}
      tickIntervalFont={12}
      tickIntervalTextColor="#555"
    />
  );
};

Props

| Prop | Type | Description | | ------------------------ | --------------------------------- | ----------------------------------------------------------- | | segmentHeight | number | The height of each segment in pixels. | | onTimeChange | (timeInSeconds: number) => void | Callback fired when the user navigates to a different time. | | value | number | The currently selected time in seconds. | | containerStyle | React.CSSProperties | Styles for the outer container. | | midLineStyle | React.CSSProperties | Styles for the midline indicator. | | timeTextStyle | React.CSSProperties | Styles for the time labels. | | timeTextContainerStyle | React.CSSProperties | Styles for the container holding the time labels. | | barStyle | React.CSSProperties | Styles for the video segment bar. | | emptyBarColor | string | Color for the empty portions of the timeline. | | scrollContainerStyle | React.CSSProperties | Styles for the scrollable area. | | maxWidth | string | Maximum width for the timeline. | | scrollbarHeight | number | Height of the scrollbar. | | scrollbarStyle | React.CSSProperties | Styles for the scrollbar. | | scrollbarSegmentStyle | React.CSSProperties | Styles for the scrollbar segments. | | viewportIndicatorStyle | React.CSSProperties | Styles for the viewport indicator. | | timeVisibility | boolean | Toggle visibility of time labels. | | segments | VideoSegmentInput[][] | An array of video segment inputs. | | tickIntervalFont | number | Font size for tick interval text. | | tickIntervalTextColor | string | Color for tick interval text. |

License

This project is licensed under the MIT License.