Added more thumbnail options and changed control positions plus added on hovwr titles.

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.
+# Version: 1.2.2
+Added more thumbnail options and changed control positions plus added on hovwr titles.

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": {

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";
@@ -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";
     }
@@ -99,8 +129,10 @@ function showThumbImageVew(e) {
 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");
     }

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);
+}