1 files changed, 79 insertions, 0 deletions
diff --git a/youtube/piped-button.js b/youtube/piped-button.js
new file mode 100644
index 0000000..fd4b331
--- /dev/null
+++ b/youtube/piped-button.js
@@ -0,0 +1,79 @@
+// ==UserScript==
+// @name        Piped Button youtube.com
+// @namespace   Violentmonkey Scripts
+// @match       https://www.youtube.com/*
+// @grant       GM_addStyle
+// @version     1.0
+// @author      -
+// @description 3/9/2024, 8:38:47 PM
+// ==/UserScript==
+
+/* Config */
+const instanceHostname = "piped.tjkeller.xyz"
+const instanceProtocol = "https:"
+const instanceIconLogo = "/img/icons/logo.svg"
+
+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%; }
+`)
+
+
+function newUrl() {
+  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
+  })
+}