readded default and custom instances. Needs some work

2 files changed, 140 insertions, 1 deletions

diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index d13da9cc..a9bb6c63 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/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>
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index f4caf923..595006fd 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/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();
+    }
+})