diff --git a/src/main/resources/kinosearch/webapp/static/js/ksplayer.js b/src/main/resources/kinosearch/webapp/static/js/ksplayer.js index 0e369a1..335911d 100644 --- a/src/main/resources/kinosearch/webapp/static/js/ksplayer.js +++ b/src/main/resources/kinosearch/webapp/static/js/ksplayer.js @@ -106,6 +106,71 @@ const KSPlayer = function(containerId, data) { titleElement.id = 'title'; } + function createVideoElement() { + let videoElement = document.createElement('video'); + videoElement.id = 'player'; + videoElement.className = 'center-block'; + videoElement.setAttribute('controls', 'controls'); + videoElement.setAttribute('preload', 'none'); + + if (videoElement.requestFullscreen) { + videoElement.kspFullScreen = videoElement.requestFullscreen; + } else if (videoElement.mozRequestFullScreen) { + videoElement.kspFullScreen = videoElement.mozRequestFullScreen; // Firefox + } else if (videoElement.webkitRequestFullscreen) { + videoElement.kspFullScreen = videoElement.webkitRequestFullscreen; // Chrome and Safari + } else { + console.warn('KSPlayer: can\'t use fullscreen mode =('); + videoElement.kspFullScreen = function() { return false; }; + } + + videoElement.onkeydown = function(e) { + // 32 - Space + if (e.keyCode === 32) { + if (videoElement.paused) { + videoElement.play(); + } else { + videoElement.pause(); + } + } + + // 37 - Left arrow + if (e.keyCode === 37) { + videoElement.currentTime -= 5; + } + // 39 - Right arrow + else if (e.keyCode === 39) { + videoElement.currentTime += 5; + } + + // 38 - Up arrow + if (e.keyCode === 38 && videoElement.volume < 1) { + if ((videoElement.volume + 0.1) < 1) { + videoElement.volume += 0.1; + } else { + videoElement.volume = 1; + } + } + // 40 - Down arrow + else if (e.keyCode === 40 && videoElement.volume > 0) { + if ((videoElement.volume - 0.1) >= 0) { + videoElement.volume -= 0.1; + } else { + videoElement.volume = 0; + } + } + + // 70 - F + if (e.keyCode === 70) { + videoElement.kspFullScreen(); + } + + return false; + } + + return videoElement; + } + /* --- CONSTRUCTOR --------- */ const containerElement = document.getElementById(containerId); @@ -113,11 +178,7 @@ const KSPlayer = function(containerId, data) { throw `Container "${containerId}" not found!`; } - let videoElement = document.createElement('video'); - videoElement.id = 'player'; - videoElement.className = 'center-block'; - videoElement.setAttribute('controls', 'controls'); - videoElement.setAttribute('preload', 'none'); + let videoElement = createVideoElement(); if (data.hasOwnProperty('title')) { this.setTitle(data.title);