diff options
Diffstat (limited to 'youtube')
| -rw-r--r-- | youtube/disable-mini-player.js | 24 | ||||
| -rw-r--r-- | youtube/piped-button.js | 86 | ||||
| -rw-r--r-- | youtube/remove-home-shorts.js | 44 |
3 files changed, 69 insertions, 85 deletions
diff --git a/youtube/disable-mini-player.js b/youtube/disable-mini-player.js index da8349c..126a6a7 100644 --- a/youtube/disable-mini-player.js +++ b/youtube/disable-mini-player.js @@ -7,25 +7,25 @@ // Remove home and shorts button GM_addStyle(` - ytd-miniplayer, - .ytp-miniplayer-button - { - display: none !important; /* Needs !important flag */ - } + ytd-miniplayer, + .ytp-miniplayer-button + { + display: none !important; /* Needs !important flag */ + } `) // Pause video before navigating document.body.addEventListener("yt-navigate-start", () => { - if (window.location.pathname == "/watch") - document.querySelector("ytd-player video").pause() + if (window.location.pathname == "/watch") + document.querySelector("ytd-player video").pause() }) // Close miniplayer by clicking close button in code document.body.addEventListener("yt-navigate-finish", () => { - setTimeout(() => { - const miniplayerCloseButton = document.querySelector("button.ytp-miniplayer-close-button") - if (miniplayerCloseButton) - miniplayerCloseButton.click() - }, 500) // Wait 500ms to close consistantly since miniplayer loads a little after this event + setTimeout(() => { + const miniplayerCloseButton = document.querySelector("button.ytp-miniplayer-close-button") + if (miniplayerCloseButton) + miniplayerCloseButton.click() + }, 500) // Wait 500ms to close consistantly since miniplayer loads a little after this event }) diff --git a/youtube/piped-button.js b/youtube/piped-button.js index fd4b331..60cd7f2 100644 --- a/youtube/piped-button.js +++ b/youtube/piped-button.js @@ -18,62 +18,46 @@ const instanceUrl = `${instanceProtocol}//${instanceHostname}` const redirectButtonId = "piped-button" GM_addStyle(` - a#${redirectButtonId} button { - background-color: #272727; - border-radius: 18px; - border: none; - color: white; - cursor: pointer; - display: flex; - font-family: "Roboto","Arial",sans-serif; - font-weight: 500; - height: 36px; - padding: .25em 1em .25em .65em; - text-decoration: none; - } - a#${redirectButtonId} button:hover { background-color: #3f3f3f; } - a#${redirectButtonId} button * { align-self: center; max-height: 100%; } + a#${redirectButtonId} button { + background-color: #272727; + border-radius: 18px; + border: none; + color: white; + cursor: pointer; + display: flex; + font-family: "Roboto","Arial",sans-serif; + font-weight: 500; + height: 36px; + padding: .25em 1em .25em .65em; + text-decoration: none; + } + a#${redirectButtonId} button:hover { background-color: #3f3f3f; } + a#${redirectButtonId} button * { align-self: center; max-height: 100%; } `) function newUrl() { - return `${instanceProtocol}//${instanceHostname}${document.location.pathname}${document.location.search}` + return `${instanceProtocol}//${instanceHostname}${document.location.pathname}${document.location.search}` } if (!document.getElementById(redirectButtonId)) { - const redirectButton = document.createElement("a") - const redirectButtonC = redirectButton.appendChild(document.createElement("button")) - const redirectButtonImg = redirectButtonC.appendChild(document.createElement("img")) - const redirectButtonTxt = redirectButtonC.appendChild(document.createElement("span")) - redirectButton.id = redirectButtonId - redirectButtonImg.src = instanceUrl + instanceIconLogo - redirectButtonImg.alt = "(Down)" // Logo effectively acts as a test to see whether the instance is up or not as a bonus - redirectButtonTxt.innerText = "Piped" - - redirectButton.addEventListener("mouseover", () => { redirectButton.href = newUrl() }) - - /* Insert */ - document.body.addEventListener("yt-navigate-finish", () => { - - setTimeout(() => { - const headContainer = document.querySelector("#masthead-container #container #start") - headContainer.appendChild(redirectButton) - /* - const actionDiv = document.querySelector("#actions #menu") - - const pipedLink = actionDiv.appendChild(document.createElement("a")) - pipedLink.id = "piped" - pipedLink.href = `${document.location.protocol}//${pipedInstance}${document.location.pathname}${document.location.search}` - - const pipedButton = pipedLink.appendChild(document.createElement("button")) // Simplify styling - - const pipedLogo = pipedButton.appendChild(document.createElement("img")) - pipedLogo.src = `${document.location.protocol}//${pipedInstance}/img/icons/logo.svg` - pipedLogo.alt = "(Down)" // Indicates instance is down if logo cannot be loaded - - const pipedText = pipedButton.appendChild(document.createElement("span")) - pipedText.innerText = "Piped" - */ - }, 500) // Wait 500ms for page load to finish after event called - }) + const redirectButton = document.createElement("a") + const redirectButtonC = redirectButton.appendChild(document.createElement("button")) + const redirectButtonImg = redirectButtonC.appendChild(document.createElement("img")) + const redirectButtonTxt = redirectButtonC.appendChild(document.createElement("span")) + redirectButton.id = redirectButtonId + redirectButtonImg.src = instanceUrl + instanceIconLogo + redirectButtonImg.alt = "(Down)" // Logo effectively acts as a test to see whether the instance is up or not as a bonus + redirectButtonTxt.innerText = "Piped" + + redirectButton.addEventListener("mouseover", () => { redirectButton.href = newUrl() }) + + /* Insert */ + document.body.addEventListener("yt-navigate-finish", () => { + + setTimeout(() => { + const headContainer = document.querySelector("#masthead-container #container #start") + headContainer.appendChild(redirectButton) + }, 500) // Wait 500ms for page load to finish after event called + }) } diff --git a/youtube/remove-home-shorts.js b/youtube/remove-home-shorts.js index a5e3634..42ea0d0 100644 --- a/youtube/remove-home-shorts.js +++ b/youtube/remove-home-shorts.js @@ -12,13 +12,13 @@ // Remove home and shorts button GM_addStyle(` - tp-yt-app-drawer a[title=Home], - tp-yt-app-drawer a[title=Shorts], - ytd-mini-guide-renderer a[title=Home], - ytd-mini-guide-renderer a[title=Shorts] - { - display: none !important; /* Needs !important flag */ - } + tp-yt-app-drawer a[title=Home], + tp-yt-app-drawer a[title=Shorts], + ytd-mini-guide-renderer a[title=Home], + ytd-mini-guide-renderer a[title=Shorts] + { + display: none !important; /* Needs !important flag */ + } `) @@ -26,19 +26,19 @@ GM_addStyle(` const subscriptionsPath = "/feed/subscriptions" function redirectToSubscriptions() { - // Invoke clicking the subscriptions button to use youtube's hot page reloading if possible instead of reloading the whole page - const subscriptionsButton = document.querySelector("tp-yt-app-drawer a[title=Subscriptions]") - if (subscriptionsButton) - subscriptionsButton.click() - else - window.location.replace(subscriptionsPath) + // Invoke clicking the subscriptions button to use youtube's hot page reloading if possible instead of reloading the whole page + const subscriptionsButton = document.querySelector("tp-yt-app-drawer a[title=Subscriptions]") + if (subscriptionsButton) + subscriptionsButton.click() + else + window.location.replace(subscriptionsPath) } // Redirect to new homepage function redirectIfHome() { - if (window.location.pathname === "/") - redirectToSubscriptions() + if (window.location.pathname === "/") + redirectToSubscriptions() } redirectIfHome() @@ -52,11 +52,11 @@ window.addEventListener("popstate", redirectIfHome) const logo = document.querySelector("#logo a") if (logo) { - logo.href = subscriptionsPath - logo.addEventListener("click", e => { - // Seems there is an event listener that forces redirect to site root, so stop that first - e.stopPropagation() - e.preventDefault() - redirectToSubscriptions() - }) + logo.href = subscriptionsPath + logo.addEventListener("click", e => { + // Seems there is an event listener that forces redirect to site root, so stop that first + e.stopPropagation() + e.preventDefault() + redirectToSubscriptions() + }) } |