react-subtitle-editor

A React component for adjust subtitles and synchronize easier

Install

npm i react-subtitle-editor

Try it

Demo

Usage

import React from "react";
import Timeline from "react-subtitle-editor";

function App() {
  const mediaRef = useRef(); //access audio/video element.
  const data = [{ begin: 25, end: 35, text: "This is subtitle" }];

  return (
    <div>
      <Timeline
        changeAreaShow={(start, end) => {}}
        changeZoomLevel={(zoomLevel) => {}}
        changeShift={(shift) => {}}
        setAligns={(alignments) => {}}
        audioRef={mediaRef}
        src={"..."}
        data={data}
        autoScroll
        colors={{
          background: "transparent",
          box: "#a9a9a9",
          boxHover: "#80add6",
          selectedBox: "#1890ff",
          playingBox: "#f0523f",
          text: "#212b33",
          selectedText: "white",
          tooltipBackground: "#474e54",
          tooltipText: "white",
          scrollBarBackground: "#f1f3f9",
          scrollBar: "#c2c9d6",
          scrollBarHover: "#8f96a3",
        }}
      />

      <button onClick={() => audioRef.current.play()}>play</button>
      <button onClick={() => audioRef.current.pause()}>pause</button>
    </div>
  );
}

Props

| Prop | Type | Description | | --------------- | ---------------------------------------------- | ----------------------------------------------- | | paddingLeft | Number | padding left. | | paddingRight | Number | padding right. | | data | [{ begin: Number, end: Number, text: String }] | Alignments data (begin and end unit is second). | | src | String | Video or audio source. | | audioRef | React.RefObject | Video or audio ref. | | changeAreaShow | Function | Callback when viewport changed. | | changeZoomLevel | Function | Callback when zoom level changed. | | changeShift | Function | Callback when shift changed. | | setAligns | Function | Callback when data times changed. | | colors | Object | Colors object (see example). |

Contributing

coming soon