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 ]
 109         .sort((a, b) => a.displayName.localeCompare(b.displayName))
 110         .map(c => {
 111           return {
 112             value: 'channel:' + c.name,
 113             label: c.displayName
 114           }
 115         })
 116
 117       this.inputFilters = [
 118         {
 119           title: $localize`Advanced filters`,
 120           children: [
 121             {
 122               value: 'isLive:true',
 123               label: $localize`Only live videos`
 124             }
 125           ]
 126         },
 127
 128         {
 129           title: $localize`Channel filters`,
 130           children: channelFilters
 131         }
 132       ]
 133     })
 134   }
 135
 136   onSearch (search: string) {
 137     this.search = search
 138     this.reloadData()
 139   }
 140
 141   reloadData () {
 142     this.videosSelection.reloadVideos()
 143   }
 144
 145   onChangeSortColumn () {
 146     this.videosSelection.reloadVideos()
 147   }
 148
 149   disableForReuse () {
 150     this.disabled = true
 151   }
 152
 153   enabledForReuse () {
 154     this.disabled = false
 155   }
 156
 157   getVideosObservable (page: number) {
 158     const newPagination = immutableAssign(this.pagination, { currentPage: page })
 159
 160     return this.videoService.getMyVideos({
 161       videoPagination: newPagination,
 162       sort: this.sort,
 163       userChannels: this.userChannels,
 164       search: this.search
 165     }).pipe(
 166       tap(res => this.pagination.totalItems = res.total),
 167       tap(({ data }) => this.fetchVideosContainedInPlaylists(data))
 168     )
 169   }
 170
 171   private fetchVideosContainedInPlaylists (videos: Video[]) {
 172     this.playlistService.doVideosExistInPlaylist(videos.map(v => v.id))
 173       .subscribe(result => {
 174         this.videosContainedInPlaylists = Object.keys(result).reduce((acc, videoId) => ({
 175           ...acc,
 176           [videoId]: uniqBy(result[+videoId], (p: VideoExistInPlaylist) => p.playlistId)
 177         }), this.videosContainedInPlaylists)
 178       })
 179   }
 180
 181   async deleteSelectedVideos () {
 182     const toDeleteVideosIds = Object.entries(this.selection)
 183                                     .filter(([ _k, v ]) => v === true)
 184                                     .map(([ k, _v ]) => parseInt(k, 10))
 185
 186     const res = await this.confirmService.confirm(
 187       prepareIcu($localize`Do you really want to delete {length, plural, =1 {this video} other {{length} videos}}?`)(
 188         { length: toDeleteVideosIds.length },
 189         $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`
 190       ),
 191       $localize`Delete`
 192     )
 193     if (res === false) return
 194
 195     const observables: Observable<any>[] = []
 196     for (const videoId of toDeleteVideosIds) {
 197       const o = this.videoService.removeVideo(videoId)
 198                     .pipe(tap(() => this.removeVideoFromArray(videoId)))
 199
 200       observables.push(o)
 201     }
 202
 203     concat(...observables)
 204       .pipe(toArray())
 205       .subscribe({
 206         next: () => {
 207           this.notifier.success(
 208             prepareIcu($localize`{length, plural, =1 {Video has been deleted} other {{length} videos have been deleted}}`)(
 209               { length: toDeleteVideosIds.length },
 210               $localize`${toDeleteVideosIds.length} have been deleted.`
 211             )
 212           )
 213
 214           this.selection = {}
 215         },
 216
 217         error: err => this.notifier.error(err.message)
 218       })
 219   }
 220
 221   onVideoRemoved (video: Video) {
 222     this.removeVideoFromArray(video.id)
 223   }
 224
 225   changeOwnership (video: Video) {
 226     this.videoChangeOwnershipModal.show(video)
 227   }
 228
 229   private removeVideoFromArray (id: number) {
 230     this.videos = this.videos.filter(v => v.id !== id)
 231   }
 232
 233   private buildActions () {
 234     this.moreVideoActions = [
 235       [
 236         {
 237           label: $localize`Change ownership`,
 238           handler: ({ video }) => this.changeOwnership(video),
 239           iconName: 'ownership-change'
 240         }
 241       ]
 242     ]
 243   }
 244 }