<!DOCTYPE html>
<html>
<head>
    <title>media-source-seek-redundant-append</title>
    <script src="media-source-loader.js"></script>
    <script src="../video-test.js"></script>
    <script>
    var loader;
    var source;
    var sourceBuffer;

    function waitSilentlyFor(element, type) {
        return new Promise(resolve => {
            element.addEventListener(type, event => {
                resolve(event);
            }, { once: true });
        });
    }

    function waitForVideoToReach(time) {
        return new Promise(resolve => {
            consoleWrite(`START waitForVideoToReach(${time})`);
            function timeupdateHandler() {
                if (video.currentTime >= time) {
                    video.removeEventListener("timeupdate", timeupdateHandler);
                    consoleWrite(`SUCCESS waitForVideoToReach(${time})`);
                    resolve();
                }
            }
            video.addEventListener("timeupdate", timeupdateHandler);
        });
    }

    async function seekAndAppend(time, startSegment, endSegment) {
        // Note: "seeked" and "update" can occur in any order because we may have noticed enough data to complete the
        // seek before the whole append has been demuxed (demuxing occurs in a background thread and the main thread
        // may be notified of new samples before the demuxer has finished the append).
        // Therefore, we need to wait silently for these events in order for the test to have a reliable (non-flaky)
        // output.

        consoleWrite(`START seekAndAppend: time=${time}, segments=[${startSegment}, ${endSegment})`);
        const seeked = waitSilentlyFor(mediaElement, "seeked");
        mediaElement.currentTime = time;
        for (let segmentNumber = startSegment; segmentNumber < endSegment; segmentNumber++) {
            run(`sourceBuffer.appendBuffer(loader.mediaSegment(${segmentNumber}))`);
            await waitSilentlyFor(sourceBuffer, 'update');
            consoleWrite("Successful append");
        }
        await seeked;
        consoleWrite(`SUCCESS seekAndAppend: time=${time}, segments=[${startSegment}, ${endSegment})`);
    }

    window.addEventListener('load', () => {
        findMediaElement();

        loader = new MediaSourceLoader('content/test-48khz-manifest.json');
        loader.onload = async () => {
            source = new MediaSource();
            run('video.src = URL.createObjectURL(source)');
            await waitFor(source, 'sourceopen');

            const offset = 300;

            run('sourceBuffer = source.addSourceBuffer(loader.type())');
            run('sourceBuffer.appendBuffer(loader.initSegment())');
            await waitFor(sourceBuffer, 'update');
            run(`source.duration = ${offset + 10}`);
            run(`sourceBuffer.timestampOffset = ${offset}`);

            run('video.play()');
            await seekAndAppend(offset, 0, 3); // Segment A
            await waitForVideoToReach(offset + 0.2);

            await seekAndAppend(offset + 9.2, 9, 10); // Segment C
            await waitForVideoToReach(offset + 9.7);

            run(`video.currentTime = ${offset + 8.9}`);
            // Appending C again is redundant, but it should work.
            await seekAndAppend(offset + 8.9, 8, 10); // Segment B+C
            run('source.endOfStream()');
            // After this point playback should finish in ~1.1 seconds (well under the timeout), not get stuck.
            await waitFor(video, 'ended');

            endTest();
        };
        loader.onerror = () => {
            failTest('Media data loading failed');
        };
    });
    </script>
</head>
<body>
    <video controls></video>
</body>
</html>