From 01b616fee50d24d483203c9eaac9830cbca40bb8 Mon Sep 17 00:00:00 2001
From: DmitriyMX <dimon550@gmail.com>
Date: Fri, 15 Dec 2017 12:29:10 +0300
Subject: [PATCH] =?UTF-8?q?KSPlayer:=20=D1=83=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BB=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D1=88=D0=B0=D0=BC=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<Space> - воспроизведение/пауза
<Left>/<Right> - перемотка на 5 секунд назад/вперед
<Up>/<Down> - звук громче/тише
<F> - переход в полноэкранный режим
---
 .../kinosearch/webapp/static/js/ksplayer.js   | 71 +++++++++++++++++--
 1 file changed, 66 insertions(+), 5 deletions(-)

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);