client/src/app/+videos/+video-watch/video-watch-playlist.component.ts

   1
   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'
   8
   9 @Component({
  10   selector: 'my-video-watch-playlist',
  11   templateUrl: './video-watch-playlist.component.html',
  12   styleUrls: [ './video-watch-playlist.component.scss' ]
  13 })
  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'
  17
  18   @Input() playlist: VideoPlaylist
  19
  20   @Output() videoFound = new EventEmitter<string>()
  21
  22   playlistElements: VideoPlaylistElement[] = []
  23   playlistPagination: ComponentPagination = {
  24     currentPage: 1,
  25     itemsPerPage: 30,
  26     totalItems: null
  27   }
  28
  29   autoPlayNextVideoPlaylist: boolean
  30   autoPlayNextVideoPlaylistSwitchText = ''
  31   loopPlaylist: boolean
  32   loopPlaylistSwitchText = ''
  33   noPlaylistVideos = false
  34
  35   currentPlaylistPosition: number
  36
  37   constructor (
  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
  45   ) {
  46     // defaults to true
  47     this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn()
  48       ? this.auth.getUser().autoPlayNextVideoPlaylist
  49       : this.localStorageService.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false'
  50
  51     this.setAutoPlayNextVideoPlaylistSwitchText()
  52
  53     // defaults to false
  54     this.loopPlaylist = this.sessionStorageService.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
  55     this.setLoopPlaylistSwitchText()
  56   }
  57
  58   onPlaylistVideosNearOfBottom (position?: number) {
  59     // Last page
  60     if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
  61
  62     this.playlistPagination.currentPage += 1
  63     this.loadPlaylistElements(this.playlist, false, position)
  64   }
  65
  66   onElementRemoved (playlistElement: VideoPlaylistElement) {
  67     this.playlistElements = this.playlistElements.filter(e => e.id !== playlistElement.id)
  68
  69     this.playlistPagination.totalItems--
  70   }
  71
  72   isPlaylistOwned () {
  73     return this.playlist.isLocal === true &&
  74       this.auth.isLoggedIn() &&
  75       this.playlist.ownerAccount.name === this.auth.getUser().username
  76   }
  77
  78   isUnlistedPlaylist () {
  79     return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED
  80   }
  81
  82   isPrivatePlaylist () {
  83     return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
  84   }
  85
  86   isPublicPlaylist () {
  87     return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
  88   }
  89
  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
  95
  96           const firstAvailableVideo = this.playlistElements.find(e => !!e.video)
  97           if (!firstAvailableVideo) {
  98             this.noPlaylistVideos = true
  99             return
 100           }
 101
 102           if (position) this.updatePlaylistIndex(position)
 103
 104           if (redirectToFirst) {
 105             const extras = {
 106               queryParams: {
 107                 start: firstAvailableVideo.startTimestamp,
 108                 stop: firstAvailableVideo.stopTimestamp,
 109                 playlistPosition: firstAvailableVideo.position
 110               },
 111               replaceUrl: true
 112             }
 113             this.router.navigate([], extras)
 114           }
 115         })
 116   }
 117
 118   updatePlaylistIndex (position: number) {
 119     if (this.playlistElements.length === 0 || !position) return
 120
 121     // Handle the reverse index
 122     if (position < 0) position = this.playlist.videosLength + position + 1
 123
 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
 128
 129         this.videoFound.emit(playlistElement.video.uuid)
 130
 131         setTimeout(() => {
 132           document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false)
 133         }, 0)
 134
 135         return
 136       }
 137     }
 138
 139     // Load more videos to find our video
 140     this.onPlaylistVideosNearOfBottom(position)
 141   }
 142
 143   navigateToPreviousPlaylistVideo () {
 144     const previous = this.findPlaylistVideo(this.currentPlaylistPosition - 1, 'previous')
 145     if (!previous) return
 146
 147     const start = previous.startTimestamp
 148     const stop = previous.stopTimestamp
 149     this.router.navigate([],{ queryParams: { playlistPosition: previous.position, start, stop } })
 150   }
 151
 152   findPlaylistVideo (position: number, type: 'previous' | 'next'): VideoPlaylistElement {
 153     if (
 154       (type === 'next' && position > this.playlistPagination.totalItems) ||
 155       (type === 'previous' && position < 1)
 156     ) {
 157       // End of the playlist: end the recursion if we're not in the loop mode
 158       if (!this.loopPlaylist) return
 159
 160       // Loop mode
 161       position = type === 'previous'
 162         ? this.playlistPagination.totalItems
 163         : 1
 164     }
 165
 166     const found = this.playlistElements.find(e => e.position === position)
 167     if (found && found.video) return found
 168
 169     const newPosition = type === 'previous'
 170       ? position - 1
 171       : position + 1
 172
 173     return this.findPlaylistVideo(newPosition, type)
 174   }
 175
 176   navigateToNextPlaylistVideo () {
 177     const next = this.findPlaylistVideo(this.currentPlaylistPosition + 1, 'next')
 178     if (!next) return
 179
 180     const start = next.startTimestamp
 181     const stop = next.stopTimestamp
 182     this.router.navigate([],{ queryParams: { playlistPosition: next.position, start, stop } })
 183   }
 184
 185   switchAutoPlayNextVideoPlaylist () {
 186     this.autoPlayNextVideoPlaylist = !this.autoPlayNextVideoPlaylist
 187     this.setAutoPlayNextVideoPlaylistSwitchText()
 188
 189     peertubeLocalStorage.setItem(
 190       VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
 191       this.autoPlayNextVideoPlaylist.toString()
 192     )
 193
 194     if (this.auth.isLoggedIn()) {
 195       const details = {
 196         autoPlayNextVideoPlaylist: this.autoPlayNextVideoPlaylist
 197       }
 198
 199       this.userService.updateMyProfile(details).subscribe(
 200         () => {
 201           this.auth.refreshUserInformation()
 202         },
 203         err => this.notifier.error(err.message)
 204       )
 205     }
 206   }
 207
 208   switchLoopPlaylist () {
 209     this.loopPlaylist = !this.loopPlaylist
 210     this.setLoopPlaylistSwitchText()
 211
 212     peertubeSessionStorage.setItem(
 213       VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
 214       this.loopPlaylist.toString()
 215     )
 216   }
 217
 218   private setAutoPlayNextVideoPlaylistSwitchText () {
 219     this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist
 220       ? $localize`Stop autoplaying next video`
 221       : $localize`Autoplay next video`
 222   }
 223
 224   private setLoopPlaylistSwitchText () {
 225     this.loopPlaylistSwitchText = this.loopPlaylist
 226       ? $localize`Stop looping playlist videos`
 227       : $localize`Loop playlist videos`
 228   }
 229 }