mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-08-19 14:35:53 +00:00
subtitles modules refactored
This commit is contained in:
parent
6a3e65764e
commit
fab2c1fff6
4 changed files with 61 additions and 50 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
});
|
||||
20
src/routes/Player/Video/stremio-video/subtitlesRenderer.js
Normal file
20
src/routes/Player/Video/stremio-video/subtitlesRenderer.js
Normal 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
|
||||
});
|
||||
Loading…
Reference in a new issue