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