Fixed Piped-Material settings not working #86

2 files changed, 21 insertions, 29 deletions

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';
     }