require("videojs-quality-picker");

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.overlay({
        debug: true,
        overlays: [{
            content: buildOverlayHTML("<h1>test overlay</h1>"),
            align: "top-left",
            start: "pause",
            end: "play"
        }]
    });

    player.play();
    setTimeout(initializeDashPlayer, 2000);
    setTimeout(makeQualityListPayload, 2000);
});

player.qualityPickerPlugin();
document.addEventListener('keyup', togglePlayStateOnEnter, false);


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

function buildOverlayHTML(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 makeQualityListPayload() {
    let bitrates = getIndexedPlayerBitrateList();
    let qualities = bitrates.map(convertBitrateToQuality);
    addAutoQuality(qualities);
    let payload = createPayloadFromQualities(qualities);
    setQualityLoadListener(payload);
}

function initializeDashPlayer() {
    dash = player.dash.mediaPlayer;
}

function getIndexedPlayerBitrateList() {
    let rawBitrates = dash.getBitrateInfoListFor("video");
    let formattedBitrates = [];

    rawBitrates.forEach((item, index) => {
        formattedBitrates.push([item, index]);
    });

    return formattedBitrates;
}

function convertBitrateToQuality(bitrate) {
    let quality = {};
    let level = bitrate[0];
    let index = bitrate[1];
    console.log(level);
    console.log(index);
    quality.id = index;
    quality.selected = quality.id === dash.getQualityFor("video");
    quality.label = level.height + "p"; //480p, 720p, etc

    return quality;
}

function addAutoQuality(qualities) {
    let auto = {
        id: -1,
        label: "auto",
        selected: dash.getAutoSwitchQualityFor("video")
    };

    qualities.push(auto);
}

function createPayloadFromQualities(qualities) {
    let payload = {
        qualityData: {video: qualities},
        qualitySwitchCallback: switchQuality
    };

    return payload;
}

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

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