Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Subtitle generator feature #1728

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from

Conversation

Gauravjeetsingh
Copy link
Collaborator

Current feature implementation:

  • Generate subtitles by click of a button
  • Download the subtitle anytime, even after app is closed and launched again
  • Ability to delete subtitle file from the app itself
  • Subtitles are generated in the srt format

Future scope

  • Support orther subtitle format like vtt
  • Ability to set a start time in subtitle

@saintsoldierx Can you please review the UI and let me know if it needs any change?

Sidenote: It doesn't open the downloaded srt file automatically, I used notepad to open it manually from downloads. Contents of file are not clearly visible, this is what it saved:

1
00:00:00:00 --> 00:00:04:827
ਦੀਦਨੇ ਦੀਦਾਰ ਸਾਹਿਬ ਕਛੁ ਨਹੀ ਇਸ ਕਾ ਮੋਲੁ ॥

2
00:00:04:827 --> 00:00:06:1507
ਪਾਕ ਪਰਵਦਗਾਰ ਤੂ ਖੁਦਿ ਖਸਮੁ ਵਡਾ ਅਤੋਲੁ ॥੧॥

3
00:00:06:1507 --> 00:00:08:1546
ਦਸ੍ਤਗੀਰੀ ਦੇਹਿ ਦਿਲਾਵਰ ਤੂਹੀ ਤੂਹੀ ਏਕ ॥

4
00:00:08:1546 --> 00:00:09:2506
ਕਰਤਾਰ ਕੁਦਰਤਿ ਕਰਣ ਖਾਲਕ ਨਾਨਕ ਤੇਰੀ ਟੇਕ ॥੨॥੫॥

srt-test

@saintsoldierx
Copy link
Collaborator

  • I would like the button to go red when it's recording or have some indicator that recording is in progress.
  • Needs to have a timer although ideally, would love to see a preview of the srt file or maybe a history of the lines with timecodes.
  • Is there a way to have a window with the video (from YouTube or an MP4) and easily sync with the timecodes from the video?

{isSubtitleRecording && (
<div className="subtitle-status">
<i class="fa fa-circle"></i>
<span>Recording</span>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

veerji I think this should come from i18n

>
<i className="fa fa-circle">
<span className="Icon-label" key="Record">
Record
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

veerji this should be coming from i18n

fs.mkdirSync(directory);
}
const currentDate = new Date();
const filename = `${currentDate.getFullYear()}-${currentDate.getMonth()}-${currentDate.getDate()}-${currentDate.getHours()}${currentDate.getMinutes()}${currentDate.getSeconds()}.srt`;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

veerji this string is way too lengthy. It should not cross more than 100 letters.

Comment on lines +82 to +83
<h3>Record Subtitles</h3>
<p>To generate subtitles as you go through the shabads, click on the record button below:</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

veerji static strings should come from i18n. There are a lot of other places in this file which needs this issue to be fixed.

> span {
margin-left: 8px;
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Veerji please add a line at the eof

@Gauravjeetsingh
Copy link
Collaborator Author

Gauravjeetsingh commented Mar 1, 2023

I would like the button to go red when it's recording or have some indicator that recording is in progress.

@saintsoldierx Currently it shows a recording label on top right corner of the application, when recording is in progress, do we need anything in addition to that?

Needs to have a timer although ideally, would love to see a preview of the srt file or maybe a history of the lines with timecodes.

Didn't understand this part veerji, I think there is some disconnect on what we need from this feature.

I was thinking of this subtitle generator as to generate the srt file for the time app is being used in gurudwaras, which can then later be embedded in the live telecast video recording. Am I understanding it wrong?

Is there a way to have a window with the video (from YouTube or an MP4) and easily sync with the timecodes from the video?

There isn't one right now, but if its the need of feature, I can work on it.

@saintsoldierx
Copy link
Collaborator

I would like the button to go red when it's recording or have some indicator that recording is in progress.

@saintsoldierx Currently it shows a recording label on top right corner of the application, when recording is in progress, do we need anything in addition to that?

Ah I didn't see the red indicator. I think that is fine for now.

Needs to have a timer although ideally, would love to see a preview of the srt file or maybe a history of the lines with timecodes.

Didn't understand this part veerji, I think there is some disconnect on what we need from this feature.

I was thinking of this subtitle generator as to generate the srt file for the time app is being used in gurudwaras, which can then later be embedded in the live telecast video recording. Am I understanding it wrong?

Yes and no. I feel primary use will be this - I have an MP4 or YouTube video. I want to display that on one side of the screen, on the other side I want to be able to insert subtitles. So play the video and have a button that is able to detect the current time code of the video (eg. the video is 15 seconds in) - this will mark the IN point. Then the same button (or another) to mark the OUT point (which maybe 25 seconds in). And then move to the next line in the SRT file and repeat. I feel this would be less useful for live Gurdwara setting because it's difficult to exactly sync when they might press record on the camera and subtitle at the same time UNLESS there was an easy to way to shift the entire time code after subtitling. In other words, to be able to shift the entire timecodes in the SRT files by 15 seconds, for example.

Is there a way to have a window with the video (from YouTube or an MP4) and easily sync with the timecodes from the video?

There isn't one right now, but if its the need of feature, I can work on it.

So yes, this would be VERY useful and we can also create a new workspace at the top (next to single mode, presenter view) called SUBTITLER or something similar. This way, people can start offering Gurbani subtitles on YouTube videos VERY easily.

Can jump on a call if I am not making sense @Gauravjeetsingh

@theamanjs theamanjs added the DO NOT MERGE Pending review label Mar 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
DO NOT MERGE Pending review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants