Skip to content

Instantly share code, notes, and snippets.

@RomanJos
Created September 28, 2020 19:59
Show Gist options
  • Save RomanJos/f87fe8a85deb9c334f047334a2ef3e21 to your computer and use it in GitHub Desktop.
Save RomanJos/f87fe8a85deb9c334f047334a2ef3e21 to your computer and use it in GitHub Desktop.
Jumpcutter design doc

This software is directly inspired by this video https://www.youtube.com/watch?v=DQ8orIurGxw (without the thumbs gesture lol) it is available on Github but there is no interfaces whatsoever plus it was built to view video without blank, the one that I want more destined for content creator, for example the cuts can be exported to premiere pro Some people already have made a paid software https://www.timebolt.io/ where it can export the cuts into premiere pro, you can see this software in action here https://www.youtube.com/watch?v=lDp_f9alVaI

The goal is to create an alternative far more better than timebolt (which look more like an mvp than something else btw) and release it as open-source. it will only run on desktop, a mobile version could be created in the future but for now we'll stick to desktop. I below added what was on my mind, what could be helpful to have, suggestions are welcome. It would be cool to have like a top quality, super georgeous and out of this world design for this simple software, nobody will expect that lol. If it can become a mini showcase of a designer's talent it would be super dope, original and amazing !

Timeline

The main element of the software is of course the timeline, like Timebolt this is to see what the software did and see when we modify the settings what is changing.

  • the soundwave is splitted by areas defined by blank or audible, the areas should be selectable, draggable etc (I talk about the editing capabilities below). I found this little demo and thought that we can borrow the same concept https://dribbble.com/shots/6677373-Splice-Features-Tutorial you can see that we can delete, move etc differents areas, since this is a desktop software the gestures are differents but you get the idea.
  • on top or below the timeline there should be a mini-timeline that preview the entire thing with blank highlited, FL studio has something similar on the playlist : dI drawed lines to really show that there is a preview on the mini timeline on the top. The goal of this mini timeline is, like FL studio, to move the zone shown in the timeline while having a preview of what the software did
  • Also we need to have a timeline position as a vertical bar or we can copy google, the music lab use a fixed one https://musiclab.chromeexperiments.com/Piano-Roll/ I guess we can do the same
  • The timeline has a audio channel switcher if multiple audio are present in the video
  • The keybinds are as follow :
    • right click to invert an area, useful to keep/skip some passage
    • scroll wheel to move the timeline
    • left click to select an area (with shift cliks to select multiple and ctrl etc)
    • left click hold to move the area(s) selected like the dribble link earlier
    • copy and cut are a little bit different, they send the content copied to the freezer
    • since the timeline position's bar is static at the middle of the screen the keybinds are shown at the beginning of the areas so like on the other half of the timeline basically

Preview

this is not as complicated than the timeline but basically

  • A video output of the finale render that can be turned into a "one vs one", the original play and the edited get paused on blank, this is useful to see if we didn't forgot something for example
  • A basic wall of information about the video and how much time we won

Core functionnalities

Thoses are the one that drive the blank detection and more, unlike timebolt thoses change as you modify them on the timeline, so they are more like toys than special values, the user move them and see instantly the result on the soundwave instead of first calculating like we usually do on timebolt, its more easy to test and see than find the perfect number basically

  • Minimum blank time, the minimum amount of time to be considered as blank
  • threshold db, the minimum volume to be considered as blank, like FL studio https://youtu.be/RFxNbfVTAk8?t=70 a white line with the level on the soundwave appear and move as the knob move, this way the user know exactly what is changing and change this option based on fact and not assumption
  • space between sound and blank, if we want to have a little bit of time between the cuts for example, with also something to differenciate the time at the beginning and at the end of an audible area, some people on youtube leaves like 200ms efter a sentence but 0ms before, some just don't do anything and it should be the default, the switch to put this option into an advanced view can be like the size of a layer in photoshop, usually the width and height are link by a lock, we can put a lock button here that open the timing for before and after
  • speed of blank time, with either infinity or skipped, by default
  • Adding short transitions between selected area could be cool, at the end of the video for exemple before saying "thank you for watching I hope you liked etc." a little transition like https://youtu.be/528zJrGE1gA?t=248 could look great, timebolt force you to have them at every cut, I don't understand why but selecting where we want that transition to happen is a must

Freezer :

The goal of this thing is to create temporary collections of areas, we can add one or multiple areas by copying/cutting and they will land in the "pre checkout" zone of it, we can name it and on enter they, enter, the freezer where we can later left click and hold it to move where we want in the timeline, this is useful if we stumble upon something that need to be said at en end, and put it inside a temporary thing to retrieve it later. The "pre-checkout" is a copy/cutt buffer, on each copy/cut it get overrided by the nex content and can also be drag and drop, its just that its not freezed and thus not secured (the selection are not secured, by cutting and freezing we move the areas from the timeline but by just cutting and then copying something else the content on the timeline previously cutted is not affected). Also I wanna add that by calling it a freezer you may think that it act like a vault that need to be openned to see the collections, but its more like a book-shelf, the collections are at disposition to be moved into the timeline, the play button appear on a collection on hover but like on the right or something to still be able to drag it. I think it might be difficult to get this part so think like the windows startup Windows 10 Creators Update will introduce app folders for ...the items like calendars, edge, etc. are areas and they all belong in a collection, "Life at a glance", the pre-checkout can be separated by a line like between Alarms & Clock and the weather widget for example. The freezer is like a big organised area holder. Last point : I now realise that this functionnality can be useless, I mean not a lot of people will have any use of it or know what is the purpose. If you agree I guess we can transform the freezer into an history of copy/cut maybe ?

Export

Finally, after we changed the settings for the detection, changed the order of some areas and previewed its time to finish it. Instead to only output a mp4/AV1 video file the software should be able to export to xmp, the main functionnalitys of Timebolt is this one, reworking the edit on a proper video editing software is a must. I don't have a lot of things to add to the export's options but xmp is really needed.


The tools to build the software can vary but Flutter seems like the best choice since it is cross-platform by default and support others language integration such as C and Rust for example. having a mobile version can be cool for like people who do vlogs and one that don't know how to use a video editing software, for this type of use cases adding multiple videos in the timeline is a must, but we need to be aware here to not overcomplicating the software by adding text support, image integration or whatever because it will become a video editing software and not a tool to remove blank in video anymore.

Mood board

This is some dribbble shots that could share the same artistic direction

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment