itdominator
/
Better-Youtube-Plus
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

This version is a big overhaul and change in logic plus cleansup code styling.

This commit is contained in:
Maxim Stewart 2018-05-07 03:23:22 -05:00
parent 57ae036aea
commit eb64dfcab6
11 changed files with 96 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -8,5 +8,8 @@ Better Youtube + works to improve the Youtube experience by providing quick acce
* It allows volume control through the mouse-wheel when hovering over the player. * It allows volume control through the mouse-wheel when hovering over the player.
* It changes the background color to light grey for easier viewing of the pages. * It changes the background color to light grey for easier viewing of the pages.
# Version: 1.1.2 # Download
This version improves thumbnail generation and separates its steps from the Youtube DOM. 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 cleansup code styling.

BIN
bin/amo/better_youtube-1.0.8-an+fx.xpi
View File

Binary file not shown.

BIN
bin/amo/better_youtube_plus-1.1.1-an+fx.xpi
View File

Binary file not shown.

BIN
bin/unlisted/better_youtube-1.0.4-an+fx.xpi
View File

Binary file not shown.

BIN
bin/unlisted/better_youtube-1.0.6-an+fx.xpi
View File

Binary file not shown.

BIN
bin/unlisted/better_youtube_plus-1.1.2-an+fx.xpi
View File

Binary file not shown.

18
src/manifest.json
View File

@ -1,7 +1,7 @@
{ {
"manifest_version": 2, "manifest_version": 2,
"name": "Better Youtube +", "name": "Better Youtube +",
"version": "1.1.2", "version": "1.2.0",
"description": "Enhancements for Youtube to have a better experience.", "description": "Enhancements for Youtube to have a better experience.",
"applications": { "applications": {
@ -11,7 +11,6 @@
}, },
"permissions": [ "permissions": [
"activeTab",
"*://*.youtube.com/*", "*://*.youtube.com/*",
"tabs" "tabs"
], ],
@ -21,18 +20,5 @@
"96": "icons/betterYoutube_96.png" "96": "icons/betterYoutube_96.png"
}, },
"options_ui": { "page": "pages/options.html" }, "background": { "scripts": ["scripts/background.js"] }
"content_scripts": [ {
"matches": ["*://*.youtube.com/watch?v=*"],
"js": ["scripts/jquery-3.2.1.min.js", "scripts/betterYoutube.js"],
"css": ["styles/betterYoutube.css"],
"run_at": "document_end",
"all_frames": true
}],
"web_accessible_resources": [
"icons/*.png"
]
} }

27
src/pages/options.html
View File

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/betterYoutube.css"/>
<style media="screen">
p, li { font-size: 160%; }
</style>
</head>
<body>
<p>
Better Youtube + works to improve the Youtube experience by providing quick access to features we'd all like to have from the get-go.
<ul>
<li>It allows quick thumbnail access of the video.</li>
<li>It allows setting the loop mode easily.</li>
<li>It allows the video to be toggled to fixed or floating with drag functionality.</li>
<li>It allows volume control through the mouse-wheel when hovering over the player.</li>
<li>It changes the background color to light grey for easier viewing of the pages.</li>
</ul>
</p>
</body>
</html>

19
src/scripts/background.js Normal file
View 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);

124
src/scripts/betterYoutube.js
View File

@ -4,39 +4,40 @@ var ytThumbnailBttn, ytMaxDefaultImg, ytHqDefaultImg, // Buttons & Images
ytLoopBttn, ytFloatBttn, ytAMaxDefaultImg, ytAHqDefaultImg; ytLoopBttn, ytFloatBttn, ytAMaxDefaultImg, ytAHqDefaultImg;
var mastHead, mainContentArea, playerWindow; // Youtube Player container var mastHead, mainContentArea, playerWindow; // Youtube Player container
var video, containerOfPlyrWndow, poppedContainer; // Video accessor var video, containerOfPlyrWndow, poppedContainer; // Video accessor
var vdoPlyrAtts; // Player attributes var vdoPlyrAtts; // Player attributes
var part, videoSlug, temp; // Image part var part, videoSlug, temp; // Image part
var count = 0;
function preSetupProc() { function preSetupProc() {
poppedContainer = document.createElement("DIV"); poppedContainer = document.createElement("DIV");
ytThumbImgMenu = document.createElement("DIV"); ytThumbImgMenu = document.createElement("DIV");
ytEnhancerMenu = document.createElement("DIV"); ytEnhancerMenu = document.createElement("DIV");
ytThumbnailBttn = document.createElement("IMG"); ytThumbnailBttn = document.createElement("IMG");
ytMaxDefaultImg = document.createElement("IMG"); ytMaxDefaultImg = document.createElement("IMG");
ytHqDefaultImg = document.createElement("IMG"); ytHqDefaultImg = document.createElement("IMG");
ytLoopBttn = document.createElement("IMG"); ytLoopBttn = document.createElement("IMG");
ytFloatBttn = document.createElement("IMG"); ytFloatBttn = document.createElement("IMG");
ytAMaxDefaultImg = document.createElement("A"); ytAMaxDefaultImg = document.createElement("A");
ytAHqDefaultImg = document.createElement("A"); ytAHqDefaultImg = document.createElement("A");
// Get nodes for page work // Get nodes for page work
mastHead = document.getElementById("masthead-container") mastHead = document.getElementById("masthead-container")
.getElementsByClassName("style-scope ytd-masthead")[3]; // Search bar area .getElementsByClassName("style-scope ytd-masthead")[3]; // Search bar area
mainContentArea = document.getElementsByTagName("ytd-watch")[0]; // BT control insert area and bg color setup 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 containerOfPlyrWndow = document.getElementById("top").children[0]; // Container of actual player - Used for floating window
video = document.getElementsByTagName("video")[0]; // Video Controler video = document.getElementsByTagName("video")[0]; // Video Controler
part = "https://img.youtube.com/vi/"; part = "https://img.youtube.com/vi/";
// Append to nodes as required // Append to nodes as required
ytEnhancerMenu.appendChild(ytThumbnailBttn); ytEnhancerMenu.appendChild(ytThumbnailBttn);
ytEnhancerMenu.appendChild(ytLoopBttn); ytEnhancerMenu.appendChild(ytLoopBttn);
ytEnhancerMenu.appendChild(ytFloatBttn); ytEnhancerMenu.appendChild(ytFloatBttn);
ytThumbnailBttn.src = browser.extension.getURL("icons/thumbnailOff.png"); ytThumbnailBttn.src = browser.extension.getURL("/icons/thumbnailOff.png");
ytLoopBttn.src = browser.extension.getURL("icons/loopFalse.png"); ytLoopBttn.src = browser.extension.getURL("/icons/loopFalse.png");
ytFloatBttn.src = browser.extension.getURL("icons/floatPlayer.png"); ytFloatBttn.src = browser.extension.getURL("/icons/floatPlayer.png");
// Insert // Insert
document.body.appendChild(poppedContainer); document.body.appendChild(poppedContainer);
@ -57,38 +58,39 @@ function preSetupProc() {
dragVideo(poppedContainer); dragVideo(poppedContainer);
// Set trget of Thumbnails of video // Set trget of Thumbnails of video
ytAMaxDefaultImg.target = "_blank"; ytAMaxDefaultImg.target = "_blank";
ytAHqDefaultImg.target = "_blank"; ytAHqDefaultImg.target = "_blank";
// Theming & Apply Styles // Theming & Apply Styles
ytThumbImgMenu.className = "ytThumbMenuStyle"; ytThumbImgMenu.className = "ytThumbMenuStyle";
ytMaxDefaultImg.className = "thumbImageStyle"; ytMaxDefaultImg.className = "thumbImageStyle";
ytHqDefaultImg.className = "thumbImageStyle"; ytHqDefaultImg.className = "thumbImageStyle";
ytEnhancerMenu.className = "ytMenuStyle"; ytEnhancerMenu.className = "ytMenuStyle";
ytThumbnailBttn.className = "imageStyle"; ytThumbnailBttn.className = "imageStyle";
ytLoopBttn.className = "imageStyle"; ytLoopBttn.className = "imageStyle";
ytFloatBttn.className = "imageStyle"; ytFloatBttn.className = "imageStyle";
poppedContainer.id = "draggable"; ytEnhancerMenu.id = "enhancerMenuIDRef";
poppedContainer.id = "draggable";
poppedContainer.style.display = "none"; poppedContainer.style.display = "none";
mastHead.style = "background: #868686;"; mastHead.style = "background: #868686;";
mainContentArea.style = "background: #868686;"; mainContentArea.style = "background: #868686;";
} }
// Functions // Functions
function showThumbImageVew(e) { 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); vdoPlyrAtts = vdoPlyrAtts.slice(32, 32+11);
videoSlug = vdoPlyrAtts; videoSlug = vdoPlyrAtts;
if (ytThumbImgMenu.style.display == "block") { if (ytThumbImgMenu.style.display == "block") {
ytThumbImgMenu.style.display = "none"; ytThumbImgMenu.style.display = "none";
ytThumbnailBttn.src = browser.extension.getURL("icons/thumbnailOff.png"); ytThumbnailBttn.src = browser.extension.getURL("/icons/thumbnailOff.png");
} else { } else {
ytAMaxDefaultImg.href = part + videoSlug + "/maxresdefault.jpg"; ytAMaxDefaultImg.href = part + videoSlug + "/maxresdefault.jpg";
ytAHqDefaultImg.href = part + videoSlug + "/hqdefault.jpg"; ytAHqDefaultImg.href = part + videoSlug + "/hqdefault.jpg";
ytMaxDefaultImg.src = part + videoSlug + "/maxresdefault.jpg"; ytMaxDefaultImg.src = part + videoSlug + "/maxresdefault.jpg";
ytHqDefaultImg.src = part + videoSlug + "/hqdefault.jpg"; ytHqDefaultImg.src = part + videoSlug + "/hqdefault.jpg";
ytThumbnailBttn.src = browser.extension.getURL("icons/thumbnailOn.png"); ytThumbnailBttn.src = browser.extension.getURL("/icons/thumbnailOn.png");
ytThumbImgMenu.style.display = "block"; ytThumbImgMenu.style.display = "block";
} }
return; return;
@ -96,11 +98,11 @@ function showThumbImageVew(e) {
function setLoop(e) { function setLoop(e) {
if (video.loop == false) { if (video.loop == false) {
video.loop = true; video.loop = true;
ytLoopBttn.src = browser.extension.getURL("icons/loopTrue.png"); ytLoopBttn.src = browser.extension.getURL("/icons/loopTrue.png");
} else { } else {
video.loop = false; video.loop = false;
ytLoopBttn.src = browser.extension.getURL("icons/loopFalse.png"); ytLoopBttn.src = browser.extension.getURL("/icons/loopFalse.png");
} }
return; return;
} }
@ -151,29 +153,43 @@ function dragVideo(elmnt) {
pos3 = e.clientX; pos3 = e.clientX;
pos4 = e.clientY; pos4 = e.clientY;
// set the element's new position: // 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"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
} }
function closeDragElement(e) { function closeDragElement(e) {
// stop moving when mouse button is released: // stop moving when mouse button is released:
document.onmouseup = null; document.onmouseup = null;
document.onmousemove = null; document.onmousemove = null;
} }
function pauseEvent(e) { function pauseEvent(e) {
if(e.stopPropagation) e.stopPropagation(); if(e.stopPropagation) e.stopPropagation();
if(e.preventDefault) e.preventDefault(); if(e.preventDefault) e.preventDefault();
e.cancelBubble=true; e.cancelBubble = true;
e.returnValue=false; e.returnValue = false;
return 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 // Start init
var existCondition = setInterval(function() { checkPg();
if ($('#masthead-container').length) {
clearInterval(existCondition);
preSetupProc();
}
}, 100); // check every 100ms

4
src/scripts/jquery-3.2.1.min.js vendored
View File

File diff suppressed because one or more lines are too long