Building timeline for video editor using React JS

Question

Especially looking for an idea or way around to achieve this.

I am trying to build a video editor/mixture as in the above image using react js. This UI primarily targets to align different video/image media with timelines. As user drag video/image in any of the layer, it just needs to expand or shrink with time scale.

Three screens are for three different videos. A feature like a crop/split is not required. This UI collect information and send it to the server which will do the rest of the processing. Required contents are already on our servers.

Any solution/possible direction on collecting media information drag into layers with the time scale on the top ?. What are the best resources to achieve this UI using React JS?

Answer 1

You should be using timeline of vis.js with the following options :

  var start = new Date(1970, 0, 1, 0, 0, 0, 0);
  var end = new Date(1970, 00, 01, 0, 1, 0, 0);

  var options = {
      zoomKey: "ctrlKey",
      horizontalScroll: true,
      verticalScroll: true,
      orientation: "top",
      moveable: true,
      zoomable : true,
      editable: true,
      min: start,
      max: end,
      start: start,
      end: end,
      zoomMax: 10000000,
      zoomMin: 1000,
      stack:false,
      showCurrentTime: true,
      multiselect: true,
      multiselectPerGroup: true,
  };

This will give you a multiline scrollable (both horizontal and vertical) sliding timeline which is the basis of a video editor.