Add support for movie captions #907
Conversation
|
This is a feature enhancement corresponding to issue |
Generate HTML5 subtitle tracks dynamically based on the contents of the where the movie is located. For example a "movie.en.vtt" file in the same folder as the "movie.mkv" will be used as a track for English subtitles. Signed-off-by: Frederic Ruget <fred@atlant.is>
szaimen
added
3. to review
|
Hi! I've seen the failure in test Node / node12.x. |
|
@douzebis, yes the files in |
There was a problem hiding this comment.
Thank you for your contribution 😄. This looks good to me (but I don't decide if this gets in), I added some comments to make the code cleaner.
I am wondering about how this works when publicly sharing files. So, if you share a folder, will these captions work?
| const lang = langs[i] | ||
| let language = languages[lang] | ||
| if (language.length === 0) language = lang | ||
| tracks += '<track src="' |
There was a problem hiding this comment.
It might be better to create these elements with vue (v-for) and not by creating a string here. A bit like this
There was a problem hiding this comment.
Thanks a lot @beardhatcode!
I'll have a look at the 'v-for' syntax and try and use it.
I'll be updating my code and re-submitting.
Also, I may add the possibility to use '.movie.en.vtt' for the language tracks -- with a leading dot.
So as not to clutter the contents of the viewer folder with language tracks.
There was a problem hiding this comment.
Ok, that could work but in that case you could have two vtt files per language be sure to give precedence to the visible file (without a dot). However, I would first try to just get it working and leave this addition for another PR.
| @@ -21,13 +21,14 @@ | |||
| */ | |||
| import { getDavPath } from '../utils/fileUtils' | |||
|
|
|||
| export default function(fileInfo, mime, component) { | |||
| export default function(fileInfo, mime, component, caplangs) { | |||
There was a problem hiding this comment.
Hmmm, I'm not sure that caplangs should go here in file.js it is video specific. This change should not reach into this file. Maybe it is a util or a mixin?
| @@ -415,6 +418,19 @@ export default { | |||
| // retrieve folder list | |||
| const fileList = await folderRequest(dirPath) | |||
|
|
|||
| // retrieve caption languages | |||
There was a problem hiding this comment.
I think this should be moved to the Video component as it is only used for videos
There was a problem hiding this comment.
Actually i was unable to code the retrieval of the caption files within Videos.vue, because I could not implement it unless I was using an 'async' function and this did not work well with the Videos.vue template -- I got "promises" instead of the the actual list of files.
Please don't hesitate to suggest code snippets... I need guidance :)
There was a problem hiding this comment.
"Promises" are values JavaScript returns when it does not have the data yet. So when you are getting a file listing, you need to send some requests, if all of the javascript stoped at that moment, that would kill the user experience. Instead, JavaScript returns a promise: "I don'd have this data now, but I promise I will have it". You can also say to JS, ah, OK once you have that data call this function with it as argument (then). So what you could do (I think) is:
Add a [created] hook to the Video component. In there you do what you did before to get the data (yourCodeThatFindsTheRightThingAndReturnsAPromice) and then use then to specify what should happen once we have that data. So in the snippet below response will hold the data you want, and
created() {
yourCodeThatFindsTheRightThingAndReturnsAPromice().
.then(response => {
/* do stuff with the respose to get the right things*/
this.captions = ... // ← set a fild to be used in the template on top
});
}
I don't really have that much time to explain it well, but it is really worth the effort to learn about promises and async/await see this useful tutorial by Mozilla
| let language = languages[lang] | ||
| if (language.length === 0) language = lang |
There was a problem hiding this comment.
| let language = languages[lang] | |
| if (language.length === 0) language = lang | |
| let language = languages[lang] || lang |
| for (let i = 0; i < langs.length; ++i) { | ||
| const lang = langs[i] |
There was a problem hiding this comment.
| for (let i = 0; i < langs.length; ++i) { | |
| const lang = langs[i] | |
| for (let lang of langs) { |
But it might be even better to use v-for instead.
|
OK. (I did not want to clutter the history of the viewer with back and forth modifications.) Now there is a single modified file: src/components/Videos.vue |
Generate HTML5 subtitle tracks dynamically based on the contents of the
where the movie is located.
For example a "movie.en.vtt" file in the same folder as the "movie.mkv"
will be used as a track for English subtitles.