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

see #28
2017-12-12 09:40:44 +03:00
parent 137846e154
commit 8bf1a383ac
2 changed files with 153 additions and 146 deletions
--- a/src/main/resources/kinosearch/webapp/player.ftl
+++ b/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 type="button" class="btn btn-default" data-dismiss="modal" onclick="playerObj.load()">Нет</button>
+                <button id="mdl-btn-yes" type="button" class="btn btn-primary" data-dismiss="modal">Да</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"]
--- a/src/main/resources/kinosearch/webapp/static/js/player.js
+++ b/src/main/resources/kinosearch/webapp/static/js/player.js
@@ -1,51 +1,60 @@
-function PlayerCore(playerObj, titleObj, videoData) {
-    this.playerObj = playerObj;
-    this.titleObj = titleObj;
-    this.videoData = videoData;
+const PlayerCore = function(playerObj, titleObj, videoData) {
+    this.path = window.location.pathname;
    this.origDocTitle = document.title;
-
    this.timeLast = 0;

-    this.msToTime = function(ms) {
-        function addZ(n) { return (n<10? '0':'') + n; }
+    const _this = this;

-        var _ms = ms % 1000;
-        ms = (ms - _ms) / 1000;
-        var _sec = ms % 60;
-        ms = (ms - _sec) / 60;
-        var _min = ms % 60;
-        var _hr = (ms - _min) / 60;
+    // сохранение времени просмотра
+    playerObj.bind('play', function() {
+        _this.timeLast = $.now();
+    });

-        return {
-            's': addZ(_sec),
-            'm': addZ(_min),
-            'h': addZ(_hr)
-        };
+    playerObj.bind('timeupdate', function() {
+        let timeCurrent = $.now();
+        let sec = Math.floor((timeCurrent - _this.timeLast)/1000);
+        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) {
-        document.title = title + " :: " + this.origDocTitle;
+    this.setTitle = function(title) {
+        if (!title) {
+            title = videoData.title;
+        }
+        document.title = title + " :: " + _this.origDocTitle;
        titleObj.text(title);
        titleObj.show();
    };

-    this.getType = function() {
-        return this.videoData.type;
-    };
-
-    this.setupPlayerForOneFilm = function() {
+    this.setupForOneFilm = function() {
        playerObj.attr('src', videoData.file);
        playerObj.load();
    };

-    this.setupPlayerForSimpleSerial = function(serialBlock) {
-        var menu = serialBlock.find('.dropdown-menu');
+    this.setupForSimpleSerial = function(serialBlock) {
+        let menu = serialBlock.find('.dropdown-menu');
        menu.html('');
-        var _self = this;
-        this.videoData.serials.forEach(function(item, i) {
-            var aTag = $('<a/>', {'href':'#', 'text':item.title});
-            aTag.click(function(){_self.setSerial(i, serialBlock)});
-            var liTag = $('<li/>')
+        let _self = this;
+        videoData.serials.forEach(function(item, i) {
+            let aTag = $('<a/>', { 'href': '#', 'text': item.title });
+            aTag.click(function() { 
+                _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) {
-        var menu = seasonBlock.find('.dropdown-menu');
+    this.setupForSeasonSerial = function(seasonBlock, serialBlock) {
+        let menu = seasonBlock.find('.dropdown-menu');
        menu.html('');
-        var _self = this;
-        this.videoData.seasons.forEach(function(item, i) {
-            var aTag = $('<a/>', {'href':'#', 'text':item.title});
-            aTag.click(function(){_self.setSeason(i, seasonBlock, serialBlock)});
-            var liTag = $('<li/>');
+        let _self = this;
+        videoData.seasons.forEach(function(item, i) {
+            let aTag = $('<a/>', { 'href': '#', 'text': item.title });
+            aTag.click(function() {
+                _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() {
-        var _self = this;
-        // сохранение времени просмотра
-        playerObj.bind('play', function(){
-            _self.timeLast = $.now();
-        });
+    this.setSerial = function(idx, serialBlock, sidx) {
+        if (!sidx) {
+            sidx = 0;
+        }

-        playerObj.bind('timeupdate', function(){
-            var timeCurrent = $.now();
-            var sec = Math.floor((timeCurrent - _self.timeLast)/1000);
-            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') {
+        let title;
+        let 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) {
-        var title = videoData.seasons[idx].title;
+    this.setTime = function(time) {
+        playerObj[0].currentTime = time;
+    };

-        var menuBtn = seasonBlock.find('#dropdownSeason');
-        menuBtn.html(title + '&nbsp;<span class="caret"></span>');
+    this.load = function() {
+        playerObj.load();
+    };
+};

-        var menu = serialBlock.find('.dropdown-menu');
-        menu.html('');
-        var _self = this;
-        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);
-        });
+function msToTime(ms) {
+    function addZ(n) { 
+        return (n < 10 ? '0' : '') + n; 
+    }

-        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;
+}