Better-Youtube-Plus/src/scripts/betterYoutube.js

const betterYoutubePlus = () => {

    // Declare variables
    let slugInputTag, ytThumbImgMenu, ytEnhancerMenu;        // Menu systems
    let ytThumbnailBttn, ytMaxDefaultImg, ytHqDefaultImg,    // Buttons & Images
        ytLoopBttn, ytFloatBttn, ytAMaxDefaultImg, ytAHqDefaultImg;

    let mastHead, mainContentArea, playerWindow;             // Youtube Player container
    let	video, containerOfPlyrWndow, poppedContainer;        // Video accessor
    let vdoPlyrAtts;                                         // Player attributes
    let part, videoSlug, temp;                               // Image part
    let count = 0;

    const preSetupProc = () => {
        video               = document.getElementsByTagName("video")[0];        // Video Controler
        slugInputTag        = document.createElement("INPUT");
        slugInputTag.id     = "slugCopyZone";
        slugInputTag.type   = "text";

        if (!document.getElementById("slugCopyZone")) {
            document.body.appendChild(slugInputTag);
        } else {
            slugInputTag = document.getElementById("slugCopyZone");
        }

        vdoPlyrAtts         = video.baseURI;  // Used for setting up thumbnails
        slugInputTag.value  = vdoPlyrAtts.slice(32, 32+11);
    }

    const setupProc = () => {
        poppedContainer   = document.createElement("DIV");
        ytThumbImgMenu    = document.createElement("DIV");
        ytEnhancerMenu    = document.createElement("DIV");
        ytThumbnailBttn   = document.createElement("IMG");
        ytLoopBttn        = document.createElement("IMG");
        ytFloatBttn       = document.createElement("IMG");
        ytMaxDefaultImg   = document.createElement("IMG");
        ytHqDefaultImg    = document.createElement("IMG");
        ytMqDefaultImg    = document.createElement("IMG");
        ytSdDefaultImg    = document.createElement("IMG");
        ytAMaxDefaultImg  = document.createElement("A");
        ytAHqDefaultImg   = document.createElement("A");
        ytAMedDefaultImg  = document.createElement("A");
        ytASdDefaultImg   = document.createElement("A");

        // Get nodes for page work
        containerOfPlyrWndow = document.getElementById("player-container");     // Container of actual player - Used for floating window
        part                 = "https://img.youtube.com/vi/";

        // Append to nodes as required
        ytThumbnailBttn.title = "Video Thumbnails...";
        ytLoopBttn.title      = "Start Loop...";
        ytFloatBttn.title     = "Float Video Container";

        ytEnhancerMenu.appendChild(ytThumbnailBttn);
        ytEnhancerMenu.appendChild(ytLoopBttn);
        ytEnhancerMenu.appendChild(ytFloatBttn);

        // Insert
        document.body.appendChild(poppedContainer);
        document.body.appendChild(ytThumbImgMenu);
        document.body.appendChild(ytEnhancerMenu);
        ytAMaxDefaultImg.appendChild(ytMaxDefaultImg);
        ytAHqDefaultImg.appendChild(ytHqDefaultImg);
        ytAMedDefaultImg.appendChild(ytMqDefaultImg);
        ytASdDefaultImg.appendChild(ytSdDefaultImg);
        ytThumbImgMenu.appendChild(ytAMaxDefaultImg);
        ytThumbImgMenu.appendChild(ytAHqDefaultImg);
        ytThumbImgMenu.appendChild(ytAMedDefaultImg);
        ytThumbImgMenu.appendChild(ytASdDefaultImg);

        // Set onclick actions
        ytThumbnailBttn.addEventListener("click", showThumbImageVew);
        ytLoopBttn.addEventListener("click", setLoop);
        ytFloatBttn.addEventListener("click", toggleFloat);
        video.addEventListener("wheel", manageVolume);

        // Dragable window for floating video
        dragVideo(poppedContainer);

        ytThumbnailBttn.src = browser.extension.getURL("/icons/thumbnailOff.png");
        ytLoopBttn.src      = browser.extension.getURL("/icons/loopFalse.png");
        ytFloatBttn.src     = browser.extension.getURL("/icons/floatPlayer.png");

        // Set trget of Thumbnails of video
        ytAMaxDefaultImg.target       = "_blank";
        ytAHqDefaultImg.target        = "_blank";
        ytAMedDefaultImg.target       = "_blank";
        ytASdDefaultImg.target        = "_blank";

        // Theming & Apply Styles
        ytThumbImgMenu.className      = "ytThumbMenuStyle";
        ytMaxDefaultImg.className     = "thumbImageStyle";
        ytHqDefaultImg.className      = "thumbImageStyle";
        ytMqDefaultImg.className      = "thumbImageStyle";
        ytSdDefaultImg.className      = "thumbImageStyle";
        ytEnhancerMenu.className      = "ytMenuStyle";
        ytThumbnailBttn.className     = "imageStyle";
        ytLoopBttn.className          = "imageStyle";
        ytFloatBttn.className         = "imageStyle";
        ytEnhancerMenu.id             = "enhancerMenuIDRef";
        poppedContainer.id            = "draggable";
        poppedContainer.style.display = "none";
    }

    // Functions
    const showThumbImageVew = (e) => {
        videoSlug = video.baseURI.slice(32, 32+11);  // Used for setting up thumbnails

        if (ytThumbImgMenu.style.display == "block") {
            ytThumbImgMenu.style.display = "none";
            ytThumbnailBttn.src = browser.extension.getURL("/icons/thumbnailOff.png");
        } else {
            ytAMaxDefaultImg.href        = part + videoSlug + "/maxresdefault.jpg";
            ytAHqDefaultImg.href         = part + videoSlug + "/hqdefault.jpg";
            ytAMedDefaultImg.href        = part + videoSlug + "/mqdefault.jpg";
            ytASdDefaultImg.href         = part + videoSlug + "/sddefault.jpg";
            ytMaxDefaultImg.src          = part + videoSlug + "/maxresdefault.jpg";
            ytHqDefaultImg.src           = part + videoSlug + "/hqdefault.jpg";
            ytMqDefaultImg.src           = part + videoSlug + "/mqdefault.jpg";
            ytSdDefaultImg.src           = part + videoSlug + "/sddefault.jpg";
            ytMaxDefaultImg.title        = "Max Resolution Default";
            ytHqDefaultImg.title         = "High Quality Default";
            ytMqDefaultImg.title         = "Medium Quality Default";
            ytSdDefaultImg.title         = "Standard Quality Default";

            ytMaxDefaultImg.onerror      = function() { ytMaxDefaultImg.src = "/icons/missing.png"; }
            ytHqDefaultImg.onerror       = function() { ytHqDefaultImg.src = "/icons/missing.png"; }
            ytAMedDefaultImg.onerror     = function() { ytAMedDefaultImg.src = "/icons/missing.png"; }
            ytASdDefaultImg.onerror      = function() { ytASdDefaultImg.src = "/icons/missing.png"; }

            ytThumbnailBttn.src          = browser.extension.getURL("/icons/thumbnailOn.png");
            ytThumbImgMenu.style.display = "block";
        }
        return;
    }

    const setLoop = (e) => {
        if (video.loop == false) {
            video.loop        = true;
            ytLoopBttn.title  = "Stop Loop...";
            ytLoopBttn.src    = browser.extension.getURL("/icons/loopTrue.png");
        } else {
            ytLoopBttn.title  = "Start Loop...";
            video.loop        = false;
            ytLoopBttn.src    = browser.extension.getURL("/icons/loopFalse.png");
        }
        return;
    }

    const toggleFloat = () => {
        let playerWindow = document.getElementById("movie_player");  // Actual player

        if(poppedContainer.style.display == "none"){
            setVideoStyle("auto", "auto", "50%");
            poppedContainer.appendChild(playerWindow);
            poppedContainer.style.display = "block";

        } else {
            setVideoStyle(containerOfPlyrWndow.offsetWidth + "px",
                          containerOfPlyrWndow.offsetHeight + "px", "");
            containerOfPlyrWndow.append(playerWindow);
            poppedContainer.style.display = "none";
        }
    }

    const setVideoStyle = (w, h, pr) => {
        let elm = document.getElementsByClassName("ytp-right-controls")[0];
        video.style.width  = w;
        video.style.height = h;
        elm.style.paddingRight = pr;
        console.log("W: " + w + "\nH: " + h + "\npr: " + pr);
        console.log(video.style);
    }

    const manageVolume = (e) => {
        let delta;
        e.preventDefault(); // Keep page from scrolling while in video area

        // Detect scroll direction
        if (e.wheelDelta) delta = e.wheelDelta; else delta = -1 * e.deltaY;
        // Vol UP || Vol DOWN
        if (delta > 0) video.volume += 0.05; else if (delta < 0) video.volume -= 0.05;
    }

    const dragVideo = (elmnt) => {
        let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        elmnt.onmousedown = dragMouseDown;

        function dragMouseDown(e) {
            e = e || window.event;
            pauseEvent(e);
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
        }

        const elementDrag = (e) => {
            e = e || window.event;
            pauseEvent(e);
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // set the element's new position:
            elmnt.style.top  = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        const closeDragElement = (e) => {
            // stop moving when mouse button is released:
            document.onmouseup   = null;
            document.onmousemove = null;
        }

        const pauseEvent = (e) => {
            if(e.stopPropagation) e.stopPropagation();
            if(e.preventDefault)  e.preventDefault();
            e.cancelBubble = true;
            e.returnValue  = false;
        return false;
        }
    }

    const checkPg = () => {
        if (!document.getElementById("enhancerMenuIDRef")) {
            let existCondition = setInterval(function() {
                if (document.getElementById("masthead-container")) {
                    clearInterval(existCondition);
                    preSetupProc();
                    setupProc();
                    count = 0;
                } else {
                    if (count == 12) {  // ~ 6 sec through half sec loops
                        count = 0;
                        clearInterval(existCondition);
                    } else {
                        count++;
                    }
                }
            }, 500); // check every 500ms
        } else {
            preSetupProc();
        }
    }

    // Start init
    checkPg();
}

betterYoutubePlus();