Fixed floating container, added ranged loop, removed old code.

README.md

@@ -4,6 +4,7 @@ Better YouTube + works to improve the YouTube experience by providing quick acce
 <br/>
   * It allows quick thumbnail access of the video.
   * It allows setting the loop mode easily.
+  * It allows setting the loop mode to a ranged set.
   * It allows the video to be toggled to fixed or floating with drag functionality.
   * It allows volume control through the mouse-wheel when hovering over the player.
   * It allows for quick access to the YouTube video slug.
@@ -11,5 +12,7 @@ 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.3.0
+# Version: 1.3.5
-Fixed video player in full-screen being behind controls.
+Added ranged loop feature.
+Fixed finally floating video issues.
+Removed non-working image onerror signals.

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Better Youtube +",
-  "version": "1.3.0",
+  "version": "1.3.5",
   "description": "Enhancements for Youtube to have a better experience.",
 
   "applications": {

src/scripts/betterYoutube.js

@@ -1,4 +1,4 @@
-const betterYoutubePlus = () => {
+(function() {
 
     // Declare variables
     let slugInputTag, ytThumbImgMenu, ytEnhancerMenu;        // Menu systems
@@ -7,15 +7,31 @@ const betterYoutubePlus = () => {
 
     let mastHead, mainContentArea, playerWindow;             // Youtube Player container
     let	video, containerOfPlyrWndow, poppedContainer;        // Video accessor
-    let vdoPlyrAtts;                                         // Player attributes
     let part, videoSlug, temp;                               // Image part
+    let videoTimeLength, videoTimeCurent, ytRangeStart, ytRangeEnd,
+                                              ytdVideoIntervalLoop;
+    let loopingInterval = false;
     let count = 0;
 
     const preSetupProc = () => {
         video               = document.getElementsByTagName("video")[0];        // Video Controler
         slugInputTag        = document.createElement("INPUT");
+        ytRangeEnd          = document.createElement("INPUT");
+
         slugInputTag.id     = "slugCopyZone";
+        ytRangeEnd.id       = "rangeEndID";
         slugInputTag.type   = "text";
+        ytRangeEnd.type     = "text";
+
+        // We need to wait for info to load before getting full duration
+        setTimeout(function () {
+            videoTimeLength = document.getElementsByClassName("ytp-time-duration")[0].innerHTML;
+            if (!document.getElementById("rangeEndID")) {
+            } else {
+                ytRangeEnd = document.getElementById("rangeEndID");
+            }
+            ytRangeEnd.value = videoTimeLength;
+        }, 1000);
 
         if (!document.getElementById("slugCopyZone")) {
             document.body.appendChild(slugInputTag);
@@ -23,8 +39,7 @@ const betterYoutubePlus = () => {
             slugInputTag    = document.getElementById("slugCopyZone");
         }
 
-        vdoPlyrAtts         = video.baseURI;  // Used for setting up thumbnails
+        slugInputTag.value  = video.baseURI.slice(32, 32+11);
-        slugInputTag.value  = vdoPlyrAtts.slice(32, 32+11);
     }
 
     const setupProc = () => {
@@ -42,6 +57,11 @@ const betterYoutubePlus = () => {
         ytAHqDefaultImg   = document.createElement("A");
         ytAMedDefaultImg  = document.createElement("A");
         ytASdDefaultImg   = document.createElement("A");
+        ytIfrm            = document.createElement("IFRAME");
+
+        // Loop range controls
+        ytRangeSection    = document.createElement("SECTION");
+        ytRangeStart      = document.createElement("INPUT");
 
         // Get nodes for page work
         containerOfPlyrWndow = document.getElementById("player-container");     // Container of actual player - Used for floating window
@@ -51,12 +71,18 @@ const betterYoutubePlus = () => {
         ytThumbnailBttn.title = "Video Thumbnails...";
         ytLoopBttn.title      = "Start Loop...";
         ytFloatBttn.title     = "Float Video Container";
-
+        ytRangeStart.title    = "Loop Range Start";
-        ytEnhancerMenu.appendChild(ytThumbnailBttn);
+        ytRangeEnd.title      = "Loop Range End";
-        ytEnhancerMenu.appendChild(ytLoopBttn);
+        ytRangeStart.type     = "text";
-        ytEnhancerMenu.appendChild(ytFloatBttn);
+        ytRangeStart.value    = "0:00";
 
         // Insert
+        ytEnhancerMenu.appendChild(ytThumbnailBttn);
+        ytEnhancerMenu.appendChild(ytLoopBttn);
+        ytEnhancerMenu.appendChild(ytRangeSection);
+        ytEnhancerMenu.appendChild(ytFloatBttn);
+        ytRangeSection.append(ytRangeStart);
+        ytRangeSection.append(ytRangeEnd);
         document.body.appendChild(poppedContainer);
         document.body.appendChild(ytThumbImgMenu);
         document.body.appendChild(ytEnhancerMenu);
@@ -68,6 +94,7 @@ const betterYoutubePlus = () => {
         ytThumbImgMenu.appendChild(ytAHqDefaultImg);
         ytThumbImgMenu.appendChild(ytAMedDefaultImg);
         ytThumbImgMenu.appendChild(ytASdDefaultImg);
+        poppedContainer.appendChild(ytIfrm);
 
         // Set onclick actions
         ytThumbnailBttn.addEventListener("click", showThumbImageVew);
@@ -100,7 +127,16 @@ const betterYoutubePlus = () => {
         ytFloatBttn.className         = "imageStyle";
         ytEnhancerMenu.id             = "enhancerMenuIDRef";
         poppedContainer.id            = "draggable";
+        ytRangeStart.id               = "rangeStartID";
+        ytRangeEnd.id                 = "rangeEndID";
         poppedContainer.style.display = "none";
+
+        ytIfrm.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture");
+        ytIfrm.setAttribute("frameborder", "0");
+        ytIfrm.setAttribute("autoplay", "");
+        ytIfrm.setAttribute("allowfullscreen", "true");
+        ytIfrm.setAttribute("width", "650px");
+        ytIfrm.setAttribute("height", "400px");
     }
 
     // Functions
@@ -124,11 +160,6 @@ const betterYoutubePlus = () => {
             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";
         }
@@ -136,31 +167,93 @@ const betterYoutubePlus = () => {
     }
 
     const setLoop = (e) => {
+        let start = ytRangeStart.value.trim();
+        let end   = ytRangeEnd.value.trim();
+
+        if (loopingInterval) {
+            console.log("Unsetting interval for loop check...");
+            clearInterval(ytdVideoIntervalLoop);
+            loopingInterval   = false;
+            ytLoopBttn.title  = "Start Loop...";
+            ytLoopBttn.src    = browser.extension.getURL("/icons/loopFalse.png");
+            return ;
+        }
+
+        if (start.includes("0:00") && end.includes(videoTimeLength)) {
             if (video.loop == false) {
+                console.log("Setting default loop marker...");
                 video.loop        = true;
                 ytLoopBttn.title  = "Stop Loop...";
                 ytLoopBttn.src    = browser.extension.getURL("/icons/loopTrue.png");
             } else {
-            ytLoopBttn.title  = "Start Loop...";
+                console.log("Unsetting default loop marker...");
                 video.loop        = false;
+                ytLoopBttn.title  = "Start Loop...";
                 ytLoopBttn.src    = browser.extension.getURL("/icons/loopFalse.png");
             }
             return ;
+        } else {
+            const getTotalSize = (array) => {
+                let size    = 0.0;
+                let hours   = 0.0;
+                let minutes = 0.0;
+                let seconds = 0.0;
+
+                if (array.length === 2) {
+                    minutes = parseFloat(array[0]) * 60.0;
+                    seconds = parseFloat(array[1]);
+                    size    = minutes + seconds;
+                } else if (array.length === 3) {
+                    hours   = parseFloat(array[0]) * 3600.0;
+                    minutes = parseFloat(array[1]) * 60.0;
+                    seconds = parseFloat(array[2]);
+                    size    = hours + minutes + seconds;
+                }
+                return size;
+            }
+
+            const checkLoopStuff = () => {
+                videoTimeCurent = video.currentTime;
+                if (videoTimeCurent > totalEnd ||
+                    videoTimeCurent < totalStart) {
+                        video.currentTime = totalStart;
+                }
+            }
+
+
+            // Make sure start and end are proper
+            let totalStart = getTotalSize(start.split(":"));
+            let totalEnd   = getTotalSize(end.split(":"));
+            if (totalStart < 0.0 || totalStart > video.duration) { return ; }
+            if (totalEnd < 0.0   || totalEnd > video.duration)   { return ; }
+
+            // Setup interval check for 1 sec and compare value of current pos to end
+            ytLoopBttn.title = "Stop Loop...";
+            ytLoopBttn.src   = browser.extension.getURL("/icons/loopTrue.png");
+            loopingInterval  = true;
+
+            console.log("Setting interval for loop check...");
+            ytdVideoIntervalLoop = setInterval(checkLoopStuff, 1000);
+        }
     }
 
     const toggleFloat = () => {
-        let playerWindow = document.getElementById("movie_player");  // Actual player
+        let mainPlayer = document.getElementById("player-container-outer");
+        var ifrmBody   = (ytIfrm.contentWindow || ytIfrm.contentDocument);
+        if (ifrmBody.document) ifrmBody = ifrmBody.document;
 
         if (poppedContainer.style.display == "none"){
-            setVideoStyle("auto", "auto", "50%");
+            video.pause();
-            poppedContainer.appendChild(playerWindow);
+            mainPlayer.style.display = "none";
+            ytIfrm.src = "https://www.youtube.com/embed/" + video.baseURI.slice(32, 32+11) +
+                                 "?autoplay=1&amp;start=" + Math.floor(video.currentTime);
             poppedContainer.style.display = "block";
-
         } else {
-            setVideoStyle(containerOfPlyrWndow.offsetWidth + "px",
+            video.currentTime = ifrmBody.getElementsByTagName("video")[0].currentTime;
-                          containerOfPlyrWndow.offsetHeight + "px", "");
-            containerOfPlyrWndow.append(playerWindow);
             poppedContainer.style.display = "none";
+            mainPlayer.style.display      = "";
+            ytIfrm.src                    = "";
+            video.play();
         }
     }
 
@@ -250,6 +343,4 @@ const betterYoutubePlus = () => {
 
     // Start init
     checkPg();
-}
+}());
-
-betterYoutubePlus();

src/styles/betterYoutube.css

@@ -56,7 +56,10 @@
   bottom: 0px;
   width: 650px;
   height: 400px;
-  background: black;
+  padding-top: 50px;
+  border-style: solid;
+  border-color: rgba(0, 232, 255, 0.64);
+  background: rgba(64, 64, 64, 0.64)
 }