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 &&
 150       this.video.isLive !== true &&
 151       this.video instanceof VideoDetails &&
 152       this.video.downloadEnabled
 153   }
 154
 155   canVideoBeDuplicated () {
 156     return this.video.canBeDuplicatedBy(this.user)
 157   }
 158
 159   isVideoAccountMutable () {
 160     return this.video.account.id !== this.user.account.id
 161   }
 162
 163   /* Action handlers */
 164
 165   async unblockVideo () {
 166     const confirmMessage = $localize`Do you really want to unblock this video? It will be available again in the videos list.`
 167
 168     const res = await this.confirmService.confirm(confirmMessage, $localize`Unblock`)
 169     if (res === false) return
 170
 171     this.videoBlocklistService.unblockVideo(this.video.id)
 172         .subscribe(
 173           () => {
 174             this.notifier.success($localize`Video ${this.video.name} unblocked.`)
 175
 176             this.video.blacklisted = false
 177             this.video.blockedReason = null
 178
 179             this.videoUnblocked.emit()
 180           },
 181
 182           err => this.notifier.error(err.message)
 183         )
 184   }
 185
 186   async removeVideo () {
 187     this.modalOpened.emit()
 188
 189     let message = $localize`Do you really want to delete this video?`
 190     if (this.video.isLive) {
 191       message += ' ' + $localize`The live stream will be automatically terminated.`
 192     }
 193
 194     const res = await this.confirmService.confirm(message, $localize`Delete`)
 195     if (res === false) return
 196
 197     this.videoService.removeVideo(this.video.id)
 198         .subscribe(
 199           () => {
 200             this.notifier.success($localize`Video ${this.video.name} deleted.`)
 201             this.videoRemoved.emit()
 202           },
 203
 204           error => this.notifier.error(error.message)
 205         )
 206   }
 207
 208   duplicateVideo () {
 209     this.redundancyService.addVideoRedundancy(this.video)
 210         .subscribe(
 211           () => {
 212             const message = $localize`This video will be duplicated by your instance.`
 213             this.notifier.success(message)
 214           },
 215
 216           err => this.notifier.error(err.message)
 217         )
 218   }
 219
 220   muteVideoAccount () {
 221     const params = { nameWithHost: Actor.CREATE_BY_STRING(this.video.account.name, this.video.account.host) }
 222
 223     this.blocklistService.blockAccountByUser(params)
 224         .subscribe(
 225           () => {
 226             this.notifier.success($localize`Account ${params.nameWithHost} muted.`)
 227             this.videoAccountMuted.emit()
 228           },
 229
 230           err => this.notifier.error(err.message)
 231         )
 232   }
 233
 234   onVideoBlocked () {
 235     this.videoBlocked.emit()
 236   }
 237
 238   getPlaylistDropdownPlacement () {
 239     if (this.screenService.isInSmallView()) {
 240       return 'bottom-right'
 241     }
 242
 243     return 'bottom-left bottom-right'
 244   }
 245
 246   private buildActions () {
 247     this.videoActions = [
 248       [
 249         {
 250           label: $localize`Save to playlist`,
 251           handler: () => this.playlistDropdown.toggle(),
 252           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.playlist,
 253           iconName: 'playlist-add'
 254         }
 255       ],
 256       [ // actions regarding the video
 257         {
 258           label: $localize`Download`,
 259           handler: () => this.showDownloadModal(),
 260           isDisplayed: () => this.displayOptions.download && this.isVideoDownloadable(),
 261           iconName: 'download'
 262         },
 263         {
 264           label: $localize`Update`,
 265           linkBuilder: ({ video }) => [ '/videos/update', video.uuid ],
 266           iconName: 'edit',
 267           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.update && this.isVideoUpdatable()
 268         },
 269         {
 270           label: $localize`Block`,
 271           handler: () => this.showBlockModal(),
 272           iconName: 'no',
 273           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.blacklist && this.isVideoBlockable()
 274         },
 275         {
 276           label: $localize`Unblock`,
 277           handler: () => this.unblockVideo(),
 278           iconName: 'undo',
 279           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.blacklist && this.isVideoUnblockable()
 280         },
 281         {
 282           label: $localize`Mirror`,
 283           handler: () => this.duplicateVideo(),
 284           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.duplicate && this.canVideoBeDuplicated(),
 285           iconName: 'cloud-download'
 286         },
 287         {
 288           label: $localize`Delete`,
 289           handler: () => this.removeVideo(),
 290           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.delete && this.isVideoRemovable(),
 291           iconName: 'delete'
 292         },
 293         {
 294           label: $localize`Report`,
 295           handler: () => this.showReportModal(),
 296           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.report,
 297           iconName: 'flag'
 298         }
 299       ],
 300       [ // actions regarding the account/its server
 301         {
 302           label: $localize`Mute account`,
 303           handler: () => this.muteVideoAccount(),
 304           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.mute && this.isVideoAccountMutable(),
 305           iconName: 'no'
 306         }
 307       ]
 308     ]
 309   }
 310 }