Added default and custom instances to piped

src/assets/javascripts/data.js

@@ -7,7 +7,6 @@ function setTheme(val) {
 };
 
 export default {
-    exceptions,
     theme,
     setTheme,
 }

src/assets/javascripts/helpers/youtube/youtube.js

@@ -61,7 +61,7 @@ function setInvidiousRedirects(val) {
   console.log("invidiousRedirects: ", val)
 }
 
-let invidiousRedirectsChecks = redirects.invidious.normal;
+let invidiousRedirectsChecks;
 const getInvidiousRedirectsChecks = () => invidiousRedirectsChecks;
 function setInvidiousRedirectsChecks(val) {
   invidiousRedirectsChecks = val;
@@ -77,6 +77,22 @@ function setInvidiousCustomRedirects(val) {
   console.log("invidiousCustomRedirects: ", val)
 }
 
+let pipedRedirectsChecks;
+const getPipedRedirectsChecks = () => pipedRedirectsChecks;
+function setPipedRedirectsChecks(val) {
+  pipedRedirectsChecks = val;
+  browser.storage.sync.set({ pipedRedirectsChecks })
+  console.log("pipedRedirectsChecks: ", val)
+}
+
+let pipedCustomRedirects = [];
+const getPipedCustomRedirects = () => pipedCustomRedirects;
+function setPipedCustomRedirects(val) {
+  pipedCustomRedirects = val;
+  browser.storage.sync.set({ pipedCustomRedirects })
+  console.log("pipedCustomRedirects: ", val)
+}
+
 function setPipedRedirects(val) {
   redirects.piped = val;
   browser.storage.sync.set({ youtubeRedirects: redirects })
@@ -209,13 +225,11 @@ async function init() {
       "youtubeFrontend",
       "invidiousRedirectsChecks",
       "invidiousCustomRedirects",
+      "pipedRedirectsChecks",
+      "pipedCustomRedirects",
     ]);
   if (result.youtubeRedirects) redirects = result.youtubeRedirects;
 
-  if (result.invidiousRedirectsChecks) invidiousRedirectsChecks = result.invidiousRedirectsChecks;
-
-  if (result.invidiousCustomRedirects) invidiousCustomRedirects = result.invidiousCustomRedirects;
-
   frontend = result.youtubeFrontend ?? 'piped';
   disableYoutube = result.disableYoutube ?? false;
 
@@ -228,6 +242,12 @@ async function init() {
   invidiousSubtitles = result.invidiousSubtitles || '';
   invidiousAutoplay = result.invidiousAutoplay ?? 'DEFAULT';
 
+  invidiousRedirectsChecks = result.invidiousRedirectsChecks ?? [...redirects.invidious.normal];
+  invidiousCustomRedirects = result.invidiousCustomRedirects ?? [];
+
+  pipedRedirectsChecks = result.pipedRedirectsChecks ?? [...redirects.invidious.normal];
+  pipedCustomRedirects = result.pipedCustomRedirects ?? [];
+
   persistInvidiousPrefs = result.persistInvidiousPrefs ?? false;
 }
 
@@ -253,6 +273,7 @@ function redirect(url, initiator, type) {
   )
     return null;
 
+
   if (url.hostname == "studio.youtube.com") return null;
 
   if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API.
@@ -272,7 +293,12 @@ function redirect(url, initiator, type) {
     if (invidiousSubtitles.trim() != '') url.searchParams.append("subtitles", invidiousSubtitles);
     if (invidiousAutoplay != "DEFAULT") url.searchParams.append("autoplay", invidiousAutoplay);
 
-    let randomInstance = commonHelper.getRandomInstance([...invidiousRedirectsChecks, ...invidiousCustomRedirects])
+    let instancesList = [...invidiousRedirectsChecks, ...invidiousCustomRedirects];
+
+    if (instancesList.length === 0)
+      return null;
+
+    let randomInstance = commonHelper.getRandomInstance(instancesList)
 
     return `${randomInstance}${url.pathname.replace("/shorts/", "/watch?v=")}${url.search}`;
 
@@ -280,12 +306,17 @@ function redirect(url, initiator, type) {
 
     if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null;
 
+    let instancesList = [...pipedRedirectsChecks, ...pipedCustomRedirects];
+
+    if (instancesList.length === 0)
+      return null;
+
+    let randomInstance = commonHelper.getRandomInstance(instancesList)
+
     if (invidiousTheme != "DEFAULT") url.searchParams.append("theme", invidiousTheme);
     if (invidiousVolume != "--") url.searchParams.append("volume", invidiousVolume / 100);
     if (invidiousAutoplay != "DEFAULT") url.searchParams.append("playerAutoPlay", invidiousAutoplay);
 
-    let randomInstance = commonHelper.getRandomInstance(redirects.piped.normal);
-
     if (url.hostname.endsWith("youtube.com") || url.hostname.endsWith("youtube-nocookie.com") || invidiousHostNames().includes(url.hostname))
       return `${randomInstance}${url.pathname.replace("/shorts/", "/watch?v=")}${url.search}`;
 
@@ -345,5 +376,11 @@ export default {
   getInvidiousCustomRedirects,
   setInvidiousCustomRedirects,
 
+  getPipedRedirectsChecks,
+  setPipedRedirectsChecks,
+
+  getPipedCustomRedirects,
+  setPipedCustomRedirects,
+
   init,
 };

src/pages/options/youtube/invidious.js

@@ -0,0 +1,126 @@
+import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
+
+let invidiousAlwaysProxyElement = document.getElementById("invidious-always-proxy");
+invidiousAlwaysProxyElement.addEventListener("change",
+    (event) => youtubeHelper.setInvidiousAlwaysProxy(event.target.options[invidiousAlwaysProxyElement.selectedIndex].value)
+);
+
+let invidiousPlayerStyleElement = document.getElementById("invidious-player-style");
+invidiousPlayerStyleElement.addEventListener("change",
+    (event) => youtubeHelper.setInvidiousPlayerStyle(event.target.options[invidiousPlayerStyleElement.selectedIndex].value)
+);
+
+let invidiousVideoQualityElement = document.getElementById("video-quality");
+invidiousVideoQualityElement.addEventListener("change",
+    (event) => youtubeHelper.setInvidiousVideoQuality(event.target.options[invidiousVideoQualityElement.selectedIndex].value)
+);
+
+let invidiousSubtitlesElement = document.getElementById("invidious-subtitles");
+invidiousSubtitlesElement.addEventListener("change",
+    () => youtubeHelper.setInvidiousSubtitles(invidiousSubtitlesElement.value)
+);
+
+let persistInvidiousPrefsElement = document.getElementById("persist-invidious-prefs");
+persistInvidiousPrefsElement.addEventListener("change",
+    (event) => youtubeHelper.setPersistInvidiousPrefs(event.target.checked)
+);
+
+youtubeHelper.init().then(() => {
+    invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle();
+    invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
+    invidiousVideoQualityElement.value = youtubeHelper.getInvidiousVideoQuality();
+    invidiousSubtitlesElement.value = youtubeHelper.getInvidiousSubtitles();
+    persistInvidiousPrefsElement.checked = youtubeHelper.getPersistInvidiousPrefs();
+
+
+    invidiousDefaultRedirects = youtubeHelper.getInvidiousRedirectsChecks();
+    invidiousCheckListElement.innerHTML =
+        [
+            '<div>Toggle All<input type="checkbox" id="invidious-toogle-all" /></div>',
+            ...youtubeHelper.getRedirects().invidious.normal.map((x) => `<div>${x}<input type="checkbox" id="${x}" /></div>`),
+        ].join('\n<hr>\n');
+
+    calcInvidiousCheckBoxes();
+    document.getElementById('invidious-toogle-all').addEventListener("change", (event) => {
+        if (event.target.checked)
+            invidiousDefaultRedirects = [...youtubeHelper.getRedirects().invidious.normal];
+        else
+            invidiousDefaultRedirects = [];
+        youtubeHelper.setInvidiousRedirectsChecks(invidiousDefaultRedirects);
+        calcInvidiousCheckBoxes();
+    });
+
+    for (let element of invidiousCheckListElement.getElementsByTagName('input')) {
+        if (element.id != 'invidious-toogle-all')
+            document.getElementById(element.id).addEventListener("change", (event) => {
+                if (event.target.checked)
+                    invidiousDefaultRedirects.push(element.id)
+                else {
+                    let index = invidiousDefaultRedirects.indexOf(element.id);
+                    if (index > -1) invidiousDefaultRedirects.splice(index, 1);
+                }
+                youtubeHelper.setInvidiousRedirectsChecks(invidiousDefaultRedirects);
+                calcInvidiousCheckBoxes();
+            });
+    }
+
+    invidiousCustomInstances = youtubeHelper.getInvidiousCustomRedirects();
+    calcInvidiousCustomInstances();
+});
+
+
+let invidiousCustomInstanceInput = document.getElementById("invidious-custom-instance");
+let invidiousCustomInstances = [];
+
+let invidiousCheckListElement = document.getElementById("invidious-checklist");
+
+
+let invidiousDefaultRedirects;
+
+function calcInvidiousCheckBoxes() {
+    let isTrue = true;
+    for (const item of youtubeHelper.getRedirects().invidious.normal)
+        if (!invidiousDefaultRedirects.includes(item)) {
+            isTrue = false;
+            break;
+        }
+    for (const element of invidiousCheckListElement.getElementsByTagName('input'))
+        element.checked = invidiousDefaultRedirects.includes(element.id)
+    document.getElementById('invidious-toogle-all').checked = isTrue;
+}
+
+function calcInvidiousCustomInstances() {
+    document.getElementById("invidious-custom-checklist").innerHTML =
+        invidiousCustomInstances.map(
+            (x) => `<div>${x}<button class="add" id="clear-${x}">
+                            <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 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>
+                    <hr>`
+        ).join('\n');
+
+    for (const item of invidiousCustomInstances) {
+        document.getElementById(`clear-${item}`).addEventListener("click", () => {
+            let index = invidiousCustomInstances.indexOf(item);
+            if (index > -1) invidiousCustomInstances.splice(index, 1);
+            youtubeHelper.setInvidiousCustomRedirects(invidiousCustomInstances);
+            calcInvidiousCustomInstances();
+        });
+    }
+}
+
+document.getElementById("custom-invidious-instance-form").addEventListener("submit", (event) => {
+    event.preventDefault();
+    let val = invidiousCustomInstanceInput.value
+    if (invidiousCustomInstanceInput.validity.valid && !youtubeHelper.getRedirects().invidious.normal.includes(val)) {
+        if (!invidiousCustomInstances.includes(val)) {
+            invidiousCustomInstances.push(val)
+            youtubeHelper.setInvidiousCustomRedirects(invidiousCustomInstances);
+        }
+        calcInvidiousCustomInstances();
+    }
+})

src/pages/options/youtube/piped.js

@@ -0,0 +1,94 @@
+import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
+
+youtubeHelper.init().then(() => {
+
+    pipedDefaultRedirects = youtubeHelper.getPipedRedirectsChecks();
+    pipedCheckListElement.innerHTML =
+        [
+            '<div>Toggle All<input type="checkbox" id="piped-toogle-all" /></div>',
+            ...youtubeHelper.getRedirects().piped.normal.map((x) => `<div>${x}<input type="checkbox" id="${x}" /></div>`),
+        ].join('\n<hr>\n');
+
+    calcPipedCheckBoxes();
+    document.getElementById('piped-toogle-all').addEventListener("change", (event) => {
+        if (event.target.checked)
+            pipedDefaultRedirects = [...youtubeHelper.getRedirects().piped.normal];
+        else
+            pipedDefaultRedirects = [];
+        youtubeHelper.setPipedRedirectsChecks(pipedDefaultRedirects);
+        calcPipedCheckBoxes();
+    });
+
+    for (let element of pipedCheckListElement.getElementsByTagName('input')) {
+        if (element.id != 'piped-toogle-all')
+            document.getElementById(element.id).addEventListener("change", (event) => {
+                if (event.target.checked)
+                    pipedDefaultRedirects.push(element.id)
+                else {
+                    let index = pipedDefaultRedirects.indexOf(element.id);
+                    if (index > -1) pipedDefaultRedirects.splice(index, 1);
+                }
+                youtubeHelper.setPipedRedirectsChecks(pipedDefaultRedirects);
+                calcPipedCheckBoxes();
+            });
+    }
+
+    pipedCustomInstances = youtubeHelper.getPipedCustomRedirects();
+    calcPipedCustomInstances();
+});
+
+
+let pipedCustomInstanceInput = document.getElementById("piped-custom-instance");
+let pipedCustomInstances = [];
+
+let pipedCheckListElement = document.getElementById("piped-checklist");
+
+let pipedDefaultRedirects;
+
+function calcPipedCheckBoxes() {
+    let isTrue = true;
+    for (const item of youtubeHelper.getRedirects().piped.normal)
+        if (!pipedDefaultRedirects.includes(item)) {
+            isTrue = false;
+            break;
+        }
+    for (const element of pipedCheckListElement.getElementsByTagName('input'))
+        element.checked = pipedDefaultRedirects.includes(element.id)
+    document.getElementById('piped-toogle-all').checked = isTrue;
+}
+
+function calcPipedCustomInstances() {
+    document.getElementById("piped-custom-checklist").innerHTML =
+        pipedCustomInstances.map(
+            (x) => `<div>${x}<button class="add" id="clear-${x}">
+                            <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 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>
+                    <hr>`
+        ).join('\n');
+
+    for (const item of pipedCustomInstances) {
+        document.getElementById(`clear-${item}`).addEventListener("click", () => {
+            let index = pipedCustomInstances.indexOf(item);
+            if (index > -1) pipedCustomInstances.splice(index, 1);
+            youtubeHelper.setPipedCustomRedirects(pipedCustomInstances);
+            calcPipedCustomInstances();
+        });
+    }
+}
+
+document.getElementById("custom-piped-instance-form").addEventListener("submit", (event) => {
+    event.preventDefault();
+    let val = pipedCustomInstanceInput.value
+    if (pipedCustomInstanceInput.validity.valid && !youtubeHelper.getRedirects().piped.normal.includes(val)) {
+        if (!pipedCustomInstances.includes(val)) {
+            pipedCustomInstances.push(val)
+            youtubeHelper.setPipedCustomRedirects(pipedCustomInstances);
+        }
+        calcPipedCustomInstances();
+    }
+})

src/pages/options/youtube/youtube.html

@@ -124,16 +124,13 @@
             <div class="some-block option-block">
                 <h4>Default Instances</h4>
             </div>
-            <div class="checklist" id="checklist">
+            <div class="checklist" id="invidious-checklist">
             </div>
-
             <hr>
-
             <div class="some-block option-block">
                 <h4>Custom Instances</h4>
             </div>
-
-            <form id="custom-instance-form">
+            <form id="custom-invidious-instance-form">
                 <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">
@@ -145,17 +142,41 @@
                     </button>
                 </div>
             </form>
-
-            <div class="checklist" id="custom-checklist"></div>
+            <div class="checklist" id="invidious-custom-checklist"></div>
 
         </div>
 
-        <div id="piped"></div>
+        <div id="piped">
+            <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>
+            <form id="custom-piped-instance-form">
+                <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>
+                </div>
+            </form>
+            <div class="checklist" id="piped-custom-checklist"></div>
+        </div>
 
     </section>
 
     <script type="module" src="../init.js"></script>
     <script type="module" src="./youtube.js"></script>
+    <script type="module" src="./invidious.js"></script>
+    <script type="module" src="./piped.js"></script>
     <!-- <script src="../../assets/javascripts/localise.js"></script> -->
 </body>
 

src/pages/options/youtube/youtube.js

@@ -1,5 +1,4 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
-import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableYoutubeElement = document.getElementById("disable-invidious");
 
@@ -41,11 +40,6 @@ invidiousThemeElement.addEventListener("change",
     (event) => youtubeHelper.setInvidiousTheme(event.target.options[invidiousThemeElement.selectedIndex].value)
 );
 
-let persistInvidiousPrefsElement = document.getElementById("persist-invidious-prefs");
-persistInvidiousPrefsElement.addEventListener("change",
-    (event) => youtubeHelper.setPersistInvidiousPrefs(event.target.checked)
-);
-
 let invidiousVolumeElement = document.getElementById("invidious-volume");
 let invidiousVolumeValueElement = document.querySelector("#volume-value");
 invidiousVolumeElement.addEventListener("input",
@@ -63,152 +57,25 @@ invidiousClearVolumeElement.addEventListener("click",
     }
 );
 
-let invidiousPlayerStyleElement = document.getElementById("invidious-player-style");
-invidiousPlayerStyleElement.addEventListener("change",
-    (event) => youtubeHelper.setInvidiousPlayerStyle(event.target.options[invidiousPlayerStyleElement.selectedIndex].value)
-);
-
-let invidiousSubtitlesElement = document.getElementById("invidious-subtitles");
-invidiousSubtitlesElement.addEventListener("change",
-    () => youtubeHelper.setInvidiousSubtitles(invidiousSubtitlesElement.value)
-);
 
 let invidiousAutoplayElement = document.getElementById("invidious-autoplay");
 invidiousAutoplayElement.addEventListener("change",
     (event) => youtubeHelper.setInvidiousAutoplay(event.target.options[invidiousAutoplayElement.selectedIndex].value)
 );
 
-let invidiousAlwaysProxyElement = document.getElementById("invidious-always-proxy");
-invidiousAlwaysProxyElement.addEventListener("change",
-    (event) => youtubeHelper.setInvidiousAlwaysProxy(event.target.options[invidiousAlwaysProxyElement.selectedIndex].value)
-);
-
 let invidiousOnlyEmbeddedVideoElement = document.getElementById("only-embed");
 invidiousOnlyEmbeddedVideoElement.addEventListener("change",
     (event) => youtubeHelper.setInvidiousOnlyEmbeddedVideo(event.target.checked)
 );
 
-let invidiousVideoQualityElement = document.getElementById("video-quality");
-invidiousVideoQualityElement.addEventListener("change",
-    (event) => youtubeHelper.setInvidiousVideoQuality(event.target.options[invidiousVideoQualityElement.selectedIndex].value)
-);
-
-
-let invidiousCheckListElement = document.getElementById("checklist");
-
-
-
 youtubeHelper.init().then(() => {
     disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube();
     invidiousThemeElement.checked = youtubeHelper.getInvidiousTheme();
-    persistInvidiousPrefsElement.checked = youtubeHelper.getPersistInvidiousPrefs();
     invidiousVolumeElement.value = youtubeHelper.getInvidiousVolume();
     invidiousVolumeValueElement.textContent = `${youtubeHelper.getInvidiousVolume()}%`;
-    invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle();
-    invidiousSubtitlesElement.value = youtubeHelper.getInvidiousSubtitles();
     invidiousOnlyEmbeddedVideoElement.checked = youtubeHelper.getInvidiousOnlyEmbeddedVideo();
-    invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
-    invidiousVideoQualityElement.value = youtubeHelper.getInvidiousVideoQuality();
     invidiousAutoplayElement.checked = youtubeHelper.getInvidiousAutoplay();
-    let frontend = youtubeHelper.getFrontend()
+    let frontend = youtubeHelper.getFrontend();
     youtubeFrontendElement.value = frontend;
-    invidiousCheckListElement.innerHTML =
-        [
-            '<div>Toggle All<input type="checkbox" id="invidious-toogle-all" /></div>',
-            ...youtubeHelper.getRedirects().invidious.normal.map(
-                (x) => `<div>${x}<input type="checkbox" id="${x}" /></div>`),
-        ].join('\n<hr>\n')
     changeFrontendsSettings(frontend);
-
-    let myMightyList = youtubeHelper.getInvidiousRedirectsChecks();
-
-    let checklistList = invidiousCheckListElement.getElementsByTagName('input')
-    for (let element of checklistList) {
-        element.checked = myMightyList.includes(element.id);
-        if (element.id == 'invidious-toogle-all')
-            document.getElementById('invidious-toogle-all').addEventListener("change", (event) => {
-                if (event.target.checked)
-                    for (let item of checklistList) {
-                        myMightyList.push(item.id);
-                        item.checked = true;
-                    }
-                else {
-                    myMightyList = [];
-                    for (let item of checklistList) item.checked = false;
-                }
-                youtubeHelper.setInvidiousRedirectsChecks(myMightyList);
-            });
-        else
-            document.getElementById(element.id).addEventListener("change", (event) => {
-                if (event.target.checked)
-                    myMightyList.push(element.id)
-                else {
-                    let index = myMightyList.indexOf(element.id);
-                    if (index > -1) myMightyList.splice(index, 1);
-                }
-                youtubeHelper.setInvidiousRedirectsChecks(myMightyList);
-                checkToggleAll();
-            });
-    }
-    checkToggleAll();
-
-    mightyInvidiousCustomInstances = youtubeHelper.getInvidiousCustomRedirects();
-    calcCustom();
-
 });
-
-function checkToggleAll() {
-    let isTrue = true;
-    for (const item of youtubeHelper.getRedirects().invidious.normal)
-        if (!myMightyList.includes(item)) {
-            isTrue = false;
-            break;
-        }
-    document.getElementById('invidious-toogle-all').checked = isTrue;
-}
-
-
-let invidiousCustomInstanceElement = document.getElementById("invidious-custom-instance")
-let mightyInvidiousCustomInstances = []
-let invidiousCustomCheckListElement = document.getElementById("custom-checklist");
-let customFormElement = document.getElementById("custom-instance-form");
-
-function calcCustom() {
-    invidiousCustomCheckListElement.innerHTML = [
-        ...mightyInvidiousCustomInstances.map(
-            (x) => `<div>${x}<button class="add" id="clear-${x}">
-                    <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 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>
-                    <hr>`),
-    ].join('\n');
-
-    for (const item of mightyInvidiousCustomInstances) {
-        let myButton = document.getElementById(`clear-${item}`);
-        myButton.addEventListener("click", () => {
-            let index = mightyInvidiousCustomInstances.indexOf(item);
-            if (index > -1) mightyInvidiousCustomInstances.splice(index, 1);
-            youtubeHelper.setInvidiousCustomRedirects(mightyInvidiousCustomInstances);
-            calcCustom();
-        });
-    }
-}
-
-customFormElement.addEventListener("submit", (event) => {
-    event.preventDefault();
-    if (invidiousCustomInstanceElement.validity.valid) {
-        let val = invidiousCustomInstanceElement.value
-        if (!mightyInvidiousCustomInstances.includes(val)) {
-            mightyInvidiousCustomInstances.push(val)
-            youtubeHelper.setInvidiousCustomRedirects(mightyInvidiousCustomInstances);
-        }
-        calcCustom();
-    }
-})
-
-