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 { UserService } from '@app/shared'
7 import { AuthService, Notifier } from '@app/core'
8 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
9 import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
10 import { peertubeLocalStorage, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage'
11 import { I18n } from '@ngx-translate/i18n-polyfill'
12 import { SessionStorageService, LocalStorageService } from '@app/shared/misc/storage.service'
15 selector: 'my-video-watch-playlist',
16 templateUrl: './video-watch-playlist.component.html',
17 styleUrls: [ './video-watch-playlist.component.scss' ]
19 export class VideoWatchPlaylistComponent {
20 static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist'
21 static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'loop_playlist'
23 @Input() video: VideoDetails
24 @Input() playlist: VideoPlaylist
26 playlistElements: VideoPlaylistElement[] = []
27 playlistPagination: ComponentPagination = {
33 autoPlayNextVideoPlaylist: boolean
34 autoPlayNextVideoPlaylistSwitchText = ''
36 loopPlaylistSwitchText = ''
37 noPlaylistVideos = false
38 currentPlaylistPosition = 1
41 private userService: UserService,
42 private auth: AuthService,
43 private notifier: Notifier,
45 private videoPlaylist: VideoPlaylistService,
46 private localStorageService: LocalStorageService,
47 private sessionStorageService: SessionStorageService,
48 private router: Router
51 this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn()
52 ? this.auth.getUser().autoPlayNextVideoPlaylist
53 : this.localStorageService.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false'
54 this.setAutoPlayNextVideoPlaylistSwitchText()
57 this.loopPlaylist = this.sessionStorageService.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
58 this.setLoopPlaylistSwitchText()
61 onPlaylistVideosNearOfBottom () {
63 if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
65 this.playlistPagination.currentPage += 1
66 this.loadPlaylistElements(this.playlist,false)
69 onElementRemoved (playlistElement: VideoPlaylistElement) {
70 this.playlistElements = this.playlistElements.filter(e => e.id !== playlistElement.id)
72 this.playlistPagination.totalItems--
76 return this.playlist.isLocal === true &&
77 this.auth.isLoggedIn() &&
78 this.playlist.ownerAccount.name === this.auth.getUser().username
81 isUnlistedPlaylist () {
82 return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED
85 isPrivatePlaylist () {
86 return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
90 return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
93 loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) {
94 this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination)
95 .subscribe(({ total, data }) => {
96 this.playlistElements = this.playlistElements.concat(data)
97 this.playlistPagination.totalItems = total
99 const firstAvailableVideos = this.playlistElements.find(e => !!e.video)
100 if (!firstAvailableVideos) {
101 this.noPlaylistVideos = true
105 this.updatePlaylistIndex(this.video)
107 if (redirectToFirst) {
110 start: firstAvailableVideos.startTimestamp,
111 stop: firstAvailableVideos.stopTimestamp,
112 videoId: firstAvailableVideos.video.uuid
116 this.router.navigate([], extras)
121 updatePlaylistIndex (video: VideoDetails) {
122 if (this.playlistElements.length === 0 || !video) return
124 for (const playlistElement of this.playlistElements) {
125 if (playlistElement.video && playlistElement.video.id === video.id) {
126 this.currentPlaylistPosition = playlistElement.position
131 // Load more videos to find our video
132 this.onPlaylistVideosNearOfBottom()
135 findNextPlaylistVideo (position = this.currentPlaylistPosition): VideoPlaylistElement {
136 if (this.currentPlaylistPosition >= this.playlistPagination.totalItems) {
137 // we have reached the end of the playlist: either loop or stop
138 if (this.loopPlaylist) {
139 this.currentPlaylistPosition = position = 0
145 const next = this.playlistElements.find(e => e.position === position)
147 if (!next || !next.video) {
148 return this.findNextPlaylistVideo(position + 1)
154 navigateToNextPlaylistVideo () {
155 const next = this.findNextPlaylistVideo(this.currentPlaylistPosition + 1)
157 const start = next.startTimestamp
158 const stop = next.stopTimestamp
159 this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } })
162 switchAutoPlayNextVideoPlaylist () {
163 this.autoPlayNextVideoPlaylist = !this.autoPlayNextVideoPlaylist
164 this.setAutoPlayNextVideoPlaylistSwitchText()
166 peertubeLocalStorage.setItem(
167 VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
168 this.autoPlayNextVideoPlaylist.toString()
171 if (this.auth.isLoggedIn()) {
173 autoPlayNextVideoPlaylist: this.autoPlayNextVideoPlaylist
176 this.userService.updateMyProfile(details).subscribe(
178 this.auth.refreshUserInformation()
180 err => this.notifier.error(err.message)
185 switchLoopPlaylist () {
186 this.loopPlaylist = !this.loopPlaylist
187 this.setLoopPlaylistSwitchText()
189 peertubeSessionStorage.setItem(
190 VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
191 this.loopPlaylist.toString()
195 private setAutoPlayNextVideoPlaylistSwitchText () {
196 this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist
197 ? this.i18n('Stop autoplaying next video')
198 : this.i18n('Autoplay next video')
201 private setLoopPlaylistSwitchText () {
202 this.loopPlaylistSwitchText = this.loopPlaylist
203 ? this.i18n('Stop looping playlist videos')
204 : this.i18n('Loop playlist videos')