aboutsummaryrefslogtreecommitdiff
path: root/youtube/piped-button.js
blob: fd4b331f93e66ba108129b1dab3f18dff2a8f554 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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
  })
}