<!DOCTYPE html>
<html>
<head>
<script src="media-source-loader.js"></script>
<script src="../resources/runner.js"></script>
<script>
var loader;

window.addEventListener('load', () => {
    loader = new MediaSourceLoader('test-fragmented-video.json');
    loader.loadMediaData().then(runTest);
});

function *range(start, end) {
    while (start < end)
        yield(start++);
}

function addVideos(count, autoplay) {
    return new Promise((resolve, reject) => {
        var promises = [];
        var videos = [];
        for (var i of range(0, count)) {
            var video = document.createElement('video');
            video.controls = false;
            video.loop = true;
            video.muted = true;
            document.body.appendChild(video);
            promises.push(loadMediaDataIntoVideo(video));
            videos.push(video);
        }
        document.getElementById('video-count').innerText = videoCount();
        Promise.all(promises).then(() => {
            resolve(videos);
        });
    });
}

function removeVideos(count) {
    while (count > 0) {
        --count;
        var video = document.querySelector('video:last-child');
        video.src = '';
        video.load();
        document.body.removeChild(video);
    }
    document.getElementById('video-count').innerText = videoCount();
}

function loadMediaDataIntoVideo(video) {
    return new Promise((resolve, reject) => {
        var source = new MediaSource();
        source.addEventListener('sourceopen', (e) => {
            var source = e.target;
            var currentMediaSegment = 0;
            var sourceBuffer = source.addSourceBuffer(loader.type);
            var mediaSegments = loader.mediaSegments();
            sourceBuffer.appendBuffer(loader.initSegment);
            sourceBuffer.addEventListener('update', () => {
                if (source.readyState === 'closed') {
                    resolve(video);
                    return;
                }
                var nextSegment = mediaSegments.next();
                if (nextSegment.done) {
                    if (source.readyState !== 'ended') {
                        source.endOfStream();
                        resolve(video);
                    }
                    return;
                }

                sourceBuffer.appendBuffer(nextSegment.value);
            });
            sourceBuffer.addEventListener('error', (e) => {
                reject();
            });
        });
        video.src = URL.createObjectURL(source);
    });
}

function videoCount() {
    return document.querySelectorAll('video').length;
}

function totalDroppedFrames() {
    var total = 0;
    for (var video of document.querySelectorAll('video')) {
        if (typeof(video.getVideoPlaybackQuality) !== 'undefined')
            total += video.getVideoPlaybackQuality().droppedVideoFrames;
        else if (typeof(video.webkitDroppedFrameCount) !== 'undefined')
            total += video.webkitDroppedFrameCount;
    }
    return total;
}

function pauseAll() {
    for (var video of document.querySelectorAll('video'))
        video.pause();
}

function playVideos(videos) {
    return new Promise((resolve, reject) => {
        var promises = [];
        for (var video of videos)
            promises.push(video.play());
        Promise.all(promises).then(() => { resolve(videos); });
    });
}
    
function playAll() {
    playVideos(document.querySelectorAll('video'));
}

function runTest() {
    addVideos(initialVideoCount).then(playVideos);
    trySeekingFaster(1.6);
}

function finishTest() {
    pauseAll();
}

var initialVideoCount = 10;
var droppedFrameLimit = 1;
var initialPlaybackRate = 1;

function trySeekingFaster(value) {
    initialPlaybackRate += value;
    document.getElementById('video-speed').innerText = initialPlaybackRate;
    for (var video of document.querySelectorAll('video'))
        video.playbackRate = initialPlaybackRate;


    setTimeout(() => {
        var initialDroppedFrames = totalDroppedFrames();

        setTimeout(() => {
            var endingDroppedFrames = totalDroppedFrames();
            document.getElementById('dropped-frame').innerText = endingDroppedFrames - initialDroppedFrames;

            if (endingDroppedFrames - initialDroppedFrames <= droppedFrameLimit) {
                if (value <= 0.05) {
                    finishTest();
                    return;
                }

                trySeekingFaster(value);
            }
            else
                trySeekingSlower(value/2);
        }, 1000);
    }, 1000);
}

function trySeekingSlower(value) {
    initialPlaybackRate -= value;
    document.getElementById('video-speed').innerText = initialPlaybackRate;
    for (var video of document.querySelectorAll('video'))
        video.playbackRate = initialPlaybackRate;

    setTimeout(() => {
        var initialDroppedFrames = totalDroppedFrames();
        setTimeout(() => {
            var endingDroppedFrames = totalDroppedFrames();
            document.getElementById('dropped-frame').innerText = endingDroppedFrames - initialDroppedFrames;

            if (endingDroppedFrames - initialDroppedFrames <= droppedFrameLimit) {
                if (value <= 0.05) {
                    finishTest();
                    return;
                }

                trySeekingFaster(value/2);
            } else
                trySeekingSlower(value);
        }, 2000);
    }, 2000);
}

</script>
</head>
<body>
    <div>
        Video Count: <span id="video-count">0</span> Speed: <span id="video-speed">0</span> Dropped Frame Delta: <span id="dropped-frame">0</span>
    </div>
    <div>
        <button onclick="addVideos(1).then(playVideos)">add video</button><button onclick="removeVideos(1)">remove video</button><button onclick="pauseAll()">pause</button><button onclick="playAll()">play</button><br>
    </div>
</body>
</html>