Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 14:52:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

HTMLVideo adapted to the new video spec

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-03-21 19:39:54 +02:00
parent 8ed9c97645
commit 8403742812
2 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/routes/Player/Video/stremio-video/HTMLSubtitles.js
View file

@ -10,9 +10,15 @@ var FONT_SIZE = Object.freeze({
5: '10vmin'
});
function HTMLSubtitles(containerElement) {
if (!(containerElement instanceof HTMLElement) || !containerElement.hasAttribute('id')) {
throw new Error('Instance of HTMLElement with id attribute required as a first argument');
function HTMLSubtitles(options) {
var containerElement = options && options.containerElement;
var id = options && options.id;
if (!(containerElement instanceof HTMLElement)) {
throw new Error('Instance of HTMLElement is required');
}
if (typeof id !== 'string') {
throw new Error('id parameter is required');
}
var self = this;
@ -26,9 +32,9 @@ function HTMLSubtitles(containerElement) {
var subtitlesElement = document.createElement('div');
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: 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);
var subtitleStylesIndex = stylesElement.sheet.insertRule('#' + 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('#' + 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('#' + id + ' .subtitles.dark-background .cue { text-shadow: none; background-color: #222222; }', stylesElement.sheet.cssRules.length);
containerElement.appendChild(subtitlesElement);
subtitlesElement.classList.add('subtitles');
events.addListener('error', function() { });

17
src/routes/Player/Video/stremio-video/HTMLVideo.js
View file

@ -3,8 +3,13 @@ var HTMLSubtitles = require('./HTMLSubtitles');
function HTMLVideo(options) {
var containerElement = options && options.containerElement;
if (!(containerElement instanceof HTMLElement) || !containerElement.hasAttribute('id')) {
throw new Error('Instance of HTMLElement with id attribute required');
var id = options && options.id;
if (!(containerElement instanceof HTMLElement)) {
throw new Error('Instance of HTMLElement is required');
}
if (typeof id !== 'string') {
throw new Error('id parameter is required');
}
var self = this;
@ -12,15 +17,19 @@ function HTMLVideo(options) {
var destroyed = false;
var events = new EventEmitter();
var dispatchArgsLoadedQueue = [];
var subtitles = new HTMLSubtitles(containerElement);
var subtitles = new HTMLSubtitles({
id: id,
containerElement: containerElement
});
var stylesElement = document.createElement('style');
var videoElement = document.createElement('video');
events.on('error', function() { });
subtitles.on('error', onSubtitlesError);
subtitles.on('load', updateSubtitleText);
containerElement.setAttribute('id', id);
containerElement.appendChild(stylesElement);
stylesElement.sheet.insertRule('#' + containerElement.id + ' .video { position: absolute; width: 100%; height: 100%; z-index: -1; }', stylesElement.sheet.cssRules.length);
stylesElement.sheet.insertRule('#' + containerElement.id + ' .video { position: absolute; width: 100%; height: 100%; z-index: -1; background-color: black; }', stylesElement.sheet.cssRules.length);
containerElement.appendChild(videoElement);
videoElement.classList.add('video');
videoElement.crossOrigin = 'anonymous';