This version is a big overhaul and change in logic plus cleansup code styling.
This commit is contained in:
19
src/scripts/background.js
Normal file
19
src/scripts/background.js
Normal file
@@ -0,0 +1,19 @@
|
||||
function handleUpdated(tabId, changeInfo, tabInfo) {
|
||||
if (changeInfo.url) {
|
||||
var http = "http://www.youtube.com/watch?v=";
|
||||
var https = "https://www.youtube.com/watch?v=";
|
||||
var url = changeInfo.url;
|
||||
|
||||
if (url.includes(http) || url.includes(https)) {
|
||||
browser.tabs.insertCSS(tabId, {
|
||||
file: "/styles/betterYoutube.css"
|
||||
});
|
||||
|
||||
browser.tabs.executeScript(tabId, {
|
||||
file: "/scripts/betterYoutube.js"
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
browser.tabs.onUpdated.addListener(handleUpdated);
|
@@ -4,39 +4,40 @@ var ytThumbnailBttn, ytMaxDefaultImg, ytHqDefaultImg, // Buttons & Images
|
||||
ytLoopBttn, ytFloatBttn, ytAMaxDefaultImg, ytAHqDefaultImg;
|
||||
|
||||
var mastHead, mainContentArea, playerWindow; // Youtube Player container
|
||||
var video, containerOfPlyrWndow, poppedContainer; // Video accessor
|
||||
var video, containerOfPlyrWndow, poppedContainer; // Video accessor
|
||||
var vdoPlyrAtts; // Player attributes
|
||||
var part, videoSlug, temp; // Image part
|
||||
var count = 0;
|
||||
|
||||
function preSetupProc() {
|
||||
poppedContainer = 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");
|
||||
poppedContainer = 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");
|
||||
|
||||
// Get nodes for page work
|
||||
mastHead = document.getElementById("masthead-container")
|
||||
.getElementsByClassName("style-scope ytd-masthead")[3]; // Search bar area
|
||||
mainContentArea = document.getElementsByTagName("ytd-watch")[0]; // BT control insert area and bg color setup
|
||||
mastHead = document.getElementById("masthead-container")
|
||||
.getElementsByClassName("style-scope ytd-masthead")[3]; // Search bar area
|
||||
mainContentArea = document.getElementsByTagName("ytd-watch")[0]; // BT control insert area and bg color setup
|
||||
|
||||
containerOfPlyrWndow = document.getElementById("top").children[0]; // Container of actual player - Used for floating window
|
||||
video = document.getElementsByTagName("video")[0]; // Video Controler
|
||||
part = "https://img.youtube.com/vi/";
|
||||
containerOfPlyrWndow = document.getElementById("top").children[0]; // Container of actual player - Used for floating window
|
||||
video = document.getElementsByTagName("video")[0]; // Video Controler
|
||||
part = "https://img.youtube.com/vi/";
|
||||
|
||||
// Append to nodes as required
|
||||
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");
|
||||
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);
|
||||
@@ -57,38 +58,39 @@ function preSetupProc() {
|
||||
dragVideo(poppedContainer);
|
||||
|
||||
// Set trget of Thumbnails of video
|
||||
ytAMaxDefaultImg.target = "_blank";
|
||||
ytAHqDefaultImg.target = "_blank";
|
||||
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";
|
||||
poppedContainer.id = "draggable";
|
||||
ytThumbImgMenu.className = "ytThumbMenuStyle";
|
||||
ytMaxDefaultImg.className = "thumbImageStyle";
|
||||
ytHqDefaultImg.className = "thumbImageStyle";
|
||||
ytEnhancerMenu.className = "ytMenuStyle";
|
||||
ytThumbnailBttn.className = "imageStyle";
|
||||
ytLoopBttn.className = "imageStyle";
|
||||
ytFloatBttn.className = "imageStyle";
|
||||
ytEnhancerMenu.id = "enhancerMenuIDRef";
|
||||
poppedContainer.id = "draggable";
|
||||
poppedContainer.style.display = "none";
|
||||
mastHead.style = "background: #868686;";
|
||||
mainContentArea.style = "background: #868686;";
|
||||
mastHead.style = "background: #868686;";
|
||||
mainContentArea.style = "background: #868686;";
|
||||
}
|
||||
|
||||
// Functions
|
||||
function showThumbImageVew(e) {
|
||||
vdoPlyrAtts = video.baseURI; // Used for setting up thumbnails
|
||||
vdoPlyrAtts = video.baseURI; // Used for setting up thumbnails
|
||||
vdoPlyrAtts = vdoPlyrAtts.slice(32, 32+11);
|
||||
|
||||
videoSlug = vdoPlyrAtts;
|
||||
if (ytThumbImgMenu.style.display == "block") {
|
||||
ytThumbImgMenu.style.display = "none";
|
||||
ytThumbnailBttn.src = browser.extension.getURL("icons/thumbnailOff.png");
|
||||
ytThumbnailBttn.src = browser.extension.getURL("/icons/thumbnailOff.png");
|
||||
} else {
|
||||
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");
|
||||
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;
|
||||
@@ -96,11 +98,11 @@ 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.src = browser.extension.getURL("/icons/loopTrue.png");
|
||||
} else {
|
||||
video.loop = false;
|
||||
ytLoopBttn.src = browser.extension.getURL("icons/loopFalse.png");
|
||||
video.loop = false;
|
||||
ytLoopBttn.src = browser.extension.getURL("/icons/loopFalse.png");
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -151,29 +153,43 @@ function dragVideo(elmnt) {
|
||||
pos3 = e.clientX;
|
||||
pos4 = e.clientY;
|
||||
// set the element's new position:
|
||||
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
|
||||
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.onmouseup = null;
|
||||
document.onmousemove = null;
|
||||
}
|
||||
|
||||
function pauseEvent(e) {
|
||||
if(e.stopPropagation) e.stopPropagation();
|
||||
if(e.preventDefault) e.preventDefault();
|
||||
e.cancelBubble=true;
|
||||
e.returnValue=false;
|
||||
if(e.preventDefault) e.preventDefault();
|
||||
e.cancelBubble = true;
|
||||
e.returnValue = false;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function checkPg() {
|
||||
if (!document.getElementById("enhancerMenuIDRef")) {
|
||||
var existCondition = setInterval(function() {
|
||||
if (document.getElementById("masthead-container")) {
|
||||
clearInterval(existCondition);
|
||||
preSetupProc();
|
||||
count = 0;
|
||||
} else {
|
||||
if (count == 12) { // ~ 6 sec through half sec loops
|
||||
clearInterval(existCondition);
|
||||
count = 0;
|
||||
} else {
|
||||
count++;
|
||||
}
|
||||
}
|
||||
}, 500); // check every 500ms
|
||||
}
|
||||
}
|
||||
|
||||
// Start init
|
||||
var existCondition = setInterval(function() {
|
||||
if ($('#masthead-container').length) {
|
||||
clearInterval(existCondition);
|
||||
preSetupProc();
|
||||
}
|
||||
}, 100); // check every 100ms
|
||||
checkPg();
|
||||
|
4
src/scripts/jquery-3.2.1.min.js
vendored
4
src/scripts/jquery-3.2.1.min.js
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user