client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts

   1 import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
   2 import { AuthService, ConfirmService, Notifier, ScreenService, ServerService } from '@app/core'
   3 import { BlocklistService, VideoBlockComponent, VideoBlockService, VideoReportComponent } from '@app/shared/shared-moderation'
   4 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
   5 import { VideoCaption } from '@shared/models'
   6 import {
   7   Actor,
   8   DropdownAction,
   9   DropdownButtonSize,
  10   DropdownDirection,
  11   RedundancyService,
  12   Video,
  13   VideoDetails,
  14   VideoService
  15 } from '../shared-main'
  16 import { LiveStreamInformationComponent } from '../shared-video-live'
  17 import { VideoAddToPlaylistComponent } from '../shared-video-playlist'
  18 import { VideoDownloadComponent } from './video-download.component'
  19
  20 export type VideoActionsDisplayType = {
  21   playlist?: boolean
  22   download?: boolean
  23   update?: boolean
  24   blacklist?: boolean
  25   delete?: boolean
  26   report?: boolean
  27   duplicate?: boolean
  28   mute?: boolean
  29   liveInfo?: boolean
  30   removeFiles?: boolean
  31   transcoding?: boolean
  32   studio?: boolean
  33   stats?: boolean
  34 }
  35
  36 @Component({
  37   selector: 'my-video-actions-dropdown',
  38   templateUrl: './video-actions-dropdown.component.html',
  39   styleUrls: [ './video-actions-dropdown.component.scss' ]
  40 })
  41 export class VideoActionsDropdownComponent implements OnChanges {
  42   @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
  43   @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
  44
  45   @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
  46   @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
  47   @ViewChild('videoBlockModal') videoBlockModal: VideoBlockComponent
  48   @ViewChild('liveStreamInformationModal') liveStreamInformationModal: LiveStreamInformationComponent
  49
  50   @Input() video: Video | VideoDetails
  51   @Input() videoCaptions: VideoCaption[] = []
  52
  53   @Input() displayOptions: VideoActionsDisplayType = {
  54     playlist: false,
  55     download: true,
  56     update: true,
  57     blacklist: true,
  58     delete: true,
  59     report: true,
  60     duplicate: true,
  61     mute: true,
  62     liveInfo: false,
  63     removeFiles: false,
  64     transcoding: false,
  65     studio: true,
  66     stats: true
  67   }
  68   @Input() placement = 'left'
  69   @Input() moreActions: DropdownAction<{ video: Video }>[][] = []
  70
  71   @Input() label: string
  72
  73   @Input() buttonStyled = false
  74   @Input() buttonSize: DropdownButtonSize = 'normal'
  75   @Input() buttonDirection: DropdownDirection = 'vertical'
  76
  77   @Output() videoFilesRemoved = new EventEmitter()
  78   @Output() videoRemoved = new EventEmitter()
  79   @Output() videoUnblocked = new EventEmitter()
  80   @Output() videoBlocked = new EventEmitter()
  81   @Output() videoAccountMuted = new EventEmitter()
  82   @Output() transcodingCreated = new EventEmitter()
  83   @Output() modalOpened = new EventEmitter()
  84
  85   videoActions: DropdownAction<{ video: Video }>[][] = []
  86
  87   private loaded = false
  88
  89   constructor (
  90     private authService: AuthService,
  91     private notifier: Notifier,
  92     private confirmService: ConfirmService,
  93     private blocklistService: BlocklistService,
  94     private videoBlocklistService: VideoBlockService,
  95     private screenService: ScreenService,
  96     private videoService: VideoService,
  97     private redundancyService: RedundancyService,
  98     private serverService: ServerService
  99   ) { }
 100
 101   get user () {
 102     return this.authService.getUser()
 103   }
 104
 105   ngOnChanges () {
 106     if (this.loaded) {
 107       this.loaded = false
 108       if (this.playlistAdd) this.playlistAdd.reload()
 109     }
 110
 111     this.buildActions()
 112   }
 113
 114   isUserLoggedIn () {
 115     return this.authService.isLoggedIn()
 116   }
 117
 118   loadDropdownInformation () {
 119     if (!this.isUserLoggedIn() || this.loaded === true) return
 120
 121     this.loaded = true
 122
 123     if (this.displayOptions.playlist) this.playlistAdd.load()
 124   }
 125
 126   /* Show modals */
 127
 128   showDownloadModal () {
 129     this.modalOpened.emit()
 130
 131     this.videoDownloadModal.show(this.video as VideoDetails, this.videoCaptions)
 132   }
 133
 134   showReportModal () {
 135     this.modalOpened.emit()
 136
 137     this.videoReportModal.show()
 138   }
 139
 140   showBlockModal () {
 141     this.modalOpened.emit()
 142
 143     this.videoBlockModal.show([ this.video ])
 144   }
 145
 146   showLiveInfoModal (video: Video) {
 147     this.modalOpened.emit()
 148
 149     this.liveStreamInformationModal.show(video)
 150   }
 151
 152   /* Actions checker */
 153
 154   isVideoUpdatable () {
 155     return this.video.isUpdatableBy(this.user)
 156   }
 157
 158   isVideoEditable () {
 159     return this.video.isEditableBy(this.user, this.serverService.getHTMLConfig().videoStudio.enabled)
 160   }
 161
 162   isVideoStatsAvailable () {
 163     return this.video.canSeeStats(this.user)
 164   }
 165
 166   isVideoRemovable () {
 167     return this.video.isRemovableBy(this.user)
 168   }
 169
 170   isVideoBlockable () {
 171     return this.video.isBlockableBy(this.user)
 172   }
 173
 174   isVideoUnblockable () {
 175     return this.video.isUnblockableBy(this.user)
 176   }
 177
 178   isVideoLiveInfoAvailable () {
 179     return this.video.isLiveInfoAvailableBy(this.user)
 180   }
 181
 182   isVideoDownloadable () {
 183     return this.video &&
 184       this.video.isLive !== true &&
 185       this.video instanceof VideoDetails &&
 186       this.video.downloadEnabled
 187   }
 188
 189   canVideoBeDuplicated () {
 190     return !this.video.isLive && this.video.canBeDuplicatedBy(this.user)
 191   }
 192
 193   isVideoAccountMutable () {
 194     return this.video.account.id !== this.user.account.id
 195   }
 196
 197   canRemoveVideoFiles () {
 198     return this.video.canRemoveFiles(this.user)
 199   }
 200
 201   canRunTranscoding () {
 202     return this.video.canRunTranscoding(this.user)
 203   }
 204
 205   /* Action handlers */
 206
 207   async unblockVideo () {
 208     const confirmMessage = $localize`Do you really want to unblock ${this.video.name}? It will be available again in the videos list.`
 209
 210     const res = await this.confirmService.confirm(confirmMessage, $localize`Unblock ${this.video.name}`)
 211     if (res === false) return
 212
 213     this.videoBlocklistService.unblockVideo(this.video.id)
 214         .subscribe({
 215           next: () => {
 216             this.notifier.success($localize`Video ${this.video.name} unblocked.`)
 217
 218             this.video.blacklisted = false
 219             this.video.blacklistedReason = null
 220
 221             this.videoUnblocked.emit()
 222           },
 223
 224           error: err => this.notifier.error(err.message)
 225         })
 226   }
 227
 228   async removeVideo () {
 229     this.modalOpened.emit()
 230
 231     let message = $localize`Do you really want to delete ${this.video.name}?`
 232     if (this.video.isLive) {
 233       message += ' ' + $localize`The live stream will be automatically terminated and replays won't be saved.`
 234     }
 235
 236     const res = await this.confirmService.confirm(message, $localize`Delete ${this.video.name}`)
 237     if (res === false) return
 238
 239     this.videoService.removeVideo(this.video.id)
 240         .subscribe({
 241           next: () => {
 242             this.notifier.success($localize`Video ${this.video.name} deleted.`)
 243             this.videoRemoved.emit()
 244           },
 245
 246           error: err => this.notifier.error(err.message)
 247         })
 248   }
 249
 250   duplicateVideo () {
 251     this.redundancyService.addVideoRedundancy(this.video)
 252         .subscribe({
 253           next: () => {
 254             const message = $localize`${this.video.name} will be duplicated by your instance.`
 255             this.notifier.success(message)
 256           },
 257
 258           error: err => this.notifier.error(err.message)
 259         })
 260   }
 261
 262   muteVideoAccount () {
 263     const params = { nameWithHost: Actor.CREATE_BY_STRING(this.video.account.name, this.video.account.host) }
 264
 265     this.blocklistService.blockAccountByUser(params)
 266         .subscribe({
 267           next: () => {
 268             this.notifier.success($localize`Account ${params.nameWithHost} muted.`)
 269             this.videoAccountMuted.emit()
 270           },
 271
 272           error: err => this.notifier.error(err.message)
 273         })
 274   }
 275
 276   async removeVideoFiles (video: Video, type: 'hls' | 'webtorrent') {
 277     const confirmMessage = $localize`Do you really want to remove "${this.video.name}" files?`
 278
 279     const res = await this.confirmService.confirm(confirmMessage, $localize`Remove "${this.video.name}" files`)
 280     if (res === false) return
 281
 282     this.videoService.removeVideoFiles([ video.id ], type)
 283       .subscribe({
 284         next: () => {
 285           this.notifier.success($localize`Removed files of ${video.name}.`)
 286           this.videoFilesRemoved.emit()
 287         },
 288
 289         error: err => this.notifier.error(err.message)
 290       })
 291   }
 292
 293   runTranscoding (video: Video, type: 'hls' | 'webtorrent') {
 294     this.videoService.runTranscoding([ video.id ], type)
 295       .subscribe({
 296         next: () => {
 297           this.notifier.success($localize`Transcoding jobs created for ${video.name}.`)
 298           this.transcodingCreated.emit()
 299         },
 300
 301         error: err => this.notifier.error(err.message)
 302       })
 303   }
 304
 305   onVideoBlocked () {
 306     this.videoBlocked.emit()
 307   }
 308
 309   getPlaylistDropdownPlacement () {
 310     if (this.screenService.isInSmallView()) {
 311       return 'bottom-right'
 312     }
 313
 314     return 'bottom-left bottom-right'
 315   }
 316
 317   private buildActions () {
 318     this.videoActions = [
 319       [
 320         {
 321           label: $localize`Save to playlist`,
 322           handler: () => this.playlistDropdown.toggle(),
 323           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.playlist,
 324           iconName: 'playlist-add'
 325         }
 326       ],
 327       [ // actions regarding the video
 328         {
 329           label: $localize`Download`,
 330           handler: () => this.showDownloadModal(),
 331           isDisplayed: () => this.displayOptions.download && this.isVideoDownloadable(),
 332           iconName: 'download'
 333         },
 334         {
 335           label: $localize`Display live information`,
 336           handler: ({ video }) => this.showLiveInfoModal(video),
 337           isDisplayed: () => this.displayOptions.liveInfo && this.isVideoLiveInfoAvailable(),
 338           iconName: 'live'
 339         },
 340         {
 341           label: $localize`Update`,
 342           linkBuilder: ({ video }) => [ '/videos/update', video.uuid ],
 343           iconName: 'edit',
 344           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.update && this.isVideoUpdatable()
 345         },
 346         {
 347           label: $localize`Studio`,
 348           linkBuilder: ({ video }) => [ '/studio/edit', video.uuid ],
 349           iconName: 'film',
 350           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.studio && this.isVideoEditable()
 351         },
 352         {
 353           label: $localize`Stats`,
 354           linkBuilder: ({ video }) => [ '/stats/videos', video.uuid ],
 355           iconName: 'stats',
 356           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.stats && this.isVideoStatsAvailable()
 357         },
 358         {
 359           label: $localize`Block`,
 360           handler: () => this.showBlockModal(),
 361           iconName: 'no',
 362           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.blacklist && this.isVideoBlockable()
 363         },
 364         {
 365           label: $localize`Unblock`,
 366           handler: () => this.unblockVideo(),
 367           iconName: 'undo',
 368           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.blacklist && this.isVideoUnblockable()
 369         },
 370         {
 371           label: $localize`Mirror`,
 372           handler: () => this.duplicateVideo(),
 373           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.duplicate && this.canVideoBeDuplicated(),
 374           iconName: 'cloud-download'
 375         },
 376         {
 377           label: $localize`Delete`,
 378           handler: () => this.removeVideo(),
 379           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.delete && this.isVideoRemovable(),
 380           iconName: 'delete'
 381         },
 382         {
 383           label: $localize`Report`,
 384           handler: () => this.showReportModal(),
 385           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.report,
 386           iconName: 'flag'
 387         }
 388       ],
 389       [
 390         {
 391           label: $localize`Run HLS transcoding`,
 392           handler: ({ video }) => this.runTranscoding(video, 'hls'),
 393           isDisplayed: () => this.displayOptions.transcoding && this.canRunTranscoding(),
 394           iconName: 'cog'
 395         },
 396         {
 397           label: $localize`Run WebTorrent transcoding`,
 398           handler: ({ video }) => this.runTranscoding(video, 'webtorrent'),
 399           isDisplayed: () => this.displayOptions.transcoding && this.canRunTranscoding(),
 400           iconName: 'cog'
 401         },
 402         {
 403           label: $localize`Delete HLS files`,
 404           handler: ({ video }) => this.removeVideoFiles(video, 'hls'),
 405           isDisplayed: () => this.displayOptions.removeFiles && this.canRemoveVideoFiles(),
 406           iconName: 'delete'
 407         },
 408         {
 409           label: $localize`Delete WebTorrent files`,
 410           handler: ({ video }) => this.removeVideoFiles(video, 'webtorrent'),
 411           isDisplayed: () => this.displayOptions.removeFiles && this.canRemoveVideoFiles(),
 412           iconName: 'delete'
 413         }
 414       ],
 415       [ // actions regarding the account/its server
 416         {
 417           label: $localize`Mute account`,
 418           handler: () => this.muteVideoAccount(),
 419           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.mute && this.isVideoAccountMutable(),
 420           iconName: 'no'
 421         }
 422       ]
 423     ]
 424
 425     this.videoActions = this.videoActions.concat(this.moreActions)
 426   }
 427 }