$(async function()
{
    const hash = location.hash.slice(1);

    $("#status").text("Fetching media info...");
    let res = await fetch(`api/info.php?file=${hash}`);

    $("#status").text("Parsing response data...");
    let media = await res.json();

    $("#status").text("Constructing media player...");
    const audio = [];
    const text = [];

    for (const stream of media.streams) switch (stream.codec_type)
    {
        case "audio":
            audio.push({
                label: stream.tags.title,
                language: stream.tags.language,
            });
            break;
        case "subtitle":
            text.push({
                label: stream.tags.title,
                language: stream.tags.language,
            });
            break;
        default:
            break;
    }

    $("#vid").append($("<source>", {type: "video/mp4", src: `api/video.php?file=${hash}`}));
    for (let i = 0; i < text.length; i++)
        $("#vid").append($("<track>", {
            kind: "captions",
            label: text[i].label,
            srclang: text[i].language,
            src: `api/subtitles.php?file=${hash}&s=${i}`,
        }));

    $("#status").text("Building video.js player...");
    const player = videojs("vid");
    let audioTrackList = player.audioTracks();

    for (let i = 0; i < audio.length; i++)
        audioTrackList.addTrack(new videojs.AudioTrack({
            kind: "translation",
            label: audio[i].label,
            language: audio[i].language,
        }));

    audioTrackList.addEventListener('change', function() {
        for (var i = 0; i < audioTrackList.length; i++) {
            var track = audioTrackList[i];

            if (track.enabled) {
                let time = player.currentTime()
                player.src({type: "video/mp4", src: `api/video.php?file=${hash}&a=${i}`})
                player.ready(function(){
                    player.currentTime(time);
                    player.play();
                });
                return;
            }
        }
    });

    $("#status").remove();
});