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

Refactored a lil, added load check

This commit is contained in:
Maxim Stewart 2020-06-30 19:04:03 -05:00
parent 67996869cb
commit 41e26c35a6
3 changed files with 55 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -11,8 +11,9 @@ Better YouTube + works to improve the YouTube experience by providing quick acce
* 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.5.2
* Actually fixed observer logic.
# Version: 1.5.3
* Refactored a little
* Readded loader check
# Download
https://addons.mozilla.org/en-US/firefox/addon/better-youtube-plus/

2
src/manifest.json
View File

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

78
src/scripts/betterYoutube.js
View File

@ -44,10 +44,10 @@
let mainContentArea, playerWindow, containerOfPlyrWndow, video; // Youtube Player container
let videoTimeLength, videoTimeCurent, ytRangeStart, ytRangeEnd,
slugInputTag, endlessPlayTag, ytVideoIntervalLoop;
let poppedContainer, videoSlug, volumeLbl, part;
let modalHasBeenClosed = false;
let loopingInterval = false;
// Default to false b/c if tag checked it sets this in setupProc and elsewhere.
// Default to false b/c if tag checked it sets this in setupProcess and elsewhere.
let isEndlessWatch = false;
let shouldHideVol = true;
let OSName = "";
@ -63,7 +63,31 @@
const observerConfig2 = { childList: true, subtree: true };
const preSetupProc = () => {
// Start init
let existCondition = setInterval(function() {
if (document.getElementById("masthead-container")) {
clearInterval(existCondition);
setupProcess();
count = 0;
} else {
if (count == 12) { // ~ 6 sec through half sec loops
count = 0;
clearInterval(existCondition);
setupProcess();
} else {
count++;
}
}
}, 500); // check every 500ms
const setupProcess = () => {
loadUI();
setupVariables();
fillUIAndSetupEvents();
setupObservers();
}
const loadUI = () => {
// 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;
@ -78,12 +102,20 @@
document.body.insertAdjacentHTML( 'beforeend', menuTemplate );
document.body.insertAdjacentHTML( 'beforeend', thumbnailTemplate );
document.body.insertAdjacentHTML( 'beforeend', popedContainerTemplate );
controlsWereLoaded = false;
controlsAreLoaded = false;
} else {
controlsWereLoaded = true;
controlsAreLoaded = true;
}
ytEnhancerMenu = document.getElementById("enhancerMenuID");
// Remove download button if system doesn't support youtube-dl functionality
ytEnhancerMenu = document.getElementById("enhancerMenuID");
if (!OSName.includes("MacOS") && !OSName.includes("UNIX") && !OSName.includes("Linux")) {
console.log("System does not support downloader...");
ytEnhancerMenu.removeChild(ytDownloadBttn);
}
}
const setupVariables = () => {
ytEnhancerMenu2 = document.getElementById("enhancerMenuID2");
ytThumbnailBttn = document.getElementById("ytThumbnailBttn");
ytLoopBttn = document.getElementById("ytLoopBttn");
@ -113,10 +145,11 @@
video = document.getElementsByTagName("video")[0];
// Container of actual player (Used for floating window)
containerOfPlyrWndow = document.getElementById("player-container");
part = "https://img.youtube.com/vi/";
}
const setupProc = () => {
part = "https://img.youtube.com/vi/";
const fillUIAndSetupEvents = () => {
slugInputTag.value = video.baseURI.slice(32, 32+11);
ytRangeStart.value = "0:00";
@ -127,7 +160,7 @@
}, 2000);
// Only setting these up if we need to load controls' info
if (!controlsWereLoaded) {
if (!controlsAreLoaded) {
setbuttonImage(ytThumbnailBttn, "/icons/thumbnailOff.png");
setbuttonImage(ytLoopBttn, "/icons/loopFalse.png");
setbuttonImage(ytFloatBttn, "/icons/floatPlayer.png");
@ -135,21 +168,17 @@
// Set onclick actions
ytThumbnailBttn.addEventListener("click", showThumbImageVew);
ytLoopBttn.addEventListener("click", setLoop);
ytLoopBttn.addEventListener("click", setVideoLoopState);
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);
// 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);
}
}
}
const setupObservers = () => {
// ---- Hide controls if fullscreen using obsever ----
// Observer target for fullscreen action...
let targetNode = document.getElementsByTagName('ytd-app')[0];
@ -174,7 +203,7 @@
const mutationCallback = (mutationsList, observer) => {
for(let mutation of mutationsList) {
if (mutation.type === 'attributes') {
controlManager(mutation.target);
controlsShowHideToggle(mutation.target);
} else if (mutation.type === 'childList') {
if (this.isEndlessWatch) {
let elm = document.querySelector(dialogElementQueryRef).parentElement;
@ -191,7 +220,7 @@
}
};
const controlManager = (elm) => {
const controlsShowHideToggle = (elm) => {
attrib = elm.getAttribute('masthead-hidden_');
if (attrib == null) { // if out of fullscreen
ytEnhancerMenu.style.display = "block";
@ -204,10 +233,9 @@
const clickDialog = () => {
console.log("Clicking dialog confirm to continue playing...");
document
.querySelector(dialogElementQueryRef)
.querySelector('yt-button-renderer[dialog-confirm]')
.click();
document.querySelector(dialogElementQueryRef)
.querySelector('yt-button-renderer[dialog-confirm]')
.click();
}
const toggleEndlessPlay = () => {
@ -245,7 +273,7 @@
return;
}
const setLoop = (e) => {
const setVideoLoopState = (e) => {
let start = ytRangeStart.value.trim();
let end = ytRangeEnd.value.trim();
@ -432,8 +460,4 @@
const setbuttonImage = (elm, path) => {
elm.style.backgroundImage = "url('" + browser.extension.getURL(path); + "')";
}
// Start init
preSetupProc();
setupProc();
}());