]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
Add modal to display live information
[github/Chocobozzz/PeerTube.git] / 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 }