diff --git a/README.md b/README.md index 2b354ff..4bcef9e 100644 --- a/README.md +++ b/README.md @@ -12,5 +12,5 @@ Better Youtube + works to improve the Youtube experience by providing quick acce # Download https://addons.mozilla.org/en-US/firefox/addon/better-youtube-plus/ -# Version: 1.2.5 +# Version: 1.2.6 Added quick access to the Youtube video slug. \ No newline at end of file diff --git a/src/manifest.json b/src/manifest.json index 22f9f6d..94e1940 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Better Youtube +", - "version": "1.2.5", + "version": "1.2.6", "description": "Enhancements for Youtube to have a better experience.", "applications": { diff --git a/src/scripts/betterYoutube.js b/src/scripts/betterYoutube.js index 5132887..43cc570 100644 --- a/src/scripts/betterYoutube.js +++ b/src/scripts/betterYoutube.js @@ -1,246 +1,248 @@ -// Declare variables -var slugInputTag, ytThumbImgMenu, ytEnhancerMenu; // Menu systems -var ytThumbnailBttn, ytMaxDefaultImg, ytHqDefaultImg, // Buttons & Images - ytLoopBttn, ytFloatBttn, ytAMaxDefaultImg, ytAHqDefaultImg; +function betterYoutubePlus() { -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; + // Declare variables + var slugInputTag, ytThumbImgMenu, ytEnhancerMenu; // Menu systems + var ytThumbnailBttn, ytMaxDefaultImg, ytHqDefaultImg, // Buttons & Images + ytLoopBttn, ytFloatBttn, ytAMaxDefaultImg, ytAHqDefaultImg; -function preSetupProc() { - console.log("Weee"); - video = document.getElementsByTagName("video")[0]; // Video Controler - slugInputTag = document.createElement("INPUT"); - slugInputTag.id = "slugCopyZone"; - slugInputTag.type = "text"; + 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; - if (!document.getElementById("slugCopyZone")) { - document.body.appendChild(slugInputTag); - } else { - slugInputTag = document.getElementById("slugCopyZone"); + 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); } - vdoPlyrAtts = video.baseURI; // Used for setting up thumbnails - vdoPlyrAtts = vdoPlyrAtts.slice(32, 32+11); - slugInputTag.value = vdoPlyrAtts; + 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 + 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("player-container"); // Container of actual player - Used for floating window + part = "https://img.youtube.com/vi/"; -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"); + // Append to nodes as required + ytThumbnailBttn.title = "Video Thumbnails..."; + ytLoopBttn.title = "Start Loop..."; + ytFloatBttn.title = "Float Video Container"; - // 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 + ytEnhancerMenu.appendChild(ytThumbnailBttn); + ytEnhancerMenu.appendChild(ytLoopBttn); + ytEnhancerMenu.appendChild(ytFloatBttn); - containerOfPlyrWndow = document.getElementById("top").children[0]; // Container of actual player - Used for floating window - part = "https://img.youtube.com/vi/"; + // 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); - // Append to nodes as required - ytThumbnailBttn.title = "Video Thumbnails..."; - ytLoopBttn.title = "Start Loop..."; - ytFloatBttn.title = "Float Video Container"; + // Set onclick actions + ytThumbnailBttn.addEventListener("click", showThumbImageVew); + ytLoopBttn.addEventListener("click", setLoop); + ytFloatBttn.addEventListener("click", toggleFloat); + video.addEventListener("wheel", manageVolume); - ytEnhancerMenu.appendChild(ytThumbnailBttn); - ytEnhancerMenu.appendChild(ytLoopBttn); - ytEnhancerMenu.appendChild(ytFloatBttn); + // Dragable window for floating video + dragVideo(poppedContainer); - // 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"; - mastHead.style = "background: #868686;"; - mainContentArea.style = "background: #868686;"; -} - -// Functions -function showThumbImageVew(e) { - 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"; - 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"; + ytLoopBttn.src = browser.extension.getURL("/icons/loopFalse.png"); + ytFloatBttn.src = browser.extension.getURL("/icons/floatPlayer.png"); - 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"; } + // Set trget of Thumbnails of video + ytAMaxDefaultImg.target = "_blank"; + ytAHqDefaultImg.target = "_blank"; + ytAMedDefaultImg.target = "_blank"; + ytASdDefaultImg.target = "_blank"; - 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"); // Actual player - - if(poppedContainer.style.display == "none"){ - poppedContainer.appendChild(playerWindow); - poppedContainer.style.display = "block"; - } else { - containerOfPlyrWndow.insertBefore(playerWindow, containerOfPlyrWndow.firstChild); + // 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"; - } -} - -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; + mastHead.style = "background: #868686;"; + mainContentArea.style = "background: #868686;"; } - 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"; + // 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 closeDragElement(e) { - // stop moving when mouse button is released: - document.onmouseup = null; - document.onmousemove = null; + 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 pauseEvent(e) { - if(e.stopPropagation) e.stopPropagation(); - if(e.preventDefault) e.preventDefault(); - e.cancelBubble = true; - e.returnValue = false; - return false; - } -} + function toggleFloat() { + playerWindow = document.getElementById("player-container").children[1]; // Actual player -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; + 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 { - count++; + if (count == 12) { // ~ 6 sec through half sec loops + count = 0; + clearInterval(existCondition); + } else { + count++; + } } - } - }, 500); // check every 500ms - } else { - preSetupProc(); + }, 500); // check every 500ms + } else { + preSetupProc(); + } } + + // Start init + checkPg(); } -// Start init -checkPg(); +betterYoutubePlus();