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