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