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