Fix broken playlist api

6 files changed, 190 insertions, 81 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 c6cff03a4..08ceb21bc 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
@@ -37,6 +37,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   }
   displayOptions = false
 
+  private playlistElementId: number
+
   constructor (
     protected formValidatorService: FormValidatorService,
     private authService: AuthService,
@@ -96,6 +98,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
               startTimestamp: existingPlaylist ? existingPlaylist.startTimestamp : undefined,
               stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
             })
+
+            this.playlistElementId = existingPlaylist ? existingPlaylist.playlistElementId : undefined
           }
 
           this.cd.markForCheck()
@@ -177,7 +181,9 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   }
 
   private removeVideoFromPlaylist (playlist: PlaylistSummary) {
-    this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, this.video.id)
+    if (!this.playlistElementId) return
+
+    this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, this.playlistElementId)
         .subscribe(
           () => {
             this.notifier.success(this.i18n('Video removed from {{name}}', { name: playlist.displayName }))
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
index ab5a78928..25d4783fb 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
@@ -6,66 +6,82 @@
     </div>
 
     <my-video-thumbnail
-      [video]="video" [nsfw]="isVideoBlur(video)"
+      *ngIf="playlistElement.video"
+      [video]="playlistElement.video" [nsfw]="isVideoBlur(playlistElement.video)"
       [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
     ></my-video-thumbnail>
 
+    <div class="fake-thumbnail" *ngIf="!playlistElement.video"></div>
+
     <div class="video-info">
-      <a tabindex="-1" class="video-info-name"
-         [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
-         [attr.title]="video.name"
-      >{{ video.name }}</a>
+      <ng-container *ngIf="playlistElement.video">
+        <a tabindex="-1" class="video-info-name"
+          [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
+          [attr.title]="playlistElement.video.name"
+        >{{ playlistElement.video.name }}</a>
+
+        <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', playlistElement.video.byAccount ]">
+          {{ playlistElement.video.byAccount }}
+        </a>
+        <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ playlistElement.video.byAccount }}</span>
 
-      <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
-      <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ video.byAccount }}</span>
+        <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(playlistElement) }}</span>
+      </ng-container>
 
-      <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video) }}</span>
+      <span *ngIf="!playlistElement.video" class="video-info-name">
+        <ng-container i18n *ngIf="isUnavailable(playlistElement)">Unavailable</ng-container>
+        <ng-container i18n *ngIf="isPrivate(playlistElement)">Private</ng-container>
+        <ng-container i18n *ngIf="isDeleted(playlistElement)">Deleted</ng-container>
+      </span>
     </div>
   </a>
 
-  <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" (openChange)="onDropdownOpenChange()"
-       autoClose="outside">
+  <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right"
+       (openChange)="onDropdownOpenChange()" autoClose="outside"
+  >
     <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
 
     <div ngbDropdownMenu>
-      <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, video)">
-        <my-global-icon iconName="edit"></my-global-icon>
-        <ng-container i18n>Edit starts/stops at</ng-container>
-      </div>
+      <ng-container *ngIf="playlistElement.video">
+        <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, playlistElement)">
+          <my-global-icon iconName="edit"></my-global-icon>
+          <ng-container i18n>Edit starts/stops at</ng-container>
+        </div>
 
-      <div class="timestamp-options" *ngIf="displayTimestampOptions">
-        <div>
-          <my-peertube-checkbox
-            inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
-            i18n-labelText labelText="Start at"
-          ></my-peertube-checkbox>
+        <div class="timestamp-options" *ngIf="displayTimestampOptions">
+          <div>
+            <my-peertube-checkbox
+              inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
+              i18n-labelText labelText="Start at"
+            ></my-peertube-checkbox>
 
-          <my-timestamp-input
-            [timestamp]="timestampOptions.startTimestamp"
-            [maxTimestamp]="video.duration"
-            [disabled]="!timestampOptions.startTimestampEnabled"
-            [(ngModel)]="timestampOptions.startTimestamp"
-          ></my-timestamp-input>
-        </div>
+            <my-timestamp-input
+              [timestamp]="timestampOptions.startTimestamp"
+              [maxTimestamp]="playlistElement.video.duration"
+              [disabled]="!timestampOptions.startTimestampEnabled"
+              [(ngModel)]="timestampOptions.startTimestamp"
+            ></my-timestamp-input>
+          </div>
 
-        <div>
-          <my-peertube-checkbox
-            inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
-            i18n-labelText labelText="Stop at"
-          ></my-peertube-checkbox>
+          <div>
+            <my-peertube-checkbox
+              inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
+              i18n-labelText labelText="Stop at"
+            ></my-peertube-checkbox>
 
-          <my-timestamp-input
-            [timestamp]="timestampOptions.stopTimestamp"
-            [maxTimestamp]="video.duration"
-            [disabled]="!timestampOptions.stopTimestampEnabled"
-            [(ngModel)]="timestampOptions.stopTimestamp"
-          ></my-timestamp-input>
-        </div>
+            <my-timestamp-input
+              [timestamp]="timestampOptions.stopTimestamp"
+              [maxTimestamp]="playlistElement.video.duration"
+              [disabled]="!timestampOptions.stopTimestampEnabled"
+              [(ngModel)]="timestampOptions.stopTimestamp"
+            ></my-timestamp-input>
+          </div>
 
-        <input type="submit" i18n-value value="Save" (click)="updateTimestamps(video)">
-      </div>
+          <input type="submit" i18n-value value="Save" (click)="updateTimestamps(playlistElement)">
+        </div>
+      </ng-container>
 
-      <span class="dropdown-item" (click)="removeFromPlaylist(video)">
+      <span class="dropdown-item" (click)="removeFromPlaylist(playlistElement)">
             <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
           </span>
     </div>
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
index cb7072d7f..9f4061b02 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -2,9 +2,21 @@
 @import '_mixins';
 @import '_miniature';
 
+$thumbnail-width: 130px;
+$thumbnail-height: 72px;
+
 my-video-thumbnail {
-  @include thumbnail-size-component(130px, 72px);
+  @include thumbnail-size-component($thumbnail-width, $thumbnail-height);
+}
 
+.fake-thumbnail {
+  width: $thumbnail-width;
+  height: $thumbnail-height;
+  background-color: #ececec;
+}
+
+my-video-thumbnail,
+.fake-thumbnail {
   display: flex; // Avoids an issue with line-height that adds space below the element
   margin-right: 10px;
 }
@@ -31,6 +43,7 @@ my-video-thumbnail {
   a {
     @include disable-default-a-behaviour;
 
+    color: var(--mainForegroundColor);
     display: flex;
     min-width: 0;
     align-items: center;
@@ -58,7 +71,6 @@ my-video-thumbnail {
       min-width: 0;
 
       a {
-        color: var(--mainForegroundColor);
         width: auto;
 
         &:hover {
@@ -66,20 +78,20 @@ my-video-thumbnail {
         }
       }
 
-      .video-info-name {
-        font-size: 18px;
-        font-weight: $font-semibold;
-        display: inline-block;
-
-        @include ellipsis;
-      }
-
       .video-info-account, .video-info-timestamp {
         color: $grey-foreground-color;
       }
     }
   }
 
+  .video-info-name {
+    font-size: 18px;
+    font-weight: $font-semibold;
+    display: inline-block;
+
+    @include ellipsis;
+  }
+
   .more {
     justify-self: flex-end;
     margin-left: auto;
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 62cf6536d..a8e5a4885 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
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'
 import { Video } from '@app/shared/video/video.model'
-import { VideoPlaylistElementUpdate } from '@shared/models'
+import { VideoPlaylistElementType, VideoPlaylistElementUpdate } from '@shared/models'
 import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
 import { ActivatedRoute } from '@angular/router'
 import { I18n } from '@ngx-translate/i18n-polyfill'
@@ -9,6 +9,7 @@ import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 import { secondsToTime } from '../../../assets/player/utils'
+import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
 
 @Component({
   selector: 'my-video-playlist-element-miniature',
@@ -20,14 +21,14 @@ export class VideoPlaylistElementMiniatureComponent {
   @ViewChild('moreDropdown', { static: false }) moreDropdown: NgbDropdown
 
   @Input() playlist: VideoPlaylist
-  @Input() video: Video
+  @Input() playlistElement: VideoPlaylistElement
   @Input() owned = false
   @Input() playing = false
   @Input() rowLink = false
   @Input() accountLink = true
-  @Input() position: number
+  @Input() position: number // Keep this property because we're in the OnPush change detection strategy
 
-  @Output() elementRemoved = new EventEmitter<Video>()
+  @Output() elementRemoved = new EventEmitter<VideoPlaylistElement>()
 
   displayTimestampOptions = false
 
@@ -50,6 +51,18 @@ export class VideoPlaylistElementMiniatureComponent {
     private cdr: ChangeDetectorRef
   ) {}
 
+  isUnavailable (e: VideoPlaylistElement) {
+    return e.type === VideoPlaylistElementType.UNAVAILABLE
+  }
+
+  isPrivate (e: VideoPlaylistElement) {
+    return e.type === VideoPlaylistElementType.PRIVATE
+  }
+
+  isDeleted (e: VideoPlaylistElement) {
+    return e.type === VideoPlaylistElementType.DELETED
+  }
+
   buildRouterLink () {
     if (!this.playlist) return null
 
@@ -57,12 +70,12 @@ export class VideoPlaylistElementMiniatureComponent {
   }
 
   buildRouterQuery () {
-    if (!this.video) return {}
+    if (!this.playlistElement || !this.playlistElement.video) return {}
 
     return {
-      videoId: this.video.uuid,
-      start: this.video.playlistElement.startTimestamp,
-      stop: this.video.playlistElement.stopTimestamp
+      videoId: this.playlistElement.video.uuid,
+      start: this.playlistElement.startTimestamp,
+      stop: this.playlistElement.stopTimestamp
     }
   }
 
@@ -70,13 +83,13 @@ export class VideoPlaylistElementMiniatureComponent {
     return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
   }
 
-  removeFromPlaylist (video: Video) {
-    this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, video.id)
+  removeFromPlaylist (playlistElement: VideoPlaylistElement) {
+    this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, playlistElement.id)
         .subscribe(
           () => {
             this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName }))
 
-            this.elementRemoved.emit(this.video)
+            this.elementRemoved.emit(playlistElement)
           },
 
           err => this.notifier.error(err.message)
@@ -85,19 +98,19 @@ export class VideoPlaylistElementMiniatureComponent {
     this.moreDropdown.close()
   }
 
-  updateTimestamps (video: Video) {
+  updateTimestamps (playlistElement: VideoPlaylistElement) {
     const body: VideoPlaylistElementUpdate = {}
 
     body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null
     body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null
 
-    this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, video.id, body)
+    this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, playlistElement.id, body)
         .subscribe(
           () => {
             this.notifier.success(this.i18n('Timestamps updated'))
 
-            video.playlistElement.startTimestamp = body.startTimestamp
-            video.playlistElement.stopTimestamp = body.stopTimestamp
+            playlistElement.startTimestamp = body.startTimestamp
+            playlistElement.stopTimestamp = body.stopTimestamp
 
             this.cdr.detectChanges()
           },
@@ -108,9 +121,9 @@ export class VideoPlaylistElementMiniatureComponent {
     this.moreDropdown.close()
   }
 
-  formatTimestamp (video: Video) {
-    const start = video.playlistElement.startTimestamp
-    const stop = video.playlistElement.stopTimestamp
+  formatTimestamp (playlistElement: VideoPlaylistElement) {
+    const start = playlistElement.startTimestamp
+    const stop = playlistElement.stopTimestamp
 
     const startFormatted = secondsToTime(start, true, ':')
     const stopFormatted = secondsToTime(stop, true, ':')
@@ -127,7 +140,7 @@ export class VideoPlaylistElementMiniatureComponent {
     this.displayTimestampOptions = false
   }
 
-  toggleDisplayTimestampsOptions (event: Event, video: Video) {
+  toggleDisplayTimestampsOptions (event: Event, playlistElement: VideoPlaylistElement) {
     event.preventDefault()
 
     this.displayTimestampOptions = !this.displayTimestampOptions
@@ -137,17 +150,17 @@ export class VideoPlaylistElementMiniatureComponent {
         startTimestampEnabled: false,
         stopTimestampEnabled: false,
         startTimestamp: 0,
-        stopTimestamp: video.duration
+        stopTimestamp: playlistElement.video.duration
       }
 
-      if (video.playlistElement.startTimestamp) {
+      if (playlistElement.startTimestamp) {
         this.timestampOptions.startTimestampEnabled = true
-        this.timestampOptions.startTimestamp = video.playlistElement.startTimestamp
+        this.timestampOptions.startTimestamp = playlistElement.startTimestamp
       }
 
-      if (video.playlistElement.stopTimestamp) {
+      if (playlistElement.stopTimestamp) {
         this.timestampOptions.stopTimestampEnabled = true
-        this.timestampOptions.stopTimestamp = video.playlistElement.stopTimestamp
+        this.timestampOptions.stopTimestamp = playlistElement.stopTimestamp
       }
     }
 
diff --git a/client/src/app/shared/video-playlist/video-playlist-element.model.ts b/client/src/app/shared/video-playlist/video-playlist-element.model.ts
new file mode 100644
index 000000000..f1c46d1eb
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element.model.ts
@@ -0,0 +1,24 @@
+import { VideoPlaylistElement as ServerVideoPlaylistElement, VideoPlaylistElementType } from '../../../../../shared/models/videos'
+import { Video } from '@app/shared/video/video.model'
+
+export class VideoPlaylistElement implements ServerVideoPlaylistElement {
+  id: number
+  position: number
+  startTimestamp: number
+  stopTimestamp: number
+
+  type: VideoPlaylistElementType
+
+  video?: Video
+
+  constructor (hash: ServerVideoPlaylistElement, translations: {}) {
+    this.id = hash.id
+    this.position = hash.position
+    this.startTimestamp = hash.startTimestamp
+    this.stopTimestamp = hash.stopTimestamp
+
+    this.type = hash.type
+
+    if (hash.video) this.video = new Video(hash.video, translations)
+  }
+}
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 da7437507..b93a19356 100644
--- a/client/src/app/shared/video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/video-playlist/video-playlist.service.ts
@@ -18,6 +18,9 @@ import { Account } from '@app/shared/account/account.model'
 import { RestService } from '@app/shared/rest'
 import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model'
 import { VideoPlaylistReorder } from '@shared/models/videos/playlist/video-playlist-reorder.model'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { VideoPlaylistElement as ServerVideoPlaylistElement } from '@shared/models/videos/playlist/video-playlist-element.model'
+import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
 
 @Injectable()
 export class VideoPlaylistService {
@@ -110,16 +113,16 @@ export class VideoPlaylistService {
                )
   }
 
-  updateVideoOfPlaylist (playlistId: number, videoId: number, body: VideoPlaylistElementUpdate) {
-    return this.authHttp.put(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + videoId, body)
+  updateVideoOfPlaylist (playlistId: number, playlistElementId: number, body: VideoPlaylistElementUpdate) {
+    return this.authHttp.put(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + playlistElementId, body)
                .pipe(
                  map(this.restExtractor.extractDataBool),
                  catchError(err => this.restExtractor.handleError(err))
                )
   }
 
-  removeVideoFromPlaylist (playlistId: number, videoId: number) {
-    return this.authHttp.delete(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + videoId)
+  removeVideoFromPlaylist (playlistId: number, playlistElementId: number) {
+    return this.authHttp.delete(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + playlistElementId)
                .pipe(
                  map(this.restExtractor.extractDataBool),
                  catchError(err => this.restExtractor.handleError(err))
@@ -139,6 +142,24 @@ export class VideoPlaylistService {
                )
   }
 
+  getPlaylistVideos (
+    videoPlaylistId: number | string,
+    componentPagination: ComponentPagination
+  ): Observable<ResultList<VideoPlaylistElement>> {
+    const path = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylistId + '/videos'
+    const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination)
+
+    return this.authHttp
+               .get<ResultList<ServerVideoPlaylistElement>>(path, { params })
+               .pipe(
+                 switchMap(res => this.extractVideoPlaylistElements(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
   doesVideoExistInPlaylist (videoId: number) {
     this.videoExistsInPlaylistSubject.next(videoId)
 
@@ -167,6 +188,23 @@ export class VideoPlaylistService {
                .pipe(map(translations => new VideoPlaylist(playlist, translations)))
   }
 
+  extractVideoPlaylistElements (result: ResultList<ServerVideoPlaylistElement>) {
+    return this.serverService.localeObservable
+               .pipe(
+                 map(translations => {
+                   const elementsJson = result.data
+                   const total = result.total
+                   const elements: VideoPlaylistElement[] = []
+
+                   for (const elementJson of elementsJson) {
+                     elements.push(new VideoPlaylistElement(elementJson, translations))
+                   }
+
+                   return { total, data: elements }
+                 })
+               )
+  }
+
   private doVideosExistInPlaylist (videoIds: number[]): Observable<VideoExistInPlaylist> {
     const url = VideoPlaylistService.MY_VIDEO_PLAYLIST_URL + 'videos-exist'
     let params = new HttpParams()