]>
Commit | Line | Data |
---|---|---|
1 | import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core' | |
2 | import { Video } from '@app/shared/video/video.model' | |
3 | import { VideoPlaylistElementUpdate } from '@shared/models' | |
4 | import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core' | |
5 | import { ActivatedRoute } from '@angular/router' | |
6 | import { I18n } from '@ngx-translate/i18n-polyfill' | |
7 | import { VideoService } from '@app/shared/video/video.service' | |
8 | import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' | |
9 | import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' | |
10 | import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' | |
11 | import { secondsToTime } from '../../../assets/player/utils' | |
12 | ||
13 | @Component({ | |
14 | selector: 'my-video-playlist-element-miniature', | |
15 | styleUrls: [ './video-playlist-element-miniature.component.scss' ], | |
16 | templateUrl: './video-playlist-element-miniature.component.html' | |
17 | }) | |
18 | export class VideoPlaylistElementMiniatureComponent { | |
19 | @ViewChild('moreDropdown') moreDropdown: NgbDropdown | |
20 | ||
21 | @Input() playlist: VideoPlaylist | |
22 | @Input() video: Video | |
23 | @Input() owned = false | |
24 | @Input() playing = false | |
25 | @Input() rowLink = false | |
26 | @Input() accountLink = true | |
27 | ||
28 | @Output() elementRemoved = new EventEmitter<Video>() | |
29 | ||
30 | displayTimestampOptions = false | |
31 | ||
32 | timestampOptions: { | |
33 | startTimestampEnabled: boolean | |
34 | startTimestamp: number | |
35 | stopTimestampEnabled: boolean | |
36 | stopTimestamp: number | |
37 | } = {} as any | |
38 | ||
39 | constructor ( | |
40 | private authService: AuthService, | |
41 | private serverService: ServerService, | |
42 | private notifier: Notifier, | |
43 | private confirmService: ConfirmService, | |
44 | private route: ActivatedRoute, | |
45 | private i18n: I18n, | |
46 | private videoService: VideoService, | |
47 | private videoPlaylistService: VideoPlaylistService | |
48 | ) {} | |
49 | ||
50 | buildRouterLink () { | |
51 | if (!this.playlist) return null | |
52 | ||
53 | return [ '/videos/watch/playlist', this.playlist.uuid ] | |
54 | } | |
55 | ||
56 | buildRouterQuery () { | |
57 | if (!this.video) return {} | |
58 | ||
59 | return { | |
60 | videoId: this.video.uuid, | |
61 | start: this.video.playlistElement.startTimestamp, | |
62 | stop: this.video.playlistElement.stopTimestamp | |
63 | } | |
64 | } | |
65 | ||
66 | isVideoBlur (video: Video) { | |
67 | return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig()) | |
68 | } | |
69 | ||
70 | removeFromPlaylist (video: Video) { | |
71 | this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, video.id) | |
72 | .subscribe( | |
73 | () => { | |
74 | this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName })) | |
75 | ||
76 | this.elementRemoved.emit(this.video) | |
77 | }, | |
78 | ||
79 | err => this.notifier.error(err.message) | |
80 | ) | |
81 | ||
82 | this.moreDropdown.close() | |
83 | } | |
84 | ||
85 | updateTimestamps (video: Video) { | |
86 | const body: VideoPlaylistElementUpdate = {} | |
87 | ||
88 | body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null | |
89 | body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null | |
90 | ||
91 | this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, video.id, body) | |
92 | .subscribe( | |
93 | () => { | |
94 | this.notifier.success(this.i18n('Timestamps updated')) | |
95 | ||
96 | video.playlistElement.startTimestamp = body.startTimestamp | |
97 | video.playlistElement.stopTimestamp = body.stopTimestamp | |
98 | }, | |
99 | ||
100 | err => this.notifier.error(err.message) | |
101 | ) | |
102 | ||
103 | this.moreDropdown.close() | |
104 | } | |
105 | ||
106 | formatTimestamp (video: Video) { | |
107 | const start = video.playlistElement.startTimestamp | |
108 | const stop = video.playlistElement.stopTimestamp | |
109 | ||
110 | const startFormatted = secondsToTime(start, true, ':') | |
111 | const stopFormatted = secondsToTime(stop, true, ':') | |
112 | ||
113 | if (start === null && stop === null) return '' | |
114 | ||
115 | if (start !== null && stop === null) return this.i18n('Starts at ') + startFormatted | |
116 | if (start === null && stop !== null) return this.i18n('Stops at ') + stopFormatted | |
117 | ||
118 | return this.i18n('Starts at ') + startFormatted + this.i18n(' and stops at ') + stopFormatted | |
119 | } | |
120 | ||
121 | onDropdownOpenChange () { | |
122 | this.displayTimestampOptions = false | |
123 | } | |
124 | ||
125 | toggleDisplayTimestampsOptions (event: Event, video: Video) { | |
126 | event.preventDefault() | |
127 | ||
128 | this.displayTimestampOptions = !this.displayTimestampOptions | |
129 | ||
130 | if (this.displayTimestampOptions === true) { | |
131 | this.timestampOptions = { | |
132 | startTimestampEnabled: false, | |
133 | stopTimestampEnabled: false, | |
134 | startTimestamp: 0, | |
135 | stopTimestamp: video.duration | |
136 | } | |
137 | ||
138 | if (video.playlistElement.startTimestamp) { | |
139 | this.timestampOptions.startTimestampEnabled = true | |
140 | this.timestampOptions.startTimestamp = video.playlistElement.startTimestamp | |
141 | } | |
142 | ||
143 | if (video.playlistElement.stopTimestamp) { | |
144 | this.timestampOptions.stopTimestampEnabled = true | |
145 | this.timestampOptions.stopTimestamp = video.playlistElement.stopTimestamp | |
146 | } | |
147 | } | |
148 | } | |
149 | } |