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