photochamber-webserver/static/public/js/uiMedia.js

$(() => {
    function buildThumbnail(mediaItem) {
        if (mediaItem.ui)
            return mediaItem.ui;
        let img = document.createElement("img");
        let container = document.createElement("li");
        let loadingImg = document.createElement("div");
        container.classList.add("pch-image");
        container.classList.add("loading");
        loadingImg.classList.add("spinner");
        loadingImg.innerHTML = "<span class='spinner-grow'></span>";
        container.dataset.md5sum = mediaItem.md5sum;
        img.loading = "lazy";
        let requestSize = mediaItem.resize(450, 450);
        img.src = `${mediaItem.thumbnail}?w=${requestSize.width}&h=${requestSize.height}&q=4`;
        img.classList.add("img-fluid");
        img.classList.add("img-thumbnail");
        img.addEventListener("load", () => {
            container.classList.remove("loading");
            container.classList.remove("spinner-grow");
        });
        container.style.width = `${requestSize.width}px`;
        container.appendChild(loadingImg);
        container.appendChild(img);
        container.addEventListener("click", () => {
            document.location.hash = mediaItem.md5sum;
        });
        return mediaItem.ui = {
            root: container,
            img: img
        };
    }

    function buildYear(date) {
        let result = document.createElement('h3');
        result.textContent = date.getUTCFullYear();
        return result;
    }

    function buildMonth(date) {
        let result = document.createElement('h4');
        result.textContent = date.toLocaleString('default', { month: 'long' });
        return result;
    }

    function redraw(container, media) {
        buildThumbnail(media);
        if (!media.ui)
            return;
        let yearUpdated = !container.dataset.lastItemYear || container.dataset.lastItemYear != media.date.getUTCFullYear();
        if (yearUpdated) {
            container.appendChild(buildYear(media.date));
            container.dataset.lastItemYear = media.date.getUTCFullYear();
        }
        if (yearUpdated || container.dataset.lastItemMonth === undefined || container.dataset.lastItemMonth != media.date.getUTCMonth()) {
            container.appendChild(buildMonth(media.date));
            container.dataset.lastItemMonth = media.date.getUTCMonth();
        }
        container.appendChild(media.ui.root);
    }

    MediaStorage.Instance.addEventListener("rebuildMedia", (evt) => {
        let newContainer = document.getElementById('pch-mediaList');
        newContainer.textContent = '';
        newContainer.dataset.lastItemYear = null;
        newContainer.dataset.lastItemMonth = null;
        for (let i of MediaStorage.Instance.medias)
            redraw(newContainer, i);
    });

    MediaStorage.Instance.addEventListener("newMedia", (evt) => {
        let container = document.getElementById('pch-mediaList');
        redraw(container, evt.detail);
    });

    function _displayMediaFullPage(fileName, imgUrl, metaData, downloadLink) {
        return new Promise(ok => {
            document.getElementById("pch-fullPagePreviewContainer").classList.add("loading");
            document.getElementById("pch-fullPageMedia-title").innerText = fileName;
            document.getElementById("pch-fullPagePreview").onceLoaded = ok;
            document.getElementById("pch-fullPagePreview").src = imgUrl;
            document.getElementById("pch-fullPageDetail").innerText = "";
            let metaList = document.createElement("ul");
            for (let i in metaData || {}) {
                let li = document.createElement("li");
                li.innerText = `${i}: ${metaData[i]}`;
                metaList.appendChild(li);
            }
            document.getElementById("pch-fullPageDetail").appendChild(metaList);
            if (downloadLink) {
                document.getElementById("pch-fullPageDetail-dlButton").classList.remove("hidden");
                document.getElementById("pch-fullPageDetail-dlButton").dataset["link"] = downloadLink;
            } else {
                document.getElementById("pch-fullPageDetail-dlButton").classList.add("hidden");
            }
        });
    }

    window.displayMediaFullPage = function(mediaItem) {
        document.getElementById("pch-fullPageMedia").classList.remove("hidden");
        if (!mediaItem)
            return _displayMediaFullPage("Error", null, {}, null);
        let containerSize = document.getElementById("pch-fullPageMedia").getBoundingClientRect();
        let requestSize = mediaItem.resize(containerSize.width, containerSize.height);
        document.getElementById("pch-fullPagePreview").parentNode.style.maxWidth = "100%";
        document.getElementById("pch-fullPagePreview").parentNode.style.maxHeight = "100%";
        let meta = {
            ...mediaItem.meta,
            date: mediaItem.date || undefined,
            filename: mediaItem.fileName || undefined
        };
        return _displayMediaFullPage(mediaItem.fileName, `${mediaItem.thumbnail}?w=${requestSize.width}&h=${requestSize.height}&q=6`, meta, mediaItem.original);
    }

    document.getElementById("pch-fullPageMedia-closeBt")
        .addEventListener("click", () => {
            document.getElementById("pch-fullPageMedia").classList.add("hidden");
            history.pushState({}, '', '#');
        });
    document.getElementById("pch-fullPagePreview").addEventListener("load", () => {
        document.getElementById("pch-fullPagePreviewContainer").classList.remove("loading");
        let domItem = document.getElementById("pch-fullPagePreview");
        domItem.onceLoaded && domItem.onceLoaded();
        domItem.onceLoaded = null;
    });
    document.getElementById('pch-fullPageDetail-dlButton').addEventListener("click", (evt) => {
        if (!evt.target?.dataset?.link)
            return;
        let link = document.createElement('a');
        link.target='_blank';
        link.setAttribute("download", "");
        link.href = evt.target.dataset.link;
        link.click();
    });
});