kpop.re_thumbnail_files.user.js

// ==UserScript==
// @version      0.2
// @description  display embed thumbnails as if they were images
// @description  thanks to loopvid's kpop.re_post_id_fix.user.js for the handleNewPosts code
// @match        *://kpop.re/*
// ==/UserScript==

(function() {
    function handlePost(p) {
        let files = p.querySelector('.post-files');
        if (!files) {
            files = document.createElement('div');
            files.className = 'post-files';
            p.querySelector('.post-body').insertAdjacentElement('afterbegin', files);
        }

        let embeds = p.querySelectorAll('.post-embed');
        embeds.forEach(function(e) {
            let thumbnail = e.getAttribute('data-thumbnail_url');
            let link = e.getAttribute('href');

            let figure = document.createElement('figure');
            figure.className = 'post-file';
            let caption = document.createElement('figcaption');
            caption.className = 'post-file-info';
            if (link.length > 30)
                caption.innerText = link.substr(0, 30) + '...';
            else
                caption.innerText = link;
            figure.appendChild(caption);
            let a = document.createElement('a');
            a.className = 'post-file-link';
            a.href = link;
            a.target = '_blank';
            figure.appendChild(a);
            let img = document.createElement('img');
            img.className = 'post-file-thumb';
            img.src = thumbnail;
            img.style.maxWidth = '200px';
            img.style.maxHeight = '200px';
            img.loading = 'lazy';
            img.target = '_blank';
            a.appendChild(img);

            p.querySelector('.post-files').insertAdjacentElement('beforeend', figure);

            let fileCount = files.querySelectorAll('.post-file').length;
            if (fileCount >= 1)
                p.classList.add('post_file');
            if (fileCount > 1)
                p.classList.add('post_files');
        });
    }

    function handleInitialPosts() {
        let posts = document.querySelectorAll('.post');
        posts.forEach(function(p) { handlePost(p) });
    }

    function handleNewPosts(mutations) {
        var i, j, newPosts, post, parentPost;
        for (i=0; i < mutations.length; i++) {
            if (!(mutations[i].type === 'childList' && mutations[i].addedNodes &&
                mutations[i].addedNodes.length > 0)) {
                continue;
            }
            newPosts = mutations[i].addedNodes;
            for (j=0; j < newPosts.length; j++) {
                post = newPosts[j];
                parentPost = post ? post.parentPost : null;
                if (!(post && parentPost && post.tagName == 'ARTICLE' &&
                    post.classList.contains('post'))) { continue; }
                handlePost(post);
            }
        }
    }

    let newPostObserver = new MutationObserver(handleNewPosts);
    let threadElem = document.querySelector('article.thread');
    newPostObserver.observe(threadElem, {childList: true, subtree: true});

    setTimeout(() => handleInitialPosts(), 4000);
})();