3 files changed, 26 insertions, 13 deletions

diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index af75569d9..220d41d59 100644
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/client/src/app/shared/misc/screen.service.ts
@@ -22,8 +22,22 @@ export class ScreenService {
     return 'ontouchstart' in window || navigator.msMaxTouchPoints
   }
 
+  getNumberOfAvailableMiniatures () {
+    const screenWidth = this.getWindowInnerWidth()
+
+    let numberOfVideos = 1
+
+    if (screenWidth > 1850) numberOfVideos = 6
+    else if (screenWidth > 1600) numberOfVideos = 5
+    else if (screenWidth > 1370) numberOfVideos = 4
+    else if (screenWidth > 1100) numberOfVideos = 3
+    else if (screenWidth > 850) numberOfVideos = 2
+
+    return numberOfVideos
+  }
+
   // Cache window inner width, because it's an expensive call
-  private getWindowInnerWidth () {
+  getWindowInnerWidth () {
     if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
 
     return this.windowInnerWidth
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 72de84703..6380c2e51 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
@@ -12,6 +12,7 @@ type PlaylistSummary = {
   inPlaylist: boolean
   displayName: string
 
+  playlistElementId?: number
   startTimestamp?: number
   stopTimestamp?: number
 }
@@ -37,8 +38,6 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   }
   displayOptions = false
 
-  private playlistElementId: number
-
   constructor (
     protected formValidatorService: FormValidatorService,
     private authService: AuthService,
@@ -95,11 +94,10 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
               id: playlist.id,
               displayName: playlist.displayName,
               inPlaylist: !!existingPlaylist,
+              playlistElementId:  existingPlaylist ? existingPlaylist.playlistElementId : undefined,
               startTimestamp: existingPlaylist ? existingPlaylist.startTimestamp : undefined,
               stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
             })
-
-            this.playlistElementId = existingPlaylist ? existingPlaylist.playlistElementId : undefined
           }
 
           this.cd.markForCheck()
@@ -181,14 +179,15 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   }
 
   private removeVideoFromPlaylist (playlist: PlaylistSummary) {
-    if (!this.playlistElementId) return
+    if (!playlist.playlistElementId) return
 
-    this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, this.playlistElementId)
+    this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, playlist.playlistElementId)
         .subscribe(
           () => {
             this.notifier.success(this.i18n('Video removed from {{name}}', { name: playlist.displayName }))
 
             playlist.inPlaylist = false
+            playlist.playlistElementId = undefined
           },
 
           err => {
@@ -209,8 +208,9 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
 
     this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
       .subscribe(
-        () => {
+        res => {
           playlist.inPlaylist = true
+          playlist.playlistElementId = res.videoPlaylistElement.id
 
           playlist.startTimestamp = body.startTimestamp
           playlist.stopTimestamp = body.stopTimestamp
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 376387082..42791af86 100644
--- a/client/src/app/shared/video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/video-playlist/video-playlist.service.ts
@@ -113,11 +113,10 @@ export class VideoPlaylistService {
   }
 
   addVideoInPlaylist (playlistId: number, body: VideoPlaylistElementCreate) {
-    return this.authHttp.post(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos', body)
-               .pipe(
-                 map(this.restExtractor.extractDataBool),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
+    const url = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos'
+
+    return this.authHttp.post<{ videoPlaylistElement: { id: number } }>(url, body)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
 
   updateVideoOfPlaylist (playlistId: number, playlistElementId: number, body: VideoPlaylistElementUpdate) {