2 files changed, 84 insertions, 46 deletions
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