function error(message) {
    const errorContainer = document.getElementById("mao-error");
    const errorElement = document.getElementById("mao-error-message");

    document.getElementById("video-result").style.display = "none";

    errorElement.innerText = message || "unknown error";
    errorContainer.classList.remove("hidden");
}

async function main() {
    const params = new URLSearchParams(window.location.search);
    const id = params.get("id");
    if (!id) {
        error("invalid id parameter");
        return;
    }

    const info = await fetch(`/api/video-info?id=${id}`);
    if (!info.ok) {
        error("error fetching video info");
        return;
    }

    const json = await info.json();
    if (!json.ok) {
        error(json.error);
        return;
    }

    const video = json.video;

    const player = document.getElementById("video-player");
    player.controls = true;
    player.src = video.path;
    player.onerror = () => {
        error("unable to play video");
    }
    player.onload = () => {
        player.style.height = player.clientWidth / 16 * 9 + "px";
    }

    document.getElementById("video-title").innerText = video.title;
    document.getElementById("video-author").innerText = "by " + video.author;

    document.getElementById("video-result").style.display = "block";
}

main();