subtitles modules refactored

This commit is contained in:
NikolaBorislavovHristov 2019-02-22 12:09:36 +02:00
parent 6a3e65764e
commit fab2c1fff6
4 changed files with 61 additions and 50 deletions

View file

@ -1,5 +1,6 @@
var EventEmitter = require('events');
var subtitleUtils = require('./utils/subtitles');
var subtitlesParser = require('./subtitlesParser');
var subtitlesRenderer = require('./subtitlesRenderer');
var FONT_SIZE = Object.freeze({
1: '3vmin',
@ -26,7 +27,7 @@ function HTMLSubtitles(containerElement) {
containerElement.appendChild(stylesElement);
var subtitleStylesIndex = stylesElement.sheet.insertRule('#' + containerElement.id + ' .subtitles { position: absolute; right: 0; bottom: 0; left: 0; z-index: 0; font-size: ' + FONT_SIZE[2] + '; color: white; text-align: center; }', stylesElement.sheet.cssRules.length);
stylesElement.sheet.insertRule('#' + containerElement.id + ' .subtitles .cue { display: inline-block; padding: 0.2em; text-shadow: #222222 0px 0px 1.8px, #222222 0px 0px 1.8px, #222222 0px 0px 1.8px, #222222 0px 0px 1.8px, #222222 0px 0px 1.8px; }', stylesElement.sheet.cssRules.length);
stylesElement.sheet.insertRule('#' + containerElement.id + ' .subtitles .cue { display: inline-block; padding: 0.2em; text-shadow: 0px 0px 0.03em #222222, 0px 0px 0.03em #222222, 0px 0px 0.03em #222222, 0px 0px 0.03em #222222, 0px 0px 0.03em #222222; }', stylesElement.sheet.cssRules.length);
stylesElement.sheet.insertRule('#' + containerElement.id + ' .subtitles.dark-background .cue { text-shadow: none; background-color: #222222; }', stylesElement.sheet.cssRules.length);
containerElement.appendChild(subtitlesElement);
subtitlesElement.classList.add('subtitles');
@ -42,7 +43,7 @@ function HTMLSubtitles(containerElement) {
this.dispatch = function() {
if (destroyed) {
throw new Error('Unable to dispatch ' + arguments[0]);
throw new Error('Unable to dispatch ' + Array.from(arguments).map(String));
}
switch (arguments[0]) {
@ -92,7 +93,7 @@ function HTMLSubtitles(containerElement) {
})
.then(function(text) {
if (typeof text === 'string' && selectedTrackId === tracks[i].id) {
cuesByTime = subtitleUtils.parse(text);
cuesByTime = subtitlesParser.parse(text);
events.emit('load', Object.freeze({
track: tracks[i]
}));
@ -111,14 +112,14 @@ function HTMLSubtitles(containerElement) {
return;
}
case 'delay': {
if (typeof arguments[2] === 'number' && !isNaN(arguments[2]) && selectedTrackId !== null) {
if (!isNaN(arguments[2]) && arguments[2] !== null && selectedTrackId !== null) {
delay = parseInt(arguments[2]);
}
return;
}
case 'size': {
if (typeof arguments[2] === 'number' && !isNaN(arguments[2])) {
if (!isNaN(arguments[2]) && arguments[2] !== null) {
stylesElement.sheet.cssRules[subtitleStylesIndex].style.fontSize = FONT_SIZE[Math.max(1, Math.min(5, Math.floor(arguments[2])))];
}
@ -180,16 +181,15 @@ function HTMLSubtitles(containerElement) {
subtitlesElement.removeChild(subtitlesElement.lastChild);
}
if (typeof arguments[2] !== 'number' || isNaN(arguments[2]) || cuesByTime === null) {
if (cuesByTime === null || isNaN(arguments[2]) || arguments[2] === null) {
return;
}
var time = arguments[2] + delay;
var cuesForTime = subtitleUtils.cuesForTime(cuesByTime, time);
for (var i = 0; i < cuesForTime.length; i++) {
var cueNode = subtitleUtils.render(cuesForTime[i].text);
cueNode.classList.add('cue');
subtitlesElement.append(cueNode, document.createElement('br'));
var cueNodes = subtitlesRenderer.render(cuesByTime, time);
for (var i = 0; i < cueNodes.length; i++) {
cueNodes[i].classList.add('cue');
subtitlesElement.append(cueNodes[i], document.createElement('br'));
}
return;

View file

@ -0,0 +1,24 @@
function binarySearchUpperBound(array, value) {
if (value < array[0] || array[array.length - 1] < value) {
return -1;
}
var left = 0;
var right = array.length - 1;
var index = -1;
while (left <= right) {
var middle = Math.floor((left + right) / 2);
if (array[middle] > value) {
right = middle - 1;
} else if (array[middle] < value) {
left = middle + 1;
} else {
index = middle;
left = middle + 1;
}
}
return index !== -1 ? index : right;
}
module.exports = binarySearchUpperBound;

View file

@ -1,31 +1,9 @@
var VTTJS = require('vtt.js');
function binarySearchUpperBound(array, value) {
if (value < array[0] || array[array.length - 1] < value) {
return -1;
}
var left = 0;
var right = array.length - 1;
var index = -1;
while (left <= right) {
var middle = Math.floor((left + right) / 2);
if (array[middle] > value) {
right = middle - 1;
} else if (array[middle] < value) {
left = middle + 1;
} else {
index = middle;
left = middle + 1;
}
}
return index !== -1 ? index : right;
}
var binarySearchUpperBound = require('./binarySearchUpperBound');
function parse(text) {
var nativeVTTCue = VTTCue;
global.VTTCue = VTTJS.VTTCue;
var nativeVTTCue = window.VTTCue;
window.VTTCue = VTTJS.VTTCue;
var parser = new VTTJS.WebVTT.Parser(window, VTTJS.WebVTT.StringDecoder());
var cues = [];
var cuesByTime = {};
@ -41,7 +19,7 @@ function parse(text) {
};
parser.parse(text);
parser.flush();
global.VTTCue = nativeVTTCue;
window.VTTCue = nativeVTTCue;
cuesByTime.times = Object.keys(cuesByTime)
.map(function(time) {
return parseInt(time);
@ -76,17 +54,6 @@ function parse(text) {
return cuesByTime;
}
function cuesForTime(cuesByTime, time) {
var index = binarySearchUpperBound(cuesByTime.times, time);
return index !== -1 ? cuesByTime[cuesByTime.times[index]] : Object.freeze([]);
}
function render(text) {
return VTTJS.WebVTT.convertCueToDOMTree(window, text);
}
module.exports = Object.freeze({
parse: parse,
cuesForTime: cuesForTime,
render: render
parse: parse
});

View file

@ -0,0 +1,20 @@
var VTTJS = require('vtt.js');
var binarySearchUpperBound = require('./binarySearchUpperBound');
function render(cuesByTime, time) {
var nodes = [];
var timeIndex = binarySearchUpperBound(cuesByTime.times, time);
if (timeIndex !== -1) {
var cuesForTime = cuesByTime[cuesByTime.times[timeIndex]];
for (var i = 0; i < cuesForTime.length; i++) {
var node = VTTJS.WebVTT.convertCueToDOMTree(window, cuesForTime[i].text);
nodes.push(node);
}
}
return Object.freeze(nodes);
}
module.exports = Object.freeze({
render: render
});