React component to preview paper-cuts in paper-edits

[pietrop]

Is your feature request related to a problem? Please describe.

As part of the Paper-edit view

As a user, I want to be able to get (watch or listen to) a preview of the paper-edit/program script so that I can see how my program's paper-cuts (transcripts text selections) will "render" as audio and/or video.

In the sketch, this would be the "canvas" - borrowing terminology from to the NLE video editors distinction between preview and canvas

Describe the solution you'd like

A React component that takes a sequence of audio or video clips as an input, with start and end time, and displays a player that can

• Seamlessly play this EDL (edit decision list) without buffer or load time in between clips
• Has player controls, such as
  • progress bar
  • play/pause
  • stop

Note that the component should be able to generate the preview if the sequence is made of audio, video or a mix of audio and video files.

In first version it could just deal with sequences of media, but it be good if in subsequent versions it could handle things like text, titles (as a possible way to display place holders for voice over text?) - this second part needs to be flashed out more. But the general thing to keep in mind is the extensibility of the elements to display, if that makes sense.

bbc/VideoContext

Main option considered is to use bbc/VideoContext within a React component.

See this issue for more details on how it works with an EDL(Edit Decision List) sequence of clips bbc/VideoContext#42

There are other examples and indications in the repo on how to enable, play, pause, and a progress bar.

I think under the hood, Video Context, used the HTML5 canvas to concat the videos in the sequence and then provides a unified interface to treat it as a single media.

Describe alternatives you've considered

Vanilla Js

in autoedit2, paper-editing because the files are stored locally, there's no network buffer issue when loading the different clips so used a vanilla js implementation that you can see in this js fiddle
This also uses media fragments to only get the specific segment.

BBC Video compositor

html5-video-compositor was a precoursor of bbc/VideoContext, now deprecated.

• https://github.com/bbc/html5-video-compositor/wiki/Quick-Start-Guide
• https://github.com/bbc/html5-video-compositor/wiki/Playlists

Popcorn JS

Popcorn js was a library by Mozilla, but is no longer mantained.
There was a JSfiddle with an example but
it's not working, coz no popcorn js CDN url is not valid.

The Documentation shows what the sequence function used to do

Hyperaud.io

Hyperaud.io was one of the first project to experiment with the idea of Hypertranscripts
and you can see in the hyperaud.io pad how you can mix from multiple selections and then get a preview.

I think under the hood two HTML5 video elements are cued up one after the other as a workaround to reduce load time of the media.

Additional context

For preview videos you could use two or more Ted Talks

• https://download.ted.com/talks/KateDarling_2018S-950k.mp4

[pietrop]

Another EDL representation to look at is from Edl Composer npm, github used by autoEdit2 and available as separate module.

[pietrop]

Example of progress bar in video context

• demo
• code at line #L47
• InitVisualisations

[melnyczuk]

Are there any designs for this component so I can match the styling?

[pietrop]

Nothing super detailed just yet - it can change when it's more defined

[pietrop]

Closing coz PR has been merged into master