mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 10:18:23 +00:00
Componentize video sorting functionality
This commit is contained in:
parent
53197b5e2d
commit
f576ca74d1
@ -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)
|
||||
|
@ -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
44
src/components/Sorting.vue
Normal 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>
|
Loading…
Reference in New Issue
Block a user