Prototype to add subtitle .srt support to any video element

Remarks

• Functions that require an argument to work should rather than silently fail, throw TypeError().

/** * Without a file no need to execute script */ if (!file) { return; } 

could become

if (!file) { throw new TypeError(`${file} is not a valid path name`); } 

There's also no need for comment here — it's in the error's message.

---

• You shouldn't touch the prototype of HTMLMediaElement. Don't modify objects you don't own.

---

• If you didn't extend the prototype of HTMLMediaElement but of HTMLVideoElement instead, the following check wouldn't be necessary:

if (HTMLMediaElement.tagName !== 'VIDEO') { return; } 

---

• In setTextContent() and getTextContent() instead of .innerHTML you should use .textContent. It's more performant since it's not parsing HTML, which also prevents potential XSS attacks.

---

• In setTextContent() this ternary: text ? text : '' could become text || ''.

---

• In createElement() instead of enclosing everything in one big if you could check for the opposite condition and return if it matches.

  Also, to make the code more concise and not to repeat HTMLMediaElement.nextSibling.tagName twice, you could put both strings that you test for in an array, like so:

if (!['undefined', 'SUB'].includes(HTMLVideoElement.nextSibling.tagName)) 

---

• There are some comments that are not telling more than the code itself, but their presence makes reading far harder, e.g.:

/** * Create new sub element */ var element = document.createElement('sub'); 

---

• Entire 22-line synchronous load() function can be replaced with a neat asynchronous one-liner using Fetch API:

file => fetch(file).then(response => response.text()).then(subtitle.parse) 

---

• In parse() function you've got arr.slice(0, 1).join() and arr.slice(1, 2).join(). They are simply equal to arr[0] and arr[1] respectively.

---

• There are 3 instances (in play() and recalculate()) of

subtitle.stringToArray(video.getCurrentTime.toString()).join('') 

which is equal to

video.getCurrentTime.toString().replace(/[:,]+/g, '') 

It's more concise and has one less function call. Replacing one with the other has also that advantage, that it removes all the cases where you pass string to stringToArray() fucntion. Speaking of…

---

• stringToArray() function was especially confusing to me, until I went down the stream to see how it's actually used. Both documentation and parameter name suggested you expect a string, but then there was a check if string is actually an object and if so it seemed you… iterate over it. time instanceof Array would be more clear. Also, a comment that you test for an array, different parameter name and mention in documentation that both string as well as an array may be passed would be really helpful.

  All together with the previous bullet point, the entire function could be:

splitTimes: time => time.map(str => str.split(/[:,]+/)) 

---

• In recalculate() function instead of for and if to find particular index, you could use function… well, .findIndex(). ES2015 goodies (｡◕‿‿◕｡).

---

• In video.getCurrentTime you've got a lot of long statements with ternary operators to pad time to 2 digits with zero. In ES2015 it can be done like this:

`${…}`.padStart(2, '0'), 

Note: the two back-ticks are template literals to convert math expression in them to string.

What's more, splitting the whole thing into so many functions harms performance and readability. It could all be written as:

getCurrentTime: () => { const time = HTMLVideoElement.currentTime, hours = `${Math.floor(time / 3600)}`.padStart(2, '0'), minutes = `${Math.floor(time / 60)}`.padStart(2, '0'), seconds = `${Math.floor(time % 60)}`.padStart(2, '0'), milliseconds = `${time % 60}`.replace('.', '').substring(2, 5); return `${hours}:${minutes}:${seconds},${milliseconds}`; } 

---

• Other little things: there are a few unnecessary semicolons, few are missing, sub is not the right HTML element in this context and many comments are invalid and hence confusing.

Rewrite

Below code has less than 45% of lines and around 50% of characters of the original one. I hope I didn't miss anything ;).

HTMLVideoElement.prototype.subtitle = function(file) { if (!file) { throw new TypeError(`${file} is not a valid path name`); } const HTMLVideoElement = this; const subtitle = { data: { subtitles: [], paragraphs: null, element: null, index: 0, current: null, next: null, }, // Sets textContent of the <sub> element setTextContent: text => subtitle.data.element.textContent = text || '', // Returns textContent of the <sub> element getTextContent: () => subtitle.data.element.textContent, // Creates a subtitle element for the current video createElement: () => { // Return immediately if subtitle element doesn't exist yet if (!['undefined', 'SUB'].includes(HTMLVideoElement.nextSibling.tagName)) { return; } // Insert nice subtitle font const font = document.createElement('link'); [font.rel, font.href] = ['stylesheet', 'https://fonts.googleapis.com/css?family=Sunflower:300']; document.head.appendChild(font); // Store new 'sub' element into the current subtitle object subtitle.data.element = document.createElement('sub'); // Append node to document HTMLVideoElement.parentNode.insertBefore(subtitle.data.element, HTMLVideoElement.nextSibling); }, /** * Loads subtitle file over HTTP(S) * Calls subtitle.parse(content) * * @param {string} - Path / URL to subtitle file */ load: file => fetch(file).then(response => response.text()).then(subtitle.parse), /** * Parses subtitle file * * @param {string} - SRT text content * @returns {object} - Object containing subtitles */ parse: content => { // First split all paragraphs into chunks subtitle.data.paragraphs = content.split(/\n\s*\n/g); subtitle.data.paragraphs.forEach(paragraph => { const arr = paragraph.split('\n'); // Store paragraph information subtitle.data.subtitles.push({ '$index': arr[0], '$timing': subtitle.splitTimes(arr[1].split(' --> ')), '$textContent': arr.slice(2, arr.length).join() }); }); // Set defaults subtitle.data.current = subtitle.data.subtitles[subtitle.data.index]; subtitle.data.next = subtitle.data.subtitles[subtitle.data.index + 1]; subtitle.createElement(); }, /** * Starts displaying the subtitles when video is started * Gets called using the video.timeupdate event listener */ play: () => { const currentTime = video.getCurrentTime().replace(/[:,]+/g, ''); // Set subtitle when video's currentTime matches the subtitle time if (currentTime > subtitle.data.current.$timing[0].join('') && subtitle.getTextContent() === '') { subtitle.setTextContent(subtitle.data.current.$textContent); } // Unset current and set next subtitle when video's currentTime is greater than subtitles end time if (currentTime > subtitle.data.current.$timing[1].join('')) { subtitle.setTextContent(''); subtitle.data.index++; subtitle.data.current = subtitle.data.next; subtitle.data.next = subtitle.data.subtitles[subtitle.data.index]; } }, /** * Splits each of SRT timing strings (HH:MM:SS,fff) into an array like ['00', '00', '00', '000'] * * @param {time} - Array of SRT timing strings, eg. 01:44:03,732 * @returns {array} - Array of ['hour', 'minute', 'seconds', 'milliseconds'] */ splitTimes: time => time.map(str => str.split(/[:,]+/)), /** * Gets the current active subtitle * * @returns {object} - Current subtitle */ getCurrentSubtitle: () => subtitle.data.current, getNextSubtitle: () => subtitle.data.next, setNextSubtitle: () => { subtitle.data.index++; subtitle.data.current = subtitle.data.next; subtitle.data.next = subtitle.data.subtitles[subtitle.data.index]; }, recalculate: () => { // Recalculates which subtitle is current and next const i = subtitle.data.subtitles.findIndex(sub => video.getCurrentTime().replace(/[:,]+/g, '') < sub.$timing[0].join('') ); // Update subtitle data subtitle.data.index = i; subtitle.data.current = subtitle.data.subtitles[i]; subtitle.data.next = subtitle.data.subtitles[i + 1]; } }; const video = { /** * Returns the current playback position in format HH:MM:SS,fff * * @returns {string} - Playback position in seconds */ getCurrentTime: () => { const time = HTMLVideoElement.currentTime, hours = `${Math.floor(time / 3600)}`.padStart(2, '0'), minutes = `${Math.floor(time / 60)}`.padStart(2, '0'), seconds = `${Math.floor(time % 60)}`.padStart(2, '0'), milliseconds = `${time % 60}`.replace('.', '').substring(2, 5); return `${hours}:${minutes}:${seconds},${milliseconds}`; }, playing: () => subtitle.play(), // When video starts playing or gets unpaused seeking: () => subtitle.recalculate() // When video is set forwards or backwards }; HTMLVideoElement.addEventListener('timeupdate', video.playing); HTMLVideoElement.addEventListener('seeking', video.seeking); // Initialize the subtitle subtitle.load(file); }; window.addEventListener('DOMContentLoaded', () => document.getElementById('video').subtitle('/subs/sub.txt'));