Piped/src/components/Playlist.vue

95 lines
3.0 KiB
Vue
Raw Normal View History

<template>
<ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
<div v-if="playlist" v-show="!playlist.error">
2021-12-27 16:29:25 +00:00
<h1 class="text-center" v-text="playlist.name" />
2021-12-27 14:46:22 +00:00
<div class="grid grid-cols-2">
<div>
2021-12-27 16:29:25 +00:00
<strong>
<router-link class="uk-text-justify" :to="playlist.uploaderUrl || '/'">
2021-12-27 14:46:26 +00:00
<img :src="playlist.uploaderAvatar" loading="lazy" class="rounded-full" />
2021-12-27 16:29:25 +00:00
<span v-text="playlist.uploader" />
</router-link>
</strong>
2021-12-27 14:46:22 +00:00
</div>
<div>
<div class="right-2vw absolute">
2021-12-27 16:29:25 +00:00
<strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
2021-12-27 14:46:22 +00:00
<br />
2021-12-27 22:33:55 +00:00
<a :href="getRssUrl">
<font-awesome-icon icon="rss" />
</a>
2021-12-27 14:46:22 +00:00
</div>
</div>
2021-07-04 18:57:57 +00:00
</div>
<hr />
2021-12-27 14:46:22 +00:00
<div class="video-grid">
<VideoItem
v-for="video in playlist.relatedStreams"
:key="video.url"
:video="video"
height="94"
width="168"
/>
</div>
</div>
</template>
<script>
import ErrorHandler from "@/components/ErrorHandler.vue";
2021-06-16 19:14:46 +00:00
import VideoItem from "@/components/VideoItem.vue";
export default {
components: {
ErrorHandler,
VideoItem,
},
data() {
return {
playlist: null,
};
},
computed: {
getRssUrl: _this => {
return _this.apiUrl() + "/rss/playlists/" + _this.$route.query.list;
},
},
mounted() {
this.getPlaylistData();
},
activated() {
window.addEventListener("scroll", this.handleScroll);
},
deactivated() {
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
async fetchPlaylist() {
return await await this.fetchJson(this.apiUrl() + "/playlists/" + this.$route.query.list);
},
async getPlaylistData() {
this.fetchPlaylist()
.then(data => (this.playlist = data))
.then(() => (document.title = this.playlist.name + " - Piped"));
},
handleScroll() {
if (this.loading || !this.playlist || !this.playlist.nextpage) return;
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
this.loading = true;
this.fetchJson(this.apiUrl() + "/nextpage/playlists/" + this.$route.query.list, {
nextpage: this.playlist.nextpage,
}).then(json => {
2021-02-24 09:35:41 +00:00
this.playlist.relatedStreams.concat(json.relatedStreams);
this.playlist.nextpage = json.nextpage;
this.loading = false;
json.relatedStreams.map(stream => this.playlist.relatedStreams.push(stream));
2021-02-24 09:35:41 +00:00
});
}
},
},
};
</script>