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 { VideoBlockComponent, VideoBlockService, VideoReportComponent, BlocklistService } from '@app/shared/shared-moderation'
   4 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
   5 import { I18n } from '@ngx-translate/i18n-polyfill'
   6 import { VideoCaption } from '@shared/models'
   7 import { DropdownAction, DropdownButtonSize, DropdownDirection, RedundancyService, Video, VideoDetails, VideoService, Actor } from '../shared-main'
   8 import { VideoAddToPlaylistComponent } from '../shared-video-playlist'
   9 import { VideoDownloadComponent } from './video-download.component'
  10
  11 export type VideoActionsDisplayType = {
  12   playlist?: boolean
  13   download?: boolean
  14   update?: boolean
  15   blacklist?: boolean
  16   delete?: boolean
  17   report?: boolean
  18   duplicate?: boolean
  19   mute?: boolean
  20 }
  21
  22 @Component({
  23   selector: 'my-video-actions-dropdown',
  24   templateUrl: './video-actions-dropdown.component.html',
  25   styleUrls: [ './video-actions-dropdown.component.scss' ]
  26 })
  27 export class VideoActionsDropdownComponent implements OnChanges {
  28   @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
  29   @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
  30
  31   @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
  32   @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
  33   @ViewChild('videoBlockModal') videoBlockModal: VideoBlockComponent
  34
  35   @Input() video: Video | VideoDetails
  36   @Input() videoCaptions: VideoCaption[] = []
  37
  38   @Input() displayOptions: VideoActionsDisplayType = {
  39     playlist: false,
  40     download: true,
  41     update: true,
  42     blacklist: true,
  43     delete: true,
  44     report: true,
  45     duplicate: true,
  46     mute: true
  47   }
  48   @Input() placement = 'left'
  49
  50   @Input() label: string
  51
  52   @Input() buttonStyled = false
  53   @Input() buttonSize: DropdownButtonSize = 'normal'
  54   @Input() buttonDirection: DropdownDirection = 'vertical'
  55
  56   @Output() videoRemoved = new EventEmitter()
  57   @Output() videoUnblocked = new EventEmitter()
  58   @Output() videoBlocked = new EventEmitter()
  59   @Output() videoAccountMuted = new EventEmitter()
  60   @Output() modalOpened = new EventEmitter()
  61
  62   videoActions: DropdownAction<{ video: Video }>[][] = []
  63
  64   private loaded = false
  65
  66   constructor (
  67     private authService: AuthService,
  68     private notifier: Notifier,
  69     private confirmService: ConfirmService,
  70     private blocklistService: BlocklistService,
  71     private videoBlocklistService: VideoBlockService,
  72     private screenService: ScreenService,
  73     private videoService: VideoService,
  74     private redundancyService: RedundancyService,
  75     private i18n: I18n
  76   ) { }
  77
  78   get user () {
  79     return this.authService.getUser()
  80   }
  81
  82   ngOnChanges () {
  83     if (this.loaded) {
  84       this.loaded = false
  85       this.playlistAdd.reload()
  86     }
  87
  88     this.buildActions()
  89   }
  90
  91   isUserLoggedIn () {
  92     return this.authService.isLoggedIn()
  93   }
  94
  95   loadDropdownInformation () {
  96     if (!this.isUserLoggedIn() || this.loaded === true) return
  97
  98     this.loaded = true
  99
 100     if (this.displayOptions.playlist) this.playlistAdd.load()
 101   }
 102
 103   /* Show modals */
 104
 105   showDownloadModal () {
 106     this.modalOpened.emit()
 107
 108     this.videoDownloadModal.show(this.video as VideoDetails, this.videoCaptions)
 109   }
 110
 111   showReportModal () {
 112     this.modalOpened.emit()
 113
 114     this.videoReportModal.show()
 115   }
 116
 117   showBlockModal () {
 118     this.modalOpened.emit()
 119
 120     this.videoBlockModal.show()
 121   }
 122
 123   /* Actions checker */
 124
 125   isVideoUpdatable () {
 126     return this.video.isUpdatableBy(this.user)
 127   }
 128
 129   isVideoRemovable () {
 130     return this.video.isRemovableBy(this.user)
 131   }
 132
 133   isVideoBlockable () {
 134     return this.video.isBlockableBy(this.user)
 135   }
 136
 137   isVideoUnblockable () {
 138     return this.video.isUnblockableBy(this.user)
 139   }
 140
 141   isVideoDownloadable () {
 142     return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled
 143   }
 144
 145   canVideoBeDuplicated () {
 146     return this.video.canBeDuplicatedBy(this.user)
 147   }
 148
 149   isVideoAccountMutable () {
 150     return this.video.account.id !== this.user.account.id
 151   }
 152
 153   /* Action handlers */
 154
 155   async unblockVideo () {
 156     const confirmMessage = this.i18n(
 157       'Do you really want to unblock this video? It will be available again in the videos list.'
 158     )
 159
 160     const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblock'))
 161     if (res === false) return
 162
 163     this.videoBlocklistService.unblockVideo(this.video.id)
 164         .subscribe(
 165           () => {
 166             this.notifier.success(this.i18n('Video {{name}} unblocked.', { name: this.video.name }))
 167
 168             this.video.blacklisted = false
 169             this.video.blockedReason = null
 170
 171             this.videoUnblocked.emit()
 172           },
 173
 174           err => this.notifier.error(err.message)
 175         )
 176   }
 177
 178   async removeVideo () {
 179     this.modalOpened.emit()
 180
 181     const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete'))
 182     if (res === false) return
 183
 184     this.videoService.removeVideo(this.video.id)
 185         .subscribe(
 186           () => {
 187             this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name }))
 188
 189             this.videoRemoved.emit()
 190           },
 191
 192           error => this.notifier.error(error.message)
 193         )
 194   }
 195
 196   duplicateVideo () {
 197     this.redundancyService.addVideoRedundancy(this.video)
 198         .subscribe(
 199           () => {
 200             const message = this.i18n('This video will be duplicated by your instance.')
 201             this.notifier.success(message)
 202           },
 203
 204           err => this.notifier.error(err.message)
 205         )
 206   }
 207
 208   muteVideoAccount () {
 209     const params = { nameWithHost: Actor.CREATE_BY_STRING(this.video.account.name, this.video.account.host) }
 210
 211     this.blocklistService.blockAccountByUser(params)
 212         .subscribe(
 213           () => {
 214             this.notifier.success(this.i18n('Account {{nameWithHost}} muted.', params))
 215
 216             this.videoAccountMuted.emit()
 217           },
 218
 219           err => this.notifier.error(err.message)
 220         )
 221   }
 222
 223   onVideoBlocked () {
 224     this.videoBlocked.emit()
 225   }
 226
 227   getPlaylistDropdownPlacement () {
 228     if (this.screenService.isInSmallView()) {
 229       return 'bottom-right'
 230     }
 231
 232     return 'bottom-left bottom-right'
 233   }
 234
 235   private buildActions () {
 236     this.videoActions = [
 237       [
 238         {
 239           label: this.i18n('Save to playlist'),
 240           handler: () => this.playlistDropdown.toggle(),
 241           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.playlist,
 242           iconName: 'playlist-add'
 243         }
 244       ],
 245       [ // actions regarding the video
 246         {
 247           label: this.i18n('Download'),
 248           handler: () => this.showDownloadModal(),
 249           isDisplayed: () => this.displayOptions.download && this.isVideoDownloadable(),
 250           iconName: 'download'
 251         },
 252         {
 253           label: this.i18n('Update'),
 254           linkBuilder: ({ video }) => [ '/videos/update', video.uuid ],
 255           iconName: 'edit',
 256           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.update && this.isVideoUpdatable()
 257         },
 258         {
 259           label: this.i18n('Block'),
 260           handler: () => this.showBlockModal(),
 261           iconName: 'no',
 262           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.blacklist && this.isVideoBlockable()
 263         },
 264         {
 265           label: this.i18n('Unblock'),
 266           handler: () => this.unblockVideo(),
 267           iconName: 'undo',
 268           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.blacklist && this.isVideoUnblockable()
 269         },
 270         {
 271           label: this.i18n('Mirror'),
 272           handler: () => this.duplicateVideo(),
 273           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.duplicate && this.canVideoBeDuplicated(),
 274           iconName: 'cloud-download'
 275         },
 276         {
 277           label: this.i18n('Delete'),
 278           handler: () => this.removeVideo(),
 279           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.delete && this.isVideoRemovable(),
 280           iconName: 'delete'
 281         },
 282         {
 283           label: this.i18n('Report'),
 284           handler: () => this.showReportModal(),
 285           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.report,
 286           iconName: 'flag'
 287         }
 288       ],
 289       [ // actions regarding the account/its server
 290         {
 291           label: this.i18n('Mute account'),
 292           handler: () => this.muteVideoAccount(),
 293           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.mute && this.isVideoAccountMutable(),
 294           iconName: 'no'
 295         }
 296       ]
 297     ]
 298   }
 299 }