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

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

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

function preSetupProc() {
    poppedContainer = document.createElement("DIV");
    ytThumbImgMenu = document.createElement("DIV");
    ytEnhancerMenu = document.createElement("DIV");
    ytThumbnailBttn = document.createElement("IMG");
    ytMaxDefaultImg = document.createElement("IMG");
    ytHqDefaultImg = document.createElement("IMG");
    ytLoopBttn = document.createElement("IMG");
    ytFloatBttn = document.createElement("IMG");
    ytAMaxDefaultImg = document.createElement("A");
    ytAHqDefaultImg = document.createElement("A");

    // Get nodes for page work
    mastHead = document.getElementById("masthead-container")
                       .getElementsByClassName("style-scope ytd-masthead")[3]; // Search bar area
    mainContentArea = document.getElementsByTagName("ytd-watch")[0];           // BT control insert area and bg color setup

    containerOfPlyrWndow = document.getElementById("top").children[0];         // Container of actual player - Used for floating window
    video = document.getElementsByTagName("video")[0];                         // Video Controler
    part = "https://img.youtube.com/vi/";

    // Append to nodes as required
    ytEnhancerMenu.appendChild(ytThumbnailBttn);
    ytEnhancerMenu.appendChild(ytLoopBttn);
    ytEnhancerMenu.appendChild(ytFloatBttn);

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

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

    // 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);

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

    // Theming & Apply Styles
    ytThumbImgMenu.className = "ytThumbMenuStyle";
    ytMaxDefaultImg.className = "thumbImageStyle";
    ytHqDefaultImg.className = "thumbImageStyle";
    ytEnhancerMenu.className = "ytMenuStyle";
    ytThumbnailBttn.className = "imageStyle";
    ytLoopBttn.className = "imageStyle";
    ytFloatBttn.className = "imageStyle";
    poppedContainer.id = "draggable";
    poppedContainer.style.display = "none";
    mastHead.style = "background: #868686;";
    mainContentArea.style = "background: #868686;";
}

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

    videoSlug = vdoPlyrAtts;
    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";
        ytMaxDefaultImg.src = part + videoSlug + "/maxresdefault.jpg";
        ytHqDefaultImg.src = part + videoSlug + "/hqdefault.jpg";
        ytThumbnailBttn.src = browser.extension.getURL("icons/thumbnailOn.png");
        ytThumbImgMenu.style.display = "block";
    }
    return;
}

function setLoop(e) {
    if (video.loop == false) {
        video.loop = true;
        ytLoopBttn.src = browser.extension.getURL("icons/loopTrue.png");
    } else {
        video.loop = false;
        ytLoopBttn.src = browser.extension.getURL("icons/loopFalse.png");
    }
    return;
}

function toggleFloat() {
    playerWindow = document.getElementById("player-container");      // Actual player

    if(poppedContainer.style.display == "none"){
        poppedContainer.appendChild(playerWindow);
        poppedContainer.style.display = "block";
    } else {
        containerOfPlyrWndow.insertBefore(playerWindow, containerOfPlyrWndow.firstChild);
        poppedContainer.style.display = "none";
    }
}

function manageVolume(e) {
    var 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;
}

function dragVideo(elmnt) {
    var 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;
    }

    function 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";
    }

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

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

// Start init
var existCondition = setInterval(function() {
    if ($('#masthead-container').length) {
        clearInterval(existCondition);
        preSetupProc();
     }
}, 100); // check every 100ms