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 origDocTitle;
        var isSerial = false;

        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 setSeason(idx) {
            var season_title = video_data.playlist[idx].comment;
            $('#dropdownSeason').html(season_title + '&nbsp;<span class="caret"></span>');
            $('#dropdownSerial').html('Serials&nbsp;<span class="caret"></span>');

            var serial_menu = $('#pl-serial-menu');
            serial_menu.html('');
            video_data.playlist[idx].playlist.forEach(function(item, i){
                serial_menu.append('<li><a data-file="' + item.file + '" data-season="' + idx + '" href="#" onclick="setSerial('+ idx + ',' + i + ');return false;">' + item.comment + '</a></li>');
            });

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

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

        function setSerial(idx, sidx) {
            var serial_title = video_data.playlist[idx].playlist[sidx].comment;
            $('#dropdownSerial').html(serial_title + '&nbsp;<span class="caret"></span>');

            var serial_file = video_data.playlist[idx].playlist[sidx].file;
            player.attr('src', '${basedir}' + serial_file);
            player.attr('data-season', idx);
            player.attr('data-serial', sidx);
            setTitle(serial_title);
        }

        $(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') {
                isSerial = true;
                $('#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="setSeason(' + i + ');return false;">' + item.comment + '</a></li>');
                });
            }

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

            // save video time
            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;
                    save_data = {time:player[0].currentTime};
                    if (isSerial) {
                        save_data.season = parseInt(player.attr('data-season'), 10);
                        save_data.serial = parseInt(player.attr('data-serial'), 10);
                    }
                    Cookies.set(path, save_data);
                    tl = tc;
                    console.debug(save_data);
                }
            });
        });

        function continueVideo() {
            if (isSerial) {
                setSeason(data.season);
                setSerial(data.season, data.serial);
            }
            player[0].currentTime = data.time;
            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-header">
                    <h4 class="modal-title">Продолжить просмотр?</h4>
                </div>
                <div class="modal-body">
                        <b>Время:</b> <span id="mdl-vtime"></span>
                        <div id="mdl-blk-serial">
                            <b>Сезон:</b> <span id="mdl-season"></span><br>
                            <b>Серия:</b> <span id="mdl-serial"></span>
                        </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="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">