Added Piped, cleaned code

Signed-off-by: ManeraKai <manerakai@protonmail.com>

5 files changed, 219 insertions, 284 deletions

diff --git a/src/assets/javascripts/helpers/youtube.js b/src/assets/javascripts/helpers/youtube.js
index 1699d6e8..30f7a4b5 100644
--- a/src/assets/javascripts/helpers/youtube.js
+++ b/src/assets/javascripts/helpers/youtube.js
@@ -21,39 +21,57 @@ const targets = [
     when updating this list:
   */
 let redirects = {
-  "normal": [
-    "https://invidious.snopyta.org",
-    "https://invidious.xyz",
-    "https://invidious.kavin.rocks",
-    "https://tube.connect.cafe",
-    "https://invidious.zapashcanon.fr",
-    "https://invidiou.site",
-    "https://vid.mint.lgbt",
-    "https://invidious.site",
-    "https://yewtu.be",
-    "https://invidious.tube",
-    "https://invidious.silkky.cloud",
-    "https://invidious.himiko.cloud",
-    "https://inv.skyn3t.in",
-    "https://tube.incognet.io",
-    "https://invidious.tinfoil-hat.net",
-    "https://invidious.namazso.eu",
-    "https://vid.puffyan.us",
-    "https://dev.viewtube.io",
-    "https://invidious.048596.xyz",
-  ],
-  "onion": [
-    "http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion",
-    "http://qklhadlycap4cnod.onion",
-    "http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion",
-    "http://w6ijuptxiku4xpnnaetxvnkc5vqcdu7mgns2u77qefoixi63vbvnpnqd.onion",
-  ]
+  "invidious": {
+    "normal": [
+      "https://invidious.snopyta.org",
+      "https://invidious.xyz",
+      "https://invidious.kavin.rocks",
+      "https://tube.connect.cafe",
+      "https://invidious.zapashcanon.fr",
+      "https://invidiou.site",
+      "https://vid.mint.lgbt",
+      "https://invidious.site",
+      "https://yewtu.be",
+      "https://invidious.tube",
+      "https://invidious.silkky.cloud",
+      "https://invidious.himiko.cloud",
+      "https://inv.skyn3t.in",
+      "https://tube.incognet.io",
+      "https://invidious.tinfoil-hat.net",
+      "https://invidious.namazso.eu",
+      "https://vid.puffyan.us",
+      "https://dev.viewtube.io",
+      "https://invidious.048596.xyz",
+    ],
+    "onion": [
+      "http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion",
+      "http://qklhadlycap4cnod.onion",
+      "http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion",
+      "http://w6ijuptxiku4xpnnaetxvnkc5vqcdu7mgns2u77qefoixi63vbvnpnqd.onion",
+    ]
+  },
+  "piped": {
+    "normal": [
+      "https://piped.kavin.rocks",
+      "https://piped.silkky.cloud",
+      "https://piped.tokhmi.xyz",
+      "https://piped.mint.lgbt",
+    ]
+  }
 };
+
 const getRedirects = () => redirects;
-function setRedirects(val) {
-  redirects = val;
-  browser.storage.sync.set({ youtubeRedirects: val })
-  console.log("youtubeRedirects: ", val)
+
+function setInvidiousRedirects(val) {
+  redirects.invidious = val;
+  browser.storage.sync.set({ youtubeRedirects: redirects })
+  console.log("invidiousRedirects: ", val)
+}
+
+function setPipedRedirects(val) {
+  redirects.piped = val;
+  browser.storage.sync.set({ youtubeRedirects: redirects })
+  console.log("pipedRedirects: ", val)
 }
 
 let disableYoutube;
@@ -136,6 +154,15 @@ function setInvidiousAutoplay(val) {
   console.log("invidiousAutoplay: ", invidiousAutoplay)
 }
 
+
+let frontend;
+const getFrontend = () => frontend;
+function setFrontend(val) {
+  frontend = val;
+  browser.storage.sync.set({ youtubeFrontend: val })
+  console.log("youtubeFrontend: ", val)
+}
+
 let useFreeTube;
 function setUseFreeTube(val) {
   useFreeTube = val;
@@ -153,49 +180,6 @@ function setPersistInvidiousPrefs(val) {
 }
 const getPersistInvidiousPrefs = () => persistInvidiousPrefs;
 
-function redirect(url, initiator, type) {
-  if (disableYoutube)
-    return null;
-
-  if (
-    initiator &&
-    (
-      initiator.origin === invidiousInstance ||
-      redirects.normal.includes(initiator.origin) ||
-      targets.includes(initiator.host)
-    )
-  )
-    return null;
-
-  if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API.
-
-  if (url.host.split(".")[0] === "studio") return null; // Avoid redirecting `studio.youtube.com`
-
-  if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null;
-
-  if (useFreeTube && type === "main_frame")
-    return `freetube://${url}`;
-
-  // Apply settings
-  if (invidiousAlwaysProxy) url.searchParams.append("local", true);
-
-  if (invidiousVideoQuality) url.searchParams.append("quality", invidiousVideoQuality);
-
-  if (invidiousDarkMode) url.searchParams.append("dark_mode", invidiousDarkMode);
-
-  if (invidiousVolume) url.searchParams.append("volume", invidiousVolume);
-
-  if (invidiousPlayerStyle) url.searchParams.append("player_style", invidiousPlayerStyle);
-
-  if (invidiousSubtitles) url.searchParams.append("subtitles", invidiousSubtitles);
-
-  if (invidiousAutoplay) url.searchParams.append("autoplay", 1);
-
-  let randomInstance = commonHelper.getRandomInstance(redirects.normal)
-
-  return `${randomInstance}${url.pathname.replace("/shorts", "")}${url.search}`;
-}
-
 function isYoutube(url) {
   return targets.includes(url.host);
 }
@@ -239,7 +223,8 @@ async function init() {
       "invidiousSubtitles",
       "invidiousAutoplay",
       "useFreeTube",
-      "youtubeRedirects"
+      "youtubeRedirects",
+      "youtubeFrontend",
     ]);
   disableYoutube = result.disableYoutube ?? false;
   invidiousInstance = result.invidiousInstance;
@@ -257,11 +242,75 @@ async function init() {
     redirects = result.youtubeRedirects
 
   if (result.persistInvidiousPrefs) initInvidiousCookie();
+
+  frontend = result.youtubeFrontend ?? 'piped';
 }
 
+function redirect(url, initiator, type) {
+  if (disableYoutube)
+    return null;
+
+  if (
+    initiator &&
+    (
+      initiator.origin === invidiousInstance ||
+      redirects.invidious.normal.includes(initiator.origin) ||
+      redirects.piped.normal.includes(initiator.origin) ||
+      targets.includes(initiator.host)
+    )
+  )
+    return null;
+
+  if (frontend == 'invidious') {
+
+    if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API.
+
+    if (url.host.split(".")[0] === "studio") return null; // Avoid redirecting `studio.youtube.com`
+
+    if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null;
+
+    if (useFreeTube && type === "main_frame")
+      return `freetube://${url}`;
+
+    // Apply settings
+    if (invidiousAlwaysProxy) url.searchParams.append("local", true);
+
+    if (invidiousVideoQuality) url.searchParams.append("quality", invidiousVideoQuality);
+
+    if (invidiousDarkMode) url.searchParams.append("dark_mode", invidiousDarkMode);
+
+    if (invidiousVolume) url.searchParams.append("volume", invidiousVolume);
+
+    if (invidiousPlayerStyle) url.searchParams.append("player_style", invidiousPlayerStyle);
+
+    if (invidiousSubtitles) url.searchParams.append("subtitles", invidiousSubtitles);
+
+    if (invidiousAutoplay) url.searchParams.append("autoplay", 1);
+
+    let randomInstance = commonHelper.getRandomInstance(redirects.invidious.normal)
+
+    return `${randomInstance}${url.pathname.replace("/shorts", "")}${url.search}`;
+
+  } else if (frontend == 'piped') {
+    let randomInstance = commonHelper.getRandomInstance(redirects.piped.normal);
+    if (url.hostname.endsWith("youtube.com") || url.hostname.endsWith("youtube-nocookie.com"))
+      return `${randomInstance}${url.pathname}${url.search}`;
+
+    if (url.hostname.endsWith("youtu.be") && url.pathname.length > 1)
+      return `${randomInstance}/watch?v=${url.pathname.substring(1)}`;
+
+  }
+}
+
+
 export default {
+  getFrontend,
+  setFrontend,
+
   getRedirects,
-  setRedirects,
+  setInvidiousRedirects,
+  setPipedRedirects,
+
   redirect,
   isYoutube,
 
diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index a39af464..caa7444d 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -77,7 +77,8 @@ browser.tabs.onUpdated.addListener((tabId, changeInfo, _) => {
   var protocolHost = `${url.protocol}//${url.host}`;
   var mightyList = [];
   mightyList.push(
-    ...youtubeHelper.getRedirects().normal,
+    ...youtubeHelper.getRedirects().invidious.normal,
+    ...youtubeHelper.getRedirects().piped.normal,
     ...twitterHelper.getRedirects().normal,
     ...instagramHelper.getRedirects().normal,
     ...redditHelper.getRedirects().libreddit.normal,
@@ -101,7 +102,11 @@ browser.pageAction.onClicked.addListener((tab) => {
   var protocolHost = `${tabUrl.protocol}//${tabUrl.host}`;
   var newUrl;
 
-  if (youtubeHelper.getRedirects().normal.includes(protocolHost)) newUrl = 'https://youtube.com';
+  if (
+    youtubeHelper.getRedirects().invidious.normal.includes(protocolHost) ||
+    youtubeHelper.getRedirects().piped.normal.includes(protocolHost)
+  )
+    newUrl = 'https://youtube.com';
 
   if (twitterHelper.getRedirects().normal.includes(protocolHost)) newUrl = 'https://twitter.com';
 
@@ -131,4 +136,5 @@ browser.pageAction.onClicked.addListener((tab) => {
   if (wikipediaHelper.getRedirects().normal.includes(protocolHost)) newUrl = 'https://wikipedia.com';
 
   if (newUrl) browser.tabs.update({ url: tabUrl.href.replace(protocolHost, newUrl) });
-});
\ No newline at end of file
+});
+
diff --git a/src/pages/options/youtube.html b/src/pages/options/youtube.html
index 442c15c0..c1bd830e 100644
--- a/src/pages/options/youtube.html
+++ b/src/pages/options/youtube.html
@@ -26,7 +26,7 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-invidious" type="checkbox" checked />
         </div>
 
@@ -48,64 +48,77 @@
         </section> -->
 
         <div class="some-block option-block">
-            <h4>Player Style</h4>
-            <select id="invidious-player-style">
+            <h4>Frontend</h4>
+            <select id="youtube-frontend">
+                <option value="piped">Piped</option>
                 <option value="invidious">Invidious</option>
-                <option value="youtube">YouTube</option>
             </select>
         </div>
 
-        <div class="some-block option-block">
-            <h4>Dark mode</h4>
-            <input id="invidious-dark-mode" type="checkbox" checked />
-        </div>
+        <hr>
 
-        <div class="some-block">
-            <h4>Volume: <span id="volume-value">50%</span></h4>
-            <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
-        </div>
+        <div id="invidious">
+            <div class="some-block option-block">
+                <h4>Player Style</h4>
+                <select id="invidious-player-style">
+                    <option value="invidious">Invidious</option>
+                    <option value="youtube">YouTube</option>
+                </select>
+            </div>
 
-        <div class="some-block option-block">
-            <h4 data-localise="__MSG_useFreeTube__">Use FreeTube over Invidious when possible</h4>
-            <input id="use-freetube" type="checkbox" checked />
-        </div>
+            <div class="some-block option-block">
+                <h4>Dark mode</h4>
+                <input id="invidious-dark-mode" type="checkbox" checked />
+            </div>
 
-        <div class="some-block option-block">
-            <h4 data-localise="__MSG_invidiousAlwaysProxy__">Always proxy videos through Invidious</h4>
-            <input id="always-proxy" type="checkbox" checked />
-        </div>
+            <div class="some-block">
+                <h4>Volume: <span id="volume-value">50%</span></h4>
+                <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
+            </div>
 
-        <div class="some-block option-block">
-            <h4 data-localise="__MSG_invidiousOnlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4>
-            <input id="only-embed" type="checkbox" checked />
-        </div>
+            <div class="some-block option-block">
+                <h4 data-localise="__MSG_useFreeTube__">Use FreeTube over Invidious when possible</h4>
+                <input id="use-freetube" type="checkbox" checked />
+            </div>
 
-        <div class="some-block option-block">
-            <h4>Video Quality</h4>
-            <select id="video-quality">
-                <option value="">Default</option>
-                <option value="hd720">720p</option>
-                <option value="medium">480p</option>
-                <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
-                </option>
-            </select>
-        </div>
+            <div class="some-block option-block">
+                <h4 data-localise="__MSG_invidiousAlwaysProxy__">Always proxy videos through Invidious</h4>
+                <input id="always-proxy" type="checkbox" checked />
+            </div>
 
-        <div class="some-block option-block">
-            <h4>Subtitles - language codes</h4>
-            <input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" />
-        </div>
+            <div class="some-block option-block">
+                <h4 data-localise="__MSG_invidiousOnlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4>
+                <input id="only-embed" type="checkbox" checked />
+            </div>
 
-        <div class="some-block option-block">
-            <h4>Automatically play video on load</h4>
-            <input id="invidious-autoplay" type="checkbox" checked />
-        </div>
+            <div class="some-block option-block">
+                <h4>Video Quality</h4>
+                <select id="video-quality">
+                    <option value="">Default</option>
+                    <option value="hd720">720p</option>
+                    <option value="medium">480p</option>
+                    <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
+                    </option>
+                </select>
+            </div>
 
-        <div class="some-block option-block">
-            <h4>Persist preferences (as cookie)</h4>
-            <input id="persist-invidious-prefs" type="checkbox" checked />
+            <div class="some-block option-block">
+                <h4>Subtitles - language codes</h4>
+                <input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" />
+            </div>
+
+            <div class="some-block option-block">
+                <h4>Automatically play video on load</h4>
+                <input id="invidious-autoplay" type="checkbox" checked />
+            </div>
+
+            <div class="some-block option-block">
+                <h4>Persist preferences (as cookie)</h4>
+                <input id="persist-invidious-prefs" type="checkbox" checked />
+            </div>
         </div>
 
+        <div id="piped"></div>
 
     </section>
 
diff --git a/src/pages/options/youtube.js b/src/pages/options/youtube.js
index 9fac54f3..c592b4cc 100644
--- a/src/pages/options/youtube.js
+++ b/src/pages/options/youtube.js
@@ -2,6 +2,7 @@ import youtubeHelper from "../../assets/javascripts/helpers/youtube.js";
 import commonHelper from "../../assets/javascripts/helpers/common.js";
 
 let disableYoutubeElement = document.getElementById("disable-invidious");
+let youtubeFrontendElement = document.getElementById("youtube-frontend");
 let invidiousDarkModeElement = document.getElementById("invidious-dark-mode");
 let persistInvidiousPrefsElement = document.getElementById("persist-invidious-prefs");
 let invidiousVolumeElement = document.getElementById("invidious-volume");
@@ -14,6 +15,20 @@ let invidiousOnlyEmbeddedVideoElement = document.getElementById("only-embed");
 let invidiousVideoQualityElement = document.getElementById("video-quality");
 let invidiousVolumeValueElement = document.querySelector("#volume-value");
 
+let invidiousDivElement = document.getElementById("invidious")
+let pipedDivElement = document.getElementById("piped")
+
+function changeFrontendsSettings(frontend) {
+    if (frontend == 'piped') {
+        pipedDivElement.style.display = 'block';
+        invidiousDivElement.style.display = 'none';
+    }
+    else if (frontend == 'invidious') {
+        pipedDivElement.style.display = 'none';
+        invidiousDivElement.style.display = 'block';
+    }
+}
+
 youtubeHelper.init().then(() => {
     disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube();
     invidiousDarkModeElement.checked = youtubeHelper.getInvidiousDarkMode();
@@ -27,6 +42,9 @@ youtubeHelper.init().then(() => {
     invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
     invidiousVideoQualityElement.value = youtubeHelper.getInvidiousVideoQuality();
     invidiousAutoplayElement.checked = youtubeHelper.getInvidiousAutoplay();
+    let frontend = youtubeHelper.getFrontend()
+    youtubeFrontendElement.value = frontend;
+    changeFrontendsSettings(frontend);
 });
 
 
@@ -63,7 +81,6 @@ invidiousAutoplayElement.addEventListener("change",
     (event) => youtubeHelper.setInvidiousAutoplay(event.target.checked)
 );
 
-
 useFreeTubeElement.addEventListener("change",
     (event) => youtubeHelper.setUseFreeTube(event.target.checked)
 );
@@ -79,3 +96,11 @@ invidiousOnlyEmbeddedVideoElement.addEventListener("change",
 invidiousVideoQualityElement.addEventListener("change",
     (event) => youtubeHelper.setInvidiousVideoQuality(event.target.options[invidiousVideoQualityElement.selectedIndex].value)
 );
+
+youtubeFrontendElement.addEventListener("change",
+    (event) => {
+        let frontend = event.target.options[youtubeFrontendElement.selectedIndex].value
+        youtubeHelper.setFrontend(frontend);
+        changeFrontendsSettings(frontend);
+    }
+);
\ No newline at end of file
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index 0468935d..e7a7c5f2 100644
--- a/src/pages/stylesheets/styles.css
+++ b/src/pages/stylesheets/styles.css
@@ -31,11 +31,6 @@ div.some-block input[type="checkbox"] {
   -webkit-appearance: none;
 }
 
-h1 {
-  font-size: 14px;
-  margin: 7px auto;
-}
-
 h2 {
   clear: both;
   font-size: 12px;
@@ -60,7 +55,6 @@ select {
   background-color: var(--bg-main);
   border-style: solid;
   border-color: #767676;
-
   color: var(--text);
 }
 
@@ -76,7 +70,6 @@ select {
   border-radius: 3px;
 }
 
-
 input[type="radio"] {
   appearance: radio;
   -moz-appearance: radio;
@@ -237,7 +230,6 @@ body.option {
   padding: 40px;
 }
 
-
 section.links {
   margin: 00px 0;
 }
@@ -265,7 +257,6 @@ section.links a.selected {
   vertical-align: middle;
 }
 
-
 input[type="range"] {
   width: 50%;
 }
@@ -284,23 +275,8 @@ input[type="url"]:focus {
   color: var(--active);
 }
 
-.collapsible {
-  background-color: var(--bg-main);
-  cursor: pointer;
-  color: var(--active);
-  padding: 18px;
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline: none;
-  font-size: 15px;
-  border-bottom: solid var(--active);
-  font-weight: bold;
-}
-
 /* \25BE */
 
-
 hr {
   height: 2px;
   margin: 0 15px;
@@ -308,28 +284,6 @@ hr {
   border: none;
 }
 
-.new-badge {
-  position: relative;
-}
-
-.new-badge[data-new-badge]:after {
-  content: "New!";
-  position: absolute;
-  top: -10px;
-  right: -42px;
-  font-size: 0.9em;
-  background: var(--active);
-  color: white;
-  width: 35px;
-  height: 18px;
-  text-align: center;
-  line-height: 18px;
-  border-radius: 25px;
-  padding: 2px;
-  box-shadow: 0 0 1px var(--bg-secondary);
-  font-weight: bold;
-}
-
 .light-theme.popup,
 .light-theme .popup {
   background-color: var(--bg-secondary);
@@ -354,51 +308,6 @@ body.light-theme a{
   color: black;
 }
 
-section {
-  background-color: var(--bg-main);
-}
-
-section.youtube {
-  grid-area: youtube;
-}
-
-section.twitter {
-  grid-area: twitter;
-}
-
-section.instagram {
-  grid-area: instagram;
-}
-
-section.reddit {
-  grid-area: reddit;
-}
-
-section.search {
-  grid-area: search;
-}
-
-section.translate {
-  grid-area: translate;
-}
-
-section.maps {
-  grid-area: maps;
-}
-
-section.wikipedia {
-  grid-area: wikipedia;
-}
-
-section.medium {
-  grid-area: medium;
-}
-
-section.exception {
-  grid-area: general;
-}
-
-
 div.some-block {
   padding: 0 15px;
   justify-content: space-between;
@@ -431,9 +340,7 @@ div.option-block h4 {
 
 div.option-block h1 {
   margin: 0;
-  margin-right: 5px;
-  width: 80%;
-  font-size: 20px;
+  font-size: 28px;
   color: var(--active);
 }
 
@@ -516,39 +423,6 @@ a.button:active {
   transform: translateY(1px);
 }
 
-div.option {
-  box-sizing: border-box;
-  margin: auto;
-  max-width: 1800px;
-  display: grid;
-  grid-template-columns: 33.3% 33.3% 33.3%;
-  gap: 2px;
-  /* border: 3px solid var(--active); */
-  background-color: rgb(58, 58, 58);
-  grid-template-areas:
-    "general     twitter instagram"
-    "youtube     reddit  search"
-    "youtube     maps    wikipedia"
-    "translate  medium   wikipedia"
-}
-
-div.random-pool {
-  display: flex;
-  align-items: stretch;
-}
-
-div.random-pool ul {
-  list-style: disc;
-  margin: 0 20px;
-}
-
-div.random-pool li {
-  border: none;
-  padding: 10px 0;
-  font-size: 15px;
-  line-height: 1px;
-}
-
 textarea {
   line-height: 21px;
   background-color: var(--bg-secondary);
@@ -558,38 +432,6 @@ textarea {
   width: 100%;
 }
 
-@media (max-width: 1590px) {
-  div.option {
-    max-width: 1200px;
-    grid-template-columns: 50% 50%;
-    grid-template-areas:
-      "general    twitter"
-      "youtube    instagram"
-      "youtube    reddit"
-      "search     maps"
-      "translate  wikipedia"
-      "medium     wikipedia"
-  }
-}
-
-@media (max-width: 1090px) {
-  div.option {
-    max-width: 600px;
-    grid-template-columns: 100%;
-    grid-template-areas:
-      "general"
-      "youtube"
-      "twitter"
-      "instagram"
-      "search"
-      "reddit"
-      "maps"
-      "translate"
-      "wikipedia"
-      "medium"
-  }
-}
-
 @media (prefers-color-scheme: light) {
   body {
     --text: #000;