Caption Editor

Caption Editor

14 devlogs
12h 36m
•  Ship certified
Created by Sam V

This project is an app that lets you create closed captions/subtitles for videos. Having captions available for videos is really important for accessibility but unfortunately many of the tools currently out there for this are very old with ugly and confusing interfaces. I am using web technologies to try and make a more modern and easy to use alternative so that anyone can easily write captions.

Timeline

Ship 1

1 payout of shell 320.0 shells

Sam V

about 2 months ago

Sam V Covers 14 devlogs and 12h 36m

It took me a while to polish the README and work out how to actually build the app, but now I have a release on GitHub with downloads for both Linux and Windows.

Update attachment
Earned sticker

This was another bug fixing session mostly, where I fixed issues such as the scroll bar being reset when a new caption was added and the timeline disappearing when no captions were added yet. I also added a delete button so you can remove captions when needed.

Update attachment
Earned sticker

The player now shows the current time of the video. On the left it shows a nice formatted timestamp with the minutes separated from the seconds, and on the right it shows the current second with three decimal places for extra precision when writing captions. I used a font with tabular numbers (all numbers are the same width) to keep it looking nice and stop the text moving around while the video is playing.

Update attachment

You can now seek through the video by clicking on the timeline (instead of just using the forwards and backwards 5 seconds buttons).

Update attachment
Earned sticker

Spent some time ironing out major bugs with the program - most notable seeking forwards and backwards didn't work with local videos. The result is a much more polished program which is close to being completely working.

Update attachment
Earned sticker

There is now an additional button to open a video file, which loads a video from the user's files. Now you can caption any video and not just Big Buck Bunny.

Update attachment
Earned sticker

The open button will now load the captions from a file and replacing the existing captions. This means that the user can now both save and load files.

Update attachment
Earned sticker

The save button will now actually save the captions you wrote in SRT format, a common format for subtitles that works in most programs.

Update attachment
Earned sticker

Added a file open and save dialog which will be used for opening video and caption files and saving caption files.

Update attachment
Earned sticker

Fixed bugs where the current caption would not update while seeking through the video if it was paused, as well as stopping the user from setting impossible start and end times for captions.

Update attachment
Earned sticker

You can now edit the captions by typing in the boxes on the right, and it will update in the video player. This means you can finally actually start writing multiple captions with custom text.

Update attachment
Earned sticker

Added support for creating a new caption, which now also checks if it overlaps with an existing one. The new caption can be created by clicking on the plus icon in the top right corner of the editor.

(I came back to this project after a while and have realised that the previous devlogs were not very descriptive, so I will aim to post them more frequently now!)

Update attachment

I added installation instructions so that people can try out the program.

Update attachment

I created the base code for the Caption Editor, including a video player, timeline, and a panel on the right which will be used for actually editing the captions. It also has an aesthetically pleasing style which I made with CSS.

Currently it can only display captions, but I will adapt it in the future to include the editing functionality. The app is made using Svelte and Electron.

Update attachment