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 { prepareIcu, 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     forceChannelInBy: true
  45   }
  46   videoDropdownDisplayOptions: VideoActionsDisplayType = {
  47     playlist: false,
  48     download: false,
  49     update: false,
  50     blacklist: false,
  51     delete: true,
  52     report: false,
  53     duplicate: false,
  54     mute: false,
  55     liveInfo: true,
  56     removeFiles: false,
  57     transcoding: false,
  58     studio: true,
  59     stats: true
  60   }
  61
  62   moreVideoActions: DropdownAction<{ video: Video }>[][] = []
  63
  64   videos: Video[] = []
  65   getVideosObservableFunction = this.getVideosObservable.bind(this)
  66
  67   sort: VideoSortField = '-publishedAt'
  68
  69   user: User
  70
  71   inputFilters: AdvancedInputFilter[] = []
  72
  73   disabled = false
  74
  75   private search: string
  76   private userChannels: VideoChannel[] = []
  77
  78   constructor (
  79     protected router: Router,
  80     protected serverService: ServerService,
  81     protected route: ActivatedRoute,
  82     protected authService: AuthService,
  83     protected notifier: Notifier,
  84     protected screenService: ScreenService,
  85     private confirmService: ConfirmService,
  86     private videoService: VideoService
  87   ) {
  88     this.titlePage = $localize`My videos`
  89   }
  90
  91   ngOnInit () {
  92     this.buildActions()
  93
  94     this.user = this.authService.getUser()
  95
  96     if (this.route.snapshot.queryParams['search']) {
  97       this.search = this.route.snapshot.queryParams['search']
  98     }
  99
 100     this.authService.userInformationLoaded.subscribe(() => {
 101       this.user = this.authService.getUser()
 102       this.userChannels = this.user.videoChannels
 103
 104       const channelFilters = this.userChannels.map(c => {
 105         return {
 106           value: 'channel:' + c.name,
 107           label: c.name
 108         }
 109       })
 110
 111       this.inputFilters = [
 112         {
 113           title: $localize`Advanced filters`,
 114           children: [
 115             {
 116               value: 'isLive:true',
 117               label: $localize`Only live videos`
 118             }
 119           ]
 120         },
 121
 122         {
 123           title: $localize`Channel filters`,
 124           children: channelFilters
 125         }
 126       ]
 127     })
 128   }
 129
 130   onSearch (search: string) {
 131     this.search = search
 132     this.reloadData()
 133   }
 134
 135   reloadData () {
 136     this.videosSelection.reloadVideos()
 137   }
 138
 139   onChangeSortColumn () {
 140     this.videosSelection.reloadVideos()
 141   }
 142
 143   disableForReuse () {
 144     this.disabled = true
 145   }
 146
 147   enabledForReuse () {
 148     this.disabled = false
 149   }
 150
 151   getVideosObservable (page: number) {
 152     const newPagination = immutableAssign(this.pagination, { currentPage: page })
 153
 154     return this.videoService.getMyVideos({
 155       videoPagination: newPagination,
 156       sort: this.sort,
 157       userChannels: this.userChannels,
 158       search: this.search
 159     })
 160       .pipe(
 161         tap(res => this.pagination.totalItems = res.total)
 162       )
 163   }
 164
 165   async deleteSelectedVideos () {
 166     const toDeleteVideosIds = Object.keys(this.selection)
 167                                     .filter(k => this.selection[k] === true)
 168                                     .map(k => parseInt(k, 10))
 169
 170     const res = await this.confirmService.confirm(
 171       prepareIcu($localize`Do you really want to delete {length, plural, =1 {this video} other {{length} videos}}?`)(
 172         { length: toDeleteVideosIds.length },
 173         $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`
 174       ),
 175       $localize`Delete`
 176     )
 177     if (res === false) return
 178
 179     const observables: Observable<any>[] = []
 180     for (const videoId of toDeleteVideosIds) {
 181       const o = this.videoService.removeVideo(videoId)
 182                     .pipe(tap(() => this.removeVideoFromArray(videoId)))
 183
 184       observables.push(o)
 185     }
 186
 187     concat(...observables)
 188       .pipe(toArray())
 189       .subscribe({
 190         next: () => {
 191           this.notifier.success(
 192             prepareIcu($localize`{length, plural, =1 {Video has been deleted} other {{length} videos have been deleted}}`)(
 193               { length: toDeleteVideosIds.length },
 194               $localize`${toDeleteVideosIds.length} have been deleted.`
 195             )
 196           )
 197
 198           this.selection = {}
 199         },
 200
 201         error: err => this.notifier.error(err.message)
 202       })
 203   }
 204
 205   onVideoRemoved (video: Video) {
 206     this.removeVideoFromArray(video.id)
 207   }
 208
 209   changeOwnership (video: Video) {
 210     this.videoChangeOwnershipModal.show(video)
 211   }
 212
 213   private removeVideoFromArray (id: number) {
 214     this.videos = this.videos.filter(v => v.id !== id)
 215   }
 216
 217   private buildActions () {
 218     this.moreVideoActions = [
 219       [
 220         {
 221           label: $localize`Change ownership`,
 222           handler: ({ video }) => this.changeOwnership(video),
 223           iconName: 'ownership-change'
 224         }
 225       ]
 226     ]
 227   }
 228 }