e621 Thumbnail Enhancer

Resizes thumbnails on e621.net, replacing them with higher resoltion images and adding support for video previews.

// ==UserScript==
// @name         e621 Thumbnail Enhancer
// @version      1.01
// @description  Resizes thumbnails on e621.net, replacing them with higher resoltion images and adding support for video previews.
// @author       swordgedance
// @include      http://*e621.net/post*
// @include      https://*e621.net/post*
// @include      http://*e621.net/pool*
// @include      https://*e621.net/pool*
// @grant        GM.xmlHttpRequest
// @namespace    https://greasyfork.org/de/users/398891
// ==/UserScript==

//original rooshoos
//http://twitter.com/rooshoos



var sty =document.createElement("style");
sty.innerHTML=[
     "div.thumbEnh_cont{"
    ,"    display: grid;"
    ,"    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));"
    ,"}"
    ,"div.thumbEnh_cont span.thumb{"
    ,"    width:90%;"
    ,"    height:auto;"
    ,"}"
    ,"span.thumb img{"
    ,"    width:100%;"
    ,"    height:auto;"
    ,"}"
    // ,"span.thumb {"
    // ,"    width: 30%;" //auto;"
    // ,"    height: auto;" //250px;"
    // ,"    margin: 0 10px 10px 0;"
    // ,"}"

    ,"span.thumb .preview {"
    ,"    display: block;"
    ,"    height: auto;"//220px;"
    ,"    width: 100%;"//auto;"
    ,"}"

    ,"#child-posts-expanded-thumbs span.thumb,"
    ,"#child-posts-expanded-thumbs span.thumb .preview {"
    ,"    width: 32%;"//180px;"
    ,"    height:auto;"
    ,"}"

    ,"span.thumb .post-score {"
    ,"    width: auto !important;"
    ,"}"

    ,"span.thumb .tooltip-thumb {"
    ,"    display: block;"
    ,"    position: relative;"
    ,"}"

    ,"span.thumb .gif,"
    ,"span.thumb .video {"
    ,"    position: relative;"
    ,"    display: block;"
    ,"}"

    ,"span.thumb .gif:not(:hover)::after,"
    ,"span.thumb .video:not(:hover)::after {"
    ,"    content: '';"
    ,"    display: block;"
    ,"    position: absolute;"
    ,"    top: 0; bottom: 0; left: 0; right: 0;"
    ,"}"

    ,"span.thumb .video:not(:hover)::after {"
    ,"    background: transparent "
    ,"        url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjA2IiBoZWlnaHQ9IjIwNiIgdmlld0JveD0iMCAwIDIwNiAyMDYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSI5MCIgY3k9IjkwIiByPSI5MCIvPjxmaWx0ZXIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI2LjUiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjI5NDE1NzYwOSAwIiBpbj0ic2hhZG93Qmx1ck91dGVyMSIvPjwvZmlsdGVyPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzIDEzKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii44ODEiIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PC9nPjxwYXRoIGZpbGwtb3BhY2l0eT0iLjQiIGZpbGw9IiMwMDAiIGQ9Ik04MS41IDE0Ny42NThWNTkuMzQybDY1IDQ0LjE1OCIvPjwvZz48L3N2Zz4=)"
    ,"        no-repeat center/80px;"
    ,"}"

    ,"span.thumb .gif:not(:hover)::after {"
    ,"    content: 'GIF';"
    ,"    width: 60px;"
    ,"    height: 30px;"
    ,"    margin: auto;"
    ,"    font-size: 16px;"
    ,"    font-weight: bold;"
    ,"    line-height: 30px;"
    ,"    color: rgba(0,0,0,0.4);"
    ,"    background-color: rgba(255,255,255,0.8);"
    ,"    border-radius: 6px;"
    ,"    box-shadow: 0 0 13px rgba(0,0,0,0.29);"
    ,"}"

    ,"span.thumb .gif:hover .preview {"
    ,"    display: none !important;"
    ,"}"

    ,"span.thumb .gif:hover img.preview {"
    ,"    display: block !important;"
    ,"}"
].join("");
document.head.appendChild(sty);


(function () {
    var contDiv = document.querySelector("span.thumb").parentElement;
    contDiv.className = "thumbEnh_cont";


    function is_gif(i) {
        return /^(?!data:).*\.gif/i.test(i.src);
    }

    function freeze_gif(i) {
        var c = document.createElement('canvas');
        var w = c.width = i.naturalWidth;
        var h = c.height = i.naturalHeight;
        var p = i.parentNode;
        c.getContext('2d').drawImage(i, 0, 0, w, h);
        p.className = ['gif', p.className].join(' ');
        try {
            i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
        } catch (e) { // cross-domain -- mimic original with all its tag attributes
            replaceImg(c, i);
            i.style.display = 'none';
            p.insertBefore(i, p.firstChild);
        }
    }

    function replaceImg(e, i) {
        e.className = i.className;
        var s = window.getComputedStyle(i);
        e.style.border = s.getPropertyValue('border');
        e.style.borderRadius = s.getPropertyValue('border-radius');
        i.parentNode.replaceChild(e, i);
    }

    function setVideo(thumb, videoUrl) {
        var video = document.createElement('video'),
            parent = thumb.parentNode;
        video.controls = false;
        video.loop = true;
        video.muted = true;
        video.preload = 'metadata';
        video.addEventListener('loadedmetadata', function () {
            parent.className = ['video', parent.className].join(' ');
            parent.addEventListener('mouseenter', function () {
                video.play();
            });
            parent.addEventListener('mouseleave', function () {
                video.pause();
            });
            replaceImg(this, thumb);
        }, false);
        video.src = videoUrl;
    }

    /* Replace video thumbnails with actual playable video */
    function videoThumb(thumb, parseHTML) {
        parseHTML = parseHTML || false;
        var parent = thumb.parentNode;

        GM.xmlHttpRequest({
            method: "GET",
            url: parent.href,
            headers: {
                "Accept": "text/xml"
            },
            onload: function (response) {
                var videoUrl = null;
                if (response.readyState !== 4) return;
                if (!response.responseXML) return;

                var file_url = response.responseXML.getElementsByTagName('file_url')[0];
                if (!file_url) return;

                videoUrl = file_url.childNodes[0].nodeValue;
                setVideo(thumb, videoUrl);
            }
        });

    }

    /* Replace image thumbnails with higher resolution */
    function imageThumb(thumb) {
        var newThumb = new Image(),
            replace = function (thumb) {
                thumb.src = this.src;
                if (is_gif(thumb)) {
                    //freeze_gif(thumb);
                }
            },
            trynoSample = function (thumb) {
                this.onerror = tryGif.bind(this, thumb);
                this.src = thumb.src.replace('/preview/', '/');

            },
            tryGif = function (thumb) {
                this.onerror = null;
                this.src = thumb.src.replace('/preview/', '/').replace('.jpg', '.gif');
            };
        newThumb.onload = replace.bind(newThumb, thumb);
        newThumb.onerror = trynoSample.bind(newThumb, thumb);
        newThumb.src = thumb.src.replace('/preview/', '/sample/');
    }

    function imgError(image) {
        image.onerror = "";
        image.src = "/images/noimage.gif";
        return true;
    }

    /* Run above on all thumbnails */
    var thumbs = document.querySelectorAll('span.thumb img');
    //var typ=document.querySelectorAll('span.thumb span.type-badge');
    for (i = 0; i < thumbs.length; i++) {
        var thumb = thumbs[i];
        var badge = thumb.parentElement.querySelector("span.type-badge");
        if (badge && badge.innerHTML.toLowerCase() == "webm") {
            (function (thumb, i) {
                setTimeout(function () {
                    videoThumb(thumb);
                }, 100 * i);
            })(thumb, i);
        } else {

            imageThumb(thumb);

        }
    }
})();