Added more thumbnail options and changed control positions plus added on hovwr titles.
This commit is contained in:
parent
737df29cf3
commit
186b3cf5b1
|
@ -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.
|
Binary file not shown.
After Width: | Height: | Size: 72 KiB |
|
@ -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": {
|
||||||
|
|
|
@ -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");
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue