function singleTranscodingInit() {
    const codecCRFMap = {
        "libx264": [0, 51],
        "libx265": [0, 51],
        "libvpx-vp9": [0, 63],
        "libaom-av1": [0, 63]
    };

    const maxResolution = $(`[name="resolution"]`).data("max-resolution");
    $(`[name="resolution"] option`).each(function(){
        parseInt($(this).attr("value")) > maxResolution 
            ? $(this).attr("disabled", "disabled") 
            : !$(`[name="resolution"] option[selected]`).length && $(this).attr("selected", "selected")
    });

    $(".show-transcodate-form").on("click", function(){
        const formContainer = $(".transcodate-form-container");
        if(formContainer.is(":visible")) {
            formContainer.slideUp();
        } else {
            formContainer.slideDown();
        }
    });

    $(".close-transcodate-form-container").on("click", function(){
        const formContainer = $(".transcodate-form-container");
        formContainer.slideUp();
    });

    const progressContainer = $("#progress");
    progressContainer.pushNewMessage = (msg) => {
        !progressContainer.is(":visible") && progressContainer.slideDown();
        progressContainer.html(msg);
    };
    // Listen for progress updates
    socket.on("progress", (data) => {
        if(progressContainer.data("file-path") != data.task.file) {
            return;
        }

        progressContainer.pushNewMessage(data.message);
        $(".transcodate-form-container").slideUp();
        $(".show-transcodate-form").hide();
        $(".stop-transcoding").show();
        $(".stop-transcoding").attr("data-task_id", data.task.id);
        $(".transcodate-form-container .run-transcodate").hide();
    });

    // Listen for completion
    socket.on("completed", (data) => {
        if(progressContainer.data("file-path") != data.task.file) {
            return;
        }

        progressContainer.pushNewMessage("Completed!");
        $(".show-transcodate-form").show();
        $(".stop-transcoding").hide();
        $(".transcodate-form-container .run-transcodate").show();
    });

    // Listen for errors
    socket.on("error", (data) => {
        if(progressContainer.data("file-path") != data.task.file) {
            return;
        }

        // TODO: push to notification bar
        progressContainer.pushNewMessage(data.message);
        $(".show-transcodate-form").show();
        $(".stop-transcoding").hide();
        $(".transcodate-form-container .run-transcodate").show();
    });

    socket.on("canceled", (data) => {
        if(progressContainer.data("file-path") != data.task.file) {
            return;
        }

        progressContainer.pushNewMessage(data.message);
        $(".stop-transcoding").hide();
        $(".show-transcodate-form").show();
        $(".transcodate-form-container .run-transcodate").show();
    });

    $(".transcodate-form-container .run-transcodate").on("click", async () => {
        const formContiner = $(".transcodate-form-container");
        const fields = formContiner.find("[name]");
        $(".transcodate-form-container .run-transcodate").hide();

        const data = {};
        for(let field of fields) {
            field = $(field);
            data[field.attr("name")] = field.val();
        }

        data["crf"] = "" + Math.abs(data["crf"]);
        console.log(data);

        const response = await fetch("/process-media", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(data)
        });

        if (response.ok) {
            document.getElementById("progress").innerText = "Processing started...";
        } else {
            const error = await response.json();
            $(".transcodate-form-container .run-transcodate").show();
            alert(`Error: ${error.error}`);
        }

    });

    $("#codec").on("change", function(){
        const crf = $(`[name="crf"]`);

        const codec = $(this).val();
        crf.attr("min", codecCRFMap[codec][0]);
        crf.attr("max", codecCRFMap[codec][1]);
        if(parseInt(crf.val()) > codecCRFMap[codec][1]) {
            crf.val(codecCRFMap[codec][1]);
        }

        crf.parent().find(".crf-range").text(`${codecCRFMap[codec][0]}-${codecCRFMap[codec][1]}`);

        // toggle form of preset
        const presetLibxForm = $(`[name="preset-libx"]`);
        const presetVP9Form = $(`[name="preset-vp9"]`);
        const presetAV1Form = $(`[name="preset-av1"]`);
        if(codec == "libx264" || codec == "libx265") {
            presetLibxForm.show();
            presetVP9Form.hide();
            presetAV1Form.hide();
        } else if(codec == "libaom-av1"){
            presetLibxForm.hide();
            presetVP9Form.hide();
            presetAV1Form.show();
        } else if(codec == "libvpx-vp9") {
            presetLibxForm.hide();
            presetVP9Form.show();
            presetAV1Form.hide();
        }
    });

    $(`[name="crf"]`).on("input", function(){
        const val = parseInt($(this).val());

        if(isNaN(val)) {
            $(this).val(0);
            return;
        }

        if(val < 0) {
            $(this).val(0);
            return;
        }

        const max = parseInt($(this).attr("max"));
        if(val > max) {
            $(this).val(max);
        }
    });

    $(".stop-transcoding").on("click", function(){
        stopTranscoding($(this).data("task_id"));
    });
}

function stopTranscoding(taskId) {
    if(taskId && taskId != "undefined") {
        $(".stop-transcoding").hide();

        $.getJSON(`/stop-transcoding?task_id=${taskId}`, function(resp) {
            if(resp.status == "stoped" && resp.task_id == taskId) {
                processContainer.slideUp();
                setTimeout(() => processContainer.html(""), 200);
            }
        });
    }
} 

$(document).ready(function() {
    singleTranscodingInit();
});