Adding tor to twitter and youtube #32

4 files changed, 169 insertions, 46 deletions

diff --git a/src/pages/options/youtube/invidious.js b/src/pages/options/youtube/invidious.js
index 70b25428..17cbda37 100644
--- a/src/pages/options/youtube/invidious.js
+++ b/src/pages/options/youtube/invidious.js
@@ -26,6 +26,7 @@ persistInvidiousPrefsElement.addEventListener("change",
     (event) => youtubeHelper.setPersistInvidiousPrefs(event.target.checked)
 );
 
+
 youtubeHelper.init().then(() => {
     invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle();
     invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
@@ -35,12 +36,24 @@ youtubeHelper.init().then(() => {
 
     commonHelper.processDefaultCustomInstances(
         'invidious',
+        'normal',
+        youtubeHelper,
+        document,
+        youtubeHelper.getInvidiousNormalRedirectsChecks,
+        youtubeHelper.setInvidiousNormalRedirectsChecks,
+        youtubeHelper.getInvidiousNormalCustomRedirects,
+        youtubeHelper.setInvidiousNormalCustomRedirects
+    );
+
+    commonHelper.processDefaultCustomInstances(
+        'invidious',
+        'tor',
         youtubeHelper,
         document,
-        youtubeHelper.getInvidiousRedirectsChecks,
-        youtubeHelper.setInvidiousRedirectsChecks,
-        youtubeHelper.getInvidiousCustomRedirects,
-        youtubeHelper.setInvidiousCustomRedirects
-    )
+        youtubeHelper.getInvidiousTorRedirectsChecks,
+        youtubeHelper.setInvidiousTorRedirectsChecks,
+        youtubeHelper.getInvidiousTorCustomRedirects,
+        youtubeHelper.setInvidiousTorCustomRedirects
+    );
 });
 
diff --git a/src/pages/options/youtube/piped.js b/src/pages/options/youtube/piped.js
index ed425237..6c541a8d 100644
--- a/src/pages/options/youtube/piped.js
+++ b/src/pages/options/youtube/piped.js
@@ -4,13 +4,24 @@ import commonHelper from "../../../assets/javascripts/helpers/common.js";
 youtubeHelper.init().then(() => {
     commonHelper.processDefaultCustomInstances(
         'piped',
+        'normal',
         youtubeHelper,
         document,
-        youtubeHelper.getPipedRedirectsChecks,
-        youtubeHelper.setPipedRedirectsChecks,
-        youtubeHelper.getPipedCustomRedirects,
-        youtubeHelper.setPipedCustomRedirects
-    )
+        youtubeHelper.getPipedNormalRedirectsChecks,
+        youtubeHelper.setPipedNormalRedirectsChecks,
+        youtubeHelper.getPipedNormalCustomRedirects,
+        youtubeHelper.setPipedNormalCustomRedirects
+    );
+    commonHelper.processDefaultCustomInstances(
+        'piped',
+        'tor',
+        youtubeHelper,
+        document,
+        youtubeHelper.getPipedTorRedirectsChecks,
+        youtubeHelper.setPipedTorRedirectsChecks,
+        youtubeHelper.getPipedTorCustomRedirects,
+        youtubeHelper.setPipedTorCustomRedirects
+    );
 });
 
 
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index 2d8c75e9..cc5cf05a 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -138,6 +138,15 @@
     </div>
 
     <div id="invidious-piped">
+
+      <div class="some-block option-block">
+        <h4>Protocol</h4>
+        <select id="protocol">
+          <option value="normal">Normal</option>
+          <option value="tor">Tor</option>
+        </select>
+      </div>
+
       <div class="some-block option-block">
         <h4>Redirect Type</h4>
         <select id="only-embed">
@@ -225,54 +234,111 @@
 
       <hr>
 
-      <div class="some-block option-block">
-        <h4>Default Instances</h4>
-      </div>
-      <div class="checklist" id="invidious-checklist">
-      </div>
-      <hr>
-      <div class="some-block option-block">
-        <h4>Custom Instances</h4>
+
+      <div id="invidious-normal">
+        <div class="some-block option-block">
+          <h4>Default Instances</h4>
+        </div>
+        <div class="checklist" id="invidious-normal-checklist">
+        </div>
+        <hr>
+        <div class="some-block option-block">
+          <h4>Custom Instances</h4>
+        </div>
+        <form id="custom-invidious-normal-instance-form">
+          <div class="some-block option-block">
+            <input id="invidious-normal-custom-instance" placeholder="https://invidious.com" type="url" />
+            <button type="submit" class="add" id="invidious-normal-add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist" id="invidious-normal-custom-checklist"></div>
       </div>
-      <form id="custom-invidious-instance-form">
+
+      <div id="invidious-tor">
+        <div class="some-block option-block">
+          <h4>Default Instances</h4>
+        </div>
+        <div class="checklist" id="invidious-tor-checklist">
+        </div>
+        <hr>
         <div class="some-block option-block">
-          <input id="invidious-custom-instance" placeholder="https://invidious.com" type="url" />
-          <button type="submit" class="add" id="invidious-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4>Custom Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="invidious-custom-checklist"></div>
+        <form id="custom-invidious-tor-instance-form">
+          <div class="some-block option-block">
+            <input id="invidious-tor-custom-instance" placeholder="https://invidious.com" type="url" />
+            <button type="submit" class="add" id="invidious-tor-add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist" id="invidious-tor-custom-checklist"></div>
+      </div>
 
     </div>
 
     <div id="piped">
       <hr>
 
-      <div class="some-block option-block">
-        <h4>Default Instances</h4>
-      </div>
-      <div class="checklist" id="piped-checklist">
-      </div>
-      <hr>
-      <div class="some-block option-block">
-        <h4>Custom Instances</h4>
+      <div id="piped-normal">
+        <div class="some-block option-block">
+          <h4>Default Instances</h4>
+        </div>
+        <div class="checklist" id="piped-normal-checklist">
+        </div>
+        <hr>
+        <div class="some-block option-block">
+          <h4>Custom Instances</h4>
+        </div>
+        <form id="custom-piped-normal-instance-form">
+          <div class="some-block option-block">
+            <input id="piped-normal-custom-instance" placeholder="https://piped.com" type="url" />
+            <button type="submit" class="add" id="piped-normal-add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist" id="piped-normal-custom-checklist"></div>
       </div>
-      <form id="custom-piped-instance-form">
+
+      <div id="piped-tor">
         <div class="some-block option-block">
-          <input id="piped-custom-instance" placeholder="https://piped.com" type="url" />
-          <button type="submit" class="add" id="piped-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4>Default Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="piped-custom-checklist"></div>
+        <div class="checklist" id="piped-tor-checklist">
+        </div>
+        <hr>
+        <div class="some-block option-block">
+          <h4>Custom Instances</h4>
+        </div>
+        <form id="custom-piped-tor-instance-form">
+          <div class="some-block option-block">
+            <input id="piped-tor-custom-instance" placeholder="https://piped.com" type="url" />
+            <button type="submit" class="add" id="piped-tor-add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist" id="piped-tor-custom-checklist"></div>
+      </div>
     </div>
 
   </section>
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index 61d2ec53..d62bdad6 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -103,6 +103,35 @@ alwaysUsePreferredElement.addEventListener("change",
     (event) => youtubeHelper.setAlwaysusePreferred(event.target.checked)
 );
 
+let protocolElement = document.getElementById("protocol")
+protocolElement.addEventListener("change",
+    (event) => {
+        let protocol = event.target.options[protocolElement.selectedIndex].value
+        youtubeHelper.setProtocol(protocol);
+        changeProtocolSettings(protocol);
+    }
+);
+
+function changeProtocolSettings(protocol) {
+    let normalPipedDiv = document.getElementById("piped-normal");
+    let torPipedDiv = document.getElementById("piped-tor");
+
+    let normalInvidiousDiv = document.getElementById("invidious-normal");
+    let torInvidiousDiv = document.getElementById("invidious-tor");
+    if (protocol == 'normal') {
+        normalPipedDiv.style.display = 'block';
+        normalInvidiousDiv.style.display = 'block';
+        torInvidiousDiv.style.display = 'none';
+        torPipedDiv.style.display = 'none';
+    }
+    else if (protocol == 'tor') {
+        normalPipedDiv.style.display = 'none';
+        normalInvidiousDiv.style.display = 'none';
+        torInvidiousDiv.style.display = 'block';
+        torPipedDiv.style.display = 'block';
+    }
+}
+
 youtubeHelper.init().then(() => {
     disableYoutubeElement.checked = !youtubeHelper.getDisable();
     themeElement.checked = youtubeHelper.getTheme();
@@ -115,6 +144,10 @@ youtubeHelper.init().then(() => {
     youtubeFrontendElement.value = frontend;
     changeFrontendsSettings(frontend);
 
+    let protocol = youtubeHelper.getprotocol();
+    protocolElement.value = protocol;
+    changeProtocolSettings(protocol);
+
     let freetubeFrontend = youtubeHelper.getFreetubeFrontend()
     freetubeFrontendElement.value = freetubeFrontend
     if (frontend == "freetube") changeFreetubeFrontendsSettings(freetubeFrontend);