editly icon indicating copy to clipboard operation
editly copied to clipboard

Make it a stateless/pure/functional component

Open mifi opened this issue 5 years ago • 3 comments
trafficstars

Look into making it completely functional/stateless:

getFrame(frameNum, parameters) -> calculates transitions and everything to return a calculated frame

This allows for making a GUI with seeking to any random frame

Must have workaround for non-seekable streams like ffmpeg pipe

  • http://www.ffmpeg.org/ffmpeg-filters.html#movie-1
  • http://www.ffmpeg-archive.org/Controlling-an-ffmpeg-stream-td4677436.html

Also cache low resolution/low framerate version of each input video cut so we can render preview faster

mifi avatar Apr 22 '20 14:04 mifi

I made a working statelessMode for the video frame source in https://github.com/mifi/editly/tree/stateless

However the hard part is to convert the main loop and its logic and state into a pure stateless function: https://github.com/mifi/editly/blob/ccd42cc2daa236114b288c44a35382b048ac720c/index.js#L436

mifi avatar Sep 23 '20 21:09 mifi

I made a function https://github.com/mifi/editly/blob/fc2cb572fe9e2afc4e533537927d23379967d207/index.js#L372

...which will render a single frame at the specified time to a PNG. Useful for testing and could be useful in the future.

Example: renderSingleFrame.js

TODO:

  • [ ] Must merge the previously mentioned stateless branch for videos to work.
  • [ ] renderSingleFrame does not render correctly in transitions (it will just render one clip or the other)

mifi avatar Sep 24 '20 13:09 mifi

Wow I just found this project which does exactly this: https://www.remotion.dev/

mifi avatar Mar 03 '21 03:03 mifi