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

Add load more logic to feeds

Browse source
This commit is contained in:
Karlis Cudars 2021-09-11 14:25:41 +03:00
parent 4ab421fa20
commit ed35546f75
1 changed files with 15 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/FeedPage.vue
View file

@ -17,7 +17,7 @@
<a :href="getRssUrl"><font-awesome-icon icon="rss" style="padding-top: 0.2rem"></font-awesome-icon></a> <a :href="getRssUrl"><font-awesome-icon icon="rss" style="padding-top: 0.2rem"></font-awesome-icon></a>
</span> </span>
<span class="uk-align-right"> <span class="uk-align-right@m">
<label for="ddlSortBy">{{ $t("actions.sort_by") }}</label> <label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
<select id="ddlSortBy" class="uk-select uk-width-auto" v-model="selectedSort" @change="onChange()"> <select id="ddlSortBy" class="uk-select uk-width-auto" v-model="selectedSort" @change="onChange()">
<option value="descending" v-t="'actions.most_recent'" /> <option value="descending" v-t="'actions.most_recent'" />
@ -32,13 +32,17 @@
<div class="uk-grid-xl" uk-grid="parallax: 0"> <div class="uk-grid-xl" uk-grid="parallax: 0">
<div <div
:style="[{ background: backgroundColor }]" :style="[{ background: backgroundColor }]"
class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl" class="uk-width-1-1 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
v-bind:key="video.url" v-bind:key="video.url"
v-for="video in videos" v-for="video in videos"
> >
<VideoItem :video="video" /> <VideoItem :video="video" />
</div> </div>
</div> </div>
<br />
<br />
<div class="uk-button uk-button-small uk-align-center" @click="loadMoreVideos()">Load More</div>
</template> </template>
<script> <script>
@ -47,13 +51,17 @@ import VideoItem from "@/components/VideoItem.vue";
export default { export default {
data() { data() {
return { return {
currentVideoCount: 0,
videoStep: 100,
videosStore: [],
videos: [], videos: [],
selectedSort: "descending", selectedSort: "descending",
}; };
}, },
mounted() { mounted() {
this.fetchFeed().then(videos => { this.fetchFeed().then(videos => {
this.videos = videos; this.videosStore = videos;
this.loadMoreVideos()
this.updateWatched(this.videos); this.updateWatched(this.videos);
}); });
}, },
@ -83,6 +91,10 @@ export default {
break; break;
} }
}, },
loadMoreVideos() {
this.currentVideoCount = this.currentVideoCount + this.videoStep
this.videos = this.videosStore.slice(0, this.currentVideoCount);
},
}, },
computed: { computed: {
getRssUrl(_this) { getRssUrl(_this) {