search

bbc / digital-paper-edit-client

Work in progress - BBC News Labs digital paper edit project - React Client
https://bbc.github.io/digital-paper-edit-client
Other
46 stars 13 forks source link

React component to preview paper-cuts in paper-edits #3

Closed pietrop closed 5 years ago

pietrop commented 5 years ago

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

As part of the Paper-edit view

Screen Shot 2019-04-18 at 13 54 26

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

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 https://github.com/bbc/VideoContext/issues/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.

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

pietrop commented 5 years ago

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

pietrop commented 5 years ago

Example of progress bar in video context

melnyczuk commented 5 years ago

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

pietrop commented 5 years ago

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

Paper Edit - search + filter

pietrop commented 5 years ago

Closing coz PR has been merged into master