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

feat: show total playlist duration

Browse source
This commit is contained in:
Bnyro 2024-07-29 16:26:17 +02:00
parent 9b7de17f40
commit 0d37601997
1 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/PlaylistPage.vue
View file

@ -14,7 +14,11 @@
</router-link> </router-link>
</div> </div>
<div class="flex flex-wrap items-center gap-1"> <div class="flex flex-wrap items-center gap-1">
<strong v-text="`${playlist.videos} ${$t('video.videos')}`" /> <strong
v-text="
`${playlist.videos} ${$t('video.videos')} - ${timeFormat(totalDuration)}${playlist.nextpage ? '+' : ''}`
"
/>
<button v-if="!isPipedPlaylist" class="btn mx-1" @click="bookmarkPlaylist"> <button v-if="!isPipedPlaylist" class="btn mx-1" @click="bookmarkPlaylist">
{{ $t(`actions.${isBookmarked ? "playlist_bookmarked" : "bookmark_playlist"}`) {{ $t(`actions.${isBookmarked ? "playlist_bookmarked" : "bookmark_playlist"}`)
}}<i class="i-fa6-solid:bookmark ml-3" /> }}<i class="i-fa6-solid:bookmark ml-3" />
@ -68,6 +72,7 @@ export default {
data() { data() {
return { return {
playlist: null, playlist: null,
totalDuration: 0,
admin: false, admin: false,
isBookmarked: false, isBookmarked: false,
}; };
@ -107,6 +112,7 @@ export default {
.then(data => (this.playlist = data)) .then(data => (this.playlist = data))
.then(() => { .then(() => {
this.updateTitle(); this.updateTitle();
this.updateTotalDuration();
this.updateWatched(this.playlist.relatedStreams); this.updateWatched(this.playlist.relatedStreams);
this.fetchDeArrowContent(this.playlist.relatedStreams); this.fetchDeArrowContent(this.playlist.relatedStreams);
}); });
@ -121,10 +127,10 @@ export default {
this.fetchJson(this.authApiUrl() + "/nextpage/playlists/" + this.$route.query.list, { this.fetchJson(this.authApiUrl() + "/nextpage/playlists/" + this.$route.query.list, {
nextpage: this.playlist.nextpage, nextpage: this.playlist.nextpage,
}).then(json => { }).then(json => {
this.playlist.relatedStreams.concat(json.relatedStreams);
this.playlist.nextpage = json.nextpage; this.playlist.nextpage = json.nextpage;
this.loading = false; this.loading = false;
json.relatedStreams.map(stream => this.playlist.relatedStreams.push(stream)); this.playlist.relatedStreams.push(...json.relatedStreams);
this.updateTotalDuration();
this.fetchDeArrowContent(this.playlist.relatedStreams); this.fetchDeArrowContent(this.playlist.relatedStreams);
}); });
} }
@ -132,6 +138,9 @@ export default {
removeVideo(index) { removeVideo(index) {
this.playlist.relatedStreams.splice(index, 1); this.playlist.relatedStreams.splice(index, 1);
}, },
updateTotalDuration() {
this.totalDuration = this.playlist.relatedStreams.map(video => video.duration).reduce((a, b) => a + b);
},
async clonePlaylist() { async clonePlaylist() {
this.fetchJson(this.authApiUrl() + "/import/playlist", null, { this.fetchJson(this.authApiUrl() + "/import/playlist", null, {
method: "POST", method: "POST",