Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 03:22:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

html element variables renamed suffix Element

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-01-07 09:41:55 +02:00
parent 1c062dac7f
commit 36cf29be5b
1 changed files with 67 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,8 @@
var EventEmitter = require('events'); var EventEmitter = require('events');
var subtitleUtils = require('./utils/subtitles'); var subtitleUtils = require('./utils/subtitles');
var HTMLVideo = function(container) { var HTMLVideo = function(containerElement) {
if (!(container instanceof HTMLElement)) { if (!(containerElement instanceof HTMLElement)) {
throw new Error('Instance of HTMLElement required as a first argument'); throw new Error('Instance of HTMLElement required as a first argument');
} }
@ -15,44 +15,44 @@ var HTMLVideo = function(container) {
var subtitleTracks = []; var subtitleTracks = [];
var selectedSubtitleTrackId = null; var selectedSubtitleTrackId = null;
var subtitleDelay = 0; var subtitleDelay = 0;
var styles = document.createElement('style'); var stylesElement = document.createElement('style');
var video = document.createElement('video'); var videoElement = document.createElement('video');
var subtitles = document.createElement('div'); var subtitlesElement = document.createElement('div');
container.appendChild(styles); containerElement.appendChild(stylesElement);
styles.sheet.insertRule('#' + container.id + ' video { width: 100%; height: 100%; position: relative; z-index: 0; }', styles.sheet.cssRules.length); stylesElement.sheet.insertRule('#' + containerElement.id + ' video { width: 100%; height: 100%; position: relative; z-index: 0; }', stylesElement.sheet.cssRules.length);
var subtitleStylesIndex = styles.sheet.insertRule('#' + container.id + ' .subtitles { position: absolute; right: 0; bottom: 0; left: 0; font-size: 26pt; color: white; text-align: center; }', styles.sheet.cssRules.length); var subtitleStylesIndex = stylesElement.sheet.insertRule('#' + containerElement.id + ' .subtitles { position: absolute; right: 0; bottom: 0; left: 0; font-size: 26pt; color: white; text-align: center; }', stylesElement.sheet.cssRules.length);
styles.sheet.insertRule('#' + container.id + ' .subtitles.dark-background .cue { text-shadow: none; background-color: #222222; }', styles.sheet.cssRules.length); stylesElement.sheet.insertRule('#' + containerElement.id + ' .subtitles.dark-background .cue { text-shadow: none; background-color: #222222; }', stylesElement.sheet.cssRules.length);
styles.sheet.insertRule('#' + container.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; }', styles.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);
container.appendChild(video); containerElement.appendChild(videoElement);
video.crossOrigin = 'anonymous'; videoElement.crossOrigin = 'anonymous';
video.controls = false; videoElement.controls = false;
container.appendChild(subtitles); containerElement.appendChild(subtitlesElement);
subtitles.classList.add('subtitles'); subtitlesElement.classList.add('subtitles');
function getPaused() { function getPaused() {
if (!loaded) { if (!loaded) {
return null; return null;
} }
return !!video.paused; return !!videoElement.paused;
} }
function getTime() { function getTime() {
if (!loaded) { if (!loaded) {
return null; return null;
} }
return Math.floor(video.currentTime * 1000); return Math.floor(videoElement.currentTime * 1000);
} }
function getDuration() { function getDuration() {
if (!loaded || isNaN(video.duration)) { if (!loaded || isNaN(videoElement.duration)) {
return null; return null;
} }
return Math.floor(video.duration * 1000); return Math.floor(videoElement.duration * 1000);
} }
function getVolume() { function getVolume() {
return video.muted ? 0 : Math.floor(video.volume * 100); return videoElement.muted ? 0 : Math.floor(videoElement.volume * 100);
} }
function getSubtitleTracks() { function getSubtitleTracks() {
if (!loaded) { if (!loaded) {
@ -76,10 +76,10 @@ var HTMLVideo = function(container) {
return subtitleDelay; return subtitleDelay;
} }
function getSubtitleSize() { function getSubtitleSize() {
return parseFloat(styles.sheet.cssRules[subtitleStylesIndex].style.fontSize); return parseFloat(stylesElement.sheet.cssRules[subtitleStylesIndex].style.fontSize);
} }
function getSubtitleDarkBackground() { function getSubtitleDarkBackground() {
return subtitles.classList.contains('dark-background'); return subtitlesElement.classList.contains('dark-background');
} }
function onEnded() { function onEnded() {
events.emit('ended'); events.emit('ended');
@ -87,7 +87,7 @@ var HTMLVideo = function(container) {
function onError() { function onError() {
var message; var message;
var critical; var critical;
switch (video.error.code) { switch (videoElement.error.code) {
case 1: case 1:
message = 'Fetching process aborted'; message = 'Fetching process aborted';
critical = false; critical = false;
@ -110,7 +110,7 @@ var HTMLVideo = function(container) {
} }
events.emit('error', { events.emit('error', {
code: video.error.code, code: videoElement.error.code,
message: message, message: message,
critical: critical critical: critical
}); });
@ -147,8 +147,8 @@ var HTMLVideo = function(container) {
events.emit('propChanged', 'subtitleDarkBackground', getSubtitleDarkBackground()); events.emit('propChanged', 'subtitleDarkBackground', getSubtitleDarkBackground());
} }
function updateSubtitleText() { function updateSubtitleText() {
while (subtitles.hasChildNodes()) { while (subtitlesElement.hasChildNodes()) {
subtitles.removeChild(subtitles.lastChild); subtitlesElement.removeChild(subtitlesElement.lastChild);
} }
if (!loaded || !Array.isArray(subtitleCues.times)) { if (!loaded || !Array.isArray(subtitleCues.times)) {
@ -160,7 +160,7 @@ var HTMLVideo = function(container) {
for (var i = 0; i < cuesForTime.length; i++) { for (var i = 0; i < cuesForTime.length; i++) {
var cueNode = subtitleUtils.render(cuesForTime[i]); var cueNode = subtitleUtils.render(cuesForTime[i]);
cueNode.classList.add('cue'); cueNode.classList.add('cue');
subtitles.append(cueNode, document.createElement('br')); subtitlesElement.append(cueNode, document.createElement('br'));
} }
} }
function flushArgsQueue() { function flushArgsQueue() {
@ -189,25 +189,25 @@ var HTMLVideo = function(container) {
switch (arguments[1]) { switch (arguments[1]) {
case 'paused': case 'paused':
events.emit('propValue', 'paused', getPaused()); events.emit('propValue', 'paused', getPaused());
video.removeEventListener('pause', onPausedChanged); videoElement.removeEventListener('pause', onPausedChanged);
video.removeEventListener('play', onPausedChanged); videoElement.removeEventListener('play', onPausedChanged);
video.addEventListener('pause', onPausedChanged); videoElement.addEventListener('pause', onPausedChanged);
video.addEventListener('play', onPausedChanged); videoElement.addEventListener('play', onPausedChanged);
return; return;
case 'time': case 'time':
events.emit('propValue', 'time', getTime()); events.emit('propValue', 'time', getTime());
video.removeEventListener('timeupdate', onTimeChanged); videoElement.removeEventListener('timeupdate', onTimeChanged);
video.addEventListener('timeupdate', onTimeChanged); videoElement.addEventListener('timeupdate', onTimeChanged);
return; return;
case 'duration': case 'duration':
events.emit('propValue', 'duration', getDuration()); events.emit('propValue', 'duration', getDuration());
video.removeEventListener('durationchange', onDurationChanged); videoElement.removeEventListener('durationchange', onDurationChanged);
video.addEventListener('durationchange', onDurationChanged); videoElement.addEventListener('durationchange', onDurationChanged);
return; return;
case 'volume': case 'volume':
events.emit('propValue', 'volume', getVolume()); events.emit('propValue', 'volume', getVolume());
video.removeEventListener('volumechange', onVolumeChanged); videoElement.removeEventListener('volumechange', onVolumeChanged);
video.addEventListener('volumechange', onVolumeChanged); videoElement.addEventListener('volumechange', onVolumeChanged);
return; return;
case 'subtitleTracks': case 'subtitleTracks':
events.emit('propValue', 'subtitleTracks', getSubtitleTracks()); events.emit('propValue', 'subtitleTracks', getSubtitleTracks());
@ -231,13 +231,13 @@ var HTMLVideo = function(container) {
switch (arguments[1]) { switch (arguments[1]) {
case 'paused': case 'paused':
if (loaded) { if (loaded) {
arguments[2] ? video.pause() : video.play(); arguments[2] ? videoElement.pause() : videoElement.play();
} }
break; break;
case 'time': case 'time':
if (loaded) { if (loaded) {
if (!isNaN(arguments[2])) { if (!isNaN(arguments[2])) {
video.currentTime = arguments[2] / 1000; videoElement.currentTime = arguments[2] / 1000;
} }
} }
break; break;
@ -294,23 +294,23 @@ var HTMLVideo = function(container) {
break; break;
case 'subtitleSize': case 'subtitleSize':
if (!isNaN(arguments[2])) { if (!isNaN(arguments[2])) {
styles.sheet.cssRules[subtitleStylesIndex].style.fontSize = parseFloat(arguments[2]) + 'pt'; stylesElement.sheet.cssRules[subtitleStylesIndex].style.fontSize = parseFloat(arguments[2]) + 'pt';
onSubtitleSizeChanged(); onSubtitleSizeChanged();
} }
return; return;
case 'subtitleDarkBackground': case 'subtitleDarkBackground':
if (arguments[2]) { if (arguments[2]) {
subtitles.classList.add('dark-background'); subtitlesElement.classList.add('dark-background');
} else { } else {
subtitles.classList.remove('dark-background'); subtitlesElement.classList.remove('dark-background');
} }
onSubtitleDarkBackgroundChanged(); onSubtitleDarkBackgroundChanged();
return; return;
case 'volume': case 'volume':
if (!isNaN(arguments[2])) { if (!isNaN(arguments[2])) {
video.muted = false; videoElement.muted = false;
video.volume = arguments[2] / 100; videoElement.volume = arguments[2] / 100;
} }
return; return;
default: default:
@ -349,25 +349,25 @@ var HTMLVideo = function(container) {
} }
break; break;
case 'mute': case 'mute':
video.muted = true; videoElement.muted = true;
return; return;
case 'unmute': case 'unmute':
video.volume = video.volume !== 0 ? video.volume : 0.5; videoElement.volume = videoElement.volume !== 0 ? videoElement.volume : 0.5;
video.muted = false; videoElement.muted = false;
return; return;
case 'stop': case 'stop':
video.removeEventListener('ended', onEnded); videoElement.removeEventListener('ended', onEnded);
video.removeEventListener('error', onError); videoElement.removeEventListener('error', onError);
video.removeEventListener('timeupdate', updateSubtitleText); videoElement.removeEventListener('timeupdate', updateSubtitleText);
loaded = false; loaded = false;
dispatchArgsQueue = []; dispatchArgsQueue = [];
subtitleCues = {}; subtitleCues = {};
subtitleTracks = []; subtitleTracks = [];
selectedSubtitleTrackId = null; selectedSubtitleTrackId = null;
subtitleDelay = 0; subtitleDelay = 0;
video.removeAttribute('src'); videoElement.removeAttribute('src');
video.load(); videoElement.load();
video.currentTime = 0; videoElement.currentTime = 0;
onPausedChanged(); onPausedChanged();
onTimeChanged(); onTimeChanged();
onDurationChanged(); onDurationChanged();
@ -380,12 +380,12 @@ var HTMLVideo = function(container) {
var dispatchArgsQueueCopy = dispatchArgsQueue.slice(); var dispatchArgsQueueCopy = dispatchArgsQueue.slice();
self.dispatch('command', 'stop'); self.dispatch('command', 'stop');
dispatchArgsQueue = dispatchArgsQueueCopy; dispatchArgsQueue = dispatchArgsQueueCopy;
video.addEventListener('ended', onEnded); videoElement.addEventListener('ended', onEnded);
video.addEventListener('error', onError); videoElement.addEventListener('error', onError);
video.addEventListener('timeupdate', updateSubtitleText); videoElement.addEventListener('timeupdate', updateSubtitleText);
video.autoplay = typeof arguments[3].autoplay === 'boolean' ? arguments[3].autoplay : true; videoElement.autoplay = typeof arguments[3].autoplay === 'boolean' ? arguments[3].autoplay : true;
video.currentTime = !isNaN(arguments[3].time) ? arguments[3].time / 1000 : 0; videoElement.currentTime = !isNaN(arguments[3].time) ? arguments[3].time / 1000 : 0;
video.src = arguments[2].url; videoElement.src = arguments[2].url;
loaded = true; loaded = true;
onPausedChanged(); onPausedChanged();
onTimeChanged(); onTimeChanged();
@ -398,14 +398,14 @@ var HTMLVideo = function(container) {
case 'destroy': case 'destroy':
self.dispatch('command', 'stop'); self.dispatch('command', 'stop');
events.removeAllListeners(); events.removeAllListeners();
video.removeEventListener('pause', onPausedChanged); videoElement.removeEventListener('pause', onPausedChanged);
video.removeEventListener('play', onPausedChanged); videoElement.removeEventListener('play', onPausedChanged);
video.removeEventListener('timeupdate', onTimeChanged); videoElement.removeEventListener('timeupdate', onTimeChanged);
video.removeEventListener('durationchange', onDurationChanged); videoElement.removeEventListener('durationchange', onDurationChanged);
video.removeEventListener('volumechange', onVolumeChanged); videoElement.removeEventListener('volumechange', onVolumeChanged);
container.removeChild(video); containerElement.removeChild(videoElement);
container.removeChild(styles); containerElement.removeChild(stylesElement);
container.removeChild(subtitles); containerElement.removeChild(subtitlesElement);
destroyed = true; destroyed = true;
return; return;
default: default: