<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script src=../../media-resources/video-test.js></script>
        <script src=../../media-resources/media-file.js></script>

        <script>
            var track;
            var cuechangeCount = 0;
            var loadCount = 0;
            var cueData = [
                 {"key" : "X-START-OFFSET", "keySpace" : "com.apple.quicktime.HLS", "data" : "0.000000"},
                 {"key" : "X-END-OFFSET",   "keySpace" : "com.apple.quicktime.HLS", "data" : "5.000000"},
                 {"key" : "TIT2",           "keySpace" : "org.id3",                 "data" : "Stream Counting"},
                 {"key" : "TPE1",           "keySpace" : "org.id3",                 "data" : "Andy"},
                 {"key" : "TALB",           "keySpace" : "org.id3",                 "data" : "Greatest Hits"},
                 {"key" : "GEOB",           "keySpace" : "org.id3",                 "data" : {}, "type" : "image/png", "info" : "Our Hero", "name" : "abe.png"},
                 {"key" : "APIC",           "keySpace" : "org.id3",                 "data" : {}, "type" : "image/png"},
                 {"key" : "TXXX",           "keySpace" : "org.id3",                 "data" : "Text Blob"},
            ];
            var imageSizes = [ [76, 103], [100, 100] ];
            var cue;
        
            function addtrack(event)
            {
                tracks = event.target;
                testExpected("tracks.length", "1");
                run("track = video.textTracks[0]");
                testExpected("track.kind", "metadata");
                testExpected("track.mode", "disabled");
                run("track.mode = 'hidden'");
                track.addEventListener('cuechange', cuechange, true);
            }

            function imageLoad()
            {
                testExpected("imageElement.width", imageSizes[loadCount][0]);
                testExpected("imageElement.height", imageSizes[loadCount][1]);
                consoleWrite("");

                if (++loadCount == 2) {
                    endTest();
                    return;
                }

                testImage(6);
            }

            function testImage(cueIndex)
            {
                run("cueImageData = track.cues[" + cueIndex + "].value.data");
                testExpected("cueImageData instanceof ArrayBuffer", true);
                run("blobUrl = URL.createObjectURL(new Blob([cueImageData], { type: 'image/png' }))");
                imageElement = document.querySelector("#photo");
                run("imageElement.src = blobUrl");
            }

            function compareCues(observed, expected)
            {
                // Make a mutable copy of observed so we can remove attributes as they are processed.
                observed = JSON.parse(JSON.stringify(observed));
                for (property in expected) {
                    if (property === "keySpace")
                        continue;

                    observedValue = observed[property];
                    expectedValue = expected[property];
                    cue.value[property] = observedValue;

                    observedValue = JSON.stringify(observedValue);
                    expectedValue = JSON.stringify(expectedValue);
                    reportExpected(observedValue == expectedValue, `cue.value.${property}`, "==", expectedValue, observedValue);
                    delete observed[property];
                }

                for (property in observed) {
                    observedName = property;
                    observedValue = observed[property];
                    logResult(Failed, `Error: unexpected cue property <em>cue.value. ${observedName}</em> = <em>' ${observedValue}'</em>`);
                }
            }

            function cuechange(event)
            {
                if (++cuechangeCount != cueData.length)
                    return;

                consoleWrite("<br><em>** Validate cue data</em>");
                track.removeEventListener("cuechange", cuechange, true);
                video.pause();

                for (var i = 0; i < cueData.length; i++) {
                    consoleWrite(`<em>* ${i + 1}</em>`);
                    cue = track.cues[i];

                    testExpected("typeof(cue)", undefined, "!=");
                    testExpected("cue.data", null);
                    testExpected("cue.type", cueData[i].keySpace);
                    testExpected("cue.value", null, "!=");
                    if (typeof(cue.value) == undefined) {
                        failTest(`Error: cue.value is undefined!`);
                        return;
                    }

                    compareCues(cue.value, cueData[i]);
                    consoleWrite("");
                }

                consoleWrite("<em>** Extract images from cue data, validate by setting img.src</em>");
                imageElement = document.querySelector("#photo");
                waitForEvent('load', imageLoad, false, false, imageElement)
                testImage(5);
            }

            function canplaythrough()
            {
                consoleWrite("<br><em>** Start playback, wait for all cues to load</em>");
                run("video.play()"); 
            }

            function start()
            {
                consoleWrite("<br><em>** Set video.src, wait for media data to load</em>");
                findMediaElement();
                run("video.src = 'http://127.0.0.1:8000/media/resources/hls/metadata/prog_index.m3u8'");

                consoleWrite("");
                waitForEventOnce("canplaythrough", canplaythrough);
                waitForEvent('addtrack', addtrack, false, false, video.textTracks);
            }
        </script>
    </head>
    <body onload="start()">
        <video controls></video>
        <img id=photo>
        <p>Test for metadata tracks from Apple HLS stream.</p>
    </body>
</html>