1 import { Component, Input } from '@angular/core'
2 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
3 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
4 import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'
5 import { Router } from '@angular/router'
6 import { AuthService } from '@app/core'
7 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
8 import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
11 selector: 'my-video-watch-playlist',
12 templateUrl: './video-watch-playlist.component.html',
13 styleUrls: [ './video-watch-playlist.component.scss' ]
15 export class VideoWatchPlaylistComponent {
16 @Input() video: VideoDetails
17 @Input() playlist: VideoPlaylist
19 playlistElements: VideoPlaylistElement[] = []
20 playlistPagination: ComponentPagination = {
26 noPlaylistVideos = false
27 currentPlaylistPosition = 1
30 private auth: AuthService,
31 private videoPlaylist: VideoPlaylistService,
32 private router: Router
35 onPlaylistVideosNearOfBottom () {
37 if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
39 this.playlistPagination.currentPage += 1
40 this.loadPlaylistElements(this.playlist,false)
43 onElementRemoved (playlistElement: VideoPlaylistElement) {
44 this.playlistElements = this.playlistElements.filter(e => e.id !== playlistElement.id)
46 this.playlistPagination.totalItems--
50 return this.playlist.isLocal === true &&
51 this.auth.isLoggedIn() &&
52 this.playlist.ownerAccount.name === this.auth.getUser().username
55 isUnlistedPlaylist () {
56 return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED
59 isPrivatePlaylist () {
60 return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
64 return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
67 loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) {
68 this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination)
69 .subscribe(({ total, data }) => {
70 this.playlistElements = this.playlistElements.concat(data)
71 this.playlistPagination.totalItems = total
73 const firstAvailableVideos = this.playlistElements.find(e => !!e.video)
74 if (!firstAvailableVideos) {
75 this.noPlaylistVideos = true
79 this.updatePlaylistIndex(this.video)
81 if (redirectToFirst) {
84 start: firstAvailableVideos.startTimestamp,
85 stop: firstAvailableVideos.stopTimestamp,
86 videoId: firstAvailableVideos.video.uuid
90 this.router.navigate([], extras)
95 updatePlaylistIndex (video: VideoDetails) {
96 if (this.playlistElements.length === 0 || !video) return
98 for (const playlistElement of this.playlistElements) {
99 if (playlistElement.video && playlistElement.video.id === video.id) {
100 this.currentPlaylistPosition = playlistElement.position
105 // Load more videos to find our video
106 this.onPlaylistVideosNearOfBottom()
109 navigateToNextPlaylistVideo () {
110 if (this.currentPlaylistPosition < this.playlistPagination.totalItems) {
111 const next = this.playlistElements.find(e => e.position === this.currentPlaylistPosition + 1)
113 if (!next || !next.video) {
114 this.currentPlaylistPosition++
115 this.navigateToNextPlaylistVideo()
119 const start = next.startTimestamp
120 const stop = next.stopTimestamp
121 this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } })