2021-01-04 11:18:18 +05:30
|
|
|
<template>
|
2021-06-07 00:17:43 +05:30
|
|
|
<ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
|
|
|
|
|
|
|
|
<div v-if="playlist" v-show="!playlist.error">
|
2022-07-22 02:21:41 +05:30
|
|
|
<h1 class="text-center my-4" v-text="playlist.name" />
|
2021-01-04 11:18:18 +05:30
|
|
|
|
2021-12-27 20:16:22 +05:30
|
|
|
<div class="grid grid-cols-2">
|
|
|
|
<div>
|
2022-01-12 16:57:08 +05:30
|
|
|
<router-link class="link" :to="playlist.uploaderUrl || '/'">
|
2021-12-28 06:43:55 +05:30
|
|
|
<img :src="playlist.uploaderAvatar" loading="lazy" class="rounded-full" />
|
|
|
|
<strong v-text="playlist.uploader" />
|
|
|
|
</router-link>
|
2021-12-27 20:16:22 +05:30
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div class="right-2vw absolute">
|
2021-12-27 21:59:25 +05:30
|
|
|
<strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
|
2021-12-27 20:16:22 +05:30
|
|
|
<br />
|
2022-07-22 02:21:41 +05:30
|
|
|
<button class="btn mr-1" v-if="authenticated && !isPipedPlaylist" @click="clonePlaylist">
|
|
|
|
{{ $t("actions.clone_playlist") }}<font-awesome-icon class="ml-3" icon="clone" />
|
|
|
|
</button>
|
|
|
|
<a class="btn" :href="getRssUrl">
|
2021-12-28 04:03:55 +05:30
|
|
|
<font-awesome-icon icon="rss" />
|
|
|
|
</a>
|
2021-12-27 20:16:22 +05:30
|
|
|
</div>
|
|
|
|
</div>
|
2021-07-05 00:27:57 +05:30
|
|
|
</div>
|
2021-01-04 11:18:18 +05:30
|
|
|
|
|
|
|
<hr />
|
|
|
|
|
2021-12-27 20:16:22 +05:30
|
|
|
<div class="video-grid">
|
2021-12-27 20:16:39 +05:30
|
|
|
<VideoItem
|
2022-04-07 08:03:25 +05:30
|
|
|
v-for="(video, index) in playlist.relatedStreams"
|
2021-12-27 20:16:39 +05:30
|
|
|
:key="video.url"
|
|
|
|
:video="video"
|
2022-04-07 08:03:25 +05:30
|
|
|
:index="index"
|
|
|
|
:playlist-id="$route.query.list"
|
|
|
|
:admin="admin"
|
|
|
|
@remove="removeVideo(index)"
|
2021-12-27 20:16:39 +05:30
|
|
|
height="94"
|
|
|
|
width="168"
|
|
|
|
/>
|
2021-01-04 11:18:18 +05:30
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2022-04-08 21:16:49 +05:30
|
|
|
import ErrorHandler from "./ErrorHandler.vue";
|
|
|
|
import VideoItem from "./VideoItem.vue";
|
2021-01-04 11:18:18 +05:30
|
|
|
|
|
|
|
export default {
|
2021-10-09 00:22:51 +05:30
|
|
|
components: {
|
|
|
|
ErrorHandler,
|
|
|
|
VideoItem,
|
|
|
|
},
|
2021-01-04 11:18:18 +05:30
|
|
|
data() {
|
|
|
|
return {
|
2021-04-07 17:15:40 +05:30
|
|
|
playlist: null,
|
2022-04-07 08:03:25 +05:30
|
|
|
admin: false,
|
2021-01-04 11:18:18 +05:30
|
|
|
};
|
|
|
|
},
|
2021-10-09 00:22:51 +05:30
|
|
|
computed: {
|
|
|
|
getRssUrl: _this => {
|
2022-07-21 09:34:57 +05:30
|
|
|
return _this.authApiUrl() + "/rss/playlists/" + _this.$route.query.list;
|
2021-10-09 00:22:51 +05:30
|
|
|
},
|
2022-07-22 02:21:41 +05:30
|
|
|
isPipedPlaylist() {
|
|
|
|
// FIXME: this checks whether it's a YouTube or a Piped playlist
|
|
|
|
return this.$route.query.list.includes("-");
|
|
|
|
},
|
2021-10-09 00:22:51 +05:30
|
|
|
},
|
2021-01-04 11:18:18 +05:30
|
|
|
mounted() {
|
|
|
|
this.getPlaylistData();
|
2022-04-07 08:03:25 +05:30
|
|
|
const playlistId = this.$route.query.list;
|
|
|
|
if (this.authenticated && playlistId?.length == 36)
|
2022-07-21 09:34:57 +05:30
|
|
|
this.fetchJson(this.authApiUrl() + "/user/playlists", null, {
|
2022-04-07 08:03:25 +05:30
|
|
|
headers: {
|
|
|
|
Authorization: this.getAuthToken(),
|
|
|
|
},
|
|
|
|
}).then(json => {
|
|
|
|
if (json.error) alert(json.error);
|
|
|
|
else if (json.filter(playlist => playlist.id === playlistId).length > 0) this.admin = true;
|
|
|
|
});
|
2021-07-07 19:48:09 +05:30
|
|
|
},
|
|
|
|
activated() {
|
2021-01-04 11:18:18 +05:30
|
|
|
window.addEventListener("scroll", this.handleScroll);
|
2022-04-09 02:59:50 +05:30
|
|
|
if (this.playlist) this.updateTitle();
|
2021-01-04 11:18:18 +05:30
|
|
|
},
|
2021-07-07 19:48:09 +05:30
|
|
|
deactivated() {
|
2021-01-04 11:18:18 +05:30
|
|
|
window.removeEventListener("scroll", this.handleScroll);
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
async fetchPlaylist() {
|
2022-07-21 09:34:57 +05:30
|
|
|
return await await this.fetchJson(this.authApiUrl() + "/playlists/" + this.$route.query.list);
|
2021-01-04 11:18:18 +05:30
|
|
|
},
|
|
|
|
async getPlaylistData() {
|
|
|
|
this.fetchPlaylist()
|
|
|
|
.then(data => (this.playlist = data))
|
2022-04-09 02:59:50 +05:30
|
|
|
.then(() => this.updateTitle());
|
|
|
|
},
|
|
|
|
async updateTitle() {
|
|
|
|
document.title = this.playlist.name + " - Piped";
|
2021-01-04 11:18:18 +05:30
|
|
|
},
|
|
|
|
handleScroll() {
|
2021-06-06 01:05:14 +05:30
|
|
|
if (this.loading || !this.playlist || !this.playlist.nextpage) return;
|
2021-04-07 17:15:40 +05:30
|
|
|
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
|
2021-01-04 11:18:18 +05:30
|
|
|
this.loading = true;
|
2022-07-21 09:34:57 +05:30
|
|
|
this.fetchJson(this.authApiUrl() + "/nextpage/playlists/" + this.$route.query.list, {
|
2021-06-15 17:07:35 +05:30
|
|
|
nextpage: this.playlist.nextpage,
|
|
|
|
}).then(json => {
|
2021-02-24 15:05:41 +05:30
|
|
|
this.playlist.relatedStreams.concat(json.relatedStreams);
|
|
|
|
this.playlist.nextpage = json.nextpage;
|
|
|
|
this.loading = false;
|
2021-04-07 17:15:40 +05:30
|
|
|
json.relatedStreams.map(stream => this.playlist.relatedStreams.push(stream));
|
2021-02-24 15:05:41 +05:30
|
|
|
});
|
2021-01-04 11:18:18 +05:30
|
|
|
}
|
2021-04-07 17:15:40 +05:30
|
|
|
},
|
2022-04-07 08:03:25 +05:30
|
|
|
removeVideo(index) {
|
|
|
|
this.playlist.relatedStreams.splice(index, 1);
|
|
|
|
},
|
2022-07-22 02:21:41 +05:30
|
|
|
async clonePlaylist() {
|
|
|
|
const playlistId = this.$route.query.list;
|
|
|
|
this.fetchJson(this.authApiUrl() + "/import/playlist", null, {
|
|
|
|
method: "POST",
|
|
|
|
headers: {
|
|
|
|
Authorization: this.getAuthToken(),
|
|
|
|
},
|
|
|
|
body: JSON.stringify({
|
|
|
|
playlistId: playlistId,
|
|
|
|
}),
|
|
|
|
}).then(resp => {
|
|
|
|
if (!resp.error) {
|
|
|
|
alert(this.$t("actions.clone_playlist_success"));
|
|
|
|
} else alert(resp.error);
|
|
|
|
});
|
|
|
|
},
|
2021-04-07 17:15:40 +05:30
|
|
|
},
|
2021-01-04 11:18:18 +05:30
|
|
|
};
|
|
|
|
</script>
|