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

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