Piped/src/components/TrendingPage.vue

56 lines
1.7 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
2020-11-18 13:40:04 +00:00
style="background: #0b0e0f"
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"
>
2020-11-22 04:35:16 +00:00
<div class="uk-text-secondary" style="background: #0b0e0f">
<router-link class="uk-text-emphasis" v-bind:to="video.url || '/'">
<img style="width: 100%" v-bind:src="video.thumbnail" loading="lazy" />
2020-11-22 04:35:16 +00:00
<p>{{ video.title }}</p>
2020-11-17 05:15:35 +00:00
</router-link>
<router-link class="uk-link-muted" v-bind:to="video.uploaderUrl || '/'">
2020-11-17 05:15:35 +00:00
<p>{{ video.uploaderName }}</p>
</router-link>
2021-02-24 09:35:41 +00:00
<b class="uk-text-small uk-align-left">
2020-11-22 04:35:16 +00:00
<font-awesome-icon icon="eye"></font-awesome-icon>
{{ video.views }} views
2021-02-24 09:35:41 +00:00
<br />
{{ video.uploadedDate }}
</b>
<b class="uk-text-small uk-align-right">
{{ timeFormat(video.duration) }}
2020-11-22 04:35:16 +00:00
</b>
2020-11-17 05:15:35 +00:00
</div>
</div>
</div>
</template>
<script>
import Constants from "@/Constants.js";
export default {
data() {
return {
videos: [],
2020-11-17 05:15:35 +00:00
};
},
mounted() {
document.title = "Trending - Piped";
this.fetchTrending().then(videos => (this.videos = videos));
},
methods: {
async fetchTrending() {
2021-02-24 09:35:41 +00:00
return await this.fetchJson(Constants.BASE_URL + "/trending");
},
},
2020-11-17 05:15:35 +00:00
};
</script>