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>
  );
}