client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts

   1 import { Subject } from 'rxjs'
   2 import { debounceTime, mergeMap } from 'rxjs/operators'
   3 import { Component, OnInit } from '@angular/core'
   4 import { AuthService, ComponentPagination, ConfirmService, Notifier, User } from '@app/core'
   5 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
   6 import { I18n } from '@ngx-translate/i18n-polyfill'
   7 import { VideoPlaylistType } from '@shared/models'
   8
   9 @Component({
  10   selector: 'my-account-video-playlists',
  11   templateUrl: './my-account-video-playlists.component.html',
  12   styleUrls: [ './my-account-video-playlists.component.scss' ]
  13 })
  14 export class MyAccountVideoPlaylistsComponent implements OnInit {
  15   videoPlaylistsSearch: string
  16   videoPlaylists: VideoPlaylist[] = []
  17   videoPlaylistSearchChanged = new Subject<string>()
  18
  19   pagination: ComponentPagination = {
  20     currentPage: 1,
  21     itemsPerPage: 5,
  22     totalItems: null
  23   }
  24
  25   onDataSubject = new Subject<any[]>()
  26
  27   private user: User
  28
  29   constructor (
  30     private authService: AuthService,
  31     private notifier: Notifier,
  32     private confirmService: ConfirmService,
  33     private videoPlaylistService: VideoPlaylistService,
  34     private i18n: I18n
  35   ) {}
  36
  37   ngOnInit () {
  38     this.user = this.authService.getUser()
  39
  40     this.loadVideoPlaylists()
  41
  42     this.videoPlaylistSearchChanged
  43       .pipe(
  44         debounceTime(500))
  45       .subscribe(() => {
  46         this.loadVideoPlaylists(true)
  47       })
  48   }
  49
  50   async deleteVideoPlaylist (videoPlaylist: VideoPlaylist) {
  51     const res = await this.confirmService.confirm(
  52       this.i18n(
  53         'Do you really want to delete {{playlistDisplayName}}?',
  54         { playlistDisplayName: videoPlaylist.displayName }
  55       ),
  56       this.i18n('Delete')
  57     )
  58     if (res === false) return
  59
  60     this.videoPlaylistService.removeVideoPlaylist(videoPlaylist)
  61       .subscribe(
  62         () => {
  63           this.videoPlaylists = this.videoPlaylists
  64                                     .filter(p => p.id !== videoPlaylist.id)
  65
  66           this.notifier.success(
  67             this.i18n('Playlist {{playlistDisplayName}} deleted.', { playlistDisplayName: videoPlaylist.displayName })
  68           )
  69         },
  70
  71         error => this.notifier.error(error.message)
  72       )
  73   }
  74
  75   isRegularPlaylist (playlist: VideoPlaylist) {
  76     return playlist.type.id === VideoPlaylistType.REGULAR
  77   }
  78
  79   onNearOfBottom () {
  80     // Last page
  81     if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
  82
  83     this.pagination.currentPage += 1
  84     this.loadVideoPlaylists()
  85   }
  86
  87   resetSearch () {
  88     this.videoPlaylistsSearch = ''
  89     this.onVideoPlaylistSearchChanged()
  90   }
  91
  92   onVideoPlaylistSearchChanged () {
  93     this.videoPlaylistSearchChanged.next()
  94   }
  95
  96   private loadVideoPlaylists (reset = false) {
  97     this.authService.userInformationLoaded
  98         .pipe(mergeMap(() => {
  99           return this.videoPlaylistService.listAccountPlaylists(this.user.account, this.pagination, '-updatedAt', this.videoPlaylistsSearch)
 100         }))
 101         .subscribe(res => {
 102           if (reset) this.videoPlaylists = []
 103           this.videoPlaylists = this.videoPlaylists.concat(res.data)
 104           this.pagination.totalItems = res.total
 105
 106           this.onDataSubject.next(res.data)
 107         })
 108   }
 109 }