2 files changed, 11 insertions, 12 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 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) {