]>
Commit | Line | Data |
---|---|---|
1 | import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' | |
2 | import { AuthService, Notifier, ServerService } from '@app/core' | |
3 | import { Video, VideoService } from '@app/shared/shared-main' | |
4 | import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' | |
5 | import { secondsToTime } from '@shared/core-utils' | |
6 | import { HTMLServerConfig, VideoPlaylistElementType, VideoPlaylistElementUpdate, VideoPrivacy } from '@shared/models' | |
7 | import { VideoPlaylistElement } from './video-playlist-element.model' | |
8 | import { VideoPlaylist } from './video-playlist.model' | |
9 | import { VideoPlaylistService } from './video-playlist.service' | |
10 | ||
11 | @Component({ | |
12 | selector: 'my-video-playlist-element-miniature', | |
13 | styleUrls: [ './video-playlist-element-miniature.component.scss' ], | |
14 | templateUrl: './video-playlist-element-miniature.component.html', | |
15 | changeDetection: ChangeDetectionStrategy.OnPush | |
16 | }) | |
17 | export class VideoPlaylistElementMiniatureComponent implements OnInit { | |
18 | @ViewChild('moreDropdown') moreDropdown: NgbDropdown | |
19 | ||
20 | @Input() playlist: VideoPlaylist | |
21 | @Input() playlistElement: VideoPlaylistElement | |
22 | @Input() owned = false | |
23 | @Input() playing = false | |
24 | @Input() rowLink = false | |
25 | @Input() accountLink = true | |
26 | @Input() position: number // Keep this property because we're in the OnPush change detection strategy | |
27 | @Input() touchScreenEditButton = false | |
28 | ||
29 | @Output() elementRemoved = new EventEmitter<VideoPlaylistElement>() | |
30 | ||
31 | displayTimestampOptions = false | |
32 | ||
33 | timestampOptions: { | |
34 | startTimestampEnabled: boolean | |
35 | startTimestamp: number | |
36 | stopTimestampEnabled: boolean | |
37 | stopTimestamp: number | |
38 | } = {} as any | |
39 | ||
40 | private serverConfig: HTMLServerConfig | |
41 | ||
42 | constructor ( | |
43 | private authService: AuthService, | |
44 | private serverService: ServerService, | |
45 | private notifier: Notifier, | |
46 | private videoPlaylistService: VideoPlaylistService, | |
47 | private videoService: VideoService, | |
48 | private cdr: ChangeDetectorRef | |
49 | ) {} | |
50 | ||
51 | ngOnInit (): void { | |
52 | this.serverConfig = this.serverService.getHTMLConfig() | |
53 | } | |
54 | ||
55 | getVideoOwnerDisplayType (element: VideoPlaylistElement) { | |
56 | return this.videoService.buildDefaultOwnerDisplayType(element.video) | |
57 | } | |
58 | ||
59 | isVideoPrivate () { | |
60 | return this.playlistElement.video.privacy.id === VideoPrivacy.PRIVATE | |
61 | } | |
62 | ||
63 | isUnavailable (e: VideoPlaylistElement) { | |
64 | return e.type === VideoPlaylistElementType.UNAVAILABLE | |
65 | } | |
66 | ||
67 | isPrivate (e: VideoPlaylistElement) { | |
68 | return e.type === VideoPlaylistElementType.PRIVATE | |
69 | } | |
70 | ||
71 | isDeleted (e: VideoPlaylistElement) { | |
72 | return e.type === VideoPlaylistElementType.DELETED | |
73 | } | |
74 | ||
75 | buildRouterLink () { | |
76 | if (!this.playlist) return null | |
77 | ||
78 | return VideoPlaylist.buildWatchUrl(this.playlist) | |
79 | } | |
80 | ||
81 | buildRouterQuery () { | |
82 | if (!this.playlistElement?.video) return {} | |
83 | ||
84 | return { | |
85 | playlistPosition: this.playlistElement.position, | |
86 | start: this.playlistElement.startTimestamp, | |
87 | stop: this.playlistElement.stopTimestamp, | |
88 | resume: true | |
89 | } | |
90 | } | |
91 | ||
92 | isVideoBlur (video: Video) { | |
93 | return video.isVideoNSFWForUser(this.authService.getUser(), this.serverConfig) | |
94 | } | |
95 | ||
96 | removeFromPlaylist (playlistElement: VideoPlaylistElement) { | |
97 | const videoId = this.playlistElement.video ? this.playlistElement.video.id : undefined | |
98 | ||
99 | this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, playlistElement.id, videoId) | |
100 | .subscribe({ | |
101 | next: () => { | |
102 | this.notifier.success($localize`Video removed from ${this.playlist.displayName}`) | |
103 | this.elementRemoved.emit(playlistElement) | |
104 | }, | |
105 | ||
106 | error: err => this.notifier.error(err.message) | |
107 | }) | |
108 | ||
109 | this.moreDropdown.close() | |
110 | } | |
111 | ||
112 | updateTimestamps (playlistElement: VideoPlaylistElement) { | |
113 | const body: VideoPlaylistElementUpdate = {} | |
114 | ||
115 | body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null | |
116 | body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null | |
117 | ||
118 | this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, playlistElement.id, body, this.playlistElement.video.id) | |
119 | .subscribe({ | |
120 | next: () => { | |
121 | this.notifier.success($localize`Timestamps updated`) | |
122 | ||
123 | playlistElement.startTimestamp = body.startTimestamp | |
124 | playlistElement.stopTimestamp = body.stopTimestamp | |
125 | ||
126 | this.cdr.detectChanges() | |
127 | }, | |
128 | ||
129 | error: err => this.notifier.error(err.message) | |
130 | }) | |
131 | ||
132 | this.moreDropdown.close() | |
133 | } | |
134 | ||
135 | formatTimestamp (playlistElement: VideoPlaylistElement) { | |
136 | const start = playlistElement.startTimestamp | |
137 | const stop = playlistElement.stopTimestamp | |
138 | ||
139 | const startFormatted = secondsToTime(start, true, ':') | |
140 | const stopFormatted = secondsToTime(stop, true, ':') | |
141 | ||
142 | if (start === null && stop === null) return '' | |
143 | ||
144 | if (start !== null && stop === null) return $localize`Starts at ` + startFormatted | |
145 | if (start === null && stop !== null) return $localize`Stops at ` + stopFormatted | |
146 | ||
147 | return $localize`Starts at ` + startFormatted + $localize` and stops at ` + stopFormatted | |
148 | } | |
149 | ||
150 | onDropdownOpenChange () { | |
151 | this.displayTimestampOptions = false | |
152 | } | |
153 | ||
154 | toggleDisplayTimestampsOptions (event: Event, playlistElement: VideoPlaylistElement) { | |
155 | event.preventDefault() | |
156 | ||
157 | this.displayTimestampOptions = !this.displayTimestampOptions | |
158 | ||
159 | if (this.displayTimestampOptions === true) { | |
160 | this.timestampOptions = { | |
161 | startTimestampEnabled: false, | |
162 | stopTimestampEnabled: false, | |
163 | startTimestamp: 0, | |
164 | stopTimestamp: playlistElement.video.duration | |
165 | } | |
166 | ||
167 | if (playlistElement.startTimestamp) { | |
168 | this.timestampOptions.startTimestampEnabled = true | |
169 | this.timestampOptions.startTimestamp = playlistElement.startTimestamp | |
170 | } | |
171 | ||
172 | if (playlistElement.stopTimestamp) { | |
173 | this.timestampOptions.stopTimestampEnabled = true | |
174 | this.timestampOptions.stopTimestamp = playlistElement.stopTimestamp | |
175 | } | |
176 | } | |
177 | ||
178 | this.cdr.markForCheck() | |
179 | } | |
180 | } |