elm-twitch/js/vd.js

window.HELP_IMPROVE_VIDEOJS = false;(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory(require("global/window"),require("global/document")):typeof define==="function"&&define.amd?define(["global/window","global/document"],factory):(global=global||self,global.videojs=factory(global.window,global.document))})(this,function(window$1,document){window$1=window$1&&window$1.hasOwnProperty("default")?window$1["default"]:window$1;document=document&&document.hasOwnProperty("default")?document["default"]:document;var version="7.6.6";var history=[];var LogByTypeFactory=function LogByTypeFactory(name,log){return function(type,level,args){var lvl=log.levels[level];var lvlRegExp=new RegExp("^("+lvl+")$");if(type!=="log"){args.unshift(type.toUpperCase()+":")}args.unshift(name+":");if(history){history.push([].concat(args))}if(!window$1.console){return}var fn=window$1.console[type];if(!fn&&type==="debug"){fn=window$1.console.info||window$1.console.log}if(!fn||!lvl||!lvlRegExp.test(type)){return}fn[Array.isArray(args)?"apply":"call"](window$1.console,args)}};function createLogger(name){var level="info";var logByType;var log=function log(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}logByType("log",level,args)};logByType=LogByTypeFactory(name,log);log.createLogger=function(subname){return createLogger(name+": "+subname)};log.levels={all:"debug|log|warn|error",off:"",debug:"debug|log|warn|error",info:"log|warn|error",warn:"warn|error",error:"error",DEFAULT:level};log.level=function(lvl){if(typeof lvl==="string"){if(!log.levels.hasOwnProperty(lvl)){throw new Error('"'+lvl+'" in not a valid log level')}level=lvl}return level};log.history=function(){return history?[].concat(history):[]};log.history.filter=function(fname){return(history||[]).filter(function(historyItem){return new RegExp(".*"+fname+".*").test(historyItem[0])})};log.history.clear=function(){if(history){history.length=0}};log.history.disable=function(){if(history!==null){history.length=0;history=null}};log.history.enable=function(){if(history===null){history=[]}};log.error=function(){for(var _len2=arguments.length,args=new Array(_len2),_key2=0;_key2<_len2;_key2++){args[_key2]=arguments[_key2]}return logByType("error",level,args)};log.warn=function(){for(var _len3=arguments.length,args=new Array(_len3),_key3=0;_key3<_len3;_key3++){args[_key3]=arguments[_key3]}return logByType("warn",level,args)};log.debug=function(){for(var _len4=arguments.length,args=new Array(_len4),_key4=0;_key4<_len4;_key4++){args[_key4]=arguments[_key4]}return logByType("debug",level,args)};return log}var log=createLogger("VIDEOJS");var createLogger$1=log.createLogger;var toString=Object.prototype.toString;var keys=function keys(object){return isObject(object)?Object.keys(object):[]};function each(object,fn){keys(object).forEach(function(key){return fn(object[key],key)})}function reduce(object,fn,initial){if(initial===void 0){initial=0}return keys(object).reduce(function(accum,key){return fn(accum,object[key],key)},initial)}function assign(target){for(var _len=arguments.length,sources=new Array(_len>1?_len-1:0),_key=1;_key<_len;_key++){sources[_key-1]=arguments[_key]}if(Object.assign){return Object.assign.apply(Object,[target].concat(sources))}sources.forEach(function(source){if(!source){return}each(source,function(value,key){target[key]=value})});return target}function isObject(value){return!!value&&typeof value==="object"}function isPlain(value){return isObject(value)&&toString.call(value)==="[object Object]"&&value.constructor===Object}function computedStyle(el,prop){if(!el||!prop){return""}if(typeof window$1.getComputedStyle==="function"){var computedStyleValue=window$1.getComputedStyle(el);return computedStyleValue?computedStyleValue.getPropertyValue(prop)||computedStyleValue[prop]:""}return""}function isNonBlankString(str){return typeof str==="string"&&/\S/.test(str)}function throwIfWhitespace(str){if(/\s/.test(str)){throw new Error("class has illegal whitespace characters")}}function classReg
const vd = (function() {

    let vd = {};

    function createEl(tagName = 'div', properties = {}, attributes = {}, content) {
        const el = document.createElement(tagName);

        Object.getOwnPropertyNames(properties).forEach(function(propName) {
            const val = properties[propName];

            // See #2176
            // We originally were accepting both properties and attributes in the
            // same object, but that doesn't work so well.
            if (propName.indexOf('aria-') !== -1 || propName === 'role' || propName === 'type') {
                log.warn(tsml`Setting attributes in the second argument of createEl()
                has been deprecated. Use the third argument instead.
                createEl(type, properties, attributes). Attempting to set ${propName} to ${val}.`);
                el.setAttribute(propName, val);

                // Handle textContent since it's not supported everywhere and we have a
                // method for it.
            } else if (propName === 'textContent') {
                textContent(el, val);
            } else {
                el[propName] = val;
            }
        });

        return el;
    }

    function findPosition(el) {
        let box;

        if (el.getBoundingClientRect && el.parentNode) {
            box = el.getBoundingClientRect();
        }

        if (!box) {
            return {
                left: 0,
                top: 0
            };
        }

        const docEl = document.documentElement;
        const body = document.body;

        const clientLeft = docEl.clientLeft || body.clientLeft || 0;
        const scrollLeft = window.pageXOffset || body.scrollLeft;
        const left = box.left + scrollLeft - clientLeft;

        const clientTop = docEl.clientTop || body.clientTop || 0;
        const scrollTop = window.pageYOffset || body.scrollTop;
        const top = box.top + scrollTop - clientTop;

        // Android sometimes returns slightly off decimal values, so need to round
        return {
            left: Math.round(left),
            top: Math.round(top)
        };
    }

    function getBoundingClientRect(el) {
        if (el && el.getBoundingClientRect && el.parentNode) {
            const rect = el.getBoundingClientRect();
            const result = {};

            ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach(k => {
                if (rect[k] !== undefined) {
                    result[k] = rect[k];
                }
            });

            if (!result.height) {
                result.height = parseFloat(computedStyle(el, 'height'));
            }

            if (!result.width) {
                result.width = parseFloat(computedStyle(el, 'width'));
            }

            return result;
        }
    }

    function getPointerPosition(el, event) {
        const position = {};
        const box = findPosition(el);
        const boxW = el.offsetWidth;
        const boxH = el.offsetHeight;

        const boxY = box.top;
        const boxX = box.left;
        let pageY = event.pageY;
        let pageX = event.pageX;

        if (event.changedTouches) {
            pageX = event.changedTouches[0].pageX;
            pageY = event.changedTouches[0].pageY;
        }

        position.y = Math.max(0, Math.min(1, ((boxY - pageY) + boxH) / boxH));
        position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW));

        return position;
    }

    function setupRepresentations(menuButton, player) {

        let hls = player.tech({IWillNotUseThisInPlugins: true}).hls;

        if (hls === undefined) {
            setTimeout(() => setupRepresentations(menuButton, player), 500);
            return;
        }

        let representations = hls.representations();
        representations.sort((a, b) => b.height - a.height);

        menuButton.menu.items = [];
        menuButton.menu.addAndRecordItem = function(item) {
            this.addItem(item);
            this.items.push(item);
        }

        menuButton.menu.addAndRecordItem(new MenuItem(player, { label: "auto", menuButton }));
        for (let representation of representations) {
            menuButton.menu.addAndRecordItem(new MenuItem(player, {
                label: representation.height + "p",
                representation,
                menuButton
            }));
        }
    }

    let vjs = {};

    vjs.Component = videojs.getComponent('Component');
    vjs.Menu = videojs.getComponent('Menu');
    vjs.MenuButton = videojs.getComponent('MenuButton');
    vjs.MenuItem = videojs.getComponent('MenuItem');

    class MenuButton extends vjs.MenuButton {

        constructor(player, options) {
            super(player, options);
            this.updateLabel('auto');
        }

        createEl() {
            const el = super.createEl();

            this.labelEl_ = createEl('div', {
                className: 'vjs-playback-rate-value',
                innerHTML: 'auto'
            });

            el.appendChild(this.labelEl_);

            return el;
        }

        dispose() {
            this.labelEl_ = null;
            super.dispose();
        }

        buildCSSClass() {
            return `vjs-playback-rate ${super.buildCSSClass()}`;
        }

        buildWrapperCSSClass() {
            return `vjs-playback-rate ${super.buildWrapperCSSClass()}`;
        }

        createMenu() {
            const menu = new vjs.Menu(this.player());
            return menu;
        }

        updateARIAAttributes() {
            this.el().setAttribute('aria-valuenow', this.labelEl_.innerHTML);
        }

        updateLabel(newLabel) {
            this.labelEl_.innerHTML = newLabel;
        }

    }

    class MenuItem extends vjs.MenuItem {
        constructor() {
            super(...arguments);
            this.representation = arguments[1].representation;
            this.menuButton = arguments[1].menuButton;
            this.label = arguments[1].label;
        }

        handleClick() {
            if (this.representation === undefined) {
                // Clicked on the auto button
                this.player().tech({IWillNotUseThisInPlugins: true}).hls.representations().forEach(function(rep) {
                    rep.enabled(true);
                });

            } else {
                // Clicked on another button
                let self = this;
                this.player().tech({IWillNotUseThisInPlugins: true}).hls.representations().forEach(function(rep) {
                    rep.enabled(rep.height === self.options_.representation.height);
                });
            }
            this.menuButton.updateLabel(this.label);
        }
    }

    class Thumbnail extends vjs.Component {
        constructor() {
            super(...arguments);
            this.thumbnails = arguments[1].thumbnails;
            this.width = arguments[1].width;
            this.height = arguments[1].height;
        }

        createEl() {
            let el = super.createEl('img', {
                src: this.options_.thumbnails[0],
                width: '0px',
            });

            el.style.position = 'absolute';
            el.style.left = '0px';
            el.style.top = -this.options_.height + "px";
            el.style.border = "solid";
            el.style.borderColor = "black";
            el.style.borderWidth = "1px";

            return el;
        }

        update(ratio) {
            this.el().src = this.options_.thumbnails[Math.round(100 * ratio)];
        }
    }


    vd.setup = function(video, args) {

        let src;

        if (typeof video === 'string' || video instanceof String) {
            video = document.getElementById(video);
        }

        if (video === undefined) {
            throw new Error("video element or ID invalid");
        }

        if (typeof args === "string" || args instanceof String) {
            src = args;
        }

        if (typeof args === "object") {
            src = args.v;
        }

        if (src === undefined) {
            throw new Error("video src is undefined");
        }

        let player = videojs(video);
        player.src({
            src,
            type: 'application/dash+xml'
        });

        player._oldRequestFullscreen = player.requestFullscreen;
        player.requestFullscreen = () => {
            player._oldRequestFullscreen(...arguments);
            setTimeout(() => {
                if (screen.orientation) {
                    screen.orientation.lock("landscape")
                }
            }, 1000);
        };

        player._oldExitFullscreen = player.exitFullscreen;
        player.exitFullscreen = () => {
            player._oldExitFullscreen(...arguments);
            setTimeout(() => {
                if (screen.orientation) {
                    screen.orientation.unlock();
                }
            }, 1000);
        };

        if (args.t !== undefined) {
            let time = parseFloat(args.t);
            if (!isNaN(time)) {
                player.currentTime(time);
            }
        }


        if (player.getAttribute('disable-shortcuts') == undefined) {
            player.el().addEventListener('keydown', (e) => {
                if (e.ctrlKey || e.shiftKey || e.altKey) {
                    return;
                }

                switch (e.keyCode) {
                    case 37: e.preventDefault(); player.currentTime(player.currentTime() - 5);             break;
                    case 39: e.preventDefault(); player.currentTime(player.currentTime() + 5);             break;
                    case 32: e.preventDefault(); if (player.paused()) player.play(); else player.pause();  break;
                    case 40: e.preventDefault(); player.volume(player.volume() - 0.1);                     break;
                    case 38: e.preventDefault(); player.volume(player.volume() + 0.1);                     break;
                }
            }, true);

            document.body.addEventListener('keydown', (e) => {
                if (e.ctrlKey || e.shiftKey || e.altKey) {
                    return;
                }

                switch (e.keyCode) {
                    case 74: e.preventDefault(); player.currentTime(player.currentTime() - 10);            break; // J -> -10s
                    case 76: e.preventDefault(); player.currentTime(player.currentTime() + 10);            break; // L -> +10s
                    case 75: e.preventDefault(); if (player.paused()) player.play(); else player.pause();  break; // K -> play/pause
                    case 77: e.preventDefault(); player.muted(!player.muted());                            break; // M -> mute

                    // F -> toggle fullscreen
                    case 70:
                        e.preventDefault();
                        if (player.isFullscreen()) {
                            player.exitFullscreen();
                        } else {
                            player.requestFullscreen();
                        }
                        break;

                    // Seek shortcuts
                    case 48: case  96: e.preventDefault(); player.currentTime(0);                          break;
                    case 49: case  97: e.preventDefault(); player.currentTime(    player.duration() / 10); break;
                    case 50: case  98: e.preventDefault(); player.currentTime(2 * player.duration() / 10); break;
                    case 51: case  99: e.preventDefault(); player.currentTime(3 * player.duration() / 10); break;
                    case 52: case 100: e.preventDefault(); player.currentTime(4 * player.duration() / 10); break;
                    case 53: case 101: e.preventDefault(); player.currentTime(5 * player.duration() / 10); break;
                    case 54: case 102: e.preventDefault(); player.currentTime(6 * player.duration() / 10); break;
                    case 55: case 103: e.preventDefault(); player.currentTime(7 * player.duration() / 10); break;
                    case 56: case 104: e.preventDefault(); player.currentTime(8 * player.duration() / 10); break;
                    case 57: case 105: e.preventDefault(); player.currentTime(9 * player.duration() / 10); break;
                }
            }, true);
        }

        let root = src.split('/').slice(0, -1).join('/');
        if (root !== "") {
            root += "/";
        }

        if (player.getAttribute('disable-thumbnails') == undefined) {

            let thumbnails = [];
            const MAX_INDEX = 100;
            for (let i = 0; i <= MAX_INDEX; i++) {
                thumbnails.push(root + "miniature-" + ("" + i).padStart(3, "0") + ".png");
            }

            let thumbnail = new Thumbnail(player, {
                thumbnails,
                width: 192 * 0.75,
                height: 108 * 0.75,
            });

            player.controlBar.progressControl.addChild(thumbnail);


            player.controlBar.progressControl.el().addEventListener('mouseenter', e => {
                thumbnail.el().width = thumbnail.width;
                thumbnail.update(e.offsetX / e.target.offsetWidth);
            });

            player.controlBar.progressControl.el().addEventListener('mouseleave', e => {
                thumbnail.el().width = 0;
            });

            player.controlBar.progressControl.on('mousemove', (event) => {
                const seekBar = player.controlBar.progressControl.seekBar;

                const seekBarEl = seekBar.el();
                const seekBarRect = getBoundingClientRect(seekBarEl);
                let seekBarPoint = getPointerPosition(seekBarEl, event).x;

                seekBarPoint = Math.max(0, Math.min(1, seekBarPoint));
                thumbnail.update(seekBarPoint);
                thumbnail.el().style.left = (seekBarPoint * seekBarRect.width - thumbnail.width / 2) + "px";
            });

        }

        let controlBar = player.getChild('controlBar');
        let fullscreenButton = controlBar.children()[controlBar.children().length - 1];
        controlBar.removeChild(fullscreenButton);
        let menuButton = new MenuButton(player);
        controlBar.addChild(menuButton, {});
        controlBar.addChild(fullscreenButton, {});

        setupRepresentations(menuButton, player);
        // videojs.Html5DashJS.hook('beforeinitialize', (p, mp) => setupRepresentations(menuButton, p, mp));
        window.player = player;

        if (video.getAttribute('autoplay') != undefined) {
            player.play();
        }

        return player;
    }

    for (let element of document.getElementsByTagName('video')) {
        let src = element.getAttribute('data-dash-src');
        if (src != undefined) {
            vd.setup(element, src);
        }
    }

    return vd;

})();