Added embeddedFrontend option to freetube #40

4 files changed, 83 insertions, 14 deletions

diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js
index 8934747a..38d7be49 100644
--- a/src/assets/javascripts/helpers/youtube/youtube.js
+++ b/src/assets/javascripts/helpers/youtube/youtube.js
@@ -189,6 +189,14 @@ function setFrontend(val) {
   console.log("youtubeFrontend: ", val)
 }
 
+let freetubeFrontend;
+const getFreetubeFrontend = () => freetubeFrontend;
+function setFreetubeFrontend(val) {
+  freetubeFrontend = val;
+  browser.storage.sync.set({ freetubeFrontend })
+  console.log("freetubeFrontend: ", freetubeFrontend)
+}
+
 let persistInvidiousPrefs;
 const getPersistInvidiousPrefs = () => persistInvidiousPrefs;
 function setPersistInvidiousPrefs(val) {
@@ -209,8 +217,7 @@ function isYoutube(url, initiator) {
   if (disable) return false;
 
   if (
-    initiator &&
-    (
+    initiator && (
       [...redirects.invidious.normal, ...invidiousCustomRedirects].includes(initiator.origin) ||
       [...redirects.piped.normal, ...pipedCustomRedirects].includes(initiator.origin) ||
       targets.includes(initiator.host)
@@ -247,12 +254,19 @@ function isYoutube(url, initiator) {
 function redirect(url, type) {
   if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API.
 
-  if (frontend == 'freeTube' && type === "main_frame") {
+  if (frontend == 'freetube' && type === "main_frame")
     return `freetube://${url}`;
-  } else if (frontend == 'invidious') {
+
+  else if (frontend == 'freetube' && type !== "main_frame" && freetubeFrontend == "youtube")
+    return null;
+
+  else if (frontend == 'invidious' || (frontend == 'freetube' && freetubeFrontend == 'invidious' && type == "sub_frame")) {
 
     if (OnlyEmbeddedVideo == 'onlyEmbedded' && type !== "sub_frame") return null;
-    if (OnlyEmbeddedVideo == 'onlyNotEmbedded' && type !== "main_frame") return null;
+    if (
+      OnlyEmbeddedVideo == 'onlyNotEmbedded' && type !== "main_frame" &&
+      !(frontend == 'freetube' && freetubeFrontend == 'invidious' && type === "sub_frame")
+    ) return null;
 
     let instancesList = [...invidiousRedirectsChecks, ...invidiousCustomRedirects];
     if (instancesList.length === 0) return null;
@@ -269,10 +283,13 @@ function redirect(url, type) {
 
     return `${randomInstance}${url.pathname.replace("/shorts/", "/watch?v=")}${url.search}`;
 
-  } else if (frontend == 'piped') {
+  } else if (frontend == 'piped' || (frontend == 'freetube' && freetubeFrontend == 'piped' && type === "sub_frame")) {
 
     if (OnlyEmbeddedVideo == 'onlyEmbedded' && type !== "sub_frame") return null;
-    if (OnlyEmbeddedVideo == 'onlyNotEmbedded' && type !== "main_frame") return null;
+    if (
+      OnlyEmbeddedVideo == 'onlyNotEmbedded' && type !== "main_frame" &&
+      !(frontend == 'freetube' && freetubeFrontend == 'piped' && type == "sub_frame")
+    ) return null;
 
     let instancesList = [...pipedRedirectsChecks, ...pipedCustomRedirects];
     if (instancesList.length === 0) return null;
@@ -284,6 +301,8 @@ function redirect(url, type) {
 
     return `${randomInstance}${url.pathname.replace("/shorts/", "/watch?v=")}${url.search}`;
   }
+  console.log(freetubeFrontend)
+  console.log(type)
   return 'CANCEL';
 }
 
@@ -318,12 +337,14 @@ async function init() {
         "pipedRedirectsChecks",
         "pipedCustomRedirects",
         "alwaysusePreferred",
+        "freetubeFrontend",
       ],
       (result) => {
         if (result.youtubeRedirects) redirects = result.youtubeRedirects;
 
         disable = result.disableYoutube ?? false;
         frontend = result.youtubeFrontend ?? 'piped';
+        freetubeFrontend = result.freetubeFrontend ?? 'invidious';
 
         theme = result.youtubeTheme ?? 'DEFAULT';
         volume = result.youtubeVolume ?? '--';
@@ -357,6 +378,9 @@ export default {
   getFrontend,
   setFrontend,
 
+  getFreetubeFrontend,
+  setFreetubeFrontend,
+
   getRedirects,
   getCustomRedirects,
   setInvidiousRedirects,
diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index 8e16159e..9f39ff31 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -92,7 +92,7 @@ browser.webRequest.onResponseStarted.addListener(
     var mightyList = getMightyList();
 
     if (mightyList.includes(protocolHost)); {
-      if (responseDetails.statusCode >= 500) {
+      if (responseDetails.statusCode >= 500 && responseDetails.type === "main_frame") {
         console.log("Instance is corrupted, redirecting", responseDetails.url);
         changeInstance(responseDetails.url);
       }
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);
 });