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     for (const playlistElement of this.playlistElements) {
 122       // >= if the previous videos were not valid
 123       if (playlistElement.video && playlistElement.position >= position) {
 124         this.currentPlaylistPosition = playlistElement.position
 125
 126         this.videoFound.emit(playlistElement.video.uuid)
 127
 128         setTimeout(() => {
 129           document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false)
 130         }, 0)
 131
 132         return
 133       }
 134     }
 135
 136     // Load more videos to find our video
 137     this.onPlaylistVideosNearOfBottom(position)
 138   }
 139
 140   findNextPlaylistVideo (position = this.currentPlaylistPosition): VideoPlaylistElement {
 141     if (this.currentPlaylistPosition >= this.playlistPagination.totalItems) {
 142       // we have reached the end of the playlist: either loop or stop
 143       if (this.loopPlaylist) {
 144         this.currentPlaylistPosition = position = 0
 145       } else {
 146         return
 147       }
 148     }
 149
 150     const next = this.playlistElements.find(e => e.position === position)
 151
 152     if (!next || !next.video) {
 153       return this.findNextPlaylistVideo(position + 1)
 154     }
 155
 156     return next
 157   }
 158
 159   navigateToNextPlaylistVideo () {
 160     const next = this.findNextPlaylistVideo(this.currentPlaylistPosition + 1)
 161     if (!next) return
 162
 163     const start = next.startTimestamp
 164     const stop = next.stopTimestamp
 165     this.router.navigate([],{ queryParams: { playlistPosition: next.position, start, stop } })
 166   }
 167
 168   switchAutoPlayNextVideoPlaylist () {
 169     this.autoPlayNextVideoPlaylist = !this.autoPlayNextVideoPlaylist
 170     this.setAutoPlayNextVideoPlaylistSwitchText()
 171
 172     peertubeLocalStorage.setItem(
 173       VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
 174       this.autoPlayNextVideoPlaylist.toString()
 175     )
 176
 177     if (this.auth.isLoggedIn()) {
 178       const details = {
 179         autoPlayNextVideoPlaylist: this.autoPlayNextVideoPlaylist
 180       }
 181
 182       this.userService.updateMyProfile(details).subscribe(
 183         () => {
 184           this.auth.refreshUserInformation()
 185         },
 186         err => this.notifier.error(err.message)
 187       )
 188     }
 189   }
 190
 191   switchLoopPlaylist () {
 192     this.loopPlaylist = !this.loopPlaylist
 193     this.setLoopPlaylistSwitchText()
 194
 195     peertubeSessionStorage.setItem(
 196       VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
 197       this.loopPlaylist.toString()
 198     )
 199   }
 200
 201   private setAutoPlayNextVideoPlaylistSwitchText () {
 202     this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist
 203       ? $localize`Stop autoplaying next video`
 204       : $localize`Autoplay next video`
 205   }
 206
 207   private setLoopPlaylistSwitchText () {
 208     this.loopPlaylistSwitchText = this.loopPlaylist
 209       ? $localize`Stop looping playlist videos`
 210       : $localize`Loop playlist videos`
 211   }
 212 }