наводим порядок в javascript

see #28

src/main/resources/kinosearch/webapp/player.ftl

@@ -2,66 +2,6 @@
 [#include "/header.inc.ftl"]
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.min.js"></script>
 <script type="text/javascript" src="/js/player.js"></script>
-<script type="text/javascript">
-    var playerCore;
-    var data;
-    var plSeason;
-    var plSerial;
-    var playerObj;
-
-    $(function(){
-        var video_data = ${json};
-        var titleObj = $('#title');
-
-        plSeason = $('#pl-season');
-        plSerial = $('#pl-serial');
-        playerObj = $('#player');
-
-        playerCore = new PlayerCore(playerObj, titleObj, video_data);
-        playerCore.setupPlayer();
-
-        // загрузка ранее сохранённых данных
-        data = Cookies.getJSON(playerCore.path);
-        if (data != null) {
-            var fulltime = playerCore.msToTime(data.time * 1000);
-            $('#mdl-vtime').text(fulltime.h + ':' + fulltime.m + ':' + fulltime.s);
-            if (playerCore.getType() == 'simple_serial') {
-                $('#mdl-serial').find('span').text(data.serial + 1);
-                $('#mdl-serial').removeClass('hide');
-            } else if (playerCore.getType() == 'seasons_serial') {
-                $('#mdl-season').find('span').text(data.season + 1);
-                $('#mdl-season').removeClass('hide');
-                $('#mdl-serial').find('span').text(data.serial + 1);
-                $('#mdl-serial').removeClass('hide');
-            }
-            $('#modal').modal('show');
-        }
-
-        if (playerCore.getType() == 'one_film') {
-            playerCore.setTitle();
-            playerCore.setupPlayerForOneFilm();
-        } else if (playerCore.getType() == 'simple_serial') {
-            playerCore.setupPlayerForSimpleSerial($('#pl-serial'));
-            titleObj.hide();
-        } else if (playerCore.getType() == 'seasons_serial') {
-            playerCore.setupPlayerForSeasonSerial($('#pl-season'), $('#pl-serial'));
-            titleObj.hide();
-        } else {
-            console.debug(playerCore.videoData);
-        }
-    });
-
-    function continueVideo() {
-        if (playerCore.getType() == 'simple_serial') {
-            playerCore.setSerial(data.serial, plSerial);
-        } else if (playerCore.getType() == 'seasons_serial') {
-            playerCore.setSeason(data.season, plSeason);
-            playerCore.setSerial(data.serial, plSerial, data.season);
-        }
-        playerObj[0].currentTime = data.time;
-        playerObj.load();
-    }
-</script>
 
 <div class="modal fade" tabindex="-1" role="dialog" id="modal">
     <div class="modal-dialog modal-sm">
@@ -77,8 +17,8 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="continueVideo()">Да</button>
+                <button id="mdl-btn-yes" type="button" class="btn btn-primary" data-dismiss="modal">Да</button>
-                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="playerObj.load()">Нет</button>
+                <button id="mdl-btn-no" type="button" class="btn btn-default" data-dismiss="modal">Нет</button>
             </div>
         </div>
     </div>
@@ -114,4 +54,7 @@
 
 <video id="player" class="center-block" controls="controls" preload="none"></video>
 <br>
+<script type="text/javascript"> 
+    const playerCore = initPlayer(${json}); 
+</script>
 [#include "/fother.inc.ftl"]

src/main/resources/kinosearch/webapp/static/js/player.js

@@ -1,51 +1,60 @@
-function PlayerCore(playerObj, titleObj, videoData) {
+const PlayerCore = function(playerObj, titleObj, videoData) {
-    this.playerObj = playerObj;
+    this.path = window.location.pathname;
-    this.titleObj = titleObj;
-    this.videoData = videoData;
     this.origDocTitle = document.title;
-
     this.timeLast = 0;
 
-    this.msToTime = function(ms) {
+    const _this = this;
-        function addZ(n) { return (n<10? '0':'') + n; }
 
-        var _ms = ms % 1000;
+    // сохранение времени просмотра
-        ms = (ms - _ms) / 1000;
+    playerObj.bind('play', function() {
-        var _sec = ms % 60;
+        _this.timeLast = $.now();
-        ms = (ms - _sec) / 60;
+    });
-        var _min = ms % 60;
-        var _hr = (ms - _min) / 60;
 
-        return {
+    playerObj.bind('timeupdate', function() {
-            's': addZ(_sec),
+        let timeCurrent = $.now();
-            'm': addZ(_min),
+        let sec = Math.floor((timeCurrent - _this.timeLast)/1000);
-            'h': addZ(_hr)
+        if (sec >= 5) {
-        };
+            let playerCurrentTime = playerObj[0].currentTime;
+            if (Math.floor(playerCurrentTime) <= 10) 
+                return;
+            let save_data = { 'time': playerCurrentTime };
+            Cookies.set(_this.path, save_data, { 'expires': 30 });
+            _this.timeLast = timeCurrent;
+            console.debug({
+                'path': _this.path,
+                'saveTime': save_data
+            }); //TODO убрать на продакшене
+        }
+    });
+
+    this.getType = function() {
+        return videoData.type;
     };
 
-    this.setTitle = function(title = videoData.title) {
+    this.setTitle = function(title) {
-        document.title = title + " :: " + this.origDocTitle;
+        if (!title) {
+            title = videoData.title;
+        }
+        document.title = title + " :: " + _this.origDocTitle;
         titleObj.text(title);
         titleObj.show();
     };
 
-    this.getType = function() {
+    this.setupForOneFilm = function() {
-        return this.videoData.type;
-    };
-
-    this.setupPlayerForOneFilm = function() {
         playerObj.attr('src', videoData.file);
         playerObj.load();
     };
 
-    this.setupPlayerForSimpleSerial = function(serialBlock) {
+    this.setupForSimpleSerial = function(serialBlock) {
-        var menu = serialBlock.find('.dropdown-menu');
+        let menu = serialBlock.find('.dropdown-menu');
         menu.html('');
-        var _self = this;
+        let _self = this;
-        this.videoData.serials.forEach(function(item, i) {
+        videoData.serials.forEach(function(item, i) {
-            var aTag = $('<a/>', {'href':'#', 'text':item.title});
+            let aTag = $('<a/>', { 'href': '#', 'text': item.title });
-            aTag.click(function(){_self.setSerial(i, serialBlock)});
+            aTag.click(function() { 
-            var liTag = $('<li/>')
+                _self.setSerial(i, serialBlock);
+            });
+            let liTag = $('<li/>');
             liTag.append(aTag);
             menu.append(liTag);
         });
@@ -53,14 +62,16 @@ function PlayerCore(playerObj, titleObj, videoData) {
         serialBlock.removeClass('hide');
     };
 
-    this.setupPlayerForSeasonSerial = function(seasonBlock, serialBlock) {
+    this.setupForSeasonSerial = function(seasonBlock, serialBlock) {
-        var menu = seasonBlock.find('.dropdown-menu');
+        let menu = seasonBlock.find('.dropdown-menu');
         menu.html('');
-        var _self = this;
+        let _self = this;
-        this.videoData.seasons.forEach(function(item, i) {
+        videoData.seasons.forEach(function(item, i) {
-            var aTag = $('<a/>', {'href':'#', 'text':item.title});
+            let aTag = $('<a/>', { 'href': '#', 'text': item.title });
-            aTag.click(function(){_self.setSeason(i, seasonBlock, serialBlock)});
+            aTag.click(function() {
-            var liTag = $('<li/>');
+                _self.setSeason(i, seasonBlock, serialBlock);
+            });
+            let liTag = $('<li/>');
             liTag.append(aTag);
             menu.append(liTag);
         });
@@ -68,65 +79,118 @@ function PlayerCore(playerObj, titleObj, videoData) {
         seasonBlock.removeClass('hide');
     };
 
-    this.setupPlayer = function() {
+    this.setSerial = function(idx, serialBlock, sidx) {
-        var _self = this;
+        if (!sidx) {
-        // сохранение времени просмотра
+            sidx = 0;
-        playerObj.bind('play', function(){
+        }
-            _self.timeLast = $.now();
-        });
 
-        playerObj.bind('timeupdate', function(){
+        let title;
-            var timeCurrent = $.now();
+        let playerSrc;
-            var sec = Math.floor((timeCurrent - _self.timeLast)/1000);
+        if (_this.getType() == 'seasons_serial') {
-            if (sec >= 5) {
-                playerCurrentTime = playerObj[0].currentTime;
-                if (Math.floor(playerCurrentTime) <= 10) return;
-
-                var save_data = {'time':playerCurrentTime};
-                Cookies.set(_self.path, save_data, {'expires':30});
-                _self.timeLast = timeCurrent;
-                console.debug({'path': _self.path, 'saveTime': save_data});
-            }
-        });
-    };
-
-    this.setSerial = function(idx, serialBlock, sidx = 0) {
-        var title;
-        var playerSrc;
-        if (this.getType() == 'seasons_serial') {
             title = videoData.seasons[sidx].serials[idx].title;
             playerSrc = videoData.seasons[sidx].serials[idx].file;
         } else {
             title = videoData.serials[idx].title;
             playerSrc = videoData.serials[idx].file;
         }
-        this.setTitle(title);
+        _this.setTitle(title);
 
-        var menuBtn = serialBlock.find('#dropdownSerial');
+        let menuBtn = serialBlock.find('#dropdownSerial');
         menuBtn.html(title + '&nbsp;<span class="caret"></span>');
 
         playerObj.attr('src', playerSrc);
         playerObj.attr('data-serial', idx);
-        playerObj.load();
     };
 
-    this.setSeason = function(idx, seasonBlock, serialBlock) {
+    this.setTime = function(time) {
-        var title = videoData.seasons[idx].title;
+        playerObj[0].currentTime = time;
+    };
 
-        var menuBtn = seasonBlock.find('#dropdownSeason');
+    this.load = function() {
-        menuBtn.html(title + '&nbsp;<span class="caret"></span>');
+        playerObj.load();
+    };
+};
 
-        var menu = serialBlock.find('.dropdown-menu');
+function msToTime(ms) {
-        menu.html('');
+    function addZ(n) { 
-        var _self = this;
+        return (n < 10 ? '0' : '') + n; 
-        this.videoData.seasons[idx].serials.forEach(function(item, i) {
-            var aTag = $('<a/>', {'href':'#', 'text':item.title});
-            aTag.click(function(){_self.setSerial(i, serialBlock, idx)});
-            var liTag = $('<li/>');
-            liTag.append(aTag);
-            menu.append(liTag);
-        });
-
-        serialBlock.removeClass('hide');
     }
-}
+
+    const _ms = ms % 1000;
+    ms = (ms - _ms) / 1000;
+    const _sec = ms % 60;
+    ms = (ms - _sec) / 60;
+    const _min = ms % 60;
+    const _hr = (ms - _min) / 60;
+
+    return {
+        'sec': addZ(_sec),
+        'min': addZ(_min),
+        'hour': addZ(_hr)
+    };
+}
+
+function loadPlayerCookieData(playerCore) {
+    let data = Cookies.getJSON(playerCore.path);
+
+    if (data != null) {
+        let fulltime = msToTime(data.time * 1000);
+        $('#mdl-vtime').text(fulltime.hour + ':' + fulltime.min + ':' + fulltime.sec);
+
+        if (playerCore.getType() == 'simple_serial') {
+            $('#mdl-serial').find('span').text(data.serial + 1);
+            $('#mdl-serial').removeClass('hide');
+
+            $('#mdl-btn-yes').click(function() {
+                playerCore.setSerial(data.serial, $('#pl-serial'));
+
+                playerCore.setTime(data.time);
+                playerCore.load();
+            });
+
+            $('#mdl-btn-no').click(function() {
+                playerCore.load();
+            });
+        } else if (playerCore.getType() == 'seasons_serial') {
+            $('#mdl-season').find('span').text(data.season + 1);
+            $('#mdl-season').removeClass('hide');
+            $('#mdl-serial').find('span').text(data.serial + 1);
+            $('#mdl-serial').removeClass('hide');
+
+            $('#mdl-btn-yes').click(function() {
+                playerCore.setSeason(data.season, $('#pl-season'));
+                playerCore.setSerial(data.serial, $('#pl-serial'), data.season);
+
+                playerCore.setTime(data.time);
+                playerCore.load();
+            });
+
+            $('#mdl-btn-no').click(function() {
+                playerCore.load();
+            });
+        }
+        $('#modal').modal('show');
+    }
+}
+
+function initPlayer(video_data) {
+    const playerCore = new PlayerCore($('#player'), $('#title'), video_data);
+
+    // загрузка ранее сохранённых данных
+    loadPlayerCookieData(playerCore);
+
+    if (playerCore.getType() == 'one_film') {
+        playerCore.setTitle();
+        playerCore.setupForOneFilm();
+    } else if (playerCore.getType() == 'simple_serial') {
+        playerCore.setupForSimpleSerial($('#pl-serial'));
+        $('#title').hide();
+    } else if (playerCore.getType() == 'seasons_serial') {
+        playerCore.setupForSeasonSerial($('#pl-season'), $('#pl-serial'));
+        $('#title').hide();
+    } else {
+        console.debug(video_data); //TODO убрать из продакшена
+    }
+
+    return playerCore;
+}