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