Update

- Fixed custom instance feature bug.
- Added v-if to remove custom instance form
- Tightened and improved URL validation custom instance even more.
- Widen content width (lessening LR margin)

src/components/CustomInstanceModal.vue

@@ -3,17 +3,19 @@
         <h3 v-t="'Custom Instance'" class="font-bold my-4" />
         <hr />
         <div class="text-center">
+            <div v-if="customInstances.length" class="remove">
                 <select v-model="selectedInstance">
                     <option
-                    v-for="(instance, pointer) in customInstances"
+                        v-for="(instance, index) in customInstances"
-                    :key="pointer"
+                        :key="index"
-                    :value="pointer"
+                        :value="index"
                         v-text="instance.name"
                     />
                 </select>
                 <div class="flex justify-end">
                     <button @click="remove" v-t="'Remove'" />
                 </div>
+            </div>
             <form class="children:pb-3">
                 <div>
                     <input
@@ -22,7 +24,7 @@
                         type="text"
                         :placeholder="'Name'"
                         :aria-label="'Name'"
-                        v-on:keyup.enter="add"
+                        v-on:keyup.enter="add($event)"
                     />
                 </div>
                 <div>
@@ -32,11 +34,11 @@
                         type="text"
                         :placeholder="'Instance Api URL'"
                         :aria-label="'Instance Api URL'"
-                        v-on:keyup.enter="add"
+                        v-on:keyup.enter="add($event)"
                     />
                 </div>
                 <div class="flex justify-end">
-                    <button @click="add" v-t="'Add'" />
+                    <button @click="add($event)" v-t="'Add'" />
                 </div>
             </form>
         </div>
@@ -67,24 +69,36 @@ export default {
         }
     },
     methods: {
-        add() {
+        add(event) {
+            event.preventDefault();
             if (this.testLocalStorage) {
                 if (!isUrl(this.url)) {
                     alert("Not a valid URL");
                     return;
                 }
+                fetch(this.url + "/healthcheck")
+                    .then(res => {
+                        if (!res.ok) {
+                            alert("Error Backend URL");
+                            return;
+                        }
                         this.customInstances.push({
                             name: this.name,
                             api_url: this.url,
                         });
-                localStorage.setItem("custominstance", JSON.stringify(this.customInstances));
+                        localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
+                    })
+                    .catch(() => {
+                        alert("Cannot find URL");
+                        return;
+                    });
             }
         },
         remove() {
             if (this.testLocalStorage) {
-                this.customInstances.splice(this.selectedInstance);
+                this.customInstances.splice(this.selectedInstance, 1);
-                localStorage.setItem("custominstance", JSON.stringify(this.customInstances));
+                localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
-                window.location = "/preferences";
+                location.reload();
             }
         },
     },

src/components/PreferencesPage.vue

@@ -483,26 +483,24 @@ export default {
     },
     async mounted() {
         if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} });
-        this.customInstances = JSON.parse(localStorage.getItem("custominstance"));
+        this.customInstances = JSON.parse(localStorage.custominstances);
-        this.fetchJson("https://piped-instances.kavin.rocks/")
+        this.fetchJson("https://piped-instances.kavin.rocks/").then(resp => {
-            .then(resp => {
             this.instances = resp;
-                if (this.customInstances != null)
+            if (this.customInstances != null) {
-                    this.customInstances.forEach(cusinstance => {
+                this.instances.push(...this.customInstances);
-                        this.instances.push(cusinstance);
+            }
-                    });
             if (this.instances.filter(instance => instance.api_url == this.apiUrl()).length == 0)
-                    this.instances.push({
+                this.instances
+                    .push({
                         name: "Custom Instance",
                         api_url: this.apiUrl(),
                         locations: "Unknown",
                         cdn: false,
-                    });
                     })
                     .catch(() => {
-                if (this.customInstances != null)
+                        if (this.customInstances != null) {
-                    this.customInstances.forEach(cusinstance => {
+                            this.instances.push(...this.customInstances);
-                        this.instances.push(cusinstance);
+                        }
                     });
         });
 

src/piped.css

@@ -2,7 +2,7 @@
 
 /*End of EFY Template - Documentation on how to use it coming soon at https://efy.ooo/ui . Your own css starts bellow*/
 
-/*Base*/ .pp-base {margin: 0 auto; width: 80vw;}
+/*Base*/ .pp-base {margin: 0 auto; width: 88vw;}
 /*BG: Transparent*/ .video-grid div div, .pp-show-recs div div {background: transparent}
 /*BG 1*/ .comment, .video-grid div, .pp-show-recs div, .pp-mobile-nav a, .pp-mobile-nav p, .suggestion-selected, .pp-chapters .chapter:not(.pp-chapter-active, .chapter:hover), .pp-chapters [title=chapters] {background: var(--efy_bg1)}
 /*Bold*/ .btn {font-weight: bold}