client/src/app/+my-account/my-account-videos/my-account-videos.component.ts

   1 import { concat, Observable, Subject } from 'rxjs'
   2 import { debounceTime, tap, toArray } from 'rxjs/operators'
   3 import { Component, OnInit, ViewChild } from '@angular/core'
   4 import { ActivatedRoute, Router } from '@angular/router'
   5 import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService } from '@app/core'
   6 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
   7 import { immutableAssign } from '@app/helpers'
   8 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
   9 import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
  10 import { VideoSortField } from '@shared/models'
  11 import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component'
  12 import { LiveStreamInformationComponent } from './modals/live-stream-information.component'
  13
  14 @Component({
  15   selector: 'my-account-videos',
  16   templateUrl: './my-account-videos.component.html',
  17   styleUrls: [ './my-account-videos.component.scss' ]
  18 })
  19 export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
  20   @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
  21   @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent
  22   @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent
  23
  24   titlePage: string
  25   selection: SelectionType = {}
  26   pagination: ComponentPagination = {
  27     currentPage: 1,
  28     itemsPerPage: 10,
  29     totalItems: null
  30   }
  31   miniatureDisplayOptions: MiniatureDisplayOptions = {
  32     date: true,
  33     views: true,
  34     by: true,
  35     privacyLabel: false,
  36     privacyText: true,
  37     state: true,
  38     blacklistInfo: true
  39   }
  40   ownerDisplayType: OwnerDisplayType = 'videoChannel'
  41
  42   videoActions: DropdownAction<{ video: Video }>[] = []
  43
  44   videos: Video[] = []
  45   videosSearch: string
  46   videosSearchChanged = new Subject<string>()
  47   getVideosObservableFunction = this.getVideosObservable.bind(this)
  48
  49   constructor (
  50     protected router: Router,
  51     protected serverService: ServerService,
  52     protected route: ActivatedRoute,
  53     protected authService: AuthService,
  54     protected notifier: Notifier,
  55     protected screenService: ScreenService,
  56     private confirmService: ConfirmService,
  57     private videoService: VideoService
  58   ) {
  59     this.titlePage = $localize`My videos`
  60   }
  61
  62   ngOnInit () {
  63     this.buildActions()
  64
  65     this.videosSearchChanged
  66       .pipe(debounceTime(500))
  67       .subscribe(() => {
  68         this.videosSelection.reloadVideos()
  69       })
  70   }
  71
  72   resetSearch () {
  73     this.videosSearch = ''
  74     this.onVideosSearchChanged()
  75   }
  76
  77   onVideosSearchChanged () {
  78     this.videosSearchChanged.next()
  79   }
  80
  81   disableForReuse () {
  82     this.videosSelection.disableForReuse()
  83   }
  84
  85   enabledForReuse () {
  86     this.videosSelection.enabledForReuse()
  87   }
  88
  89   getVideosObservable (page: number, sort: VideoSortField) {
  90     const newPagination = immutableAssign(this.pagination, { currentPage: page })
  91
  92     return this.videoService.getMyVideos(newPagination, sort, this.videosSearch)
  93       .pipe(
  94         tap(res => this.pagination.totalItems = res.total)
  95       )
  96   }
  97
  98   async deleteSelectedVideos () {
  99     const toDeleteVideosIds = Object.keys(this.selection)
 100                                     .filter(k => this.selection[ k ] === true)
 101                                     .map(k => parseInt(k, 10))
 102
 103     const res = await this.confirmService.confirm(
 104       $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`,
 105       $localize`Delete`
 106     )
 107     if (res === false) return
 108
 109     const observables: Observable<any>[] = []
 110     for (const videoId of toDeleteVideosIds) {
 111       const o = this.videoService.removeVideo(videoId)
 112                     .pipe(tap(() => this.removeVideoFromArray(videoId)))
 113
 114       observables.push(o)
 115     }
 116
 117     concat(...observables)
 118       .pipe(toArray())
 119       .subscribe(
 120         () => {
 121           this.notifier.success($localize`${toDeleteVideosIds.length} videos deleted.`)
 122           this.selection = {}
 123         },
 124
 125         err => this.notifier.error(err.message)
 126       )
 127   }
 128
 129   async deleteVideo (video: Video) {
 130     const res = await this.confirmService.confirm(
 131       $localize`Do you really want to delete ${video.name}?`,
 132       $localize`Delete`
 133     )
 134     if (res === false) return
 135
 136     this.videoService.removeVideo(video.id)
 137         .subscribe(
 138           () => {
 139             this.notifier.success($localize`Video ${video.name} deleted.`)
 140             this.removeVideoFromArray(video.id)
 141           },
 142
 143           error => this.notifier.error(error.message)
 144         )
 145   }
 146
 147   changeOwnership (video: Video) {
 148     this.videoChangeOwnershipModal.show(video)
 149   }
 150
 151   displayLiveInformation (video: Video) {
 152     this.liveStreamInformationModal.show(video)
 153   }
 154
 155   private removeVideoFromArray (id: number) {
 156     this.videos = this.videos.filter(v => v.id !== id)
 157   }
 158
 159   private buildActions () {
 160     this.videoActions = [
 161       {
 162         label: $localize`Display live information`,
 163         handler: ({ video }) => this.displayLiveInformation(video),
 164         isDisplayed: ({ video }) => video.isLive,
 165         iconName: 'live'
 166       },
 167       {
 168         label: $localize`Change ownership`,
 169         handler: ({ video }) => this.changeOwnership(video),
 170         iconName: 'ownership-change'
 171       },
 172       {
 173         label: $localize`Delete`,
 174         handler: ({ video }) => this.deleteVideo(video),
 175         iconName: 'delete'
 176       }
 177     ]
 178   }
 179 }