aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-01-06 13:06:13 +0100
committerChocobozzz <me@florianbigard.com>2020-01-06 13:34:08 +0100
commit51b34a11b298b466faef9c8d24beec4442d7add3 (patch)
tree57f9969eb5eb31f9b7cd8f1185927b105a3de809 /client/src/app
parent46db9430af70f45bc656cb0ac8e519f5d0be0149 (diff)
downloadPeerTube-51b34a11b298b466faef9c8d24beec4442d7add3.tar.gz
PeerTube-51b34a11b298b466faef9c8d24beec4442d7add3.tar.zst
PeerTube-51b34a11b298b466faef9c8d24beec4442d7add3.zip
Share playlists state
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/shared/video-playlist/video-add-to-playlist.component.ts147
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts6
-rw-r--r--client/src/app/shared/video-playlist/video-playlist.service.ts144
-rw-r--r--client/src/app/shared/video/video-miniature.component.ts49
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.html2
5 files changed, 243 insertions, 105 deletions
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
index 25ba8cbca..e60a8381d 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
@@ -1,12 +1,18 @@
1import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core' 1import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'
2import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' 2import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
3import { AuthService, Notifier } from '@app/core' 3import { AuthService, Notifier } from '@app/core'
4import { forkJoin, Subject } from 'rxjs' 4import { Subject, Subscription } from 'rxjs'
5import { debounceTime } from 'rxjs/operators' 5import { debounceTime, filter } from 'rxjs/operators'
6import { Video, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models' 6import { Video, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models'
7import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/forms' 7import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/forms'
8import { I18n } from '@ngx-translate/i18n-polyfill' 8import { I18n } from '@ngx-translate/i18n-polyfill'
9import { secondsToTime } from '../../../assets/player/utils' 9import { secondsToTime } from '../../../assets/player/utils'
10import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
11import * as debug from 'debug'
12import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
13import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model'
14
15const logger = debug('peertube:playlists:VideoAddToPlaylistComponent')
10 16
11type PlaylistSummary = { 17type PlaylistSummary = {
12 id: number 18 id: number
@@ -24,7 +30,7 @@ type PlaylistSummary = {
24 templateUrl: './video-add-to-playlist.component.html', 30 templateUrl: './video-add-to-playlist.component.html',
25 changeDetection: ChangeDetectionStrategy.OnPush 31 changeDetection: ChangeDetectionStrategy.OnPush
26}) 32})
27export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, OnChanges { 33export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, OnChanges, OnDestroy, DisableForReuseHook {
28 @Input() video: Video 34 @Input() video: Video
29 @Input() currentVideoTimestamp: number 35 @Input() currentVideoTimestamp: number
30 @Input() lazyLoad = false 36 @Input() lazyLoad = false
@@ -41,6 +47,11 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
41 } 47 }
42 displayOptions = false 48 displayOptions = false
43 49
50 private disabled = false
51
52 private listenToPlaylistChangeSub: Subscription
53 private playlistsData: VideoPlaylist[] = []
54
44 constructor ( 55 constructor (
45 protected formValidatorService: FormValidatorService, 56 protected formValidatorService: FormValidatorService,
46 private authService: AuthService, 57 private authService: AuthService,
@@ -62,12 +73,18 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
62 displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME 73 displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
63 }) 74 })
64 75
76 this.videoPlaylistService.listenToMyAccountPlaylistsChange()
77 .subscribe(result => {
78 this.playlistsData = result.data
79
80 this.videoPlaylistService.runPlaylistCheck(this.video.id)
81 })
82
65 this.videoPlaylistSearchChanged 83 this.videoPlaylistSearchChanged
66 .pipe( 84 .pipe(debounceTime(500))
67 debounceTime(500)) 85 .subscribe(() => this.load())
68 .subscribe(() => { 86
69 this.load() 87 if (this.lazyLoad === false) this.load()
70 })
71 } 88 }
72 89
73 ngOnChanges (simpleChanges: SimpleChanges) { 90 ngOnChanges (simpleChanges: SimpleChanges) {
@@ -76,45 +93,41 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
76 } 93 }
77 } 94 }
78 95
79 init () { 96 ngOnDestroy () {
80 this.resetOptions(true) 97 this.unsubscribePlaylistChanges()
98 }
81 99
82 if (this.lazyLoad !== true) this.load() 100 disableForReuse () {
101 this.disabled = true
102 }
103
104 enabledForReuse () {
105 this.disabled = false
83 } 106 }
84 107
85 reload () { 108 reload () {
109 logger('Reloading component')
110
86 this.videoPlaylists = [] 111 this.videoPlaylists = []
87 this.videoPlaylistSearch = undefined 112 this.videoPlaylistSearch = undefined
88 113
89 this.init() 114 this.resetOptions(true)
115 this.load()
90 116
91 this.cd.markForCheck() 117 this.cd.markForCheck()
92 } 118 }
93 119
94 load () { 120 load () {
95 forkJoin([ 121 logger('Loading component')
96 this.videoPlaylistService.listAccountPlaylists(this.user.account, undefined, '-updatedAt', this.videoPlaylistSearch), 122
97 this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id) 123 this.listenToPlaylistChanges()
98 ]) 124
99 .subscribe( 125 this.videoPlaylistService.listMyPlaylistWithCache(this.user, this.videoPlaylistSearch)
100 ([ playlistsResult, existResult ]) => { 126 .subscribe(playlistsResult => {
101 this.videoPlaylists = [] 127 this.playlistsData = playlistsResult.data
102 for (const playlist of playlistsResult.data) { 128
103 const existingPlaylist = existResult[ this.video.id ].find(p => p.playlistId === playlist.id) 129 this.videoPlaylistService.runPlaylistCheck(this.video.id)
104 130 })
105 this.videoPlaylists.push({
106 id: playlist.id,
107 displayName: playlist.displayName,
108 inPlaylist: !!existingPlaylist,
109 playlistElementId: existingPlaylist ? existingPlaylist.playlistElementId : undefined,
110 startTimestamp: existingPlaylist ? existingPlaylist.startTimestamp : undefined,
111 stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
112 })
113 }
114
115 this.cd.markForCheck()
116 }
117 )
118 } 131 }
119 132
120 openChange (opened: boolean) { 133 openChange (opened: boolean) {
@@ -154,13 +167,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
154 } 167 }
155 168
156 this.videoPlaylistService.createVideoPlaylist(videoPlaylistCreate).subscribe( 169 this.videoPlaylistService.createVideoPlaylist(videoPlaylistCreate).subscribe(
157 res => { 170 () => {
158 this.videoPlaylists.push({
159 id: res.videoPlaylist.id,
160 displayName,
161 inPlaylist: false
162 })
163
164 this.isNewPlaylistBlockOpened = false 171 this.isNewPlaylistBlockOpened = false
165 172
166 this.cd.markForCheck() 173 this.cd.markForCheck()
@@ -197,25 +204,57 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
197 private removeVideoFromPlaylist (playlist: PlaylistSummary) { 204 private removeVideoFromPlaylist (playlist: PlaylistSummary) {
198 if (!playlist.playlistElementId) return 205 if (!playlist.playlistElementId) return
199 206
200 this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, playlist.playlistElementId) 207 this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, playlist.playlistElementId, this.video.id)
201 .subscribe( 208 .subscribe(
202 () => { 209 () => {
203 this.notifier.success(this.i18n('Video removed from {{name}}', { name: playlist.displayName })) 210 this.notifier.success(this.i18n('Video removed from {{name}}', { name: playlist.displayName }))
204
205 playlist.inPlaylist = false
206 playlist.playlistElementId = undefined
207 }, 211 },
208 212
209 err => { 213 err => {
210 this.notifier.error(err.message) 214 this.notifier.error(err.message)
211
212 playlist.inPlaylist = true
213 }, 215 },
214 216
215 () => this.cd.markForCheck() 217 () => this.cd.markForCheck()
216 ) 218 )
217 } 219 }
218 220
221 private listenToPlaylistChanges () {
222 this.unsubscribePlaylistChanges()
223
224 this.listenToPlaylistChangeSub = this.videoPlaylistService.listenToVideoPlaylistChange(this.video.id)
225 .pipe(filter(() => this.disabled === false))
226 .subscribe(existResult => this.rebuildPlaylists(existResult))
227 }
228
229 private unsubscribePlaylistChanges () {
230 if (this.listenToPlaylistChangeSub) {
231 this.listenToPlaylistChangeSub.unsubscribe()
232 this.listenToPlaylistChangeSub = undefined
233 }
234 }
235
236 private rebuildPlaylists (existResult: VideoExistInPlaylist[]) {
237 logger('Got existing results for %d.', this.video.id, existResult)
238
239 this.videoPlaylists = []
240 for (const playlist of this.playlistsData) {
241 const existingPlaylist = existResult.find(p => p.playlistId === playlist.id)
242
243 this.videoPlaylists.push({
244 id: playlist.id,
245 displayName: playlist.displayName,
246 inPlaylist: !!existingPlaylist,
247 playlistElementId: existingPlaylist ? existingPlaylist.playlistElementId : undefined,
248 startTimestamp: existingPlaylist ? existingPlaylist.startTimestamp : undefined,
249 stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
250 })
251 }
252
253 logger('Rebuilt playlist state for video %d.', this.video.id, this.videoPlaylists)
254
255 this.cd.markForCheck()
256 }
257
219 private addVideoInPlaylist (playlist: PlaylistSummary) { 258 private addVideoInPlaylist (playlist: PlaylistSummary) {
220 const body: VideoPlaylistElementCreate = { videoId: this.video.id } 259 const body: VideoPlaylistElementCreate = { videoId: this.video.id }
221 260
@@ -224,13 +263,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
224 263
225 this.videoPlaylistService.addVideoInPlaylist(playlist.id, body) 264 this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
226 .subscribe( 265 .subscribe(
227 res => { 266 () => {
228 playlist.inPlaylist = true
229 playlist.playlistElementId = res.videoPlaylistElement.id
230
231 playlist.startTimestamp = body.startTimestamp
232 playlist.stopTimestamp = body.stopTimestamp
233
234 const message = body.startTimestamp || body.stopTimestamp 267 const message = body.startTimestamp || body.stopTimestamp
235 ? this.i18n('Video added in {{n}} at timestamps {{t}}', { n: playlist.displayName, t: this.formatTimestamp(playlist) }) 268 ? this.i18n('Video added in {{n}} at timestamps {{t}}', { n: playlist.displayName, t: this.formatTimestamp(playlist) })
236 : this.i18n('Video added in {{n}}', { n: playlist.displayName }) 269 : this.i18n('Video added in {{n}}', { n: playlist.displayName })
@@ -240,8 +273,6 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
240 273
241 err => { 274 err => {
242 this.notifier.error(err.message) 275 this.notifier.error(err.message)
243
244 playlist.inPlaylist = false
245 }, 276 },
246 277
247 () => this.cd.markForCheck() 278 () => this.cd.markForCheck()
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
index bb2fe7da3..4864581b5 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -96,7 +96,9 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
96 } 96 }
97 97
98 removeFromPlaylist (playlistElement: VideoPlaylistElement) { 98 removeFromPlaylist (playlistElement: VideoPlaylistElement) {
99 this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, playlistElement.id) 99 const videoId = this.playlistElement.video ? this.playlistElement.video.id : undefined
100
101 this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, playlistElement.id, videoId)
100 .subscribe( 102 .subscribe(
101 () => { 103 () => {
102 this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName })) 104 this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName }))
@@ -116,7 +118,7 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
116 body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null 118 body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null
117 body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null 119 body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null
118 120
119 this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, playlistElement.id, body) 121 this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, playlistElement.id, body, this.playlistElement.video.id)
120 .subscribe( 122 .subscribe(
121 () => { 123 () => {
122 this.notifier.success(this.i18n('Timestamps updated')) 124 this.notifier.success(this.i18n('Timestamps updated'))
diff --git a/client/src/app/shared/video-playlist/video-playlist.service.ts b/client/src/app/shared/video-playlist/video-playlist.service.ts
index d78fdc09f..c5b87fc11 100644
--- a/client/src/app/shared/video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/video-playlist/video-playlist.service.ts
@@ -1,6 +1,6 @@
1import { bufferTime, catchError, distinctUntilChanged, filter, first, map, share, switchMap } from 'rxjs/operators' 1import { bufferTime, catchError, filter, map, share, switchMap, tap } from 'rxjs/operators'
2import { Injectable } from '@angular/core' 2import { Injectable } from '@angular/core'
3import { Observable, ReplaySubject, Subject } from 'rxjs' 3import { merge, Observable, of, ReplaySubject, Subject } from 'rxjs'
4import { RestExtractor } from '../rest/rest-extractor.service' 4import { RestExtractor } from '../rest/rest-extractor.service'
5import { HttpClient, HttpParams } from '@angular/common/http' 5import { HttpClient, HttpParams } from '@angular/common/http'
6import { ResultList, VideoPlaylistElementCreate, VideoPlaylistElementUpdate } from '../../../../../shared' 6import { ResultList, VideoPlaylistElementCreate, VideoPlaylistElementUpdate } from '../../../../../shared'
@@ -11,16 +11,22 @@ import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
11import { VideoPlaylistCreate } from '@shared/models/videos/playlist/video-playlist-create.model' 11import { VideoPlaylistCreate } from '@shared/models/videos/playlist/video-playlist-create.model'
12import { VideoPlaylistUpdate } from '@shared/models/videos/playlist/video-playlist-update.model' 12import { VideoPlaylistUpdate } from '@shared/models/videos/playlist/video-playlist-update.model'
13import { objectToFormData } from '@app/shared/misc/utils' 13import { objectToFormData } from '@app/shared/misc/utils'
14import { ServerService } from '@app/core' 14import { AuthUser, ServerService } from '@app/core'
15import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' 15import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
16import { AccountService } from '@app/shared/account/account.service' 16import { AccountService } from '@app/shared/account/account.service'
17import { Account } from '@app/shared/account/account.model' 17import { Account } from '@app/shared/account/account.model'
18import { RestService } from '@app/shared/rest' 18import { RestService } from '@app/shared/rest'
19import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model' 19import { VideoExistInPlaylist, VideosExistInPlaylists } from '@shared/models/videos/playlist/video-exist-in-playlist.model'
20import { VideoPlaylistReorder } from '@shared/models/videos/playlist/video-playlist-reorder.model' 20import { VideoPlaylistReorder } from '@shared/models/videos/playlist/video-playlist-reorder.model'
21import { ComponentPagination } from '@app/shared/rest/component-pagination.model' 21import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
22import { VideoPlaylistElement as ServerVideoPlaylistElement } from '@shared/models/videos/playlist/video-playlist-element.model' 22import { VideoPlaylistElement as ServerVideoPlaylistElement } from '@shared/models/videos/playlist/video-playlist-element.model'
23import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model' 23import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
24import { uniq } from 'lodash-es'
25import * as debug from 'debug'
26
27const logger = debug('peertube:playlists:VideoPlaylistService')
28
29type CachedPlaylist = VideoPlaylist | { id: number, displayName: string }
24 30
25@Injectable() 31@Injectable()
26export class VideoPlaylistService { 32export class VideoPlaylistService {
@@ -28,8 +34,15 @@ export class VideoPlaylistService {
28 static MY_VIDEO_PLAYLIST_URL = environment.apiUrl + '/api/v1/users/me/video-playlists/' 34 static MY_VIDEO_PLAYLIST_URL = environment.apiUrl + '/api/v1/users/me/video-playlists/'
29 35
30 // Use a replay subject because we "next" a value before subscribing 36 // Use a replay subject because we "next" a value before subscribing
31 private videoExistsInPlaylistSubject: Subject<number> = new ReplaySubject(1) 37 private videoExistsInPlaylistNotifier = new ReplaySubject<number>(1)
32 private readonly videoExistsInPlaylistObservable: Observable<VideoExistInPlaylist> 38 private videoExistsInPlaylistCacheSubject = new Subject<VideosExistInPlaylists>()
39 private readonly videoExistsInPlaylistObservable: Observable<VideosExistInPlaylists>
40
41 private videoExistsObservableCache: { [ id: number ]: Observable<VideoExistInPlaylist[]> } = {}
42 private videoExistsCache: { [ id: number ]: VideoExistInPlaylist[] } = {}
43
44 private myAccountPlaylistCache: ResultList<CachedPlaylist> = undefined
45 private myAccountPlaylistCacheSubject = new Subject<ResultList<CachedPlaylist>>()
33 46
34 constructor ( 47 constructor (
35 private authHttp: HttpClient, 48 private authHttp: HttpClient,
@@ -37,12 +50,16 @@ export class VideoPlaylistService {
37 private restExtractor: RestExtractor, 50 private restExtractor: RestExtractor,
38 private restService: RestService 51 private restService: RestService
39 ) { 52 ) {
40 this.videoExistsInPlaylistObservable = this.videoExistsInPlaylistSubject.pipe( 53 this.videoExistsInPlaylistObservable = merge(
41 distinctUntilChanged(), 54 this.videoExistsInPlaylistNotifier.pipe(
42 bufferTime(500), 55 bufferTime(500),
43 filter(videoIds => videoIds.length !== 0), 56 filter(videoIds => videoIds.length !== 0),
44 switchMap(videoIds => this.doVideosExistInPlaylist(videoIds)), 57 map(videoIds => uniq(videoIds)),
45 share() 58 switchMap(videoIds => this.doVideosExistInPlaylist(videoIds)),
59 share()
60 ),
61
62 this.videoExistsInPlaylistCacheSubject
46 ) 63 )
47 } 64 }
48 65
@@ -60,6 +77,17 @@ export class VideoPlaylistService {
60 ) 77 )
61 } 78 }
62 79
80 listMyPlaylistWithCache (user: AuthUser, search?: string) {
81 if (!search && this.myAccountPlaylistCache) return of(this.myAccountPlaylistCache)
82
83 return this.listAccountPlaylists(user.account, undefined, '-updatedAt', search)
84 .pipe(
85 tap(result => {
86 if (!search) this.myAccountPlaylistCache = result
87 })
88 )
89 }
90
63 listAccountPlaylists ( 91 listAccountPlaylists (
64 account: Account, 92 account: Account,
65 componentPagination: ComponentPagination, 93 componentPagination: ComponentPagination,
@@ -97,6 +125,16 @@ export class VideoPlaylistService {
97 125
98 return this.authHttp.post<{ videoPlaylist: { id: number } }>(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL, data) 126 return this.authHttp.post<{ videoPlaylist: { id: number } }>(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL, data)
99 .pipe( 127 .pipe(
128 tap(res => {
129 this.myAccountPlaylistCache.total++
130
131 this.myAccountPlaylistCache.data.push({
132 id: res.videoPlaylist.id,
133 displayName: body.displayName
134 })
135
136 this.myAccountPlaylistCacheSubject.next(this.myAccountPlaylistCache)
137 }),
100 catchError(err => this.restExtractor.handleError(err)) 138 catchError(err => this.restExtractor.handleError(err))
101 ) 139 )
102 } 140 }
@@ -107,6 +145,12 @@ export class VideoPlaylistService {
107 return this.authHttp.put(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylist.id, data) 145 return this.authHttp.put(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylist.id, data)
108 .pipe( 146 .pipe(
109 map(this.restExtractor.extractDataBool), 147 map(this.restExtractor.extractDataBool),
148 tap(() => {
149 const playlist = this.myAccountPlaylistCache.data.find(p => p.id === videoPlaylist.id)
150 playlist.displayName = body.displayName
151
152 this.myAccountPlaylistCacheSubject.next(this.myAccountPlaylistCache)
153 }),
110 catchError(err => this.restExtractor.handleError(err)) 154 catchError(err => this.restExtractor.handleError(err))
111 ) 155 )
112 } 156 }
@@ -115,6 +159,13 @@ export class VideoPlaylistService {
115 return this.authHttp.delete(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylist.id) 159 return this.authHttp.delete(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylist.id)
116 .pipe( 160 .pipe(
117 map(this.restExtractor.extractDataBool), 161 map(this.restExtractor.extractDataBool),
162 tap(() => {
163 this.myAccountPlaylistCache.total--
164 this.myAccountPlaylistCache.data = this.myAccountPlaylistCache.data
165 .filter(p => p.id !== videoPlaylist.id)
166
167 this.myAccountPlaylistCacheSubject.next(this.myAccountPlaylistCache)
168 }),
118 catchError(err => this.restExtractor.handleError(err)) 169 catchError(err => this.restExtractor.handleError(err))
119 ) 170 )
120 } 171 }
@@ -123,21 +174,49 @@ export class VideoPlaylistService {
123 const url = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos' 174 const url = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos'
124 175
125 return this.authHttp.post<{ videoPlaylistElement: { id: number } }>(url, body) 176 return this.authHttp.post<{ videoPlaylistElement: { id: number } }>(url, body)
126 .pipe(catchError(err => this.restExtractor.handleError(err))) 177 .pipe(
178 tap(res => {
179 const existsResult = this.videoExistsCache[body.videoId]
180 existsResult.push({
181 playlistId,
182 playlistElementId: res.videoPlaylistElement.id,
183 startTimestamp: body.startTimestamp,
184 stopTimestamp: body.stopTimestamp
185 })
186
187 this.runPlaylistCheck(body.videoId)
188 }),
189 catchError(err => this.restExtractor.handleError(err))
190 )
127 } 191 }
128 192
129 updateVideoOfPlaylist (playlistId: number, playlistElementId: number, body: VideoPlaylistElementUpdate) { 193 updateVideoOfPlaylist (playlistId: number, playlistElementId: number, body: VideoPlaylistElementUpdate, videoId: number) {
130 return this.authHttp.put(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + playlistElementId, body) 194 return this.authHttp.put(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + playlistElementId, body)
131 .pipe( 195 .pipe(
132 map(this.restExtractor.extractDataBool), 196 map(this.restExtractor.extractDataBool),
197 tap(() => {
198 const existsResult = this.videoExistsCache[videoId]
199 const elem = existsResult.find(e => e.playlistElementId === playlistElementId)
200
201 elem.startTimestamp = body.startTimestamp
202 elem.stopTimestamp = body.stopTimestamp
203
204 this.runPlaylistCheck(videoId)
205 }),
133 catchError(err => this.restExtractor.handleError(err)) 206 catchError(err => this.restExtractor.handleError(err))
134 ) 207 )
135 } 208 }
136 209
137 removeVideoFromPlaylist (playlistId: number, playlistElementId: number) { 210 removeVideoFromPlaylist (playlistId: number, playlistElementId: number, videoId?: number) {
138 return this.authHttp.delete(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + playlistElementId) 211 return this.authHttp.delete(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + playlistElementId)
139 .pipe( 212 .pipe(
140 map(this.restExtractor.extractDataBool), 213 map(this.restExtractor.extractDataBool),
214 tap(() => {
215 if (!videoId) return
216
217 this.videoExistsCache[videoId] = this.videoExistsCache[videoId].filter(e => e.playlistElementId !== playlistElementId)
218 this.runPlaylistCheck(videoId)
219 }),
141 catchError(err => this.restExtractor.handleError(err)) 220 catchError(err => this.restExtractor.handleError(err))
142 ) 221 )
143 } 222 }
@@ -173,10 +252,37 @@ export class VideoPlaylistService {
173 ) 252 )
174 } 253 }
175 254
176 doesVideoExistInPlaylist (videoId: number) { 255 listenToMyAccountPlaylistsChange () {
177 this.videoExistsInPlaylistSubject.next(videoId) 256 return this.myAccountPlaylistCacheSubject.asObservable()
257 }
258
259 listenToVideoPlaylistChange (videoId: number) {
260 if (this.videoExistsObservableCache[ videoId ]) {
261 return this.videoExistsObservableCache[ videoId ]
262 }
263
264 const obs = this.videoExistsInPlaylistObservable
265 .pipe(
266 map(existsResult => existsResult[ videoId ]),
267 filter(r => !!r),
268 tap(result => this.videoExistsCache[ videoId ] = result)
269 )
270
271 this.videoExistsObservableCache[ videoId ] = obs
272 return obs
273 }
274
275 runPlaylistCheck (videoId: number) {
276 logger('Running playlist check.')
277
278 if (this.videoExistsCache[videoId]) {
279 logger('Found cache for %d.', videoId)
280
281 return this.videoExistsInPlaylistCacheSubject.next({ [videoId]: this.videoExistsCache[videoId] })
282 }
178 283
179 return this.videoExistsInPlaylistObservable.pipe(first()) 284 logger('Fetching from network for %d.', videoId)
285 return this.videoExistsInPlaylistNotifier.next(videoId)
180 } 286 }
181 287
182 extractPlaylists (result: ResultList<VideoPlaylistServerModel>) { 288 extractPlaylists (result: ResultList<VideoPlaylistServerModel>) {
@@ -218,7 +324,7 @@ export class VideoPlaylistService {
218 ) 324 )
219 } 325 }
220 326
221 private doVideosExistInPlaylist (videoIds: number[]): Observable<VideoExistInPlaylist> { 327 private doVideosExistInPlaylist (videoIds: number[]): Observable<VideosExistInPlaylists> {
222 const url = VideoPlaylistService.MY_VIDEO_PLAYLIST_URL + 'videos-exist' 328 const url = VideoPlaylistService.MY_VIDEO_PLAYLIST_URL + 'videos-exist'
223 329
224 let params = new HttpParams() 330 let params = new HttpParams()
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index a603f87e5..598a7a983 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -17,8 +17,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
17import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component' 17import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component'
18import { ScreenService } from '@app/shared/misc/screen.service' 18import { ScreenService } from '@app/shared/misc/screen.service'
19import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' 19import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
20import { forkJoin } from 'rxjs' 20import { switchMap } from 'rxjs/operators'
21import { first } from 'rxjs/operators'
22 21
23export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto' 22export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
24export type MiniatureDisplayOptions = { 23export type MiniatureDisplayOptions = {
@@ -193,7 +192,7 @@ export class VideoMiniatureComponent implements OnInit {
193 } 192 }
194 193
195 removeFromWatchLater () { 194 removeFromWatchLater () {
196 this.videoPlaylistService.removeVideoFromPlaylist(this.watchLaterPlaylist.id, this.watchLaterPlaylist.playlistElementId) 195 this.videoPlaylistService.removeVideoFromPlaylist(this.watchLaterPlaylist.id, this.watchLaterPlaylist.playlistElementId, this.video.id)
197 .subscribe( 196 .subscribe(
198 _ => { /* empty */ } 197 _ => { /* empty */ }
199 ) 198 )
@@ -222,27 +221,27 @@ export class VideoMiniatureComponent implements OnInit {
222 } 221 }
223 222
224 private loadWatchLater () { 223 private loadWatchLater () {
225 if (!this.isUserLoggedIn()) return 224 if (!this.isUserLoggedIn() || this.inWatchLaterPlaylist !== undefined) return
226 225
227 forkJoin([ 226 this.authService.userInformationLoaded
228 this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id), 227 .pipe(switchMap(() => this.videoPlaylistService.listenToVideoPlaylistChange(this.video.id)))
229 this.authService.userInformationLoaded.pipe(first()) 228 .subscribe(existResult => {
230 ]).subscribe( 229 const watchLaterPlaylist = this.authService.getUser().specialPlaylists.find(p => p.type === VideoPlaylistType.WATCH_LATER)
231 ([ existResult ]) => { 230 const existsInWatchLater = existResult.find(r => r.playlistId === watchLaterPlaylist.id)
232 const watchLaterPlaylist = this.authService.getUser().specialPlaylists.find(p => p.type === VideoPlaylistType.WATCH_LATER) 231 this.inWatchLaterPlaylist = false
233 const existsInWatchLater = existResult[ this.video.id ].find(r => r.playlistId === watchLaterPlaylist.id) 232
234 this.inWatchLaterPlaylist = false 233 this.watchLaterPlaylist = {
235 234 id: watchLaterPlaylist.id
236 this.watchLaterPlaylist = { 235 }
237 id: watchLaterPlaylist.id 236
238 } 237 if (existsInWatchLater) {
239 238 this.inWatchLaterPlaylist = true
240 if (existsInWatchLater) { 239 this.watchLaterPlaylist.playlistElementId = existsInWatchLater.playlistElementId
241 this.inWatchLaterPlaylist = true 240 }
242 this.watchLaterPlaylist.playlistElementId = existsInWatchLater.playlistElementId 241
243 } 242 this.cd.markForCheck()
244 243 })
245 this.cd.markForCheck() 244
246 }) 245 this.videoPlaylistService.runPlaylistCheck(this.video.id)
247 } 246 }
248} 247}
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index c30a43557..7e71a390b 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -2,7 +2,7 @@
2 [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name" 2 [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name"
3 class="video-thumbnail" 3 class="video-thumbnail"
4> 4>
5 <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" loading="lazy" /> 5 <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
6 6
7 <div *ngIf="displayWatchLaterPlaylist" class="video-thumbnail-actions-overlay"> 7 <div *ngIf="displayWatchLaterPlaylist" class="video-thumbnail-actions-overlay">
8 <ng-container *ngIf="inWatchLaterPlaylist !== true"> 8 <ng-container *ngIf="inWatchLaterPlaylist !== true">