Discord WebM embedder

discord_webm.user.js

// ==UserScript==
// @name        Discord WebM embed
// @description Embeds uploaded and linked WebM files
// @namespace   Shou
// @include     https://discordapp.com/channels/*
// @version     1
// ==/UserScript==


var styleElem;
var scrollLevel;


var style = function(css) {
    if (! styleElem) {
        styleElem = document.createElement("style");
        document.body.appendChild(styleElem);
    }

    styleElem.textContent += "\n" + css;
}

var embedVideos = function(node) {
    var videos = node.querySelectorAll("a[href$='.webm'], a[href$='.mp4']");

    for (var k = 0, videoLen = videos.length; k < videoLen; k++) {
        var v = document.createElement("video");
        v.src = videos[k].href;
        v.loop = true;
        v.muted = true;
        v.controls = true;

        // Autoplay for Chrome
        v.addEventListener("canplay", function(e) { e.target.play(); });

        videos[k].parentNode.replaceChild(v, videos[k]);
    }
}

var embedImages = function(node) {
    var images = node.querySelectorAll("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.png']");

    for (var i = 0, imageLen = images.length; i < imageLen; i++) {
        var imageObserver = new MutationObserver(function(ms){
            if (ms) {
                // Set <img> src to fullres and delete dimensions
                ms[0].target.children[0].src = ms[0].target.href;
                ms[0].target.children[0].removeAttribute("width");
                ms[0].target.children[0].removeAttribute("height");
                imageObserver.disconnect();
            }
        });

        imageObserver.observe(images[i], { childList: true });
    }
}

var embedder = function(ms) {
    for (var i = 0, msLen = ms.length; i < msLen; i++) {
        var nodes = ms[i].addedNodes;
        for (var j = 0, nodeLen = nodes.length; j < nodeLen; j++) {
            embedVideos(nodes[j]);
            embedImages(nodes[j]);
        }
    }
}

// TODO
var autoScroll = function(ms) {
    if (ms) {
        var mw = ms[0].target;
        var totalScrollHeight = Math.round(scrollLevel + mw.clientHeight);
        var scrolledHeight = Math.round(mw.scrollTop + mw.clientHeight);

        console.log(scrolledHeight + " + 10 > " + totalScrollHeight);
        if (scrolledHeight + 10 > scrollLevel) {
            mw.scrollTop = scrollLevel;
        }

        scrollLevel = mw.scrollTop;
    }
}

var onMessage = function(ms) {
    embedder(ms);
    //autoScroll(ms);
}

// When Discord has finished loading and its message wrapper element is available.
var onDiscordLoad = function() {
    var messagesWrapper = document.querySelector(".messages");

    var observer = new MutationObserver(onMessage);

    observer.observe(messagesWrapper, { childList: true, subtree: true });
}


function main() {
    var mainObserver = new MutationObserver(function(ms) {
        if (ms) {
            if (document.getElementsByClassName("messages")) {
                onDiscordLoad();
                mainObserver.disconnect();
            }
        }
    });
    mainObserver.observe(document.body, { childList: true, subtree: true });

    style(".message-group video { max-width: 100%; max-height: 50vh }");
    style(".message-group img.image { max-width: 100%; max-height: 50vh }");
}

main();

This is instant and should be efficient thanks to MutationObserver.