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 16/10/2022

Browse source 
- Replaced width to min-width in App.vue to fix handleScroll() function
- Reduced videoStep number to 30 as 100 seems unnecessary and thus loads eager content and also reduces server load, (by not loading eager image), but idk the exact number so -- yea.
- Removed custom instance modal to reduce redundancy and to activate reactivity (so that people doesn't need to reload everytime they add/remove a custom instance)
This commit is contained in:
SubTeno 2022-10-16 06:49:08 +00:00
parent 30c65c96a6
commit c9a02df8a7
4 changed files with 93 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/App.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="flex flex-col h-[calc(100vh_-_32rem)] justify-between">
<div class="flex flex-col min-h-[calc(100vh_-_32rem)] justify-between">
<div>
<NavBar />
<div class="pp-base reset">

107
src/components/CustomInstanceModal.vue
View file

@ -1,107 +0,0 @@
<template>
<ModalComponent>
<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, index) in customInstances"
:key="index"
: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
v-model="name"
class="input w-full"
type="text"
:placeholder="'Name'"
:aria-label="'Name'"
v-on:keyup.enter="add($event)"
/>
</div>
<div>
<input
v-model="url"
class="input w-full"
type="text"
:placeholder="'Instance Api URL'"
:aria-label="'Instance Api URL'"
v-on:keyup.enter="add($event)"
/>
</div>
<div class="flex justify-end">
<button @click="add($event)" v-t="'Add'" />
</div>
</form>
</div>
</ModalComponent>
</template>
<script>
import ModalComponent from "./ModalComponent.vue";
const isUrl = string => {
try {
return Boolean(new URL(string));
} catch (e) {
return false;
}
};
export default {
data() {
return {
customInstances: [],
};
},
mounted() {
if (this.testLocalStorage) {
if (localStorage.getItem("custominstances") === null) {
localStorage.setItem("custominstances", "[]");
}
this.customInstances = JSON.parse(localStorage.getItem("custominstances"));
}
},
methods: {
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("custominstances", JSON.stringify(this.customInstances));
})
.catch(() => {
alert("Cannot find URL");
return;
});
}
},
remove() {
if (this.testLocalStorage) {
this.customInstances.splice(this.selectedInstance, 1);
localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
location.reload();
}
},
},
components: { ModalComponent },
};
</script>

2
src/components/FeedPage.vue
View file

@ -32,7 +32,7 @@ export default {
data() {
return {
currentVideoCount: 0,
videoStep: 100,
videoStep: 30,
videosStore: [],
videos: [],
};

94
src/components/PreferencesPage.vue
View file

@ -386,12 +386,55 @@
</tr>
</tbody>
</table>
<CustomInstanceModal v-if="showmodal" @close="showmodal = !showmodal" />
<ModalComponent v-if="showmodal" @close="showmodal = !showmodal">
<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, index) in customInstances"
:key="index"
:value="index"
v-text="instance.name"
/>
</select>
<div class="flex justify-end">
<button @click="removeInstance" v-t="'Remove'" />
</div>
</div>
<form class="children:pb-3">
<div>
<input
v-model="name"
class="input w-full"
type="text"
:placeholder="'Name'"
:aria-label="'Name'"
v-on:keyup.enter="addInstance($event)"
/>
</div>
<div>
<input
v-model="url"
class="input w-full"
type="text"
:placeholder="'Instance Api URL'"
:aria-label="'Instance Api URL'"
v-on:keyup.enter="addInstance($event)"
/>
</div>
<div class="flex justify-end">
<button @click="addInstance($event)" v-t="'Add'" />
</div>
</form>
</div>
</ModalComponent>
</template>
<script>
import CountryMap from "@/utils/CountryMaps/en.json";
import CustomInstanceModal from "./CustomInstanceModal.vue";
import ModalComponent from "./ModalComponent.vue";
export default {
data() {
return {
@ -509,6 +552,10 @@ export default {
this.authInstance = this.getPreferenceBoolean("authInstance", false);
this.selectedAuthInstance = this.getPreferenceString("auth_instance_url", this.selectedInstance);
this.sponsorBlock = this.getPreferenceBoolean("sponsorblock", true);
if (localStorage.getItem("custominstances") === null) {
localStorage.setItem("custominstances", "[]");
}
this.customInstances = JSON.parse(localStorage.getItem("custominstances"));
if (localStorage.getItem("selectedSkip") !== null) {
var skipList = localStorage.getItem("selectedSkip").split(",");
this.skipSponsor =
@ -585,7 +632,49 @@ export default {
}
}
},
components: { ModalComponent },
methods: {
removeInstance() {
if (this.testLocalStorage) {
this.customInstances.splice(this.selectedInstance, 1);
localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
location.reload();
}
},
isUrl(string) {
try {
return Boolean(new URL(string));
} catch (e) {
return false;
}
},
addInstance(event) {
event.preventDefault();
if (this.testLocalStorage) {
if (!this.isUrl(this.url)) {
alert("Not a valid URL");
return;
}
const newInstance = {
name: this.name,
api_url: this.url,
};
fetch(this.url + "/healthcheck")
.then(res => {
if (!res.ok) {
alert("Error Backend URL");
return;
}
this.customInstances.push(newInstance);
this.instances.push(newInstance);
localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
})
.catch(() => {
alert("Cannot find URL");
return;
});
}
},
async onChange() {
if (this.testLocalStorage) {
var shouldReload = false;
@ -691,7 +780,6 @@ export default {
});
},
},
components: { CustomInstanceModal },
};
</script>