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

This commit is contained in:
Maxim Stewart 2018-05-17 23:43:55 -05:00
parent 737df29cf3
commit 186b3cf5b1
5 changed files with 64 additions and 23 deletions

View File

@ -11,5 +11,5 @@ Better Youtube + works to improve the Youtube experience by providing quick acce
# Download # Download
https://addons.mozilla.org/en-US/firefox/addon/better-youtube-plus/ https://addons.mozilla.org/en-US/firefox/addon/better-youtube-plus/
# Version: 1.2.0 # Version: 1.2.2
This version is a big overhaul and change in logic plus cleans up code styling. Added more thumbnail options and changed control positions plus added on hovwr titles.

BIN
src/icons/missing.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

View File

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

View File

@ -14,12 +14,16 @@ function preSetupProc() {
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");
ytHqDefaultImg = document.createElement("IMG");
ytLoopBttn = document.createElement("IMG"); ytLoopBttn = document.createElement("IMG");
ytFloatBttn = 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"); ytAMaxDefaultImg = document.createElement("A");
ytAHqDefaultImg = document.createElement("A"); ytAHqDefaultImg = document.createElement("A");
ytAMedDefaultImg = document.createElement("A");
ytASdDefaultImg = document.createElement("A");
// Get nodes for page work // Get nodes for page work
mastHead = document.getElementById("masthead-container") mastHead = document.getElementById("masthead-container")
@ -31,22 +35,26 @@ function preSetupProc() {
part = "https://img.youtube.com/vi/"; part = "https://img.youtube.com/vi/";
// Append to nodes as required // Append to nodes as required
ytThumbnailBttn.title = "Video Thumbnails...";
ytLoopBttn.title = "Start Loop...";
ytFloatBttn.title = "Float Video Container";
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");
ytLoopBttn.src = browser.extension.getURL("/icons/loopFalse.png");
ytFloatBttn.src = browser.extension.getURL("/icons/floatPlayer.png");
// Insert // Insert
document.body.appendChild(poppedContainer); document.body.appendChild(poppedContainer);
document.body.appendChild(ytThumbImgMenu); document.body.appendChild(ytThumbImgMenu);
document.body.appendChild(ytEnhancerMenu); document.body.appendChild(ytEnhancerMenu);
ytAMaxDefaultImg.appendChild(ytMaxDefaultImg); ytAMaxDefaultImg.appendChild(ytMaxDefaultImg);
ytAHqDefaultImg.appendChild(ytHqDefaultImg); ytAHqDefaultImg.appendChild(ytHqDefaultImg);
ytAMedDefaultImg.appendChild(ytMqDefaultImg);
ytASdDefaultImg.appendChild(ytSdDefaultImg);
ytThumbImgMenu.appendChild(ytAMaxDefaultImg); ytThumbImgMenu.appendChild(ytAMaxDefaultImg);
ytThumbImgMenu.appendChild(ytAHqDefaultImg); ytThumbImgMenu.appendChild(ytAHqDefaultImg);
ytThumbImgMenu.appendChild(ytAMedDefaultImg);
ytThumbImgMenu.appendChild(ytASdDefaultImg);
// Set onclick actions // Set onclick actions
ytThumbnailBttn.addEventListener("click", showThumbImageVew); ytThumbnailBttn.addEventListener("click", showThumbImageVew);
@ -57,14 +65,22 @@ function preSetupProc() {
// Dragable window for floating video // Dragable window for floating video
dragVideo(poppedContainer); 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 // Set trget of Thumbnails of video
ytAMaxDefaultImg.target = "_blank"; ytAMaxDefaultImg.target = "_blank";
ytAHqDefaultImg.target = "_blank"; ytAHqDefaultImg.target = "_blank";
ytAMedDefaultImg.target = "_blank";
ytASdDefaultImg.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";
ytMqDefaultImg.className = "thumbImageStyle";
ytSdDefaultImg.className = "thumbImageStyle";
ytEnhancerMenu.className = "ytMenuStyle"; ytEnhancerMenu.className = "ytMenuStyle";
ytThumbnailBttn.className = "imageStyle"; ytThumbnailBttn.className = "imageStyle";
ytLoopBttn.className = "imageStyle"; ytLoopBttn.className = "imageStyle";
@ -88,8 +104,22 @@ function showThumbImageVew(e) {
} 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";
ytAMedDefaultImg.href = part + videoSlug + "/mqdefault.jpg";
ytASdDefaultImg.href = part + videoSlug + "/sddefault.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";
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"); ytThumbnailBttn.src = browser.extension.getURL("/icons/thumbnailOn.png");
ytThumbImgMenu.style.display = "block"; ytThumbImgMenu.style.display = "block";
} }
@ -99,8 +129,10 @@ function showThumbImageVew(e) {
function setLoop(e) { function setLoop(e) {
if (video.loop == false) { if (video.loop == false) {
video.loop = true; video.loop = true;
ytLoopBttn.title = "Stop Loop...";
ytLoopBttn.src = browser.extension.getURL("/icons/loopTrue.png"); ytLoopBttn.src = browser.extension.getURL("/icons/loopTrue.png");
} else { } else {
ytLoopBttn.title = "Start Loop...";
video.loop = false; video.loop = false;
ytLoopBttn.src = browser.extension.getURL("/icons/loopFalse.png"); ytLoopBttn.src = browser.extension.getURL("/icons/loopFalse.png");
} }

View File

@ -2,18 +2,18 @@
z-index: 100; z-index: 100;
position: fixed; position: fixed;
background: rgba(0,0,0,0.64); background: rgba(0,0,0,0.64);
left: 45%; margin: 0 auto;
width: auto; overflow: auto;
height: auto;
} }
.ytThumbMenuStyle { .ytThumbMenuStyle {
display: none; display: none;
bottom: 65px; bottom: 20px;
} }
.ytMenuStyle { .ytMenuStyle {
bottom: 0px; top: 45%;
width: 4em;
} }
.imageStyle { .imageStyle {
@ -34,7 +34,8 @@
.thumbImageStyle { .thumbImageStyle {
width: 200px; width: 200px;
height: 100px; height: 100px;
margin-right: 2em; margin: 0em 1em 0em 1em;
float: left;
} }
#draggable { #draggable {
@ -42,9 +43,17 @@
position: fixed; position: fixed;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
min-width: 400px;
min-height: 250px;
width: 650px; width: 650px;
height: 400px; height: 400px;
background: black; 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);
}