diff --git a/src/scripts/betterYoutube.js b/src/scripts/betterYoutube.js index f21e616..b6397d7 100644 --- a/src/scripts/betterYoutube.js +++ b/src/scripts/betterYoutube.js @@ -1,15 +1,15 @@ // Declare variables -var ytThumbImgMenu, ytEnhancerMenu; // Menu systems -var ytThumbnailBttn, ytMaxDefaultImg, ytHqDefaultImg, // Buttons & Images +var ytThumbImgMenu, ytEnhancerMenu; // Menu systems +var ytThumbnailBttn, ytMaxDefaultImg, ytHqDefaultImg, // Buttons & Images ytLoopBttn, ytFloatBttn, ytAMaxDefaultImg, ytAHqDefaultImg; -var mastHead, video, mainPlayerWindow, poppedVdoContr; // Video accessor -var mainContentArea; // Youtube Player container -var vdoPlyrAtts; // Player attributes -var part; // Image part +var mastHead, mainContentArea, playerWindow; // Youtube Player container +var video, mainPlayerWindow, poppedContainer; // Video accessor +var vdoPlyrAtts; // Player attributes +var part, videoSlug, temp; // Image part -function setupContentandInsert() { - poppedVdoContr = document.createElement("DIV"); +function preSetupProc() { + poppedContainer = document.createElement("DIV"); ytThumbImgMenu = document.createElement("DIV"); ytEnhancerMenu = document.createElement("DIV"); ytThumbnailBttn = document.createElement("IMG"); @@ -19,16 +19,16 @@ function setupContentandInsert() { ytFloatBttn = document.createElement("IMG"); ytAMaxDefaultImg = document.createElement("A"); ytAHqDefaultImg = document.createElement("A"); - video = document.getElementsByTagName("video")[0]; - mastHead = document.getElementById("masthead"); - - part = "//i.ytimg.com/vi/"; + // Get nodes for page work + mastHead = document.getElementById("yt-masthead-container"); // Search bar area + mainContentArea = document.getElementById("page-container"); // BT control insert area and bg color setup + mainPlayerWindow = document.getElementById("player-mole-container"); // Set up for insert to floating container + vdoPlyrAtts = document.getElementById("page").attributes; // Used for setting up thumbnails + video = document.getElementsByTagName("video")[0]; // Video Controler + part = "https://img.youtube.com/vi/"; // Append to nodes as required - mainContentArea = $("ytd-watch"); - mainPlayerWindow = $("#player-container").parent(); - vdoPlyrAtts = mainContentArea[0].attributes; ytEnhancerMenu.appendChild(ytThumbnailBttn); ytEnhancerMenu.appendChild(ytLoopBttn); ytEnhancerMenu.appendChild(ytFloatBttn); @@ -38,9 +38,9 @@ function setupContentandInsert() { ytFloatBttn.src = browser.extension.getURL("icons/floatPlayer.png"); // Insert - document.body.appendChild(poppedVdoContr); - mainContentArea[0].appendChild(ytThumbImgMenu); - mainContentArea[0].appendChild(ytEnhancerMenu); + document.body.appendChild(poppedContainer); + document.body.appendChild(ytThumbImgMenu); + document.body.appendChild(ytEnhancerMenu); ytAMaxDefaultImg.appendChild(ytMaxDefaultImg); ytAHqDefaultImg.appendChild(ytHqDefaultImg); ytThumbImgMenu.appendChild(ytAMaxDefaultImg); @@ -53,13 +53,12 @@ function setupContentandInsert() { video.addEventListener("wheel", manageVolume); // Dragable window for floating video - dragVideo(poppedVdoContr); + dragVideo(poppedContainer); // Set trget of Thumbnails of video ytAMaxDefaultImg.target = "_blank"; ytAHqDefaultImg.target = "_blank"; - // Theming & Apply Styles ytThumbImgMenu.className = "ytThumbMenuStyle"; ytMaxDefaultImg.className = "thumbImageStyle"; @@ -68,26 +67,29 @@ function setupContentandInsert() { ytThumbnailBttn.className = "imageStyle"; ytLoopBttn.className = "imageStyle"; ytFloatBttn.className = "imageStyle"; - poppedVdoContr.id = "draggable"; - poppedVdoContr.style.display = "none"; - mainContentArea[0].style = "background: #C0C0C0;"; - mastHead.style = "background: #C0C0C0;"; + poppedContainer.id = "draggable"; + poppedContainer.style.display = "none"; + mastHead.style = "background: #868686;"; + mainContentArea.style = "background: #868686;"; } // Functions function showThumbImageVew(e) { + temp = vdoPlyrAtts[1].value; + temp = temp.replace(" watch video-", ""); + videoSlug = temp.replace(" clearfix", ""); + if (ytThumbImgMenu.style.display == "block") { ytThumbImgMenu.style.display = "none"; ytThumbnailBttn.src = browser.extension.getURL("icons/thumbnailOff.png"); } else { - ytAMaxDefaultImg.href = part + vdoPlyrAtts[0].value + "/maxresdefault.jpg"; - ytAHqDefaultImg.href = part + vdoPlyrAtts[0].value + "/hqdefault.jpg"; - ytMaxDefaultImg.src = part + vdoPlyrAtts[0].value + "/maxresdefault.jpg"; - ytHqDefaultImg.src = part + vdoPlyrAtts[0].value + "/hqdefault.jpg"; + 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; } @@ -103,14 +105,14 @@ function setLoop(e) { } function toggleFloat() { - playerWindow = document.getElementById("player-container"); + playerWindow = document.getElementById("player-api"); - if(poppedVdoContr.style.display == "none"){ - poppedVdoContr.appendChild(playerWindow); - poppedVdoContr.style.display = "block"; + if(poppedContainer.style.display == "none"){ + poppedContainer.appendChild(playerWindow); + poppedContainer.style.display = "block"; } else { - mainPlayerWindow[0].insertBefore(playerWindow, mainPlayerWindow[0].firstChild); - poppedVdoContr.style.display = "none"; + mainPlayerWindow.insertBefore(playerWindow, mainPlayerWindow.firstChild); + poppedContainer.style.display = "none"; } } @@ -166,8 +168,4 @@ function dragVideo(elmnt) { return false; } } - -// load after important dom elements are present -$(document).arrive("#player-container", function() { - setupContentandInsert(); -}); +preSetupProc();