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