hamidb80/subtitle-editor

a web based subtitle editor

web based subtitle editor

health and safety are 2 forgotten gifts among people - Muhammad the prophet

demo

you can see demo here

features

• shortcuts/mouse
• undo/redo
• nice ux/ui [native components - no external UI libraries]
• loads resources with query params http://APP?video=URL&subtitle=URL where APP is demo url

commands:

npm install yarn if you dont have Yarn:

yarn install install dependencies

yarn start Runs the app in the development mode.

yarn build Builds the app for production to the build folder.

subtitle-editor's Issues

moving time-ruler is so damn slow

depending on the length of the video, moving time-ruler can become very costly; causing animation and interactions running super slow

Bugs/feature requests

You've done nice work here.

Issues:

• For whatever reason, most of the zoom values collapses (shrinks) the box containing the transcription.

Suggestions for UI Enhancement:

• Enlarge the timeline bar (text transcription bar) to ensure complete sentence display.
• Incorporate a waveform display beneath the text to offer a visual aid for easier transcription.
• Enable direct editing within the selected box (square with current transcription) instead of a separate editing box.
• Integrate the progress bar into the timeline bar for streamlined progress tracking.
• Relocate the "save as file" option to the top navigation bar, freeing space for the timeline and waveform, while dedicating the bottom section solely for editing.

Making timelime editor faster with caching time ruler as image

Using Data url

demo link does show nothing

add some kind of video size control

it's very nice to be able to control the size of the video

I think setting just the height parameter would be enogh

Extending caption timing causes selected caption to unselect

I should remove this

subtitle-editor/src/components/video/SubtitleTimeLine.tsx

Line 78 in 44d525b

this.props.onCaptionSelected(null)

Or make a distinction between click and mouse-release events

Make captions do not overlap when creating

It's gonna be a simple check and edit

Bugs/feature requests

Two features you added look really good!

I think it's pretty close to being very functional.

I'll add the features that to me are still missing to make it very intuitive:

1. Spacebar should start/pause video (helps get to the exact point when changing subtitle timings)

2. Ability to drag the timeline to move the video forward/backwards
   

In this screenshot, if I put my cursor over the 17 second mark it shows a pointer, but I should be able to drag starting at that number and move the timeline backwards or forwards and have it change the video time.

Also, you can see there's a bug, if the video is too long and you zoom in the timeline stacks on top of eachother and it bugs the functionality (I changed the dom manually in that screenshot)

Also, I think you should be able to zoom in past what is currently the limit of 100 to be able to have precision with the timestamps.

Also, I think you should be able to drag to change the start/end timing of the subtitles without selecting the timestamp. Clicking it each time is not very intuitive, I think it would be better to be able to grab the ends without it.

Also, when you are dragging to change the duration, you should be able to see the space that it is filling (or it should show that it's being shortened). It should track with the dotted redline above it when you drag. Same thing with the drag, you should be able to see it as it's moving rather than it jumping (will help to line up ends/beginnings with certain time segments etc)

Also, I think this should be widened. Sometimes the subtitles can be longer and there's extra space around so may as well use it. (I like the feature to click to change from right-to-left text and left-to-right languages!)

Also, I think a single click should deselect the subtitle the same way a single click selects it. I like how it repeats when it's selected but that will help to quickly unselect it, the escape button is not super intuitive.

Also, clicking anywhere on the video should start/stop it. Spacebar is the best solution but at least that will be much better since the video will have to be stopped/restarted a lot.

Anyways, I think you have a very solid foundation here, it's up to you if you want to implement these but I looked far and wide and there's no real good online subtitle editor solutions so I think this could become the default open source online subtitle editor, it's the only one I'm interested in using at the moment.

Thanks for your work, cheers!

subtitiletimeline scroll and mouse click subtitletimeline issue in laravel when i am use

warning are attached i thing some issue in my code would you like to help to resolve it

load the video and srt automatically through a query param

Also would be great if I could load the video and srt automatically through a query param, such as
https://editor.freesubtitles.ai?video=https://freesubtitles.ai/video.mp4&caption=https://freesubtitles.ai/caption.srt , and then have it start automatically in the studio. I think with those features (and the new move/edit lengths from the mouse) it would be enough for me to ship it

Originally posted by @mayeaux in #7 (comment)

Add dark theme

Please mention the license of code

Missing the functionality to drag subtitles to change their length

Without being able to drag the ends of the subtitles to change the length the value is pretty limited no offense. Manually entering the values is very clunky. I might deploy this for freesubtitles.ai but that is definitely a blocker on that front.