readded default and custom instances. Needs some work

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

@@ -61,6 +61,22 @@ function setInvidiousRedirects(val) {
   console.log("invidiousRedirects: ", val)
 }
 
+let invidiousRedirectsChecks = redirects.invidious.normal;
+const getInvidiousRedirectsChecks = () => invidiousRedirectsChecks;
+function setInvidiousRedirectsChecks(val) {
+  invidiousRedirectsChecks = val;
+  browser.storage.sync.set({ invidiousRedirectsChecks })
+  console.log("invidiousRedirectsChecks: ", val)
+}
+
+let invidiousCustomRedirects = [];
+const getInvidiousCustomRedirects = () => invidiousCustomRedirects;
+function setInvidiousCustomRedirects(val) {
+  invidiousCustomRedirects = val;
+  browser.storage.sync.set({ invidiousCustomRedirects })
+  console.log("invidiousCustomRedirects: ", val)
+}
+
 function setPipedRedirects(val) {
   redirects.piped = val;
   browser.storage.sync.set({ youtubeRedirects: redirects })
@@ -147,7 +163,6 @@ function setInvidiousAutoplay(val) {
   console.log("invidiousAutoplay: ", invidiousAutoplay)
 }
 
-
 let frontend;
 const getFrontend = () => frontend;
 function setFrontend(val) {
@@ -201,8 +216,15 @@ async function init() {
       "invidiousAutoplay",
       "youtubeRedirects",
       "youtubeFrontend",
+      "invidiousRedirectsChecks",
+      "invidiousCustomRedirects",
     ]);
   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;
 
@@ -218,6 +240,8 @@ async function init() {
   invidiousAutoplay = result.invidiousAutoplay ?? 'DEFAULT';
 
   persistInvidiousPrefs = result.persistInvidiousPrefs ?? false;
+
+
 }
 
 function invidiousInitCookies(tabId) {
@@ -262,7 +286,7 @@ 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(redirects.invidious.normal)
+    let randomInstance = commonHelper.getRandomInstance([...invidiousRedirectsChecks, ...invidiousCustomRedirects])
 
     return `${randomInstance}${url.pathname.replace("/shorts/", "/watch?v=")}${url.search}`;
 
@@ -270,7 +294,6 @@ function redirect(url, initiator, type) {
 
     if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null;
 
-    
     if (invidiousTheme != "DEFAULT") url.searchParams.append("theme", invidiousTheme);
     if (invidiousVolume != "--") url.searchParams.append("volume", invidiousVolume / 100);
     if (invidiousAutoplay != "DEFAULT") url.searchParams.append("playerAutoPlay", invidiousAutoplay);
@@ -333,5 +356,11 @@ export default {
   getPersistInvidiousPrefs,
   setPersistInvidiousPrefs,
 
+  getInvidiousRedirectsChecks,
+  setInvidiousRedirectsChecks,
+
+  getInvidiousCustomRedirects,
+  setInvidiousCustomRedirects,
+
   init,
 };

src/pages/options/youtube/youtube.html

@@ -129,13 +129,44 @@
 
             <div class="some-block option-block">
                 <h4>Subtitles</h4>
-                <input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" />
+                <input id="invidious-subtitles" placeholder="en, ar, es" type="text" />
             </div>
 
             <div class="some-block option-block">
                 <h4>Persist preferences (as cookie)</h4>
                 <input id="persist-invidious-prefs" type="checkbox" checked />
             </div>
+
+            <hr>
+
+            <div class="some-block option-block">
+                <h4>Default Instances</h4>
+            </div>
+            <div class="checklist" id="checklist">
+            </div>
+
+            <hr>
+
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+
+
+            <form id="custom-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">
+                        <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="custom-checklist"></div>
+
         </div>
 
         <div id="piped"></div>

src/pages/options/youtube/youtube.js

@@ -96,6 +96,10 @@ invidiousVideoQualityElement.addEventListener("change",
 );
 
 
+let invidiousCheckListElement = document.getElementById("checklist");
+
+
+
 youtubeHelper.init().then(() => {
     disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube();
     invidiousThemeElement.checked = youtubeHelper.getInvidiousTheme();
@@ -110,10 +114,114 @@ youtubeHelper.init().then(() => {
     invidiousAutoplayElement.checked = youtubeHelper.getInvidiousAutoplay();
     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();
+
+    function checkToggleAll() {
+        console.log("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 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();
+
 });
 
 
-
+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();
+    }
+})
 
 

src/pages/stylesheets/styles.css

@@ -48,7 +48,6 @@ input[type="text"],
 select {
   padding: 5px 10px;
   width: 400px;
-  margin: auto;
   border-radius: 3px;
   box-sizing: border-box;
   margin-bottom: var(--space);
@@ -448,10 +447,29 @@ button.default {
   cursor: pointer;
 }
 
-button.default svg {
+button svg {
   color: var(--text);
 }
 
+div.checklist div {
+  justify-content: space-between;
+  margin: 5px 15px;
+  padding: 10px 0;
+  /* border-bottom: 2px solid rgb(77, 77, 77); */
+  display: flex;
+}
+
+
+button.add {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+  display: inline-block;
+  cursor: pointer;
+}
+
 @media (prefers-color-scheme: light) {
   body {
     --text: #000;