function betterYoutubePlus() { // Declare variables var slugInputTag, 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 var count = 0; function 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); } function 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 function 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; } function 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; } function toggleFloat() { playerWindow = document.getElementById("player-container").children[1]; // Actual player if(poppedContainer.style.display == "none"){ poppedContainer.appendChild(playerWindow); poppedContainer.style.display = "block"; } else { containerOfPlyrWndow.append(playerWindow); 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; } } function checkPg() { if (!document.getElementById("enhancerMenuIDRef")) { var 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();