TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update

Browse source 
- 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)
This commit is contained in:
SubTeno 2022-10-15 00:53:28 +00:00
parent 342bed1f13
commit b3342f848a
3 changed files with 52 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/components/CustomInstanceModal.vue
View file

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

32
src/components/PreferencesPage.vue
View file

@ -483,28 +483,26 @@ export default {
}, },
async mounted() { async mounted() {
if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} }); 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;
this.instances = resp; if (this.customInstances != null) {
if (this.customInstances != null) this.instances.push(...this.customInstances);
this.customInstances.forEach(cusinstance => { }
this.instances.push(cusinstance); if (this.instances.filter(instance => instance.api_url == this.apiUrl()).length == 0)
}); this.instances
if (this.instances.filter(instance => instance.api_url == this.apiUrl()).length == 0) .push({
this.instances.push({
name: "Custom Instance", name: "Custom Instance",
api_url: this.apiUrl(), api_url: this.apiUrl(),
locations: "Unknown", locations: "Unknown",
cdn: false, 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) { if (this.testLocalStorage) {
this.selectedInstance = this.getPreferenceString("instance", "https://pipedapi.kavin.rocks"); this.selectedInstance = this.getPreferenceString("instance", "https://pipedapi.kavin.rocks");

2
src/piped.css
View file

@ -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*/ /*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: 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)} /*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} /*Bold*/ .btn {font-weight: bold}