2 import { Component, EventEmitter, Input, Output } from '@angular/core'
3 import { Router } from '@angular/router'
4 import { AuthService, ComponentPagination, LocalStorageService, Notifier, SessionStorageService, UserService } from '@app/core'
5 import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
6 import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
7 import { VideoPlaylistPrivacy } from '@shared/models'
10 selector: 'my-video-watch-playlist',
11 templateUrl: './video-watch-playlist.component.html',
12 styleUrls: [ './video-watch-playlist.component.scss' ]
14 export class VideoWatchPlaylistComponent {
15 static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist'
16 static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'loop_playlist'
18 @Input() playlist: VideoPlaylist
20 @Output() videoFound = new EventEmitter<string>()
22 playlistElements: VideoPlaylistElement[] = []
23 playlistPagination: ComponentPagination = {
29 autoPlayNextVideoPlaylist: boolean
30 autoPlayNextVideoPlaylistSwitchText = ''
32 loopPlaylistSwitchText = ''
33 noPlaylistVideos = false
35 currentPlaylistPosition: number
38 private userService: UserService,
39 private auth: AuthService,
40 private notifier: Notifier,
41 private videoPlaylist: VideoPlaylistService,
42 private localStorageService: LocalStorageService,
43 private sessionStorageService: SessionStorageService,
44 private router: Router
47 this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn()
48 ? this.auth.getUser().autoPlayNextVideoPlaylist
49 : this.localStorageService.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false'
51 this.setAutoPlayNextVideoPlaylistSwitchText()
54 this.loopPlaylist = this.sessionStorageService.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
55 this.setLoopPlaylistSwitchText()
58 onPlaylistVideosNearOfBottom (position?: number) {
60 if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
62 this.playlistPagination.currentPage += 1
63 this.loadPlaylistElements(this.playlist, false, position)
66 onElementRemoved (playlistElement: VideoPlaylistElement) {
67 this.playlistElements = this.playlistElements.filter(e => e.id !== playlistElement.id)
69 this.playlistPagination.totalItems--
73 return this.playlist.isLocal === true &&
74 this.auth.isLoggedIn() &&
75 this.playlist.ownerAccount.name === this.auth.getUser().username
78 isUnlistedPlaylist () {
79 return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED
82 isPrivatePlaylist () {
83 return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
87 return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
90 loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false, position?: number) {
91 this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination)
92 .subscribe(({ total, data }) => {
93 this.playlistElements = this.playlistElements.concat(data)
94 this.playlistPagination.totalItems = total
96 const firstAvailableVideo = this.playlistElements.find(e => !!e.video)
97 if (!firstAvailableVideo) {
98 this.noPlaylistVideos = true
102 if (position) this.updatePlaylistIndex(position)
104 if (redirectToFirst) {
107 start: firstAvailableVideo.startTimestamp,
108 stop: firstAvailableVideo.stopTimestamp,
109 playlistPosition: firstAvailableVideo.position
113 this.router.navigate([], extras)
118 updatePlaylistIndex (position: number) {
119 if (this.playlistElements.length === 0 || !position) return
121 // Handle the reverse index
122 if (position < 0) position = this.playlist.videosLength + position + 1
124 for (const playlistElement of this.playlistElements) {
125 // >= if the previous videos were not valid
126 if (playlistElement.video && playlistElement.position >= position) {
127 this.currentPlaylistPosition = playlistElement.position
129 this.videoFound.emit(playlistElement.video.uuid)
132 document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false)
139 // Load more videos to find our video
140 this.onPlaylistVideosNearOfBottom(position)
143 navigateToPreviousPlaylistVideo () {
144 const previous = this.findPlaylistVideo(this.currentPlaylistPosition - 1, 'previous')
145 if (!previous) return
147 const start = previous.startTimestamp
148 const stop = previous.stopTimestamp
149 this.router.navigate([],{ queryParams: { playlistPosition: previous.position, start, stop } })
152 findPlaylistVideo (position: number, type: 'previous' | 'next'): VideoPlaylistElement {
154 (type === 'next' && position > this.playlistPagination.totalItems) ||
155 (type === 'previous' && position < 1)
157 // End of the playlist: end the recursion if we're not in the loop mode
158 if (!this.loopPlaylist) return
161 position = type === 'previous'
162 ? this.playlistPagination.totalItems
166 const found = this.playlistElements.find(e => e.position === position)
167 if (found && found.video) return found
169 const newPosition = type === 'previous'
173 return this.findPlaylistVideo(newPosition, type)
176 navigateToNextPlaylistVideo () {
177 const next = this.findPlaylistVideo(this.currentPlaylistPosition + 1, 'next')
180 const start = next.startTimestamp
181 const stop = next.stopTimestamp
182 this.router.navigate([],{ queryParams: { playlistPosition: next.position, start, stop } })
185 switchAutoPlayNextVideoPlaylist () {
186 this.autoPlayNextVideoPlaylist = !this.autoPlayNextVideoPlaylist
187 this.setAutoPlayNextVideoPlaylistSwitchText()
189 peertubeLocalStorage.setItem(
190 VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
191 this.autoPlayNextVideoPlaylist.toString()
194 if (this.auth.isLoggedIn()) {
196 autoPlayNextVideoPlaylist: this.autoPlayNextVideoPlaylist
199 this.userService.updateMyProfile(details).subscribe(
201 this.auth.refreshUserInformation()
203 err => this.notifier.error(err.message)
208 switchLoopPlaylist () {
209 this.loopPlaylist = !this.loopPlaylist
210 this.setLoopPlaylistSwitchText()
212 peertubeSessionStorage.setItem(
213 VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
214 this.loopPlaylist.toString()
218 private setAutoPlayNextVideoPlaylistSwitchText () {
219 this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist
220 ? $localize`Stop autoplaying next video`
221 : $localize`Autoplay next video`
224 private setLoopPlaylistSwitchText () {
225 this.loopPlaylistSwitchText = this.loopPlaylist
226 ? $localize`Stop looping playlist videos`
227 : $localize`Loop playlist videos`