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

   1 import { Component, Input } from '@angular/core'
   2 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
   3 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
   4 import { Video } from '@app/shared/video/video.model'
   5 import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'
   6 import { VideoService } from '@app/shared/video/video.service'
   7 import { Router } from '@angular/router'
   8 import { AuthService } from '@app/core'
   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   @Input() video: VideoDetails
  17   @Input() playlist: VideoPlaylist
  18
  19   playlistVideos: Video[] = []
  20   playlistPagination: ComponentPagination = {
  21     currentPage: 1,
  22     itemsPerPage: 30,
  23     totalItems: null
  24   }
  25
  26   noPlaylistVideos = false
  27   currentPlaylistPosition = 1
  28
  29   constructor (
  30     private auth: AuthService,
  31     private videoService: VideoService,
  32     private router: Router
  33   ) {}
  34
  35   onPlaylistVideosNearOfBottom () {
  36     // Last page
  37     if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
  38
  39     this.playlistPagination.currentPage += 1
  40     this.loadPlaylistElements(this.playlist,false)
  41   }
  42
  43   onElementRemoved (video: Video) {
  44     this.playlistVideos = this.playlistVideos.filter(v => v.id !== video.id)
  45
  46     this.playlistPagination.totalItems--
  47   }
  48
  49   isPlaylistOwned () {
  50     return this.playlist.isLocal === true &&
  51       this.auth.isLoggedIn() &&
  52       this.playlist.ownerAccount.name === this.auth.getUser().username
  53   }
  54
  55   isUnlistedPlaylist () {
  56     return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED
  57   }
  58
  59   isPrivatePlaylist () {
  60     return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
  61   }
  62
  63   isPublicPlaylist () {
  64     return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
  65   }
  66
  67   loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) {
  68     this.videoService.getPlaylistVideos(playlist.uuid, this.playlistPagination)
  69         .subscribe(({ totalVideos, videos }) => {
  70           this.playlistVideos = this.playlistVideos.concat(videos)
  71           this.playlistPagination.totalItems = totalVideos
  72
  73           if (totalVideos === 0) {
  74             this.noPlaylistVideos = true
  75             return
  76           }
  77
  78           this.updatePlaylistIndex(this.video)
  79
  80           if (redirectToFirst) {
  81             const extras = {
  82               queryParams: { videoId: this.playlistVideos[ 0 ].uuid },
  83               replaceUrl: true
  84             }
  85             this.router.navigate([], extras)
  86           }
  87         })
  88   }
  89
  90   updatePlaylistIndex (video: VideoDetails) {
  91     if (this.playlistVideos.length === 0 || !video) return
  92
  93     for (const playlistVideo of this.playlistVideos) {
  94       if (playlistVideo.id === video.id) {
  95         this.currentPlaylistPosition = playlistVideo.playlistElement.position
  96         return
  97       }
  98     }
  99
 100     // Load more videos to find our video
 101     this.onPlaylistVideosNearOfBottom()
 102   }
 103
 104   navigateToNextPlaylistVideo () {
 105     if (this.currentPlaylistPosition < this.playlistPagination.totalItems) {
 106       const next = this.playlistVideos.find(v => v.playlistElement.position === this.currentPlaylistPosition + 1)
 107
 108       const start = next.playlistElement.startTimestamp
 109       const stop = next.playlistElement.stopTimestamp
 110       this.router.navigate([],{ queryParams: { videoId: next.uuid, start, stop } })
 111     }
 112   }
 113 }