kavin/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-12-13 22:00:28 +05:30
Code Issues Projects Releases Wiki Activity

Componentize video sorting functionality

Browse Source
This commit is contained in:
Tomasz Rymkiewicz 2021-12-28 00:34:59 +01:00 committed by FireMasterK
parent 53197b5e2d
commit f576ca74d1
No known key found for this signature in database
GPG Key ID: 49451E4482CC5BCD
3 changed files with 50 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/FeedPage.vue
View File

@ -12,13 +12,7 @@
</span>
<span class="md:float-right">
<label for="ddlSortBy" v-text="$t('actions.sort_by')" />
<select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()">
<option v-t="'actions.most_recent'" value="descending" />
<option v-t="'actions.least_recent'" value="ascending" />
<option v-t="'actions.channel_name_asc'" value="channel_ascending" />
<option v-t="'actions.channel_name_desc'" value="channel_descending" />
</select>
<Sorting by-key="uploaded" @apply="order => videos.sort(order)" />
</span>
<hr />
@ -30,10 +24,12 @@
<script>
import VideoItem from "@/components/VideoItem.vue";
import Sorting from "@/components/Sorting.vue";
export default {
components: {
VideoItem,
Sorting,
},
data() {
return {
@ -41,7 +37,6 @@ export default {
videoStep: 100,
videosStore: [],
videos: [],
selectedSort: "descending",
};
},
computed: {
@ -73,22 +68,6 @@ export default {
authToken: this.getAuthToken(),
});
},
onChange() {
switch (this.selectedSort) {
case "ascending":
this.videos.sort((a, b) => a.uploaded - b.uploaded);
break;
case "descending":
this.videos.sort((a, b) => b.uploaded - a.uploaded);
break;
case "channel_ascending":
this.videos.sort((a, b) => a.uploaderName.localeCompare(b.uploaderName));
break;
case "channel_descending":
this.videos.sort((a, b) => b.uploaderName.localeCompare(a.uploaderName));
break;
}
},
loadMoreVideos() {
this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);
if (this.videos.length != this.videosStore.length)

27
src/components/HistoryPage.vue
View File

@ -6,13 +6,7 @@
</div>
<div style="text-align: right">
<label for="ddlSortBy" v-text="$t('actions.sort_by')" />
<select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()">
<option v-t="'actions.most_recent'" value="descending" />
<option v-t="'actions.least_recent'" value="ascending" />
<option v-t="'actions.channel_name_asc'" value="channel_ascending" />
<option v-t="'actions.channel_name_desc'" value="channel_descending" />
</select>
<Sorting by-key="watchedAt" @apply="order => videos.sort(order)" />
</div>
<hr />
@ -26,15 +20,16 @@
<script>
import VideoItem from "@/components/VideoItem.vue";
import Sorting from "@/components/Sorting.vue";
export default {
components: {
VideoItem,
Sorting,
},
data() {
return {
videos: [],
selectedSort: "descending",
};
},
mounted() {
@ -67,22 +62,6 @@ export default {
document.title = "Watch History - Piped";
},
methods: {
onChange() {
switch (this.selectedSort) {
case "ascending":
this.videos.sort((a, b) => a.watchedAt - b.watchedAt);
break;
case "descending":
this.videos.sort((a, b) => b.watchedAt - a.watchedAt);
break;
case "channel_ascending":
this.videos.sort((a, b) => a.uploaderName.localeCompare(b.uploaderName));
break;
case "channel_descending":
this.videos.sort((a, b) => b.uploaderName.localeCompare(a.uploaderName));
break;
}
},
clearHistory() {
if (window.db) {
var tx = window.db.transaction("watch_history", "readwrite");

44
src/components/Sorting.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<label for="ddlSortBy" v-text="$t('actions.sort_by')" />
<select id="ddlSortBy" v-model="selectedSort" class="select w-auto">
<option v-for="(value, key) in options" v-t="`actions.${key}`" :key="key" :value="value" />
</select>
</template>
<script setup>
import { defineEmits, defineProps, ref, watch } from "vue";
const options = {
most_recent: "descending",
least_recent: "ascending",
channel_name_asc: "channel_ascending",
channel_name_desc: "channel_descending",
};
const selectedSort = ref("descending");
const props = defineProps({
byKey: String,
});
const emit = defineEmits(["apply"]);
watch(selectedSort, value => {
switch (value) {
case "ascending":
emit("apply", (a, b) => a[props.byKey] - b[props.byKey]);
break;
case "descending":
emit("apply", (a, b) => b[props.byKey] - a[props.byKey]);
break;
case "channel_ascending":
emit("apply", (a, b) => a.uploaderName.localeCompare(b.uploaderName));
break;
case "channel_descending":
emit("apply", (a, b) => b.uploaderName.localeCompare(a.uploaderName));
break;
default:
console.error("Unexpected sort value");
}
});
</script>