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

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