Fix broken playlist api

1 files changed, 58 insertions, 42 deletions

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>