1 import { AfterContentInit, AfterViewInit, Component, EventEmitter, Input, OnChanges, OnInit, 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'
17 export type VideoActionsDisplayType = {
27 selector: 'my-video-actions-dropdown',
28 templateUrl: './video-actions-dropdown.component.html',
29 styleUrls: [ './video-actions-dropdown.component.scss' ]
31 export class VideoActionsDropdownComponent implements AfterViewInit, OnChanges {
32 @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
33 @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
35 @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
36 @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
37 @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
39 @Input() video: Video | VideoDetails
41 @Input() displayOptions: VideoActionsDisplayType = {
49 @Input() placement = 'left'
51 @Input() label: string
53 @Input() buttonStyled = false
54 @Input() buttonSize: DropdownButtonSize = 'normal'
55 @Input() buttonDirection: DropdownDirection = 'vertical'
57 @Output() videoRemoved = new EventEmitter()
58 @Output() videoUnblacklisted = new EventEmitter()
59 @Output() videoBlacklisted = new EventEmitter()
61 videoActions: DropdownAction<{ video: Video }>[][] = []
63 private loaded = false
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,
78 return this.authService.getUser()
82 // We rely on mouseenter to lazy load actions
83 if (this.screenService.isInTouchScreen()) {
84 this.loadDropdownInformation()
93 return this.authService.isLoggedIn()
96 loadDropdownInformation () {
97 if (!this.isUserLoggedIn() || this.loaded === true) return
101 if (this.displayOptions.playlist) this.playlistAdd.load()
106 showDownloadModal () {
107 this.videoDownloadModal.show(this.video as VideoDetails)
111 this.videoReportModal.show()
114 showBlacklistModal () {
115 this.videoBlacklistModal.show()
118 /* Actions checker */
120 isVideoUpdatable () {
121 return this.video.isUpdatableBy(this.user)
124 isVideoRemovable () {
125 return this.video.isRemovableBy(this.user)
128 isVideoBlacklistable () {
129 return this.video.isBlackistableBy(this.user)
132 isVideoUnblacklistable () {
133 return this.video.isUnblacklistableBy(this.user)
136 /* Action handlers */
138 async unblacklistVideo () {
139 const confirmMessage = this.i18n(
140 'Do you really want to remove this video from the blacklist? It will be available again in the videos list.'
143 const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblacklist'))
144 if (res === false) return
146 this.videoBlacklistService.removeVideoFromBlacklist(this.video.id).subscribe(
148 this.notifier.success(this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name }))
150 this.video.blacklisted = false
151 this.video.blacklistedReason = null
153 this.videoUnblacklisted.emit()
156 err => this.notifier.error(err.message)
160 async removeVideo () {
161 const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete'))
162 if (res === false) return
164 this.videoService.removeVideo(this.video.id)
167 this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name }))
169 this.videoRemoved.emit()
172 error => this.notifier.error(error.message)
176 onVideoBlacklisted () {
177 this.videoBlacklisted.emit()
180 getPlaylistDropdownPlacement () {
181 if (this.screenService.isInSmallView()) {
182 return 'bottom-right'
185 return 'bottom-left bottom-right'
188 private buildActions () {
189 this.videoActions = []
191 if (this.authService.isLoggedIn()) {
192 this.videoActions.push([
194 label: this.i18n('Save to playlist'),
195 handler: () => this.playlistDropdown.toggle(),
196 isDisplayed: () => this.displayOptions.playlist,
197 iconName: 'playlist-add'
201 this.videoActions.push([
203 label: this.i18n('Download'),
204 handler: () => this.showDownloadModal(),
205 isDisplayed: () => this.displayOptions.download,
209 label: this.i18n('Update'),
210 linkBuilder: ({ video }) => [ '/videos/update', video.uuid ],
212 isDisplayed: () => this.displayOptions.update && this.isVideoUpdatable()
215 label: this.i18n('Blacklist'),
216 handler: () => this.showBlacklistModal(),
218 isDisplayed: () => this.displayOptions.blacklist && this.isVideoBlacklistable()
221 label: this.i18n('Unblacklist'),
222 handler: () => this.unblacklistVideo(),
224 isDisplayed: () => this.displayOptions.blacklist && this.isVideoUnblacklistable()
227 label: this.i18n('Delete'),
228 handler: () => this.removeVideo(),
229 isDisplayed: () => this.displayOptions.delete && this.isVideoRemovable(),
234 this.videoActions.push([
236 label: this.i18n('Report'),
237 handler: () => this.showReportModal(),
238 isDisplayed: () => this.displayOptions.report,