☰

4chan-masonry

View all media (images+videos) from a 4chan thread in a masonry grid layout.

// ==UserScript==
// @name         4chan-masonry
// @namespace    0000xFFFF
// @version      1.3.3
// @description  View all media (images+videos) from a 4chan thread in a masonry grid layout.
// @author       0000xFFFF
// @license      MIT
// @match        *://boards.4chan.org/*/thread/*
// @match        *://boards.4channel.org/*/thread/*
// @grant        GM_addStyle
// @icon         data:image/ico;base64,AAABAAEAEBAAAAEAIACaAAAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAQAAAAEAgGAAAAH/P/YQAAAGFJREFUeJxjYICA/0iYEMBQ+z/tjDEcEzAEp1piDCFOM7EGYBiCxW/EihH2KxFhg10zzCZSDMHQTKohFBtAkRdQQhtPIGI1CJ9CrAYjG0JxUqaOAcg0IQOwqf2PRuMDKGoBmcLsrWcgpCUAAAAASUVORK5CYII=
// ==/UserScript==

const GRID_ROWS_MIN = 1;
const GRID_ROWS_MAX = 15;
const GRID_ROWS_DEFAULT = 4;
const CONCURRENT_LOADS_IMAGE = 3;
const CONCURRENT_LOADS_VIDEO = 1;
const LOAD_DELAY_IMAGE = 10;
const LOAD_DELAY_VIDEO = 300;
const PRELOAD_VIEWPORT_BUFFER = 200; // Load images within 200px of viewport

function GM_addStyle(css) {
    const style = document.createElement("style");
    style.textContent = css;
    (document.head || document.documentElement).appendChild(style);
    return style;
}

// Usage

var MasonryCss = `

#fcm_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.95);
    z-index: 10000;
    overflow: auto;
    box-sizing: border-box;
}

#fcm_topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    z-index: 999;
    transition: transform 0.3s ease-in-out;
    will-change: transform;
    backdrop-filter: blur(5px);
}

.fcm_slider_container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.fcm_close {
    padding: 8px 12px;
    background: #d32f2f;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s ease;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fcm_close:hover {
    background: #b71c1c;
    transform: scale(1.05);
}

#fcm_masonry {
    display: block;
    gap: 10px;
    margin-top: 90px;
    column-gap: 5px;
}

.fcm_shortcut_4chanx {
    margin: 0 0 0 5px;
    padding: 0;
    cursor: pointer;
    justify-content: center;
}

.fcm_shortcut_4chanx img {
    width: 16px;
    height: 13px;
}

.fcm_button_regular {
    padding: 12px 18px;
    display: flex;
    gap: 5px;
    background: #2d5016;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.fcm_button_regular:hover {
    background: #4a7c21;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.fcm_button_regular img {
    height: 15px;
}

.fcm_container {
    display: flex;
    margin: 15px 0 15px 0;
}

.fcm_grid_container {
    max-width: 97vw;
    margin: 0 auto;
}

.fcm_value_display {
    color: white;
    font-weight: bold;
    font-size: 16px;
    min-width: 20px;
}

.fcm_media_wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.fcm_media_wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
    z-index: 100;
}

.fcm_media_img,
.fcm_media_thumb,
.fcm_media_video {
    width: 100%;
    display: block;
    object-fit: cover;
    cursor: pointer;
}

.fcm_media_loading, .fcm_media_thumb {

}

.fcm_media_img {
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.fcm_media_video {
    object-fit: contain;
    display: none;
}

.fcm_play_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    pointer-events: none;
    opacity: 0.4;
}

.fcm_tooltip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 8px;
    font-size: 12px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    word-break: break-all;
}

.fcm_media_wrapper:hover .fcm_tooltip {
    transform: translateY(0);
}

`;

GM_addStyle(MasonryCss);

const userscript_icon_1 = "data:image/ico;base64,AAABAAEAEBAAAAEAIACFAAAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAQAAAAEAgGAAAAH/P/YQAAAExJREFUeJxjYBhM4D8SJlnN/7QzxnCMwxCCavApIE0zIQNwGoLFj9jYhMIJ01ZiNVDNAEJeIMtWolxDUTRSzwBkmkg5VEPQaGLlyAcAWwCk9UAWSQAAAAAASUVORK5CYII="
const userscript_icon_2 = "data:image/ico;base64,AAABAAEAEBAAAAEAIACaAAAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAQAAAAEAgGAAAAH/P/YQAAAGFJREFUeJxjYICA/0iYEMBQ+z/tjDEcEzAEp1piDCFOM7EGYBiCxW/EihH2KxFhg10zzCZSDMHQTKohFBtAkRdQQhtPIGI1CJ9CrAYjG0JxUqaOAcg0IQOwqf2PRuMDKGoBmcLsrWcgpCUAAAAASUVORK5CYII=";
const userscript_icon_3 = "data:image/ico;base64,AAABAAEACggAAAEAIABkAAAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAKAAAACAgGAAAAwPputgAAACtJREFUeJxjYEAF/9EwVvA/7YwxCsamGF0Sq2IMRbgUE62QaKtJ8gzB4AEA82hZQXIdFlEAAAAASUVORK5CYII="


let gridRows = GRID_ROWS_DEFAULT;
let isGridOpen = false;
let gridOverlay = null;
let loadQueue = [];
let activeLoadsImage = 0;
let activeLoadsVideo = 0;
let preloadCache = new Map(); // Cache to avoid duplicate requests

// Rate limiting function
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// Check if element is near viewport
function isNearViewport(element, buffer = PRELOAD_VIEWPORT_BUFFER) {
    const rect = element.getBoundingClientRect();
    const windowHeight = window.innerHeight;
    const windowWidth = window.innerWidth;

    return (
        rect.bottom >= -buffer &&
        rect.top <= windowHeight + buffer &&
        rect.right >= -buffer &&
        rect.left <= windowWidth + buffer
    );
}

// Queue-based image preloader
async function preloadMedia(url, priority = 'low', type = 'image') {
    if (preloadCache.has(url)) {
        return preloadCache.get(url);
    }

    return new Promise((resolve, reject) => {
        loadQueue.push({ url, resolve, reject, priority, type });
        processLoadQueue();
    });
}

// Process the load queue with rate limiting
async function processLoadQueue() {
    if ((activeLoadsImage >= CONCURRENT_LOADS_IMAGE || activeLoadsVideo >= CONCURRENT_LOADS_VIDEO) || loadQueue.length === 0) {
        return;
    }

    // Sort by priority (high priority first)
    loadQueue.sort((a, b) => {
        const priorityOrder = { 'high': 3, 'medium': 2, 'low': 1 };
        return priorityOrder[b.priority] - priorityOrder[a.priority];
    });

    const item = loadQueue.shift();

    let delayMs = 0;
    if (item.type === 'image') {
        activeLoadsImage++;
        delayMs = LOAD_DELAY_IMAGE;
    }
    else {
        activeLoadsVideo++;
        delayMs = LOAD_DELAY_VIDEO;
    }

    try {
        await delay(delayMs); // Rate limiting delay

        const result = await loadMedia(item.url, item.type);
        preloadCache.set(item.url, result);
        item.resolve(result);
    } catch (error) {
        console.warn(`Failed to load ${item.url}:`, error);
        item.reject(error);
    } finally {
        if (item.type === 'image') {
            activeLoadsImage--;
        }
        else {
            activeLoadsVideo--;
        }

        // Process next item in queue
        setTimeout(processLoadQueue, 50);
    }
}

function updateQueuePriority(url, newPriority) {
    const item = loadQueue.find(i => i.url === url);
    if (item) {
        item.priority = newPriority;
    }
}

function updatePriorities() {
    document.querySelectorAll('.fcm_media_img').forEach(img => {
        const url = img.dataset.fullUrl;

        if (!url) return; // Already loaded
        if (preloadCache.has(url)) return; // Already done

        const item = loadQueue.find(i => i.url === url);
        if (item) {
            item.priority = isNearViewport(img) ? 'medium' : 'low';
        }
    });
}

function throttle(fn, delay) {
    let lastCall = 0;
    let timeout;

    return function (...args) {
        const now = Date.now();

        if (now - lastCall < delay) {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                lastCall = Date.now();
                fn.apply(this, args);
            }, delay - (now - lastCall));
        } else {
            lastCall = now;
            fn.apply(this, args);
        }
    };
}

const throttledUpdatePriorities = throttle(updatePriorities, 800);
window.addEventListener('scroll', throttledUpdatePriorities);
window.addEventListener('resize', throttledUpdatePriorities);

// Actual media loading function
function loadMedia(url, type) {
    return new Promise((resolve, reject) => {
        if (type === 'image') {
            const img = new Image();

            const timeout = setTimeout(() => {
                reject(new Error('Image load timeout'));
            }, 10000); // 10 second timeout

            img.onload = () => {
                clearTimeout(timeout);
                resolve(img);
            };

            img.onerror = () => {
                clearTimeout(timeout);
                reject(new Error('Image load failed'));
            };

            img.src = url;
        } else if (type === 'video') {
            const video = document.createElement('video');

            const timeout = setTimeout(() => {
                reject(new Error('Video load timeout'));
            }, 15000); // 15 second timeout for videos

            video.addEventListener('loadeddata', () => {
                clearTimeout(timeout);
                resolve(video);
            });

            video.addEventListener('error', () => {
                clearTimeout(timeout);
                reject(new Error('Video load failed'));
            });

            video.src = url;
            video.preload = 'metadata'; // Only load metadata initially
        }
    });
}

// Intersection Observer for lazy loading
const imageObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            const fullUrl = img.dataset.fullUrl;

            if (fullUrl && !img.dataset.loading) {
                img.dataset.loading = 'true';

                preloadMedia(fullUrl, isNearViewport(img) ? 'medium' : 'low').then((fullImg) => {
                    img.style.opacity = '0';
                    setTimeout(() => {
                        img.src = fullImg.src;
                        img.style.opacity = '1';
                        img.removeAttribute('data-full-url');
                        img.removeAttribute('data-loading');
                        img.classList.remove("fcm_media_loading");
                    }, 200);
                }).catch(() => {
                    img.removeAttribute('data-loading');
                    img.classList.remove("fcm_media_loading");
                });
            }
        }
    });
}, {
    rootMargin: '200px' // Start loading 200px before entering viewport
});

function createOptimizedVideoElement(mediaData, thumbImg, playBtn, mediaWrapper) {
    let video = null;
    let videoLoaded = false;
    let hoverTimeout = null;
    let isHovering = false;

    const createVideo = () => {
        if (!video) {
            video = document.createElement('video');
            video.className = "fcm_media_video";
            video.loop = true;
            video.muted = true;
            video.playsInline = true;
            video.style.display = 'none';

            video.addEventListener('canplay', () => {
                videoLoaded = true;
                if (isNearViewport(video) && !video.controls) {
                    showVideo();
                }
            });

            video.addEventListener('loadstart', () => {
                console.log('Video loading started:', mediaData.url);
            });

            mediaWrapper.appendChild(video);
        }
        return video;
    };

    const showVideo = () => {
        if (video && videoLoaded) {
            thumbImg.style.display = 'none';
            playBtn.style.display = 'none';
            video.style.display = 'block';
            video.play().catch(() => { });
        }
    };

    const hideVideo = () => {
        if (video && !video.controls) {
            video.pause();
            video.style.display = 'none';
            thumbImg.style.display = 'block';
            playBtn.style.display = 'flex';
        }
    };

    // Hover enter - start loading after delay
    mediaWrapper.addEventListener('mouseenter', () => {
        isHovering = true;
        clearTimeout(hoverTimeout);

        hoverTimeout = setTimeout(() => {
            if (isHovering) { // Double-check still hovering
                const vid = createVideo();

                if (videoLoaded) {
                    // Video already loaded, show immediately
                    showVideo();
                }
                else if (!vid.src) {
                    // Queue the video load instead of hitting server immediately
                    preloadMedia(mediaData.url, 'high', 'video')
                        .then((videoEl) => {
                            vid.src = mediaData.url;
                        })
                        .catch(() => {
                            console.warn("Failed to queue video load:", mediaData.url);
                        });
                }
                // If video is loading, showVideo() will be called from 'canplay' event
            }
        }, 100); // Reduced delay for better responsiveness
    });

    // Hover leave - hide video and cancel loading if needed
    mediaWrapper.addEventListener('mouseleave', () => {
         isHovering = false;
         clearTimeout(hoverTimeout);
         //hideVideo();
    });

    // Click handler - permanent video with controls
    mediaWrapper.addEventListener('click', (e) => {
        if (!video || video.controls) return; // Already clicked or no video

        e.preventDefault();
        const vid = createVideo();

        // Set up for permanent display
        vid.muted = false;
        vid.controls = true;
        vid.style.display = 'block';
        thumbImg.style.display = 'none';
        playBtn.style.display = 'none';

        if (!vid.src) {
            vid.src = mediaData.url;
        }

        // Play when ready
        if (videoLoaded) {
            vid.play().catch(() => { });
        } else {
            vid.addEventListener('canplay', () => {
                vid.play().catch(() => { });
            }, { once: true });
        }
    });
}

// Replace the image creation part in createMasonryGrid function
function createOptimizedMediaElement(mediaData) {
    const mediaWrapper = document.createElement('div');
    mediaWrapper.className = "fcm_media_wrapper";

    if (mediaData.isVideo) {
        // Thumbnail image
        const thumbImg = document.createElement('img');
        thumbImg.src = mediaData.thumbnail;
        thumbImg.className = "fcm_media_thumb";
        thumbImg.loading = 'lazy';
        mediaWrapper.appendChild(thumbImg);

        // Play button overlay
        const playBtn = document.createElement('div');
        playBtn.className = "fcm_play_btn";
        playBtn.innerHTML = '&#9658;';
        mediaWrapper.appendChild(playBtn);

        // Use optimized video creation
        createOptimizedVideoElement(mediaData, thumbImg, playBtn, mediaWrapper);
    } else {
        const img = document.createElement('img');
        img.className = "fcm_media_img fcm_media_loading";
        img.src = mediaData.thumbnail;
        img.loading = 'lazy';
        img.dataset.fullUrl = mediaData.url;

        mediaWrapper.addEventListener('mouseenter', () => {
            updateQueuePriority(mediaData.url, 'high');
        });

        // Use Intersection Observer for lazy loading
        imageObserver.observe(img);
        mediaWrapper.appendChild(img);
    }

    // Filename tooltip
    const tooltip = document.createElement('div');
    tooltip.textContent = mediaData.originalName;
    tooltip.className = "fcm_tooltip";

    // Middle click handler
    mediaWrapper.addEventListener('mousedown', (event) => {
        if (event.button === 1) {
            window.open(mediaData.url, '_blank');
        }
    });

    mediaWrapper.appendChild(tooltip);
    return mediaWrapper;
}

// Add cleanup function for when grid is closed
function cleanupPreloading() {
    // Cancel pending loads
    loadQueue.forEach(item => {
        item.reject(new Error('Cleanup cancelled'));
    });
    loadQueue = [];
    activeLoads = 0;

    // this is handles with refresh
    // // Clear cache periodically to prevent memory leaks
    // if (preloadCache.size > 100) {
    //     preloadCache.clear();
    // }

    // Disconnect observer
    imageObserver.disconnect();
}

function initUI() {
    const button = document.createElement('span');
    button.title = "Masonry Grid";

    button.addEventListener('click', function(e) {
        e.preventDefault();
        openGrid();
    });

    const forchanX_header = document.getElementById("header-bar")
    if (forchanX_header) { // if 4chan X is detected

        const element = document.getElementById("shortcut-watcher");
        button.id = "shortcut-masonry";
        button.className = "shortcut brackets-wrap fcm_shortcut_4chanx";

        const img = document.createElement("img");
        img.src = userscript_icon_1;
        button.appendChild(img);


        img.addEventListener('mouseover', () => {
            if (!img.classList.contains('clicked')) {
                img.src = userscript_icon_2;
            }
        });


        img.addEventListener('mouseout', () => {
            if (!img.classList.contains('clicked')) {
                img.src = userscript_icon_1;
            }
        });

        img.addEventListener('mousedown', () => {
            img.classList.add('pressed');
            img.src = userscript_icon_3;
        });


        img.addEventListener('mouseup', () => {
            img.classList.remove('pressed');

            if (img.matches(':hover')) {
                img.src = userscript_icon_2;
            } else {
                img.src = userscript_icon_1;
            }
        });

        // also handle case where mouse is released outside the image
        document.addEventListener('mouseup', () => {
            if (img.classList.contains('pressed')) {
                img.classList.remove('pressed');
                if (img.matches(':hover')) {
                    img.src = 'icon2.png';
                } else {
                    img.src = 'icon1.png';
                }
            }
        });

        forchanX_header.appendChild(button);
        element.parentElement.insertBefore(button, element);
    }
    else {
        button.className = "fcm_button_regular";

        const img = document.createElement("img");
        img.src = userscript_icon_3;
        button.appendChild(img);

        const span = document.createElement("span");
        span.innerHTML = "Masonry Grid";
        button.appendChild(span);

        const containerDiv = document.createElement('div');
        containerDiv.id = "4chan_grid_cont";
        containerDiv.className = "fcm_container";

        containerDiv.appendChild(button);
        const threadElement = document.querySelector(".thread");
        threadElement.parentElement.insertBefore(containerDiv, threadElement);
    }

    findMediaLinks(button);
}

function findMediaLinks(button = null) {
    const mediaLinks = [];
    const files = document.querySelectorAll('div.file');

    files.forEach((fileDiv, index) => {
        const fileText = fileDiv.querySelector('.fileText');
        const fileThumb = fileDiv.querySelector('.fileThumb');
        const fileThumbImage = fileThumb.querySelector("img");
        let link = null;
        if (fileText) { link = fileText.querySelector('a'); }

        if (link && link.href) {
            const url = link.href.startsWith('//') ? 'https:' + link.href : link.href;

            const isImage = /\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?|$)/i.test(url);
            const isVideo = /\.(mp4|webm|mkv|avi|mov)(\?|$)/i.test(url);

            if (isImage || isVideo) {
                const postId = url.split('/').pop().split('?')[0];
                let originalName = link.title.trim() || link.textContent.trim() || postId;

                // if 4chan-X is used fix the name fetching
                const fnfull = link.querySelector('.fnfull');
                if (fnfull) { originalName = fnfull.textContent.trim(); }

                // get file info text
                const fileInfo = fileDiv.querySelector(".file-info");
                let width = null;
                let height = null;
                if (fileInfo) {
                    const fileInfoClone = fileInfo.cloneNode(true);
                    fileInfoClone.querySelectorAll("a").forEach(a => a.remove());
                    const info = fileInfoClone.textContent.trim();
                    const size = info.split(", ")[1].replace(")", "");
                    const width_and_height = size.split("x");
                    width = width_and_height[0];
                    height = width_and_height[1];
                }

                const newElement = {
                    url: url,
                    originalName: originalName,
                    postId: postId,
                    index: index + 1,
                    isVideo: isVideo,
                    thumbnail: (fileThumbImage.src),
                    width: width,
                    height: height
                };
                mediaLinks.push(newElement);
            }
        }
    });

    if (button) {
        button.title = `Masonry Grid (${mediaLinks.length})`;
    }

    return mediaLinks;
}

function findMediaLinksFromImgAndVideoElements() {
    const mediaLinks = []
    const imgElements = document.querySelectorAll('img[src*="jpg"], img[src*="jpeg"], img[src*="png"], img[src*="gif"], img[src*="webp"], img[src*="bmp"]');
    const videoElements = document.querySelectorAll('video[src*="mp4"], video[src*="webm"], video[src*="mkv"], video[src*="avi"], video[src*="mov"]');
    const mediaElements = [...imgElements, ...videoElements];
    mediaElements.forEach((img_or_vid, index) => {
        const url = img_or_vid.src;
        const filename = url.split('/').pop().split('?')[0];
        const isVideo = /\.(mp4|webm|mkv|avi|mov)(\?|$)/i.test(url);

        mediaLinks.push({
            url: url,
            originalName: filename,
            postId: filename,
            index: index + 1,
            isVideo: isVideo
        });
    });
    return mediaLinks;
}

function updateMasonryGrid() {
    const gridContainer = document.getElementById('fcm_masonry');
    if (gridContainer) {
        gridContainer.style.columnCount = gridRows;
    }
}

function createTopBar() {
    const topbar = document.createElement("div");
    topbar.id = "fcm_topbar";

    const sliderContainer = document.createElement('div');
    sliderContainer.className = "fcm_slider_container";

    const slider = document.createElement('input');
    slider.type = 'range';
    slider.id = "setting_slider_cols";
    slider.min = GRID_ROWS_MIN;
    slider.max = GRID_ROWS_MAX;
    slider.step = "1";
    slider.value = gridRows;

    const valueDisplay = document.createElement('span');
    valueDisplay.textContent = gridRows;
    valueDisplay.className = "fcm_value_display";

    slider.addEventListener('input', (e) => {
        gridRows = parseInt(e.target.value);
        valueDisplay.textContent = gridRows;
        updateMasonryGrid();
    });

    function slider_left() { slider.value = Math.max(Number(slider.value) - Number(slider.step), slider.min); }
    function slider_right() { slider.value = Math.min(Number(slider.value) + Number(slider.step), slider.max); }

    slider.addEventListener('keydown', (event) => {
        switch (event.key) {
            case 'ArrowLeft': slider_left(); break;
            case 'ArrowRight': slider_right(); break;
        }
    });

    slider.focus();
    slider.select();

    sliderContainer.appendChild(slider);
    sliderContainer.appendChild(valueDisplay);
    topbar.appendChild(sliderContainer);

    // Close button
    const closeButton = document.createElement('button');
    closeButton.className = "fcm_close";
    closeButton.innerHTML = '✕';
    closeButton.addEventListener('click', closeGrid);

    topbar.appendChild(closeButton);
    return topbar;
}

function createMasonryGrid(mediaLinks) {
    const overlay = document.createElement('div');
    overlay.id = 'fcm_overlay';

    const topbar = createTopBar();

    let lastScroll = 0;
    overlay.addEventListener("scroll", () => {
        const currentScroll = overlay.scrollTop;

        if (currentScroll > lastScroll) { topbar.style.transform = "translateY(-100%)"; }
        else { topbar.style.transform = "translateY(0)"; }

        lastScroll = currentScroll;
    });

    overlay.appendChild(topbar);

    const container = document.createElement('div');
    container.className = "fcm_grid_container";

    const handleParentClick = (event) => {
        event.preventDefault();
        if (event.target === event.currentTarget) {
            closeGrid();
        }
    };

    overlay.addEventListener('click', handleParentClick);
    container.addEventListener('click', handleParentClick);
    topbar.addEventListener('click', handleParentClick);

    // Grid container
    const gridContainer = document.createElement('div');
    gridContainer.id = 'fcm_masonry';
    gridContainer.style.columnCount = gridRows;

    // Create image elements
    mediaLinks.forEach((mediaData, index) => {
        const mediaWrapper = createOptimizedMediaElement(mediaData);
        gridContainer.appendChild(mediaWrapper);
    });

    container.appendChild(gridContainer);
    overlay.appendChild(container);

    return overlay;
}

function openGrid() {
    if (isGridOpen) return;

    const mediaLinks = findMediaLinks();
    if (mediaLinks.length === 0) {
        alert('No media found on this page!');
        return;
    }

    gridOverlay = createMasonryGrid(mediaLinks);
    document.body.appendChild(gridOverlay);
    isGridOpen = true;

    // Prevent body scrolling
    document.body.style.overflow = 'hidden';

    // Close on escape key
    document.addEventListener('keydown', handleEscapeKey);
}

function closeGrid() {
    if (!isGridOpen || !gridOverlay) return;

    cleanupPreloading();

    document.body.removeChild(gridOverlay);
    gridOverlay = null;
    isGridOpen = false;
    document.body.style.overflow = 'auto';
    document.removeEventListener('keydown', handleEscapeKey);
}


function handleEscapeKey(e) {
    if (e.key === 'Escape') {
        closeGrid();
    }
}

async function init() {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
        return;
    }

    setTimeout(async () => {
        try {
            initUI();

        } catch (error) {
            console.error('Error initializing userscript:', error);
        }
    }, 500);
}

init();