KinoSearch/webapp/WEB-INF/player.html

<#include "/header.inc.html">
    <script type="text/javascript" src="${basedir}/js/js.cookie-2.1.0.min.js"></script>
    <script type="text/javascript">
        var video_data = ${json};
        var player;
        var videotime = 0;
        var origDocTitle;

        function msToTime(ms) {
            function addZ(n) { return (n<10? '0':'') + n; }

            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;

            return {
                's': addZ(_sec),
                'm': addZ(_min),
                'h': addZ(_hr)
            };
        }

        function setTitle(text) {
            document.title = text + " :: " + origDocTitle;
            $('#title').text(text);
            $('#title').show();
        }

        $(function(){
            player = $('#player');
            origDocTitle = document.title;
            if (typeof(video_data.title) !== 'undefined') {
                setTitle(video_data.title);
            } else {
                $('#title').hide();
            }

            // set video
            if (typeof(video_data.file) !== 'undefined') {
                player.attr('src', '${basedir}'+video_data.file);
                $('#plbr').hide();
            } else if (typeof(video_data.playlist) !== 'undefined') {
                $('#pl-season').removeClass('hide');
                menu = $('#pl-season-menu');

                menu.html('');
                video_data.playlist.forEach(function(item, i){
                    menu.append('<li><a data-tag="' + i + '" href="#" onclick="return false;">' + item.comment + '</a></li>');
                });

                ddBtn = $('#dropdownSeason');
                smenu = $('#pl-serial-menu');
                menu.find('a').bind('click', function(){
                    ddBtn.html(this.text + '&nbsp;<span class="caret"></span>');

                    $('#dropdownSerial').html('Serials&nbsp;<span class="caret"></span>');

                    smenu.html('');
                    video_data.playlist[this.attributes['data-tag'].value].playlist.forEach(function(item){
                        smenu.append('<li><a data-file="' + item.file + '" href="#" onclick="return false;">' + item.comment + '</a></li>');
                    });

                    smenu.find('a').bind('click', function(){
                        $('#dropdownSerial').html(this.text + '&nbsp;<span class="caret"></span>');
                        player.attr('src', '${basedir}'+this.attributes['data-file'].value);
                        setTitle(this.text);
                    });

                    $('#pl-serial').removeClass('hide');
                });
            }

            // save video time
            var path = window.location.pathname.substr("${basedir}".length);
            var data = Cookies.getJSON(path);
            if (data != null) {
                videotime = data.time;
                var fulltime = msToTime(videotime * 1000);
                $('#mdl-vtime').text(fulltime.h + ':' + fulltime.m + ':' + fulltime.s);
                $('#modal').modal('show');
            } else {
                player.load();
            }

            var tl;
            player.bind('play', function(){
                tl = $.now();
            });
            player.bind('timeupdate', function(){
                var tc = $.now();
                var sec = Math.floor((tc-tl)/1000);
                if (sec >= 5) {
                    if (Math.floor(player[0].currentTime) <= 10) return;
                    Cookies.set(path, {time:player[0].currentTime});
                    tl = tc;
                }
            });
        });

        function continueVideo() {
            player[0].currentTime = videotime;
            player[0].load();
        }
    </script>

    <div class="modal fade" tabindex="-1" role="dialog" id="modal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body">
                    <p class="text-center">Продолжить просмотр с <span id="mdl-vtime"></span>?</p>
                </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="player[0].load()">Нет</button>
                </div>
            </div>
        </div>
    </div>

    <hr>

    <div id="pl-season" class="dropdown hide" style="display: inline-block;">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownSeason" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Seasons
            <span class="caret"></span>
        </button>
        <ul id="pl-season-menu" class="dropdown-menu" aria-labelledby="dropdownSeason">
            <li><a href="#">Season</a></li>
        </ul>
    </div>

    <div id="pl-serial" class="dropdown hide" style="display: inline-block;">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownSerial" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Serials
            <span class="caret"></span>
        </button>
        <ul id="pl-serial-menu" class="dropdown-menu" aria-labelledby="dropdownSerial">
            <li><a href="#">Serial</a></li>
        </ul>
    </div>

    <br id="plbr">

    <h2 id="title"></h2>

    <br>

    <video id="player" class="center-block" controls="controls" preload="none"></video>
    <br>
<#include "/fother.inc.html">