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