Fixed Piped-Material settings not working #86

4 files changed, 37 insertions, 43 deletions

diff --git a/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js b/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js
index 1c6458da..e244cb47 100644
--- a/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js
+++ b/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js
@@ -3,23 +3,24 @@ window.browser = window.browser || window.chrome;
 browser.storage.local.get(
     [
         "theme",
-        "youtubeAutoplay"
+        "applyThemeToSites",
+        "youtubeAutoplay",
     ],
-    res => {
-        let prefs = JSON.parse(
-            decodeURIComponent(
-                localStorage.getItem("PREFERENCES")
-            )
-        ) ?? {};
-        let oldPrefs = { ...prefs };
+    r => {
+        let applyThemeToSites = r.applyThemeToSites ?? false;
+        let theme = r.theme ?? "DEFAULT";
+        let youtubeAutoplay = r.youtubeAutoplay ?? "DEFAULT";
 
-        if (res.theme == 'dark') prefs.darkMode = true;
-        if (res.theme == 'light') prefs.darkMode = false;
+        let prefs = {};
+        if (localStorage.getItem("PREFERENCES")) prefs = JSON.parse(localStorage.getItem("PREFERENCES"));
 
-        if (res.youtubeAutoplay != "DEFAULT") prefs.playerAutoplay = res.youtubeAutoplay;
+        if (applyThemeToSites && theme == 'dark') prefs.darkMode = true;
+        if (applyThemeToSites && theme == 'light') prefs.darkMode = false;
 
-        if (oldPrefs != prefs) localStorage.setItem("PREFERENCES", encodeURIComponent(JSON.stringify(prefs)));
+        if (youtubeAutoplay != "DEFAULT") prefs.playerAutoplay = youtubeAutoplay == 'true';
+
+        console.log("prefs", JSON.stringify(prefs));
+
+        localStorage.setItem("PREFERENCES", JSON.stringify(prefs));
     }
 )
-
-window.onunload = () => localStorage.removeItem("PREFERENCES");
\ No newline at end of file
diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index 3a9dfbba..32da2632 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -157,6 +157,7 @@ browser.tabs.onUpdated.addListener(
     try { url = new URL(changeInfo.url); }
     catch (_) { return }
     if (youtubeHelper.isPipedorInvidious(url, 'main_frame', 'piped')) youtubeHelper.initPipedLocalStorage(tabId);
+    if (youtubeHelper.isPipedorInvidious(url, 'main_frame', 'pipedMaterial')) youtubeHelper.initPipedMaterialLocalStorage(tabId);
     if (translateHelper.isTranslateRedirects(url, 'main_frame', 'lingva')) translateHelper.initLingvaLocalStorage(tabId);
     if (instagramHelper.isBibliogram(url)) instagramHelper.initBibliogramCookies(url);
     // if (changeInfo.url && youtubeHelper.isPipedorInvidious(url, 'main_frame', 'pipedMaterial')) youtubeHelper.initPipedMaterialLocalStorage(tabId);
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index 1fa3f716..492843d7 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -130,7 +130,7 @@
       <hr>
     </div>
 
-    <div id="invidious-piped">
+    <div id="invidious-piped-pipedMaterial">
 
       <div class="some-block option-block">
         <h4>Protocol</h4>
@@ -162,6 +162,18 @@
           <option value="false">False</option>
         </select>
       </div>
+
+      <div class="some-block option-block">
+        <h4>Volume: <span id="volume-value">--%</span></h4>
+        <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
+        <button type="button" class="default" id="clear-invidious-volume">
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+          </svg>
+        </button>
+      </div>
     </div>
 
     <div id="invidious">
@@ -266,19 +278,6 @@
       </div>
 
       <div class="some-block option-block">
-        <h4>Volume: <span id="volume-value">--%</span></h4>
-        <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
-        <button type="button" class="default" id="clear-invidious-volume">
-          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
-          </svg>
-        </button>
-      </div>
-
-
-      <div class="some-block option-block">
         <h4>Default comments</h4>
         <select id="invidious-comments[0]">
           <option value="DEFAULT">Default</option>
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index 180276ca..cd8e22c0 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -6,40 +6,33 @@ let youtubeFrontendElement = document.getElementById("youtube-frontend");
 let invidiousDivElement = document.getElementById("invidious");
 let pipedDivElement = document.getElementById("piped");
 let pipedMaterialDivElement = document.getElementById("pipedMaterial");
-let invidiousPipedDivElement = document.getElementById("invidious-piped");
+let invidiousPipedPipedMaterialDivElement = document.getElementById("invidious-piped-pipedMaterial");
 let freetubeYatteeDivElement = document.getElementById("freetube-yatte");
 
 function changeFrontendsSettings(frontend) {
     if (frontend == 'invidious') {
-        invidiousPipedDivElement.style.display = 'block'
+        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         invidiousDivElement.style.display = 'block';
         pipedDivElement.style.display = 'none';
         pipedMaterialDivElement.style.display = 'none';
         freetubeYatteeDivElement.style.display = 'none';
     }
     else if (frontend == 'piped') {
-        invidiousPipedDivElement.style.display = 'block'
-        invidiousDivElement.style.display = 'none';
-        pipedDivElement.style.display = 'block';
-        pipedMaterialDivElement.style.display = 'none';
-        freetubeYatteeDivElement.style.display = 'none';
-    }
-    else if (frontend == 'piped') {
-        invidiousPipedDivElement.style.display = 'block'
+        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         invidiousDivElement.style.display = 'none';
         pipedDivElement.style.display = 'block';
         pipedMaterialDivElement.style.display = 'none';
         freetubeYatteeDivElement.style.display = 'none';
     }
     else if (frontend == 'pipedMaterial') {
-        invidiousPipedDivElement.style.display = 'none'
+        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         invidiousDivElement.style.display = 'none';
         pipedDivElement.style.display = 'none';
         pipedMaterialDivElement.style.display = 'block';
         freetubeYatteeDivElement.style.display = 'none';
     }
     else if (frontend == 'freetube' || frontend == 'yatte') {
-        invidiousPipedDivElement.style.display = 'none'
+        invidiousPipedPipedMaterialDivElement.style.display = 'none'
         invidiousDivElement.style.display = 'none';
         pipedDivElement.style.display = 'none';
         pipedMaterialDivElement.style.display = 'none';
@@ -50,17 +43,17 @@ function changeFrontendsSettings(frontend) {
 
 function changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontend) {
     if (youtubeEmbedFrontend == 'invidious') {
-        invidiousPipedDivElement.style.display = 'block'
+        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         pipedDivElement.style.display = 'none';
         invidiousDivElement.style.display = 'block';
     }
     if (youtubeEmbedFrontend == 'piped') {
-        invidiousPipedDivElement.style.display = 'block'
+        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         pipedDivElement.style.display = 'block';
         invidiousDivElement.style.display = 'none';
     }
     else if (youtubeEmbedFrontend == 'youtube') {
-        invidiousPipedDivElement.style.display = 'none'
+        invidiousPipedPipedMaterialDivElement.style.display = 'none'
         pipedDivElement.style.display = 'none';
         invidiousDivElement.style.display = 'none';
     }