KinoSearch/src/main/resources/kinosearch/webapp/static/js/ksplayer.js

const KSPlayer = function(containerId, data) {
    /* --- FIELDS -------------- */

    let isShowTitle = false;

    /* --- PRIVATE FIELDS ------ */

    let titleElement;
    let seasonSerials = [];
    const _self = this;
    let lastActiveSerialItem;
    let lastActiveSeasonItem;

    /* --- PRIVATE FUNCTIONS --- */

    function createSerialMenuElement(serials) {
        let div = document.createElement('div');
        div.id = 'pl-serial';
        div.className = 'dropdown';
        div.style = 'display: inline-block';

        let button = document.createElement('button');
        button.className = 'btn btn-default dropdown-toggle';
        button.type = 'button';
        button.id = 'dropdownSerial';
        button.setAttribute('data-toggle', 'dropdown');
        button.setAttribute('aria-haspopup', 'true');
        button.setAttribute('aria-expanded', 'true');

        let text = document.createTextNode('Serials');

        let span = document.createElement('span');
        span.className = 'caret';
        span.style = 'margin-left: .5em';

        let ul = document.createElement('ul');
        ul.id = 'pl-serial-menu';
        ul.className = 'dropdown-menu';
        ul.setAttribute('aria-labelledby', 'dropdownSerial');

        serials.forEach(item => {
            let li = document.createElement('li');
            let a = document.createElement('a');
            a.href = '#';
            a.innerText = item.title;
            a.onclick = function() {
                text.nodeValue = item.title;
                console.log(text);
                _self.setTitle(item.title);

                if (lastActiveSerialItem) {
                    lastActiveSerialItem.classList.remove('active');
                }
                li.classList.add('active');
                lastActiveSerialItem = li;

                setSource(item.file);

                return false;
            }

            li.appendChild(a);
            ul.appendChild(li);
        });

        button.appendChild(text);
        button.appendChild(span);
        div.appendChild(button);
        div.appendChild(ul);

        return div;
    }

    function createSeasonMenuElement(seasons) {
        let div = document.createElement('div');
        div.id = 'pl-season';
        div.className = 'dropdown';
        div.style = 'display: inline-block';
        div.kspSerialMenuElement = undefined;

        let button = document.createElement('button');
        button.className = 'btn btn-default dropdown-toggle';
        button.type = 'button';
        button.id = 'dropdownSeason';
        button.setAttribute('data-toggle', 'dropdown');
        button.setAttribute('aria-haspopup', 'true');
        button.setAttribute('aria-expanded', 'true');

        let text = document.createTextNode('Seasons');

        let span = document.createElement('span');
        span.className = 'caret';
        span.style = 'margin-left: .5em';

        let ul = document.createElement('ul');
        ul.id = 'pl-season-menu';
        ul.className = 'dropdown-menu';
        ul.setAttribute('aria-labelledby', 'dropdownSeason');

        seasons.forEach((item, idx) => {
            let li = document.createElement('li');
            let a = document.createElement('a');
            a.href = '#';
            a.innerText = item.title;
            a.setAttribute('data-number', idx);
            a.onclick = function() {
                text.nodeValue = item.title;

                if (lastActiveSeasonItem) {
                    lastActiveSeasonItem.classList.remove('active');
                }
                li.classList.add('active');
                lastActiveSeasonItem = li;

                if (div.kspSerialMenuElement) {
                    containerElement.removeChild(div.kspSerialMenuElement);
                }
                containerElement.insertAfter(seasonSerials[idx], div);
                div.kspSerialMenuElement = seasonSerials[idx];

                return false;
            }

            seasonSerials.push(createSerialMenuElement(item.serials));
            li.appendChild(a);
            ul.appendChild(li);
        });

        button.appendChild(text);
        button.appendChild(span);
        div.appendChild(button);
        div.appendChild(ul);

        return div;
    }

    function initTitleElement() {
        titleElement = document.createElement('h2');
        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;
    }

    function setSource(source) {
        videoElement.src = source;
    }

    /* --- CONSTRUCTOR --------- */

    const containerElement = document.getElementById(containerId);
    if (containerElement === null) {
        throw `Container "${containerId}" not found!`;
    }

    containerElement.insertAfter = function(newChild, refChild) {
        this.insertBefore(newChild, refChild.nextSibling);
    }

    let videoElement = createVideoElement();

    if (data.hasOwnProperty('title')) {
        this.setTitle(data.title);
    }

    if (data.type === 'simple_serial') {
        let serialMenu = createSerialMenuElement(data.serials);
        containerElement.appendChild(serialMenu);
        containerElement.appendChild(document.createElement('br'));
        containerElement.appendChild(document.createElement('br'));
    } else if (data.type === 'seasons_serial') {
        let seasonMenu = createSeasonMenuElement(data.seasons);
        containerElement.appendChild(seasonMenu);
        containerElement.appendChild(document.createElement('br'));
        containerElement.appendChild(document.createElement('br'));
    }

    containerElement.appendChild(videoElement);

    /* --- FUNCTIONS ----------- */

    this.getType = function() {
        return videoType;
    }

    this.setTitle = function(text) {
        if (text) {
            if (!titleElement) initTitleElement();
            titleElement.innerText = text;

            if (!isShowTitle) {
                containerElement.insertBefore(titleElement, videoElement);
                isShowTitle = true;
            }
        } else {
            if (isShowTitle && titleElement) {
                containerElement.removeChild(titleElement);
                isShowTitle = false;
            }
        }
    }
}