diff --git a/README.md b/README.md
index 2db7f93..58ede39 100644
--- a/README.md
+++ b/README.md
@@ -4,18 +4,29 @@ Better YouTube + works to improve the YouTube experience by providing quick acce
* It allows quick thumbnail access of the video.
* It allows setting the loop mode easily.
* It allows setting the loop mode to a ranged set.
- * It allows the video to be toggled to fixed or floating with drag functionality.
+ * It allows the video to be toggled to fixed or floating. (With drag functionality!)
* It allows volume control through the mouse-wheel when hovering over the player.
* It allows for quick access to the YouTube video slug.
- * It lets Unix, Linux, and MacOS systems the ability to download the video using native app calls.
+ * It allows for NonStop watch mode. (i.e, no "Are you still there?" dialog.)
+ * It shows volume level as you scroll.
+ * It lets Unix, Linux, and MacOS systems have the ability to download the video using native app calls.
-# Version: 1.4.3
-* Added mutation observation for (un)fullscreen action.
-* Cleaned up some log cruft and fixed CSS...
+# Version: 1.5.0
+* Refactored code.
+* Resolved volume change not always sticking on Linux. (I think fixed...)
+* Added a quick volume indicator when scrolling.
+* Added NonStop watch mode.
# Download
https://addons.mozilla.org/en-US/firefox/addon/better-youtube-plus/
+# Images
+
+
+
+
+
+
# NOTE
On *Nix systems download youtube-dl and use provided app in this repo to download videos.
diff --git a/images/pic1.png b/images/pic1.png
new file mode 100644
index 0000000..ebd6209
Binary files /dev/null and b/images/pic1.png differ
diff --git a/images/pic2.png b/images/pic2.png
new file mode 100644
index 0000000..86c6c4a
Binary files /dev/null and b/images/pic2.png differ
diff --git a/images/pic3.png b/images/pic3.png
new file mode 100644
index 0000000..0af74af
Binary files /dev/null and b/images/pic3.png differ
diff --git a/images/pic4.png b/images/pic4.png
new file mode 100644
index 0000000..f2917df
Binary files /dev/null and b/images/pic4.png differ
diff --git a/images/pic5.png b/images/pic5.png
new file mode 100644
index 0000000..d3f8572
Binary files /dev/null and b/images/pic5.png differ
diff --git a/src/manifest.json b/src/manifest.json
index 5fb43a1..855172b 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,13 +1,12 @@
{
"manifest_version": 2,
"name": "Better Youtube +",
- "version": "1.4.0",
+ "version": "1.5.0",
"description": "Enhancements for Youtube to have a better experience.",
"applications": {
"gecko": {
- "id": "betterYoutube@itdominator.com",
- "strict_min_version": "50.0"
+ "id": "betterYoutube@itdominator.com"
}
},
diff --git a/src/scripts/betterYoutube.js b/src/scripts/betterYoutube.js
index 9eaf931..f231316 100644
--- a/src/scripts/betterYoutube.js
+++ b/src/scripts/betterYoutube.js
@@ -1,182 +1,183 @@
(function() {
- // Declare variables
- let slugInputTag, ytThumbImgMenu, ytEnhancerMenu; // Menu systems
- let ytThumbnailBttn, ytMaxDefaultImg, ytHqDefaultImg, // Buttons & Images
- ytLoopBttn, ytFloatBttn, ytAMaxDefaultImg, ytAHqDefaultImg;
+ const menuTemplate = `
+
+
+
+
+ `
+ const slugTemplate = `
+
+ `
+ const thumbnailTemplate = `
+
+ `
+ const popedContainerTemplate = `
+
+
+
+
+ `
- let mastHead, mainContentArea, playerWindow; // Youtube Player container
- let video, containerOfPlyrWndow, poppedContainer; // Video accessor
- let part, videoSlug, temp; // Image part
+ // Declare other variables
+ let ytThumbImgMenu, ytEnhancerMenu, ytEnhancerMenu2; // Menu systems
+ let ytThumbnailBttn, ytLoopBttn, ytFloatBttn, ytDownloadBttn; // Menu Buttons
+ let ytMaxDefaultImg, ytHqDefaultImg, ytAMaxDefaultImg, ytAHqDefaultImg; // Thumbnail images
+ let mainContentArea, playerWindow, containerOfPlyrWndow, video; // Youtube Player container
let videoTimeLength, videoTimeCurent, ytRangeStart, ytRangeEnd,
- ytdVideoIntervalLoop;
+ slugInputTag, endlessPlayTag, ytVideoIntervalLoop;
+ let poppedContainer, videoSlug, volumeLbl, part;
let loopingInterval = false;
- let count = 0;
- let OSName = "";
+ let shouldHideVol = true;
+ let OSName = "";
+ let count = 0;
+
+ // confirm dialog elm
+ const isYoutubeMusic = window.location.hostname === 'music.youtube.com';
+ let dialogElementQueryRef = isYoutubeMusic ? 'ytmusic-you-there-renderer' : 'yt-confirm-dialog-renderer';
// Options for the observer (which mutations to observe)
- const config = { attributes: true };
+ let observer, observer2;
+ const observerConfig = { attributes: true };
+ const observerConfig2 = { childList: true, subtree: true };
const preSetupProc = () => {
- if (navigator.appVersion.indexOf("Win")!=-1) OSName = "Windows";
- if (navigator.appVersion.indexOf("Mac")!=-1) OSName = "MacOS";
- if (navigator.appVersion.indexOf("X11")!=-1) OSName = "UNIX";
- if (navigator.appVersion.indexOf("Linux")!=-1) OSName ="Linux";
-
- video = document.getElementsByTagName("video")[0]; // Video Controler
- slugInputTag = document.createElement("INPUT");
- ytRangeEnd = document.createElement("INPUT");
-
- slugInputTag.id = "slugCopyZone";
- ytRangeEnd.id = "rangeEndID";
- slugInputTag.type = "text";
- ytRangeEnd.type = "text";
-
- // We need to wait for info to load before getting full duration
- setTimeout(function () {
- videoTimeLength = document.getElementsByClassName("ytp-time-duration")[0].innerHTML;
- if (!document.getElementById("rangeEndID")) {
- } else {
- ytRangeEnd = document.getElementById("rangeEndID");
- }
- ytRangeEnd.value = videoTimeLength;
- }, 1000);
+ // Look to add saving image from video elm.
+ // path = "/html/body/ytd-app/div/ytd-page-manager/ytd-watch-flexy/div[4]/div[1]/div/div[1]/div/div/div/ytd-player/div/div/div[1]/video"
+ // elm = document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+ if (navigator.appVersion.indexOf("Win")!=-1) OSName = "Windows";
+ if (navigator.appVersion.indexOf("Mac")!=-1) OSName = "MacOS";
+ if (navigator.appVersion.indexOf("X11")!=-1) OSName = "UNIX";
+ if (navigator.appVersion.indexOf("Linux")!=-1) OSName = "Linux";
+ // check if we've loaded elements already...
if (!document.getElementById("slugCopyZone")) {
- document.body.appendChild(slugInputTag);
+ document.body.insertAdjacentHTML( 'beforeend', slugTemplate );
+ document.body.insertAdjacentHTML( 'beforeend', menuTemplate );
+ document.body.insertAdjacentHTML( 'beforeend', thumbnailTemplate );
+ document.body.insertAdjacentHTML( 'beforeend', popedContainerTemplate );
+ controlsWereLoaded = false;
} else {
- slugInputTag = document.getElementById("slugCopyZone");
+ controlsWereLoaded = true;
}
- slugInputTag.value = video.baseURI.slice(32, 32+11);
+ ytEnhancerMenu = document.getElementById("enhancerMenuID");
+ ytEnhancerMenu2 = document.getElementById("enhancerMenuID2");
+ ytThumbnailBttn = document.getElementById("ytThumbnailBttn");
+ ytLoopBttn = document.getElementById("ytLoopBttn");
+ ytRangeEnd = document.getElementById("rangeEndID");
+ ytRangeStart = document.getElementById("rangeStartID");
+ ytFloatBttn = document.getElementById("ytFloatBttn");
+ ytDownloadBttn = document.getElementById("ytDownloadBttn");
+ volumeContainer = document.getElementById("volumeContainerID");
+ volumeLbl = document.getElementById("volumeValueLbl");
+ endlessPlayTag = document.getElementById("endlessPlayID");
+
+ ytThumbImgMenu = document.getElementById("ytThumbMenuID");
+ ytAMaxDefaultImg = document.getElementById("ytAMaxDefaultImgID");
+ ytAHqDefaultImg = document.getElementById("ytAHqDefaultImgID");
+ ytAMedDefaultImg = document.getElementById("ytAMedDefaultImgID");
+ ytASdDefaultImg = document.getElementById("ytASdDefaultImgID");
+ ytMaxDefaultImg = document.getElementById("ytMaxDefaultImgID");
+ ytHqDefaultImg = document.getElementById("ytHqDefaultImgID");
+ ytMqDefaultImg = document.getElementById("ytMqDefaultImgID");
+ ytSdDefaultImg = document.getElementById("ytSdDefaultImgID");
+
+ poppedContainer = document.getElementById("draggable");
+ ytIfrm = document.getElementById("popIframe");
+ slugInputTag = document.getElementById("slugCopyZone");
+
+ // Video Controler
+ video = document.getElementsByTagName("video")[0];
+ // Container of actual player (Used for floating window)
+ containerOfPlyrWndow = document.getElementById("player-container");
}
const setupProc = () => {
- poppedContainer = document.createElement("DIV");
- ytThumbImgMenu = document.createElement("DIV");
- ytEnhancerMenu = document.createElement("DIV");
- ytThumbnailBttn = document.createElement("IMG");
- ytDownloadBttn = document.createElement("IMG");
- ytLoopBttn = document.createElement("IMG");
- ytFloatBttn = document.createElement("IMG");
- ytMaxDefaultImg = document.createElement("IMG");
- ytHqDefaultImg = document.createElement("IMG");
- ytMqDefaultImg = document.createElement("IMG");
- ytSdDefaultImg = document.createElement("IMG");
+ part = "https://img.youtube.com/vi/";
+ slugInputTag.value = video.baseURI.slice(32, 32+11);
+ ytRangeStart.value = "0:00";
- ytAMaxDefaultImg = document.createElement("A");
- ytAHqDefaultImg = document.createElement("A");
- ytAMedDefaultImg = document.createElement("A");
- ytASdDefaultImg = document.createElement("A");
- ytIfrm = document.createElement("IFRAME");
+ // We need to wait for info to load before getting full duration
+ setTimeout(function () {
+ videoTimeLength = document.getElementsByClassName("ytp-time-duration")[0].innerText;
+ ytRangeEnd.value = videoTimeLength;
+ }, 2000);
- // Loop range controls
- ytRangeSection = document.createElement("SECTION");
- ytRangeStart = document.createElement("INPUT");
+ // Only setting these up if we need to load controls' info
+ if (!controlsWereLoaded) {
+ setbuttonImage(ytThumbnailBttn, "/icons/thumbnailOff.png");
+ setbuttonImage(ytLoopBttn, "/icons/loopFalse.png");
+ setbuttonImage(ytFloatBttn, "/icons/floatPlayer.png");
+ setbuttonImage(ytDownloadBttn, "/icons/downloadVid.png");
- // Get nodes for page work
- containerOfPlyrWndow = document.getElementById("player-container"); // Container of actual player - Used for floating window
- part = "https://img.youtube.com/vi/";
+ // Set onclick actions
+ ytThumbnailBttn.addEventListener("click", showThumbImageVew);
+ ytLoopBttn.addEventListener("click", setLoop);
+ ytFloatBttn.addEventListener("click", toggleFloat);
+ endlessPlayTag.addEventListener("click", toggleEndlessPlay);
+ ytDownloadBttn.addEventListener("click", downloadVideo);
+ video.addEventListener("wheel", manageVolume);
+ // Dragable window for floating video event setup
+ dragVideo(poppedContainer);
- // Append to nodes as required
- ytThumbnailBttn.title = "Video Thumbnails...";
- ytLoopBttn.title = "Start Loop...";
- ytFloatBttn.title = "Float Video Container";
- ytRangeStart.title = "Loop Range Start";
- ytRangeEnd.title = "Loop Range End";
- ytRangeStart.type = "text";
- ytRangeStart.value = "0:00";
-
- // Insert
- ytEnhancerMenu.appendChild(ytThumbnailBttn);
- ytEnhancerMenu.appendChild(ytLoopBttn);
- ytEnhancerMenu.appendChild(ytRangeSection);
- ytEnhancerMenu.appendChild(ytFloatBttn);
-
- if (OSName.includes("MacOS") || OSName.includes("UNIX") ||
- OSName.includes("Linux")) {
- console.log("System supports downloader...");
- console.log("OS is : " + OSName);
- ytEnhancerMenu.appendChild(ytDownloadBttn);
+ // Remove download button if system doesn't support youtube-dl functionality
+ if (!OSName.includes("MacOS") && !OSName.includes("UNIX") && !OSName.includes("Linux")) {
+ console.log("System does not support downloader...");
+ ytEnhancerMenu.removeChild(ytDownloadBttn);
+ }
}
- ytRangeSection.append(ytRangeStart);
- ytRangeSection.append(ytRangeEnd);
- document.body.appendChild(poppedContainer);
- document.body.appendChild(ytThumbImgMenu);
- document.body.appendChild(ytEnhancerMenu);
- ytAMaxDefaultImg.appendChild(ytMaxDefaultImg);
- ytAHqDefaultImg.appendChild(ytHqDefaultImg);
- ytAMedDefaultImg.appendChild(ytMqDefaultImg);
- ytASdDefaultImg.appendChild(ytSdDefaultImg);
- ytThumbImgMenu.appendChild(ytAMaxDefaultImg);
- ytThumbImgMenu.appendChild(ytAHqDefaultImg);
- ytThumbImgMenu.appendChild(ytAMedDefaultImg);
- ytThumbImgMenu.appendChild(ytASdDefaultImg);
- poppedContainer.appendChild(ytIfrm);
-
- // Set onclick actions
- ytThumbnailBttn.addEventListener("click", showThumbImageVew);
- ytLoopBttn.addEventListener("click", setLoop);
- ytFloatBttn.addEventListener("click", toggleFloat);
- ytDownloadBttn.addEventListener("click", downloadVideo);
- video.addEventListener("wheel", manageVolume);
-
+ // ---- Hide controls if fullscreen using obsever ----
// Observer target for fullscreen action...
- targetNode = document.getElementsByTagName('ytd-app')[0];
-
+ let targetNode = document.getElementsByTagName('ytd-app')[0];
// Create an observer instance linked to the callback function
- const observer = new MutationObserver(mutationcallback);
+ observer = new MutationObserver(mutationCallback);
// Start observing the target node for configured mutations
- observer.observe(targetNode, config);
+ observer.observe(targetNode, observerConfig);
- // Dragable window for floating video
- 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");
- ytDownloadBttn.src = browser.extension.getURL("/icons/downloadVid.png");
-
- // Set trget of Thumbnails of video
- ytAMaxDefaultImg.target = "_blank";
- ytAHqDefaultImg.target = "_blank";
- ytAMedDefaultImg.target = "_blank";
- ytASdDefaultImg.target = "_blank";
-
- // Theming & Apply Styles
- ytThumbImgMenu.className = "ytThumbMenuStyle";
- ytMaxDefaultImg.className = "thumbImageStyle";
- ytHqDefaultImg.className = "thumbImageStyle";
- ytMqDefaultImg.className = "thumbImageStyle";
- ytSdDefaultImg.className = "thumbImageStyle";
- ytEnhancerMenu.className = "ytMenuStyle";
- ytThumbnailBttn.className = "imageStyle";
- ytLoopBttn.className = "imageStyle";
- ytFloatBttn.className = "imageStyle";
- ytDownloadBttn.className = "imageStyle";
- ytEnhancerMenu.id = "enhancerMenuIDRef";
- poppedContainer.id = "draggable";
- ytRangeStart.id = "rangeStartID";
- ytRangeEnd.id = "rangeEndID";
- poppedContainer.style.display = "none";
- ytEnhancerMenu.style.display = "block";
- slugInputTag.style.display = "block";
-
- ytIfrm.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture");
- ytIfrm.setAttribute("frameborder", "0");
- ytIfrm.setAttribute("autoplay", "");
- ytIfrm.setAttribute("allowfullscreen", "true");
- ytIfrm.setAttribute("width", "650px");
- ytIfrm.setAttribute("height", "400px");
+ // ---- Endless play obsever ----
+ // Create an observer instance linked to the callback function
+ observer2 = new MutationObserver(mutationCallback);
+ // Start observing the target node for configured mutations
+ if (endlessPlayTag.checked == true) {
+ endlessPlayTag.setAttribute("checked", true);
+ console.log("Endless play checked. Starting observer...");
+ observer2.observe(document, observerConfig2);
+ }
}
// Functions
// Callback function to execute when mutations are observed
- const mutationcallback = (mutationsList, observer) => {
+ const mutationCallback = (mutationsList, observer) => {
for(let mutation of mutationsList) {
if (mutation.type === 'attributes') {
controlManager(mutation.target);
+ } else if (mutation.type === 'childList') {
+ let elm = document.querySelector(dialogElementQueryRef).parentElement;
+ elmDisplayState = elm.style.display;
+ if (elmDisplayState !== 'none') {
+ clickDialog();
+ }
}
}
};
@@ -184,16 +185,34 @@
const controlManager = (elm) => {
attrib = elm.getAttribute('masthead-hidden_');
if (attrib == null) { // if out of fullscreen
- ytEnhancerMenu.style.display = "block";
- slugInputTag.style.display = "block";
+ ytEnhancerMenu.style.display = "block";
+ ytEnhancerMenu2.style.display = "block";
} else { // if fullscreen
- ytEnhancerMenu.style.display = "none";
- slugInputTag.style.display = "none";
+ ytEnhancerMenu.style.display = "none";
+ ytEnhancerMenu2.style.display = "none";
}
}
- const downloadVideo = () => {
- browser.runtime.sendMessage( { "url": video.baseURI } );
+ const clickDialog = () => {
+ console.log("Clicking dialog confirm to continue playing...");
+ document
+ .querySelector(dialogElementQueryRef)
+ .querySelector('yt-button-renderer[dialog-confirm]')
+ .click();
+ }
+
+ const toggleEndlessPlay = () => {
+ isChecked = endlessPlayTag.getAttribute("checked");
+ if (isChecked) {
+ endlessPlayTag.setAttribute("checked", false);
+ console.log("Stopping endless play...");
+ observer2.disconnect();
+ } else {
+ endlessPlayTag.setAttribute("checked", true);
+ console.log("Starting endless play...");
+ observer2.observe(confirmDialogElement, observerConfig2);
+ }
+ console.log(observer2);
}
const showThumbImageVew = (e) => {
@@ -201,7 +220,7 @@
if (ytThumbImgMenu.style.display == "block") {
ytThumbImgMenu.style.display = "none";
- ytThumbnailBttn.src = browser.extension.getURL("/icons/thumbnailOff.png");
+ setbuttonImage(ytThumbnailBttn, "/icons/thumbnailOff.png");
} else {
ytAMaxDefaultImg.href = part + videoSlug + "/maxresdefault.jpg";
ytAHqDefaultImg.href = part + videoSlug + "/hqdefault.jpg";
@@ -211,12 +230,7 @@
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";
-
- ytThumbnailBttn.src = browser.extension.getURL("/icons/thumbnailOn.png");
+ setbuttonImage(ytThumbnailBttn, "/icons/thumbnailOn.png");
ytThumbImgMenu.style.display = "block";
}
return;
@@ -228,10 +242,11 @@
if (loopingInterval) {
console.log("Unsetting interval for loop check...");
- clearInterval(ytdVideoIntervalLoop);
+ clearInterval(ytVideoIntervalLoop);
loopingInterval = false;
ytLoopBttn.title = "Start Loop...";
- ytLoopBttn.src = browser.extension.getURL("/icons/loopFalse.png");
+ let ipath = browser.extension.getURL("/icons/loopFalse.png");
+ setbuttonImage(ytLoopBttn, ipath);
return ;
}
@@ -240,12 +255,14 @@
console.log("Setting default loop marker...");
video.loop = true;
ytLoopBttn.title = "Stop Loop...";
- ytLoopBttn.src = browser.extension.getURL("/icons/loopTrue.png");
+ let ipath = browser.extension.getURL("/icons/loopTrue.png");
+ setbuttonImage(ytLoopBttn, ipath);
} else {
console.log("Unsetting default loop marker...");
video.loop = false;
ytLoopBttn.title = "Start Loop...";
- ytLoopBttn.src = browser.extension.getURL("/icons/loopFalse.png");
+ let ipath = browser.extension.getURL("/icons/loopFalse.png");
+ setbuttonImage(ytLoopBttn, ipath);
}
return ;
} else {
@@ -285,11 +302,12 @@
// Setup interval check for 1 sec and compare value of current pos to end
ytLoopBttn.title = "Stop Loop...";
- ytLoopBttn.src = browser.extension.getURL("/icons/loopTrue.png");
+ let ipath = browser.extension.getURL("/icons/loopTrue.png");
+ setbuttonImage(ytLoopBttn, ipath);
loopingInterval = true;
console.log("Setting interval for loop check...");
- ytdVideoIntervalLoop = setInterval(checkLoopStuff, 1000);
+ ytVideoIntervalLoop = setInterval(checkLoopStuff, 1000);
}
}
@@ -326,10 +344,33 @@
let delta;
e.preventDefault(); // Keep page from scrolling while in video area
+ shouldHideVol = false;
+ volumeContainer.style.display = "block";
+
// Detect scroll direction
+ let incramentType = "+";
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;
+ let tmpVol = video.volume.toFixed(2);
+ let volume = Math.round((tmpVol * 100), 2).toFixed(0);
+
+ if (delta > 0) {
+ incramentType = "+";
+ while ((volume % 5) !== 0) { volume += 1; }
+ video.volume = (volume/100) + 0.05;
+ } else if (delta < 0) {
+ incramentType = "-";
+ while ((volume % 5) !== 0) { volume -= 1; }
+ video.volume = (volume/100) - 0.05;
+ }
+
+ volumeLbl.innerText = incramentType + Math.round((video.volume * 100), 1).toFixed(0);
+ setTimeout(function () {
+ if (shouldHideVol) {
+ volumeContainer.style.display = "none";
+ }
+ }, 1000);
+ shouldHideVol = true;
}
const dragVideo = (elmnt) => {
@@ -375,28 +416,15 @@
}
}
- const checkPg = () => {
- if (!document.getElementById("enhancerMenuIDRef")) {
- let existCondition = setInterval(function() {
- if (document.getElementById("masthead-container")) {
- clearInterval(existCondition);
- preSetupProc();
- setupProc();
- count = 0;
- } else {
- if (count == 12) { // ~ 6 sec through half sec loops
- count = 0;
- clearInterval(existCondition);
- } else {
- count++;
- }
- }
- }, 500); // check every 500ms
- } else {
- preSetupProc();
- }
+ const downloadVideo = () => {
+ browser.runtime.sendMessage( { "url": video.baseURI } );
+ }
+
+ const setbuttonImage = (elm, path) => {
+ elm.style.backgroundImage = "url('" + browser.extension.getURL(path); + "')";
}
// Start init
- checkPg();
+ preSetupProc();
+ setupProc();
}());
diff --git a/src/styles/betterYoutube.css b/src/styles/betterYoutube.css
index 9cdfbdb..dd19b5c 100644
--- a/src/styles/betterYoutube.css
+++ b/src/styles/betterYoutube.css
@@ -1,4 +1,16 @@
-#slugCopyZone, .ytThumbMenuStyle, .ytMenuStyle {
+/* Tag CSS */
+/* 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);
+}
+
+
+/* ID CSS */
+#enhancerMenuID2, .ytThumbMenuStyle, .ytMenuStyle {
z-index: 100;
position: fixed;
background: rgba(0,0,0,0.64);
@@ -6,52 +18,26 @@
overflow: auto;
}
-#slugCopyZone {
+#enhancerMenuID2 {
bottom: 0%;
- left: 35%;
- width: 10em;
- text-align: center;
- color: #fff;
+ left: 10%;
+ width: auto;
+ color: #ffffff;
}
-#enhancerMenuIDRef, #slugCopyZone {
+#enhancerMenuID, #enhancerMenuID2 {
z-index: 5;
}
-.ytThumbMenuStyle {
- display: none;
- bottom: 20px;
-}
-
-.ytMenuStyle {
- top: 45%;
- width: 4em;
-}
-
-.imageStyle {
- width: 32px;
- height: 32px;
- margin-right: 0.5em;
-}
-
-.imageStyle:hover {
- background:rgba(12,160,193,.64);
- cursor: pointer;
-}
-
-#xIconHoverTop {
- margin-bottom: 80px;
-}
-
-.thumbImageStyle {
- width: 200px;
- height: 100px;
- margin: 0em 1em 0em 1em;
- float: left;
+#volumeContainerID {
+ display: none;
+ font-size:200%;
+ color: #ffffff;
+ text-align: center;
}
#draggable {
- z-index: 100;
+ z-index: 9999;
position: fixed;
right: 0px;
bottom: 0px;
@@ -63,12 +49,51 @@
background: rgba(64, 64, 64, 0.64)
}
-
-/* Youtube stylers based off of its tags... */
-yt-formatted-string > a {
- color: rgba(125, 65, 0, 0.84) !important;
+#rangeEndID, #rangeStartID {
+ width: 56px;
+ overflow-x: scroll;
+ overflow-y: hidden;
}
-yt-formatted-string > a:hover {
- color: rgba(150, 21, 176, 0.97);
+#slugCopyZone, #rangeEndID, #rangeStartID {
+ text-align: center;
+ background: rgba(0,0,0,0.0);
+ color: #fff;
+}
+
+
+/* Class CSS */
+.ytMenuStyle {
+ top: 40%;
+ width: 42px;
+ overflow: hidden;
+}
+
+.ytThumbMenuStyle {
+ display: none;
+ bottom: 20px;
+}
+
+.imageStyle {
+ width: 42px;
+ height: 42px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-color: rgba(0,0,0,.64);
+ background-size: 42px 42px;
+}
+
+.imageStyle:hover {
+ background: rgba(12,160,193,.64);
+ cursor: pointer;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 28px 28px;
+}
+
+.thumbImageStyle {
+ width: 200px;
+ height: 100px;
+ margin: 0em 1em 0em 1em;
+ float: left;
}