1 import { Component, EventEmitter, Input, Output } from '@angular/core'
2 import { Router } from '@angular/router'
3 import { AuthService, ComponentPagination, LocalStorageService, Notifier, SessionStorageService, UserService } from '@app/core'
4 import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
5 import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
6 import { VideoPlaylistPrivacy } from '@shared/models'
9 selector: 'my-video-watch-playlist',
10 templateUrl: './video-watch-playlist.component.html',
11 styleUrls: [ './video-watch-playlist.component.scss' ]
13 export class VideoWatchPlaylistComponent {
14 static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist'
15 static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'loop_playlist'
17 @Input() playlist: VideoPlaylist
19 @Output() videoFound = new EventEmitter<string>()
21 playlistElements: VideoPlaylistElement[] = []
22 playlistPagination: ComponentPagination = {
28 autoPlayNextVideoPlaylist: boolean
29 autoPlayNextVideoPlaylistSwitchText = ''
31 loopPlaylistSwitchText = ''
32 noPlaylistVideos = false
34 currentPlaylistPosition: number
37 private userService: UserService,
38 private auth: AuthService,
39 private notifier: Notifier,
40 private videoPlaylist: VideoPlaylistService,
41 private localStorageService: LocalStorageService,
42 private sessionStorage: SessionStorageService,
43 private router: Router
46 this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn()
47 ? this.auth.getUser().autoPlayNextVideoPlaylist
48 : this.localStorageService.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false'
50 this.setAutoPlayNextVideoPlaylistSwitchText()
53 this.loopPlaylist = this.sessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
54 this.setLoopPlaylistSwitchText()
57 onPlaylistVideosNearOfBottom (position?: number) {
59 if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
61 this.playlistPagination.currentPage += 1
62 this.loadPlaylistElements(this.playlist, false, position)
65 onElementRemoved (playlistElement: VideoPlaylistElement) {
66 this.playlistElements = this.playlistElements.filter(e => e.id !== playlistElement.id)
68 this.playlistPagination.totalItems--
72 return this.playlist.isLocal === true &&
73 this.auth.isLoggedIn() &&
74 this.playlist.ownerAccount.name === this.auth.getUser().username
77 isUnlistedPlaylist () {
78 return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED
81 isPrivatePlaylist () {
82 return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
86 return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
89 loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false, position?: number) {
90 this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination)
91 .subscribe(({ total, data }) => {
92 this.playlistElements = this.playlistElements.concat(data)
93 this.playlistPagination.totalItems = total
95 const firstAvailableVideo = this.playlistElements.find(e => !!e.video)
96 if (!firstAvailableVideo) {
97 this.noPlaylistVideos = true
101 if (position) this.updatePlaylistIndex(position)
103 if (redirectToFirst) {
106 start: firstAvailableVideo.startTimestamp,
107 stop: firstAvailableVideo.stopTimestamp,
108 playlistPosition: firstAvailableVideo.position
112 this.router.navigate([], extras)
117 updatePlaylistIndex (position: number) {
118 if (this.playlistElements.length === 0 || !position) return
120 // Handle the reverse index
121 if (position < 0) position = this.playlist.videosLength + position + 1
123 for (const playlistElement of this.playlistElements) {
124 // >= if the previous videos were not valid
125 if (playlistElement.video && playlistElement.position >= position) {
126 this.currentPlaylistPosition = playlistElement.position
128 this.videoFound.emit(playlistElement.video.uuid)
131 document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false)
138 // Load more videos to find our video
139 this.onPlaylistVideosNearOfBottom(position)
142 navigateToPreviousPlaylistVideo () {
143 const previous = this.findPlaylistVideo(this.currentPlaylistPosition - 1, 'previous')
144 if (!previous) return
146 const start = previous.startTimestamp
147 const stop = previous.stopTimestamp
148 this.router.navigate([], { queryParams: { playlistPosition: previous.position, start, stop } })
151 findPlaylistVideo (position: number, type: 'previous' | 'next'): VideoPlaylistElement {
153 (type === 'next' && position > this.playlistPagination.totalItems) ||
154 (type === 'previous' && position < 1)
156 // End of the playlist: end the recursion if we're not in the loop mode
157 if (!this.loopPlaylist) return
160 position = type === 'previous'
161 ? this.playlistPagination.totalItems
165 const found = this.playlistElements.find(e => e.position === position)
166 if (found?.video) return found
168 const newPosition = type === 'previous'
172 return this.findPlaylistVideo(newPosition, type)
175 navigateToNextPlaylistVideo () {
176 const next = this.findPlaylistVideo(this.currentPlaylistPosition + 1, 'next')
179 const start = next.startTimestamp
180 const stop = next.stopTimestamp
181 this.router.navigate([], { queryParams: { playlistPosition: next.position, start, stop } })
184 switchAutoPlayNextVideoPlaylist () {
185 this.autoPlayNextVideoPlaylist = !this.autoPlayNextVideoPlaylist
186 this.setAutoPlayNextVideoPlaylistSwitchText()
188 peertubeLocalStorage.setItem(
189 VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
190 this.autoPlayNextVideoPlaylist.toString()
193 if (this.auth.isLoggedIn()) {
195 autoPlayNextVideoPlaylist: this.autoPlayNextVideoPlaylist
198 this.userService.updateMyProfile(details)
201 this.auth.refreshUserInformation()
204 error: err => this.notifier.error(err.message)
209 switchLoopPlaylist () {
210 this.loopPlaylist = !this.loopPlaylist
211 this.setLoopPlaylistSwitchText()
213 peertubeSessionStorage.setItem(
214 VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
215 this.loopPlaylist.toString()
219 private setAutoPlayNextVideoPlaylistSwitchText () {
220 this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist
221 ? $localize`Stop autoplaying next video`
222 : $localize`Autoplay next video`
225 private setLoopPlaylistSwitchText () {
226 this.loopPlaylistSwitchText = this.loopPlaylist
227 ? $localize`Stop looping playlist videos`
228 : $localize`Loop playlist videos`