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

   1 import { Component, EventEmitter, Input, Output } from '@angular/core'
   2 import { Router } from '@angular/router'
   3 import { AuthService, ComponentPagination, HooksService, Notifier, SessionStorageService, UserService } from '@app/core'
   4 import { isInViewport } from '@app/helpers'
   5 import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
   6 import { getBoolOrDefault } from '@root-helpers/local-storage-utils'
   7 import { peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
   8 import { VideoPlaylistPrivacy } from '@shared/models'
   9
  10 @Component({
  11   selector: 'my-video-watch-playlist',
  12   templateUrl: './video-watch-playlist.component.html',
  13   styleUrls: [ './video-watch-playlist.component.scss' ]
  14 })
  15 export class VideoWatchPlaylistComponent {
  16   static SESSION_STORAGE_LOOP_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 hooks: HooksService,
  39     private userService: UserService,
  40     private auth: AuthService,
  41     private notifier: Notifier,
  42     private videoPlaylist: VideoPlaylistService,
  43     private sessionStorage: SessionStorageService,
  44     private router: Router
  45   ) {
  46     this.userService.getAnonymousOrLoggedUser()
  47       .subscribe(user => this.autoPlayNextVideoPlaylist = user.autoPlayNextVideoPlaylist)
  48
  49     this.setAutoPlayNextVideoPlaylistSwitchText()
  50
  51     this.loopPlaylist = getBoolOrDefault(this.sessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_LOOP_PLAYLIST), false)
  52     this.setLoopPlaylistSwitchText()
  53   }
  54
  55   onPlaylistVideosNearOfBottom (position?: number) {
  56     // Last page
  57     if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
  58
  59     this.playlistPagination.currentPage += 1
  60     this.loadPlaylistElements(this.playlist, false, position)
  61   }
  62
  63   onElementRemoved (playlistElement: VideoPlaylistElement) {
  64     this.playlistElements = this.playlistElements.filter(e => e.id !== playlistElement.id)
  65
  66     this.playlistPagination.totalItems--
  67   }
  68
  69   isPlaylistOwned () {
  70     return this.playlist.isLocal === true &&
  71       this.auth.isLoggedIn() &&
  72       this.playlist.ownerAccount.name === this.auth.getUser().username
  73   }
  74
  75   isUnlistedPlaylist () {
  76     return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED
  77   }
  78
  79   isPrivatePlaylist () {
  80     return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
  81   }
  82
  83   isPublicPlaylist () {
  84     return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
  85   }
  86
  87   loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false, position?: number) {
  88     const obs = this.hooks.wrapObsFun(
  89       this.videoPlaylist.getPlaylistVideos.bind(this.videoPlaylist),
  90       { videoPlaylistId: playlist.uuid, componentPagination: this.playlistPagination },
  91       'video-watch',
  92       'filter:api.video-watch.video-playlist-elements.get.params',
  93       'filter:api.video-watch.video-playlist-elements.get.result'
  94     )
  95
  96     obs.subscribe(({ total, data: playlistElements }) => {
  97       this.playlistElements = this.playlistElements.concat(playlistElements)
  98       this.playlistPagination.totalItems = total
  99
 100       const firstAvailableVideo = this.playlistElements.find(e => !!e.video)
 101       if (!firstAvailableVideo) {
 102         this.noPlaylistVideos = true
 103         return
 104       }
 105
 106       if (position) this.updatePlaylistIndex(position)
 107
 108       if (redirectToFirst) {
 109         const extras = {
 110           queryParams: {
 111             start: firstAvailableVideo.startTimestamp,
 112             stop: firstAvailableVideo.stopTimestamp,
 113             playlistPosition: firstAvailableVideo.position
 114           },
 115           replaceUrl: true
 116         }
 117         this.router.navigate([], extras)
 118       }
 119     })
 120   }
 121
 122   updatePlaylistIndex (position: number) {
 123     if (this.playlistElements.length === 0 || !position) return
 124
 125     // Handle the reverse index
 126     if (position < 0) position = this.playlist.videosLength + position + 1
 127
 128     for (const playlistElement of this.playlistElements) {
 129       // >= if the previous videos were not valid
 130       if (playlistElement.video && playlistElement.position >= position) {
 131         this.currentPlaylistPosition = playlistElement.position
 132
 133         this.videoFound.emit(playlistElement.video.uuid)
 134
 135         setTimeout(() => {
 136           const element = document.querySelector<HTMLElement>('.element-' + this.currentPlaylistPosition)
 137           const container = document.querySelector<HTMLElement>('.playlist')
 138
 139           if (isInViewport(element, container)) return
 140
 141           container.scrollTop = element.offsetTop
 142         })
 143
 144         return
 145       }
 146     }
 147
 148     // Load more videos to find our video
 149     this.onPlaylistVideosNearOfBottom(position)
 150   }
 151
 152   hasPreviousVideo () {
 153     return !!this.findPlaylistVideo(this.currentPlaylistPosition - 1, 'previous')
 154   }
 155
 156   hasNextVideo () {
 157     return !!this.findPlaylistVideo(this.currentPlaylistPosition + 1, 'next')
 158   }
 159
 160   navigateToPreviousPlaylistVideo () {
 161     const previous = this.findPlaylistVideo(this.currentPlaylistPosition - 1, 'previous')
 162     if (!previous) return
 163
 164     const start = previous.startTimestamp
 165     const stop = previous.stopTimestamp
 166     this.router.navigate([], { queryParams: { playlistPosition: previous.position, start, stop } })
 167   }
 168
 169   findPlaylistVideo (position: number, type: 'previous' | 'next'): VideoPlaylistElement {
 170     if (
 171       (type === 'next' && position > this.playlistPagination.totalItems) ||
 172       (type === 'previous' && position < 1)
 173     ) {
 174       // End of the playlist: end the recursion if we're not in the loop mode
 175       if (!this.loopPlaylist) return
 176
 177       // Loop mode
 178       position = type === 'previous'
 179         ? this.playlistPagination.totalItems
 180         : 1
 181     }
 182
 183     const found = this.playlistElements.find(e => e.position === position)
 184     if (found?.video) return found
 185
 186     const newPosition = type === 'previous'
 187       ? position - 1
 188       : position + 1
 189
 190     return this.findPlaylistVideo(newPosition, type)
 191   }
 192
 193   navigateToNextPlaylistVideo () {
 194     const next = this.findPlaylistVideo(this.currentPlaylistPosition + 1, 'next')
 195     if (!next) return
 196
 197     const start = next.startTimestamp
 198     const stop = next.stopTimestamp
 199     this.router.navigate([], { queryParams: { playlistPosition: next.position, start, stop } })
 200   }
 201
 202   switchAutoPlayNextVideoPlaylist () {
 203     this.autoPlayNextVideoPlaylist = !this.autoPlayNextVideoPlaylist
 204     this.setAutoPlayNextVideoPlaylistSwitchText()
 205
 206     const details = { autoPlayNextVideoPlaylist: this.autoPlayNextVideoPlaylist }
 207
 208     if (this.auth.isLoggedIn()) {
 209       this.userService.updateMyProfile(details)
 210         .subscribe({
 211           next: () => {
 212             this.auth.refreshUserInformation()
 213           },
 214
 215           error: err => this.notifier.error(err.message)
 216         })
 217     } else {
 218       this.userService.updateMyAnonymousProfile(details)
 219     }
 220   }
 221
 222   switchLoopPlaylist () {
 223     this.loopPlaylist = !this.loopPlaylist
 224     this.setLoopPlaylistSwitchText()
 225
 226     peertubeSessionStorage.setItem(
 227       VideoWatchPlaylistComponent.SESSION_STORAGE_LOOP_PLAYLIST,
 228       this.loopPlaylist.toString()
 229     )
 230   }
 231
 232   private setAutoPlayNextVideoPlaylistSwitchText () {
 233     this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist
 234       ? $localize`Stop autoplaying next video`
 235       : $localize`Autoplay next video`
 236   }
 237
 238   private setLoopPlaylistSwitchText () {
 239     this.loopPlaylistSwitchText = this.loopPlaylist
 240       ? $localize`Stop looping playlist videos`
 241       : $localize`Loop playlist videos`
 242   }
 243 }