Discord Direct Video Embed.user.js

// ==UserScript==
// @name         Discord Direct Video Embed
// @namespace    https://orangestar12.github.io/
// @version      0.1
// @description  Converts uploaded videos that end in .webm and .mp4 into embedded video players.
// @author       Orangestar
// @match        https://discordapp.com/channels/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    console.log('Initializing DDVE.');

    var queue = [];

    function populateQueue(){
        // get nodelist: convert to array so we can "pop" it
        queue = Array.prototype.slice.call(document.querySelectorAll('.message'));
    }

    function checkToConvertVideoToPlayer() {

        // Populate queue if empty
        if (queue.length === 0) {
            populateQueue();
        }

        if (queue.length !== 0) {

            var latestElement = queue.pop();

            // video player already in message: stop
            if (!latestElement.querySelector('.html5-video-player')) {

                // attachment found:
                if (latestElement.querySelector('.attachment')) {

                    var src = latestElement.querySelector('.attachment').querySelector('a').href;

                    // src is video file:
                    if (src.endsWith('.mp4') || src.endsWith('.webm')) {

                        // new html5 video player
                        var videoPlayer = document.createElement('VIDEO');
                        videoPlayer.src = src;

                        // enable controls: give class so Discord can style it and we can check it later
                        videoPlayer.setAttribute('controls', 'controls');
                        videoPlayer.setAttribute('class', 'html5-video-player');
                        
                        //I prefer to actually keep my bandwidth, tyvm -M
                        videoPlayer.setAttribute('preload', 'none');

                        // style the player so it doesn't get 2hueg
                        videoPlayer.setAttribute('style', 'max-width: 400px; max-height: 300px; border-radius: 5px;');

                        // attach player to message
                        latestElement.appendChild(videoPlayer);
                    }
                }
            }
        }
        requestAnimationFrame(checkToConvertVideoToPlayer);
    }

    requestAnimationFrame(checkToConvertVideoToPlayer);
})();