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

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