Added embeddedFrontend option to freetube #40

2 files changed, 51 insertions, 6 deletions

diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index 82556660..2d8c75e9 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -119,12 +119,24 @@
       <select id="youtube-frontend">
         <option value="piped">Piped</option>
         <option value="invidious">Invidious</option>
-        <option value="freeTube">FreeTube</option>
+        <option value="freetube">FreeTube</option>
       </select>
     </div>
 
     <hr>
 
+    <div id="freetube">
+      <div class="some-block option-block">
+        <h4>Embedded Videos Frontend</h4>
+        <select id="freetube-embedded-frontend">
+          <option value="invidious">Invidious</option>
+          <option value="piped">Piped</option>
+          <option value="youtube">Youtube</option>
+        </select>
+      </div>
+      <hr>
+    </div>
+
     <div id="invidious-piped">
       <div class="some-block option-block">
         <h4>Redirect Type</h4>
@@ -237,7 +249,6 @@
 
     </div>
 
-
     <div id="piped">
       <hr>
 
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index 52063dfb..e757e2fb 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -3,22 +3,45 @@ import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.j
 let disableYoutubeElement = document.getElementById("disable-invidious");
 
 let youtubeFrontendElement = document.getElementById("youtube-frontend");
-let invidiousDivElement = document.getElementById("invidious")
-let pipedDivElement = document.getElementById("piped")
-let invidiousPipedDivElement = document.getElementById("invidious-piped")
+let invidiousDivElement = document.getElementById("invidious");
+let pipedDivElement = document.getElementById("piped");
+let invidiousPipedDivElement = document.getElementById("invidious-piped");
+let freetubeDivElement = document.getElementById("freetube");
+let freetubeFrontendElement = document.getElementById("freetube-embedded-frontend");
 
 function changeFrontendsSettings(frontend) {
     if (frontend == 'piped') {
         invidiousPipedDivElement.style.display = 'block'
         pipedDivElement.style.display = 'block';
         invidiousDivElement.style.display = 'none';
+        freetubeDivElement.style.display = 'none';
     }
     else if (frontend == 'invidious') {
         invidiousPipedDivElement.style.display = 'block'
         pipedDivElement.style.display = 'none';
         invidiousDivElement.style.display = 'block';
+        freetubeDivElement.style.display = 'none';
     }
-    else if (frontend == 'freeTube') {
+    else if (frontend == 'freetube') {
+        invidiousPipedDivElement.style.display = 'none'
+        pipedDivElement.style.display = 'none';
+        invidiousDivElement.style.display = 'none';
+        freetubeDivElement.style.display = 'block';
+    }
+}
+
+function changeFreetubeFrontendsSettings(freetubeFrontend) {
+    if (freetubeFrontend == 'invidious') {
+        invidiousPipedDivElement.style.display = 'block'
+        pipedDivElement.style.display = 'none';
+        invidiousDivElement.style.display = 'block';
+    }
+    if (freetubeFrontend == 'piped') {
+        invidiousPipedDivElement.style.display = 'block'
+        pipedDivElement.style.display = 'block';
+        invidiousDivElement.style.display = 'none';
+    }
+    else if (freetubeFrontend == 'youtube') {
         invidiousPipedDivElement.style.display = 'none'
         pipedDivElement.style.display = 'none';
         invidiousDivElement.style.display = 'none';
@@ -31,6 +54,13 @@ youtubeFrontendElement.addEventListener("change",
         changeFrontendsSettings(frontend);
     }
 );
+freetubeFrontendElement.addEventListener("change",
+    (event) => {
+        let freetubeFrontend = event.target.options[freetubeFrontendElement.selectedIndex].value
+        youtubeHelper.setFreetubeFrontend(freetubeFrontend);
+        changeFreetubeFrontendsSettings(freetubeFrontend);
+    }
+);
 
 disableYoutubeElement.addEventListener("change",
     (event) => youtubeHelper.setDisable(!event.target.checked)
@@ -84,4 +114,8 @@ youtubeHelper.init().then(() => {
     let frontend = youtubeHelper.getFrontend();
     youtubeFrontendElement.value = frontend;
     changeFrontendsSettings(frontend);
+
+    let freetubeFrontend = youtubeHelper.getFreetubeFrontend()
+    freetubeFrontendElement.value = freetubeFrontend
+    changeFreetubeFrontendsSettings(freetubeFrontend);
 });