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

   1 import { concat, Observable } from 'rxjs'
   2 import { 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, User } from '@app/core'
   6 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
   7 import { immutableAssign } from '@app/helpers'
   8 import { AdvancedInputFilter } from '@app/shared/shared-forms'
   9 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
  10 import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
  11 import {
  12   MiniatureDisplayOptions,
  13   SelectionType,
  14   VideoActionsDisplayType,
  15   VideosSelectionComponent
  16 } from '@app/shared/shared-video-miniature'
  17 import { VideoChannel, VideoSortField } from '@shared/models'
  18 import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component'
  19
  20 @Component({
  21   templateUrl: './my-videos.component.html',
  22   styleUrls: [ './my-videos.component.scss' ]
  23 })
  24 export class MyVideosComponent implements OnInit, DisableForReuseHook {
  25   @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
  26   @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent
  27   @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent
  28
  29   titlePage: string
  30   selection: SelectionType = {}
  31   pagination: ComponentPagination = {
  32     currentPage: 1,
  33     itemsPerPage: 10,
  34     totalItems: null
  35   }
  36   miniatureDisplayOptions: MiniatureDisplayOptions = {
  37     date: true,
  38     views: true,
  39     by: true,
  40     privacyLabel: false,
  41     privacyText: true,
  42     state: true,
  43     blacklistInfo: true
  44   }
  45   videoDropdownDisplayOptions: VideoActionsDisplayType = {
  46     playlist: false,
  47     download: false,
  48     update: false,
  49     blacklist: false,
  50     delete: true,
  51     report: false,
  52     duplicate: false,
  53     mute: false,
  54     liveInfo: true,
  55     removeFiles: false,
  56     transcoding: false,
  57     studio: true,
  58     stats: true
  59   }
  60
  61   moreVideoActions: DropdownAction<{ video: Video }>[][] = []
  62
  63   videos: Video[] = []
  64   getVideosObservableFunction = this.getVideosObservable.bind(this)
  65
  66   sort: VideoSortField = '-publishedAt'
  67
  68   user: User
  69
  70   inputFilters: AdvancedInputFilter[]
  71
  72   disabled = false
  73
  74   private search: string
  75   private userChannels: VideoChannel[] = []
  76
  77   constructor (
  78     protected router: Router,
  79     protected serverService: ServerService,
  80     protected route: ActivatedRoute,
  81     protected authService: AuthService,
  82     protected notifier: Notifier,
  83     protected screenService: ScreenService,
  84     private confirmService: ConfirmService,
  85     private videoService: VideoService
  86   ) {
  87     this.titlePage = $localize`My videos`
  88   }
  89
  90   ngOnInit () {
  91     this.buildActions()
  92
  93     this.user = this.authService.getUser()
  94
  95     if (this.route.snapshot.queryParams['search']) {
  96       this.search = this.route.snapshot.queryParams['search']
  97     }
  98
  99     this.authService.userInformationLoaded.subscribe(() => {
 100       this.user = this.authService.getUser()
 101       this.userChannels = this.user.videoChannels
 102
 103       const channelFilters = this.userChannels.map(c => {
 104         return {
 105           value: 'channel:' + c.name,
 106           label: c.name
 107         }
 108       })
 109
 110       this.inputFilters = [
 111         {
 112           title: $localize`Advanced filters`,
 113           children: [
 114             {
 115               value: 'isLive:true',
 116               label: $localize`Only live videos`
 117             }
 118           ]
 119         },
 120
 121         {
 122           title: $localize`Channel filters`,
 123           children: channelFilters
 124         }
 125       ]
 126     })
 127   }
 128
 129   onSearch (search: string) {
 130     this.search = search
 131     this.reloadData()
 132   }
 133
 134   reloadData () {
 135     this.videosSelection.reloadVideos()
 136   }
 137
 138   onChangeSortColumn () {
 139     this.videosSelection.reloadVideos()
 140   }
 141
 142   disableForReuse () {
 143     this.disabled = true
 144   }
 145
 146   enabledForReuse () {
 147     this.disabled = false
 148   }
 149
 150   getVideosObservable (page: number) {
 151     const newPagination = immutableAssign(this.pagination, { currentPage: page })
 152
 153     return this.videoService.getMyVideos({
 154       videoPagination: newPagination,
 155       sort: this.sort,
 156       userChannels: this.userChannels,
 157       search: this.search
 158     })
 159       .pipe(
 160         tap(res => this.pagination.totalItems = res.total)
 161       )
 162   }
 163
 164   async deleteSelectedVideos () {
 165     const toDeleteVideosIds = Object.keys(this.selection)
 166                                     .filter(k => this.selection[k] === true)
 167                                     .map(k => parseInt(k, 10))
 168
 169     const res = await this.confirmService.confirm(
 170       $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`,
 171       $localize`Delete`
 172     )
 173     if (res === false) return
 174
 175     const observables: Observable<any>[] = []
 176     for (const videoId of toDeleteVideosIds) {
 177       const o = this.videoService.removeVideo(videoId)
 178                     .pipe(tap(() => this.removeVideoFromArray(videoId)))
 179
 180       observables.push(o)
 181     }
 182
 183     concat(...observables)
 184       .pipe(toArray())
 185       .subscribe({
 186         next: () => {
 187           this.notifier.success($localize`${toDeleteVideosIds.length} videos deleted.`)
 188           this.selection = {}
 189         },
 190
 191         error: err => this.notifier.error(err.message)
 192       })
 193   }
 194
 195   onVideoRemoved (video: Video) {
 196     this.removeVideoFromArray(video.id)
 197   }
 198
 199   changeOwnership (video: Video) {
 200     this.videoChangeOwnershipModal.show(video)
 201   }
 202
 203   private removeVideoFromArray (id: number) {
 204     this.videos = this.videos.filter(v => v.id !== id)
 205   }
 206
 207   private buildActions () {
 208     this.moreVideoActions = [
 209       [
 210         {
 211           label: $localize`Change ownership`,
 212           handler: ({ video }) => this.changeOwnership(video),
 213           iconName: 'ownership-change'
 214         }
 215       ]
 216     ]
 217   }
 218 }