Piped/src/components/TrendingPage.vue

47 lines
1.1 KiB
Vue
Raw Normal View History

2020-11-17 05:15:35 +00:00
<template>
<h1 class="uk-text-bold uk-text-center">Trending</h1>
<hr />
2020-11-22 04:35:16 +00:00
<div class="uk-grid-xl" uk-grid="parallax: 0">
2020-11-17 05:15:35 +00:00
<div
:style="[{ background: backgroundColor }]"
2020-11-18 13:40:04 +00:00
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"
2020-11-17 05:15:35 +00:00
v-bind:key="video.url"
v-for="video in videos"
>
2021-06-16 19:14:46 +00:00
<VideoItem :video="video" height="118" width="210" />
2020-11-17 05:15:35 +00:00
</div>
</div>
</template>
<script>
2021-06-16 19:14:46 +00:00
import VideoItem from "@/components/VideoItem.vue";
2020-11-17 05:15:35 +00:00
export default {
data() {
return {
videos: [],
2020-11-17 05:15:35 +00:00
};
},
mounted() {
let region = this.getPreferenceString("region", "US");
this.fetchTrending(region).then(videos => (this.videos = videos));
2020-11-17 05:15:35 +00:00
},
activated() {
document.title = "Trending - Piped";
},
2020-11-17 05:15:35 +00:00
methods: {
async fetchTrending(region) {
return await this.fetchJson(this.apiUrl() + "/trending", {
region: region || "US",
});
},
},
2021-06-16 19:14:46 +00:00
components: {
VideoItem,
},
2020-11-17 05:15:35 +00:00
};
</script>