nekrochan/static/js/expand-image.js

$(function () {
    $(".expandable").click(function () {
        let src_link = $(this).attr("href");

        let is_video = [".mpeg", ".mov", ".mp4", ".webm", ".mkv", ".ogg"].some(
            (ext) => src_link.endsWith(ext)
        );

        if (!is_video) {
            toggle_image($(this), src_link);
        } else {
            toggle_video($(this), src_link);
        }

        $(this).toggleClass("expanded");

        return false;
    });
});

function toggle_image(parent, src_link) {
    let thumb = parent.find(".thumb");
    let src = parent.find(".src");

    if (src.length === 0) {
        thumb.addClass("loading");

        parent.append(`<img class="src" src="${src_link}">`);

        let src = parent.find(".src");

        src.hide();
        src.on("load", function () {
            thumb.removeClass("loading");
            thumb.hide();
            src.show();

            parent.closest(".post-files").addClass("float-none-b");
        });

        return;
    }

    thumb.toggle();
    src.toggle();

    parent.closest(".post-files").toggleClass("float-none-b");
}

function toggle_video(parent, src_link) {
    let expanded = parent.hasClass("expanded");
    let thumb = parent.find(".thumb");
    let src = parent.parent().find(".src");

    if (src.length === 0) {
        thumb.addClass("loading");

        parent.append('<b class="closer">[Zavřít]<br></b>');
        parent
            .parent()
            .append(
                `<video class="src" src="${src_link}" autoplay="" controls="" loop=""></video>`
            );

        let src = parent.parent().find(".src");

        src.hide();

        src.on("loadstart", function () {
            thumb.removeClass("loading");
            thumb.hide();
            src.show();

            parent.closest(".post-files").addClass("float-none-b");
        });

        return;
    }

    thumb.toggle();
    src.toggle();

    if (expanded) {
        src.get(0).pause();
        src.get(0).currentTime = 0;
    } else {
        src.get(0).play();
    }

    parent.closest(".post-files").toggleClass("float-none-b");
    parent.find(".closer").toggle();
}