//var videojs = require("video.js");

//require('videojs-s3bubble-meta-overlay');
//require('videojs-contrib-hls');
//require('videojs-contrib-quality-levels');
require("videojs-quality-picker");
//require('videojs-hls-quality-selector');

function playOnEnter(e) {
    if (e.keyCode == 13) {
        if (dash.isPaused()) {
            player.play();
        } else {
            player.pause();
        }
    }
}

function getOverlay(message) {
    let e = document.getElementById("s3bubble-video");
    let overlay = "";
    overlay += '<div style="background-color: rgba(0,0,0, 0.5);';
    overlay += `width:${parseInt(e.offsetWidth)}px; height:${parseInt(e.offsetHeight)}px;"`;
    overlay += `>${message}</div>`;

    return overlay;
}

function getQuality() {
    dash = player.dash.mediaPlayer;
    let bitrates = dash.getBitrateInfoListFor("video");
    let qualities = [];

    if (bitrates.length > 1) {
        var autoLevel = {
            id: -1,
            label: "auto",
            selected: dash.getAutoSwitchQualityFor("video")
        };
        qualities.push(autoLevel);
    }

    bitrates.forEach((level, index) => {
        let quality = {};
        quality.id = index;
        quality.selected = index === dash.getQualityFor("video");
        quality.label = level.height + "p";

        qualities.push(quality);
    });

    var payload = {
        qualityData: {video: qualities},
        qualitySwitchCallback: switchQuality
    };

    player.tech_.trigger('loadedqualitydata', payload);
}

function switchQuality(qualityId, trackType) {
    let auto = qualityId == -1;
    dash.setAutoSwitchQualityFor("video", auto);
    if (!auto) {
        dash.setQualityFor("video", qualityId);
    }
}

var dash = "";

var player = videojs('s3bubble-video');

player.ready(function() {
  player.src({
    src: 'http://yt-dash-mse-test.commondatastorage.googleapis.com/media/motion-20120802-manifest.mpd',
    type: 'application/dash+xml'
  });

  player.play();
  setTimeout(getQuality,2000);
});

player.overlay({
    debug: true,
    overlays: [{
        content: getOverlay("<h1>test overlay</h1>"),
        align: "top-left",
        start: "pause",
        end: "play"
    }]
});

//player.hlsQualitySelector();
player.qualityPickerPlugin();
//dash.on(dashjs.MediaPlayer.events["MANIFEST_LOADED"], getQuality);
document.addEventListener('keyup', playOnEnter, false);