diff --git a/src/components/CustomInstanceModal.vue b/src/components/CustomInstanceModal.vue
index 69975308..056c6bc0 100644
--- a/src/components/CustomInstanceModal.vue
+++ b/src/components/CustomInstanceModal.vue
@@ -3,16 +3,18 @@
-
-
@@ -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;
}
- this.customInstances.push({
- name: this.name,
- api_url: this.url,
- });
- localStorage.setItem("custominstance", JSON.stringify(this.customInstances));
+ 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("custominstances", JSON.stringify(this.customInstances));
+ })
+ .catch(() => {
+ alert("Cannot find URL");
+ return;
+ });
}
},
remove() {
if (this.testLocalStorage) {
- this.customInstances.splice(this.selectedInstance);
- localStorage.setItem("custominstance", JSON.stringify(this.customInstances));
- window.location = "/preferences";
+ this.customInstances.splice(this.selectedInstance, 1);
+ localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
+ location.reload();
}
},
},
diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 1286e96e..bf7c6fcc 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -483,28 +483,26 @@ export default {
},
async mounted() {
if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} });
- this.customInstances = JSON.parse(localStorage.getItem("custominstance"));
- this.fetchJson("https://piped-instances.kavin.rocks/")
- .then(resp => {
- this.instances = resp;
- if (this.customInstances != null)
- this.customInstances.forEach(cusinstance => {
- this.instances.push(cusinstance);
- });
- if (this.instances.filter(instance => instance.api_url == this.apiUrl()).length == 0)
- this.instances.push({
+ this.customInstances = JSON.parse(localStorage.custominstances);
+ this.fetchJson("https://piped-instances.kavin.rocks/").then(resp => {
+ this.instances = resp;
+ if (this.customInstances != null) {
+ this.instances.push(...this.customInstances);
+ }
+ if (this.instances.filter(instance => instance.api_url == this.apiUrl()).length == 0)
+ this.instances
+ .push({
name: "Custom Instance",
api_url: this.apiUrl(),
locations: "Unknown",
cdn: false,
+ })
+ .catch(() => {
+ if (this.customInstances != null) {
+ this.instances.push(...this.customInstances);
+ }
});
- })
- .catch(() => {
- if (this.customInstances != null)
- this.customInstances.forEach(cusinstance => {
- this.instances.push(cusinstance);
- });
- });
+ });
if (this.testLocalStorage) {
this.selectedInstance = this.getPreferenceString("instance", "https://pipedapi.kavin.rocks");
diff --git a/src/piped.css b/src/piped.css
index 5b201393..768ebc4c 100644
--- a/src/piped.css
+++ b/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}