diff options
Diffstat (limited to 'client/src/app/shared/video/video-miniature.component.ts')
-rw-r--r-- | client/src/app/shared/video/video-miniature.component.ts | 98 |
1 files changed, 90 insertions, 8 deletions
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts index ba65d33b6..a603f87e5 100644 --- a/client/src/app/shared/video/video-miniature.component.ts +++ b/client/src/app/shared/video/video-miniature.component.ts | |||
@@ -1,12 +1,24 @@ | |||
1 | import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output, ViewChild } from '@angular/core' | 1 | import { |
2 | ChangeDetectionStrategy, | ||
3 | ChangeDetectorRef, | ||
4 | Component, | ||
5 | EventEmitter, | ||
6 | Inject, | ||
7 | Input, | ||
8 | LOCALE_ID, | ||
9 | OnInit, | ||
10 | Output | ||
11 | } from '@angular/core' | ||
2 | import { User } from '../users' | 12 | import { User } from '../users' |
3 | import { Video } from './video.model' | 13 | import { Video } from './video.model' |
4 | import { ServerService } from '@app/core' | 14 | import { AuthService, ServerService } from '@app/core' |
5 | import { ServerConfig, VideoPrivacy, VideoState } from '../../../../../shared' | 15 | import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '../../../../../shared' |
6 | import { I18n } from '@ngx-translate/i18n-polyfill' | 16 | import { I18n } from '@ngx-translate/i18n-polyfill' |
7 | import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component' | 17 | import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component' |
8 | import { ScreenService } from '@app/shared/misc/screen.service' | 18 | import { ScreenService } from '@app/shared/misc/screen.service' |
9 | import { VideoThumbnailComponent } from './video-thumbnail.component' | 19 | import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' |
20 | import { forkJoin } from 'rxjs' | ||
21 | import { first } from 'rxjs/operators' | ||
10 | 22 | ||
11 | export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto' | 23 | export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto' |
12 | export type MiniatureDisplayOptions = { | 24 | export type MiniatureDisplayOptions = { |
@@ -47,8 +59,6 @@ export class VideoMiniatureComponent implements OnInit { | |||
47 | @Output() videoUnblacklisted = new EventEmitter() | 59 | @Output() videoUnblacklisted = new EventEmitter() |
48 | @Output() videoRemoved = new EventEmitter() | 60 | @Output() videoRemoved = new EventEmitter() |
49 | 61 | ||
50 | @ViewChild('thumbnail', { static: true }) thumbnail: VideoThumbnailComponent | ||
51 | |||
52 | videoActionsDisplayOptions: VideoActionsDisplayType = { | 62 | videoActionsDisplayOptions: VideoActionsDisplayType = { |
53 | playlist: true, | 63 | playlist: true, |
54 | download: false, | 64 | download: false, |
@@ -60,14 +70,28 @@ export class VideoMiniatureComponent implements OnInit { | |||
60 | showActions = false | 70 | showActions = false |
61 | serverConfig: ServerConfig | 71 | serverConfig: ServerConfig |
62 | 72 | ||
73 | addToWatchLaterText: string | ||
74 | addedToWatchLaterText: string | ||
75 | inWatchLaterPlaylist: boolean | ||
76 | |||
77 | watchLaterPlaylist: { | ||
78 | id: number | ||
79 | playlistElementId?: number | ||
80 | } | ||
81 | |||
63 | private ownerDisplayTypeChosen: 'account' | 'videoChannel' | 82 | private ownerDisplayTypeChosen: 'account' | 'videoChannel' |
64 | 83 | ||
65 | constructor ( | 84 | constructor ( |
66 | private screenService: ScreenService, | 85 | private screenService: ScreenService, |
67 | private serverService: ServerService, | 86 | private serverService: ServerService, |
68 | private i18n: I18n, | 87 | private i18n: I18n, |
88 | private authService: AuthService, | ||
89 | private videoPlaylistService: VideoPlaylistService, | ||
90 | private cd: ChangeDetectorRef, | ||
69 | @Inject(LOCALE_ID) private localeId: string | 91 | @Inject(LOCALE_ID) private localeId: string |
70 | ) { } | 92 | ) { |
93 | |||
94 | } | ||
71 | 95 | ||
72 | get isVideoBlur () { | 96 | get isVideoBlur () { |
73 | return this.video.isVideoNSFWForUser(this.user, this.serverConfig) | 97 | return this.video.isVideoNSFWForUser(this.user, this.serverConfig) |
@@ -131,7 +155,8 @@ export class VideoMiniatureComponent implements OnInit { | |||
131 | 155 | ||
132 | loadActions () { | 156 | loadActions () { |
133 | if (this.displayVideoActions) this.showActions = true | 157 | if (this.displayVideoActions) this.showActions = true |
134 | this.thumbnail.load() | 158 | |
159 | this.loadWatchLater() | ||
135 | } | 160 | } |
136 | 161 | ||
137 | onVideoBlacklisted () { | 162 | onVideoBlacklisted () { |
@@ -146,6 +171,38 @@ export class VideoMiniatureComponent implements OnInit { | |||
146 | this.videoRemoved.emit() | 171 | this.videoRemoved.emit() |
147 | } | 172 | } |
148 | 173 | ||
174 | isUserLoggedIn () { | ||
175 | return this.authService.isLoggedIn() | ||
176 | } | ||
177 | |||
178 | onWatchLaterClick (currentState: boolean) { | ||
179 | if (currentState === true) this.removeFromWatchLater() | ||
180 | else this.addToWatchLater() | ||
181 | |||
182 | this.inWatchLaterPlaylist = !currentState | ||
183 | } | ||
184 | |||
185 | addToWatchLater () { | ||
186 | const body = { videoId: this.video.id } | ||
187 | |||
188 | this.videoPlaylistService.addVideoInPlaylist(this.watchLaterPlaylist.id, body).subscribe( | ||
189 | res => { | ||
190 | this.watchLaterPlaylist.playlistElementId = res.videoPlaylistElement.id | ||
191 | } | ||
192 | ) | ||
193 | } | ||
194 | |||
195 | removeFromWatchLater () { | ||
196 | this.videoPlaylistService.removeVideoFromPlaylist(this.watchLaterPlaylist.id, this.watchLaterPlaylist.playlistElementId) | ||
197 | .subscribe( | ||
198 | _ => { /* empty */ } | ||
199 | ) | ||
200 | } | ||
201 | |||
202 | isWatchLaterPlaylistDisplayed () { | ||
203 | return this.inWatchLaterPlaylist !== undefined | ||
204 | } | ||
205 | |||
149 | private setUpBy () { | 206 | private setUpBy () { |
150 | if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') { | 207 | if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') { |
151 | this.ownerDisplayTypeChosen = this.ownerDisplayType | 208 | this.ownerDisplayTypeChosen = this.ownerDisplayType |
@@ -163,4 +220,29 @@ export class VideoMiniatureComponent implements OnInit { | |||
163 | this.ownerDisplayTypeChosen = 'videoChannel' | 220 | this.ownerDisplayTypeChosen = 'videoChannel' |
164 | } | 221 | } |
165 | } | 222 | } |
223 | |||
224 | private loadWatchLater () { | ||
225 | if (!this.isUserLoggedIn()) return | ||
226 | |||
227 | forkJoin([ | ||
228 | this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id), | ||
229 | this.authService.userInformationLoaded.pipe(first()) | ||
230 | ]).subscribe( | ||
231 | ([ existResult ]) => { | ||
232 | const watchLaterPlaylist = this.authService.getUser().specialPlaylists.find(p => p.type === VideoPlaylistType.WATCH_LATER) | ||
233 | const existsInWatchLater = existResult[ this.video.id ].find(r => r.playlistId === watchLaterPlaylist.id) | ||
234 | this.inWatchLaterPlaylist = false | ||
235 | |||
236 | this.watchLaterPlaylist = { | ||
237 | id: watchLaterPlaylist.id | ||
238 | } | ||
239 | |||
240 | if (existsInWatchLater) { | ||
241 | this.inWatchLaterPlaylist = true | ||
242 | this.watchLaterPlaylist.playlistElementId = existsInWatchLater.playlistElementId | ||
243 | } | ||
244 | |||
245 | this.cd.markForCheck() | ||
246 | }) | ||
247 | } | ||
166 | } | 248 | } |