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