diff --git a/README.md b/README.md index cc272c7..f0aea2b 100644 --- a/README.md +++ b/README.md @@ -11,5 +11,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.0 -This version is a big overhaul and change in logic plus cleans up code styling. \ No newline at end of file +# Version: 1.2.2 +Added more thumbnail options and changed control positions plus added on hovwr titles. \ No newline at end of file diff --git a/src/icons/missing.png b/src/icons/missing.png new file mode 100644 index 0000000..fcbdbb7 Binary files /dev/null and b/src/icons/missing.png differ diff --git a/src/manifest.json b/src/manifest.json index ed457fb..4c4fca2 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Better Youtube +", - "version": "1.2.0", + "version": "1.2.2", "description": "Enhancements for Youtube to have a better experience.", "applications": { diff --git a/src/scripts/betterYoutube.js b/src/scripts/betterYoutube.js index 3989101..4cc5343 100644 --- a/src/scripts/betterYoutube.js +++ b/src/scripts/betterYoutube.js @@ -14,12 +14,16 @@ function preSetupProc() { 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"); + 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") @@ -31,22 +35,26 @@ function preSetupProc() { 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); - 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); + 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); @@ -57,14 +65,22 @@ function preSetupProc() { // 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"; @@ -78,8 +94,8 @@ function preSetupProc() { // Functions function showThumbImageVew(e) { - vdoPlyrAtts = video.baseURI; // Used for setting up thumbnails - vdoPlyrAtts = vdoPlyrAtts.slice(32, 32+11); + vdoPlyrAtts = video.baseURI; // Used for setting up thumbnails + vdoPlyrAtts = vdoPlyrAtts.slice(32, 32+11); videoSlug = vdoPlyrAtts; if (ytThumbImgMenu.style.display == "block") { @@ -88,8 +104,22 @@ function showThumbImageVew(e) { } 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"; } @@ -98,11 +128,13 @@ function showThumbImageVew(e) { function setLoop(e) { if (video.loop == false) { - video.loop = true; - ytLoopBttn.src = browser.extension.getURL("/icons/loopTrue.png"); + video.loop = true; + ytLoopBttn.title = "Stop Loop..."; + ytLoopBttn.src = browser.extension.getURL("/icons/loopTrue.png"); } else { - video.loop = false; - ytLoopBttn.src = browser.extension.getURL("/icons/loopFalse.png"); + ytLoopBttn.title = "Start Loop..."; + video.loop = false; + ytLoopBttn.src = browser.extension.getURL("/icons/loopFalse.png"); } return; } diff --git a/src/styles/betterYoutube.css b/src/styles/betterYoutube.css index 0dfe28e..192af24 100644 --- a/src/styles/betterYoutube.css +++ b/src/styles/betterYoutube.css @@ -2,18 +2,18 @@ z-index: 100; position: fixed; background: rgba(0,0,0,0.64); - left: 45%; - width: auto; - height: auto; + margin: 0 auto; + overflow: auto; } .ytThumbMenuStyle { display: none; - bottom: 65px; + bottom: 20px; } .ytMenuStyle { - bottom: 0px; + top: 45%; + width: 4em; } .imageStyle { @@ -34,7 +34,8 @@ .thumbImageStyle { width: 200px; height: 100px; - margin-right: 2em; + margin: 0em 1em 0em 1em; + float: left; } #draggable { @@ -42,9 +43,17 @@ position: fixed; right: 0px; bottom: 0px; - min-width: 400px; - min-height: 250px; width: 650px; height: 400px; background: black; } + + +/* Youtube stylers based off of its tags... */ +yt-formatted-string > a { + color: rgba(125, 65, 0, 0.84) !important; +} + +yt-formatted-string > a:hover { + color: rgba(150, 21, 176, 0.97); +}