Initial code publish.

src/scripts/betterYoutube.js

@@ -0,0 +1,173 @@
+// Declare variables
+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
+
+function setupContentandInsert() {
+    poppedVdoContr = document.createElement("DIV");
+    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");
+    ytAMaxDefaultImg = document.createElement("A");
+    ytAHqDefaultImg = document.createElement("A");
+    video = document.getElementsByTagName("video")[0];
+    mastHead = document.getElementById("masthead");
+
+    part = "//i.ytimg.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);
+
+    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(poppedVdoContr);
+    mainContentArea[0].appendChild(ytThumbImgMenu);
+    mainContentArea[0].appendChild(ytEnhancerMenu);
+    ytAMaxDefaultImg.appendChild(ytMaxDefaultImg);
+    ytAHqDefaultImg.appendChild(ytHqDefaultImg);
+    ytThumbImgMenu.appendChild(ytAMaxDefaultImg);
+    ytThumbImgMenu.appendChild(ytAHqDefaultImg);
+
+    // 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(poppedVdoContr);
+
+    // Set trget of Thumbnails of video
+    ytAMaxDefaultImg.target = "_blank";
+    ytAHqDefaultImg.target = "_blank";
+
+
+    // Theming & Apply Styles
+    ytThumbImgMenu.className = "ytThumbMenuStyle";
+    ytMaxDefaultImg.className = "thumbImageStyle";
+    ytHqDefaultImg.className = "thumbImageStyle";
+    ytEnhancerMenu.className = "ytMenuStyle";
+    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;";
+}
+
+// Functions
+function showThumbImageVew(e) {
+    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";
+        ytThumbnailBttn.src = browser.extension.getURL("icons/thumbnailOn.png");
+        ytThumbImgMenu.style.display = "block";
+    }
+
+    return;
+}
+
+function setLoop(e) {
+    if (video.loop == false) {
+        video.loop = true;
+        ytLoopBttn.src = browser.extension.getURL("icons/loopTrue.png");
+    } else {
+        video.loop = false;
+        ytLoopBttn.src = browser.extension.getURL("icons/loopFalse.png");
+    }
+    return;
+}
+
+function toggleFloat() {
+    playerWindow = document.getElementById("player-container");
+
+    if(poppedVdoContr.style.display == "none"){
+        poppedVdoContr.appendChild(playerWindow);
+        poppedVdoContr.style.display = "block";
+    } else {
+        mainPlayerWindow[0].insertBefore(playerWindow, mainPlayerWindow[0].firstChild);
+        poppedVdoContr.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;
+    }
+}
+
+// load after important dom elements are present
+$(document).arrive("#player-container", function() {
+    setupContentandInsert();
+});