Fixed settings not being applied to Piped

src/assets/javascripts/helpers/youtube/invidious-cookies.js

@@ -1,61 +0,0 @@
-
-window.browser = window.browser || window.chrome;
-
-function getCookie() {
-    for (const c of document.cookie.split(";")) {
-        while (c.charAt(0) == " ") c = c.substring(1, c.length);
-        if (c.indexOf("PREFS=") == 0)
-            return JSON.parse(
-                decodeURIComponent(c.substring("PREFS=".length, c.length))
-            );
-    }
-    return {};
-}
-
-browser.storage.local.get(
-    [
-        "invidiousAlwaysProxy",
-        "invidiousSubtitles",
-        "invidiousPlayerStyle",
-        "youtubeVolume",
-        "youtubeAutoplay",
-        "OnlyEmbeddedVideo",
-        "youtubeTheme",
-        "invidiousVideoQuality",
-    ], (result) => {
-        let prefs = getCookie();
-        let changed = false;
-
-        if (result.invidiousAlwaysProxy !== undefined && prefs.local !== result.invidiousAlwaysProxy) {
-            prefs.local = result.invidiousAlwaysProxy;
-            changed = true;
-        }
-        if (result.invidiousVideoQuality !== undefined && prefs.quality !== result.invidiousVideoQuality) {
-            prefs.quality = result.invidiousVideoQuality;
-            changed = true;
-        }
-        if (result.youtubeTheme !== undefined && prefs.dark_mode !== result.youtubeTheme) {
-            prefs.dark_mode = result.youtubeTheme;
-            changed = true;
-        }
-        if (result.youtubeVolume !== undefined && prefs.volume !== result.youtubeVolume) {
-            prefs.volume = result.youtubeVolume;
-            changed = true;
-        }
-        if (result.invidiousPlayerStyle !== undefined && prefs.player_style !== result.invidiousPlayerStyle) {
-            prefs.player_style = result.invidiousPlayerStyle;
-            changed = true;
-        }
-        if (result.invidiousSubtitles !== undefined && prefs.subtitles === result.invidiousSubtitles) {
-            prefs.subtitles = result.invidiousSubtitles;
-            changed = true;
-        }
-        if (result.youtubeAutoplay !== undefined && prefs.autoplay !== result.youtubeAutoplay) {
-            prefs.autoplay = result.youtubeAutoplay;
-            changed = true;
-        }
-
-        if (changed) document.cookie = `PREFS=${encodeURIComponent(JSON.stringify(prefs))}`;
-
-    }
-)

src/assets/javascripts/helpers/youtube/piped-preferences.js

@@ -0,0 +1,34 @@
+window.browser = window.browser || window.chrome;
+
+browser.storage.local.get(
+    [
+        "youtubeTheme",
+        "youtubeVolume",
+        "youtubeAutoplay"
+    ],
+    res => {
+        if (
+            res.youtubeTheme != "DEFAULT" &&
+            localStorage.getItem("theme") != res.youtubeTheme
+        )
+            localStorage.setItem("theme", res.youtubeTheme);
+
+        if (
+            res.youtubeVolume != "--" &&
+            localStorage.getItem("volume") != res.youtubeVolume
+        )
+            localStorage.setItem("volume", res.youtubeVolume / 100);
+
+        if (
+            res.youtubeAutoplay != "DEFAULT" &&
+            localStorage.getItem("playerAutoPlay") != res.youtubeAutoplay
+        )
+            localStorage.setItem("playerAutoPlay", res.youtubeAutoplay);
+    }
+)
+
+window.onunload = () => {
+    localStorage.removeItem("theme");
+    localStorage.removeItem("volume");
+    localStorage.removeItem("playerAutoPlay");
+};

src/assets/javascripts/helpers/youtube/youtube.js

@@ -451,7 +451,12 @@ function isPipedorInvidious(url, type) {
 }
 
 function isUrlPipedorInvidious(url, frontend) {
-  url = new URL(url);
+  try {
+    url = new URL(url);
+  }
+  catch (error) {
+    return
+  }
   let protocolHost = `${url.protocol}//${url.host}`;
 
   if (frontend == 'invidious')
@@ -484,16 +489,9 @@ function isUrlPipedorInvidious(url, frontend) {
 }
 
 function addUrlParams(url) {
-  console.log("addUrlParams");
   let protocolHost = `${url.protocol}//${url.host}`;
   let isChanged = false;
-  console.log("AddingprotocolHost", protocolHost);
-  console.log([
-    ...redirects.invidious.normal,
-    ...redirects.invidious.tor,
-    ...invidiousNormalCustomRedirects,
-    ...invidiousTorCustomRedirects,
-  ])
+  console.log("Adding URL Params", protocolHost);
   if (
     [
       ...redirects.invidious.normal,
@@ -566,16 +564,51 @@ function addUrlParams(url) {
   else return;
 }
 
-function invidiousInitCookies(tabId) {
+function initPipedLocalStorage(url, tabId) {
   browser.tabs.executeScript(
     tabId,
     {
-      file: "/assets/javascripts/helpers/youtube/invidious-cookies.js",
+      file: "/assets/javascripts/helpers/youtube/piped-preferences.js",
       runAt: "document_start"
     }
   );
 }
 
+function invidiousInitCookies(url) {
+  console.log("invidiousInitCookies");
+  browser.cookies.get({
+    url: url,
+    name: "PREFS"
+  }).then(
+    cookie => {
+      let prefs = {};
+      if (cookie) prefs = JSON.parse(decodeURIComponent(cookie.value));
+      let oldPrefs = { ...prefs };
+
+      if (invidiousAlwaysProxy != "DEFAULT" && prefs.local !== invidiousAlwaysProxy) prefs.local = invidiousAlwaysProxy;
+
+      if (invidiousVideoQuality != "DEFAULT" && prefs.quality !== invidiousVideoQuality) prefs.quality = invidiousVideoQuality;
+
+      if (theme != "DEFAULT" && prefs.dark_mode !== theme) prefs.dark_mode = theme;
+
+      if (volume != "--" && prefs.volume !== volume) prefs.volume = volume;
+
+      if (invidiousPlayerStyle != "DEFAULT" && prefs.player_style !== invidiousPlayerStyle) prefs.player_style = invidiousPlayerStyle;
+
+      if (invidiousSubtitles != "DEFAULT" && prefs.subtitles === invidiousSubtitles) prefs.subtitles = invidiousSubtitles;
+
+      if (autoplay != "DEFAULT" && prefs.autoplay !== autoplay) prefs.autoplay = autoplay;
+
+      if (oldPrefs != prefs)
+        browser.cookies.set({
+          url: url,
+          name: "PREFS",
+          value: encodeURIComponent(JSON.stringify(prefs))
+        })
+    }
+  );
+}
+
 async function init() {
   return new Promise((resolve) => {
     fetch('/instances/data.json').then(response => response.text()).then(data => {
@@ -663,6 +696,7 @@ export default {
   getBypassWatchOnYoutube,
   setBypassWatchOnYoutube,
   invidiousInitCookies,
+  initPipedLocalStorage,
 
   getFrontend,
   setFrontend,

src/manifest.json

@@ -18,6 +18,7 @@
     "storage",
     "webRequest",
     "webRequestBlocking",
+    "cookies",
     "<all_urls>"
   ],
   "browser_action": {
@@ -37,6 +38,6 @@
     "open_in_tab": true
   },
   "web_accessible_resources": [
-    "assets/javascripts/helpers/youtube/invidious-cookies.js"
+    "assets/javascripts/helpers/youtube/piped-preferences.js"
   ]
 }

src/pages/background/background.js

@@ -72,13 +72,10 @@ browser.webRequest.onBeforeRequest.addListener(
 
     if (wikipediaHelper.isWikipedia(url, initiator)) newUrl = wikipediaHelper.redirect(url);
 
-    if (youtubeHelper.isPipedorInvidious(newUrl ?? url, details.type)) newUrl = youtubeHelper.addUrlParams(newUrl ?? url);
-
     if (exceptionsHelper.isException(url, initiator)) newUrl = null;
 
     if (bybassTabs.includes(details.tabId)) newUrl = null;
 
-
     if (newUrl) {
       if (newUrl == 'CANCEL') {
         console.log(`Canceled ${url}`);
@@ -108,7 +105,7 @@ browser.tabs.onRemoved.addListener((tabId) => {
 
 
 browser.tabs.onUpdated.addListener(
-  (tabId, changeInfo) => {
-    if (changeInfo.url && youtubeHelper.isUrlPipedorInvidious(changeInfo.url, 'invidious'))
-      youtubeHelper.invidiousInitCookies(tabId);
+  (tabId, changeInfo, _) => {
+    if (changeInfo.url && youtubeHelper.isUrlPipedorInvidious(changeInfo.url, 'piped')) youtubeHelper.initPipedLocalStorage(changeInfo.url, tabId);
+    if (changeInfo.url && youtubeHelper.isUrlPipedorInvidious(changeInfo.url, 'invidious')) youtubeHelper.invidiousInitCookies(changeInfo.url);
   });

src/pages/options/youtube/youtube.html

@@ -96,8 +96,8 @@
     <div class="some-block option-block">
       <h4>Frontend</h4>
       <select id="youtube-frontend">
-        <option value="piped">Piped</option>
         <option value="invidious">Invidious</option>
+        <option value="piped">Piped</option>
         <option value="freetube">FreeTube</option>
         <option value="yatte">Yattee</option>
       </select>

src/pages/options/youtube/youtube.js

@@ -8,9 +8,6 @@ let pipedDivElement = document.getElementById("piped");
 let invidiousPipedDivElement = document.getElementById("invidious-piped");
 let freetubeYatteeDivElement = document.getElementById("freetube-yatte");
 
-
-
-
 function changeFrontendsSettings(frontend) {
     if (frontend == 'piped') {
         invidiousPipedDivElement.style.display = 'block'