CODEWITHSUNDEEP
reactjstimeline
mhnpd
mhnpd

Reputation: 391

Building timeline for video editor using React JS

enter image description here

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?

Upvotes: 10

Views: 4921

Answers (2)

london_utku
london_utku

Reputation: 1312

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.

Upvotes: 2

Ivan Bravo
Ivan Bravo

Reputation: 1

I suggest your timeLine component to have a module and scale both provided by its father component. The nested divs have their own module length, but not scale, and the same happens with the timeLine component. So, you only talk about modules length. Then i.e. you set the equivalence 1 module = 50px

I hope this help you!

Upvotes: 0

Related Questions