Fix broken playlist api

client/src/app/+accounts/account-video-channels/account-video-channels.component.html

@@ -18,10 +18,13 @@
       <div *ngIf="getVideosOf(videoChannel)" class="videos">
         <div class="no-results" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel does not have videos.</div>
 
-        <my-video-miniature *ngFor="let video of getVideosOf(videoChannel)" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature>
+        <my-video-miniature
+          *ngFor="let video of getVideosOf(videoChannel)"
+          [video]="video" [user]="user" [displayVideoActions]="true"
+        ></my-video-miniature>
       </div>
 
-      <a class="show-more" i18n [routerLink]="getVideoChannelLink(videoChannel)">
+      <a *ngIf="getVideosOf(videoChannel).length !== 0" class="show-more" i18n [routerLink]="getVideoChannelLink(videoChannel)">
         Show this channel
       </a>
     </div>

client/src/app/+accounts/account-video-channels/account-video-channels.component.scss

@@ -23,6 +23,11 @@
       height: 50px;
     }
   }
+
+  my-video-miniature ::ng-deep my-video-actions-dropdown > my-action-dropdown {
+    // Fix our overflow
+    position: absolute;
+  }
 }
 
 

client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html

@@ -14,10 +14,10 @@
       class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()"
       cdkDropList (cdkDropListDropped)="drop($event)"
     >
-      <div class="video" *ngFor="let video of videos; trackBy: trackByFn" cdkDrag (cdkDragMoved)="onDragMove($event)">
+      <div class="video" *ngFor="let playlistElement of playlistElements; trackBy: trackByFn" cdkDrag>
         <my-video-playlist-element-miniature
-          [video]="video" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)"
+          [playlistElement]="playlistElement" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)"
-          [position]="video.playlistElement.position"
+          [position]="playlistElement.position"
         >
         </my-video-playlist-element-miniature>
       </div>

client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts

@@ -3,15 +3,13 @@ import { Notifier, ServerService } from '@app/core'
 import { AuthService } from '../../core/auth'
 import { ConfirmService } from '../../core/confirm'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
-import { Video } from '@app/shared/video/video.model'
+import { Subscription } from 'rxjs'
-import { Subject, Subscription } from 'rxjs'
 import { ActivatedRoute } from '@angular/router'
-import { VideoService } from '@app/shared/video/video.service'
 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { CdkDragDrop, CdkDragMove } from '@angular/cdk/drag-drop'
+import { CdkDragDrop } from '@angular/cdk/drag-drop'
-import { throttleTime } from 'rxjs/operators'
+import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
 
 @Component({
   selector: 'my-account-video-playlist-elements',
@@ -19,7 +17,7 @@ import { throttleTime } from 'rxjs/operators'
   styleUrls: [ './my-account-video-playlist-elements.component.scss' ]
 })
 export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestroy {
-  videos: Video[] = []
+  playlistElements: VideoPlaylistElement[] = []
   playlist: VideoPlaylist
 
   pagination: ComponentPagination = {
@@ -30,7 +28,6 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
 
   private videoPlaylistId: string | number
   private paramsSub: Subscription
-  private dragMoveSubject = new Subject<number>()
 
   constructor (
     private authService: AuthService,
@@ -39,7 +36,6 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
     private confirmService: ConfirmService,
     private route: ActivatedRoute,
     private i18n: I18n,
-    private videoService: VideoService,
     private videoPlaylistService: VideoPlaylistService
   ) {}
 
@@ -50,10 +46,6 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
 
       this.loadPlaylistInfo()
     })
-
-    this.dragMoveSubject.asObservable()
-      .pipe(throttleTime(200))
-      .subscribe(y => this.checkScroll(y))
   }
 
   ngOnDestroy () {
@@ -66,8 +58,8 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
 
     if (previousIndex === newIndex) return
 
-    const oldPosition = this.videos[previousIndex].playlistElement.position
+    const oldPosition = this.playlistElements[previousIndex].position
-    let insertAfter = this.videos[newIndex].playlistElement.position
+    let insertAfter = this.playlistElements[newIndex].position
 
     if (oldPosition > insertAfter) insertAfter--
 
@@ -78,42 +70,16 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
         err => this.notifier.error(err.message)
       )
 
-    const video = this.videos[previousIndex]
+    const element = this.playlistElements[previousIndex]
 
-    this.videos.splice(previousIndex, 1)
+    this.playlistElements.splice(previousIndex, 1)
-    this.videos.splice(newIndex, 0, video)
+    this.playlistElements.splice(newIndex, 0, element)
 
     this.reorderClientPositions()
   }
 
-  onDragMove (event: CdkDragMove<any>) {
+  onElementRemoved (element: VideoPlaylistElement) {
-    this.dragMoveSubject.next(event.pointerPosition.y)
+    this.playlistElements = this.playlistElements.filter(v => v.id !== element.id)
-  }
-
-  checkScroll (pointerY: number) {
-    // FIXME: Uncomment when https://github.com/angular/material2/issues/14098 is fixed
-    // FIXME: Remove when https://github.com/angular/material2/issues/13588 is implemented
-    // if (pointerY < 150) {
-    //   window.scrollBy({
-    //     left: 0,
-    //     top: -20,
-    //     behavior: 'smooth'
-    //   })
-    //
-    //   return
-    // }
-    //
-    // if (window.innerHeight - pointerY <= 50) {
-    //   window.scrollBy({
-    //     left: 0,
-    //     top: 20,
-    //     behavior: 'smooth'
-    //   })
-    // }
-  }
-
-  onElementRemoved (video: Video) {
-    this.videos = this.videos.filter(v => v.id !== video.id)
     this.reorderClientPositions()
   }
 
@@ -125,14 +91,14 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
     this.loadElements()
   }
 
-  trackByFn (index: number, elem: Video) {
+  trackByFn (index: number, elem: VideoPlaylistElement) {
     return elem.id
   }
 
   private loadElements () {
-    this.videoService.getPlaylistVideos(this.videoPlaylistId, this.pagination)
+    this.videoPlaylistService.getPlaylistVideos(this.videoPlaylistId, this.pagination)
         .subscribe(({ total, data }) => {
-          this.videos = this.videos.concat(data)
+          this.playlistElements = this.playlistElements.concat(data)
           this.pagination.totalItems = total
         })
   }
@@ -147,8 +113,8 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
   private reorderClientPositions () {
     let i = 1
 
-    for (const video of this.videos) {
+    for (const element of this.playlistElements) {
-      video.playlistElement.position = i
+      element.position = i
       i++
     }
   }

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 }))

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"
+      <ng-container *ngIf="playlistElement.video">
-         [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
+        <a tabindex="-1" class="video-info-name"
-         [attr.title]="video.name"
+          [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
-      >{{ video.name }}</a>
+          [attr.title]="playlistElement.video.name"
+        >{{ playlistElement.video.name }}</a>
 
-      <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
+        <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', playlistElement.video.byAccount ]">
-      <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ video.byAccount }}</span>
+          {{ playlistElement.video.byAccount }}
+        </a>
+        <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ playlistElement.video.byAccount }}</span>
 
-      <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video) }}</span>
+        <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(playlistElement) }}</span>
+      </ng-container>
+
+      <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()"
+  <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right"
-       autoClose="outside">
+       (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)">
+      <ng-container *ngIf="playlistElement.video">
-        <my-global-icon iconName="edit"></my-global-icon>
+        <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, playlistElement)">
-        <ng-container i18n>Edit starts/stops at</ng-container>
+          <my-global-icon iconName="edit"></my-global-icon>
-      </div>
+          <ng-container i18n>Edit starts/stops at</ng-container>
-
-      <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>
 
-        <div>
+        <div class="timestamp-options" *ngIf="displayTimestampOptions">
-          <my-peertube-checkbox
+          <div>
-            inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
+            <my-peertube-checkbox
-            i18n-labelText labelText="Stop at"
+              inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
-          ></my-peertube-checkbox>
+              i18n-labelText labelText="Start at"
+            ></my-peertube-checkbox>
 
-          <my-timestamp-input
+            <my-timestamp-input
-            [timestamp]="timestampOptions.stopTimestamp"
+              [timestamp]="timestampOptions.startTimestamp"
-            [maxTimestamp]="video.duration"
+              [maxTimestamp]="playlistElement.video.duration"
-            [disabled]="!timestampOptions.stopTimestampEnabled"
+              [disabled]="!timestampOptions.startTimestampEnabled"
-            [(ngModel)]="timestampOptions.stopTimestamp"
+              [(ngModel)]="timestampOptions.startTimestamp"
-          ></my-timestamp-input>
+            ></my-timestamp-input>
+          </div>
+
+          <div>
+            <my-peertube-checkbox
+              inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
+              i18n-labelText labelText="Stop at"
+            ></my-peertube-checkbox>
+
+            <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(playlistElement)">
         </div>
+      </ng-container>
 
-        <input type="submit" i18n-value value="Save" (click)="updateTimestamps(video)">
+      <span class="dropdown-item" (click)="removeFromPlaylist(playlistElement)">
-      </div>
-
-      <span class="dropdown-item" (click)="removeFromPlaylist(video)">
             <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
           </span>
     </div>

client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss

@@ -2,9 +2,21 @@
 @import '_mixins';
 @import '_miniature';
 
-my-video-thumbnail {
+$thumbnail-width: 130px;
-  @include thumbnail-size-component(130px, 72px);
+$thumbnail-height: 72px;
 
+my-video-thumbnail {
+  @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;

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,
+      videoId: this.playlistElement.video.uuid,
-      start: this.video.playlistElement.startTimestamp,
+      start: this.playlistElement.startTimestamp,
-      stop: this.video.playlistElement.stopTimestamp
+      stop: this.playlistElement.stopTimestamp
     }
   }
 
@@ -70,13 +83,13 @@ export class VideoPlaylistElementMiniatureComponent {
     return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
   }
 
-  removeFromPlaylist (video: Video) {
+  removeFromPlaylist (playlistElement: VideoPlaylistElement) {
-    this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, video.id)
+    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
+            playlistElement.startTimestamp = body.startTimestamp
-            video.playlistElement.stopTimestamp = body.stopTimestamp
+            playlistElement.stopTimestamp = body.stopTimestamp
 
             this.cdr.detectChanges()
           },
@@ -108,9 +121,9 @@ export class VideoPlaylistElementMiniatureComponent {
     this.moreDropdown.close()
   }
 
-  formatTimestamp (video: Video) {
+  formatTimestamp (playlistElement: VideoPlaylistElement) {
-    const start = video.playlistElement.startTimestamp
+    const start = playlistElement.startTimestamp
-    const stop = video.playlistElement.stopTimestamp
+    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
       }
     }
 

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)
+  }
+}

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) {
+  updateVideoOfPlaylist (playlistId: number, playlistElementId: number, body: VideoPlaylistElementUpdate) {
-    return this.authHttp.put(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + videoId, body)
+    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) {
+  removeVideoFromPlaylist (playlistId: number, playlistElementId: number) {
-    return this.authHttp.delete(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + videoId)
+    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()

client/src/app/shared/video/video.model.ts

@@ -1,5 +1,5 @@
 import { User } from '../'
-import { PlaylistElement, UserRight, Video as VideoServerModel, VideoPrivacy, VideoState } from '../../../../../shared'
+import { UserRight, Video as VideoServerModel, VideoPrivacy, VideoState } from '../../../../../shared'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
 import { VideoConstant } from '../../../../../shared/models/videos/video-constant.model'
 import { durationToString, getAbsoluteAPIUrl } from '../misc/utils'
@@ -48,8 +48,6 @@ export class Video implements VideoServerModel {
   blacklisted?: boolean
   blacklistedReason?: string
 
-  playlistElement?: PlaylistElement
-
   account: {
     id: number
     name: string
@@ -126,8 +124,6 @@ export class Video implements VideoServerModel {
     this.blacklistedReason = hash.blacklistedReason
 
     this.userHistory = hash.userHistory
-
-    this.playlistElement = hash.playlistElement
   }
 
   isVideoNSFWForUser (user: User, serverConfig: ServerConfig) {

client/src/app/shared/video/video.service.ts

@@ -31,7 +31,6 @@ import { ServerService } from '@app/core'
 import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 
 export interface VideosProvider {
   getVideos (parameters: {
@@ -172,23 +171,6 @@ export class VideoService implements VideosProvider {
                )
   }
 
-  getPlaylistVideos (
-    videoPlaylistId: number | string,
-    videoPagination: ComponentPagination
-  ): Observable<ResultList<Video>> {
-    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
-
-    let params = new HttpParams()
-    params = this.restService.addRestGetParams(params, pagination)
-
-    return this.authHttp
-               .get<ResultList<Video>>(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylistId + '/videos', { params })
-               .pipe(
-                 switchMap(res => this.extractVideos(res)),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
   getUserSubscriptionVideos (parameters: {
     videoPagination: ComponentPagination,
     sort: VideoSortField

client/src/app/videos/+video-watch/video-watch-playlist.component.html

@@ -16,10 +16,10 @@
     </div>
   </div>
 
-  <div *ngFor="let playlistVideo of playlistVideos">
+  <div *ngFor="let playlistElement of playlistElements">
     <my-video-playlist-element-miniature
-      [video]="playlistVideo" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
+      [playlistElement]="playlistElement" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
-      [playing]="currentPlaylistPosition === playlistVideo.playlistElement.position" [accountLink]="false" [position]="playlistVideo.playlistElement.position"
+      [playing]="currentPlaylistPosition === playlistElement.position" [accountLink]="false" [position]="playlistElement.position"
     ></my-video-playlist-element-miniature>
   </div>
 </div>

client/src/app/videos/+video-watch/video-watch-playlist.component.scss

@@ -53,6 +53,11 @@
       my-video-thumbnail {
         @include thumbnail-size-component(90px, 50px);
       }
+
+      .fake-thumbnail {
+        width: 90px;
+        height: 50px;
+      }
     }
   }
 }

client/src/app/videos/+video-watch/video-watch-playlist.component.ts

@@ -1,11 +1,11 @@
 import { Component, Input } from '@angular/core'
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
-import { Video } from '@app/shared/video/video.model'
 import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'
-import { VideoService } from '@app/shared/video/video.service'
 import { Router } from '@angular/router'
 import { AuthService } from '@app/core'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
 
 @Component({
   selector: 'my-video-watch-playlist',
@@ -16,7 +16,7 @@ export class VideoWatchPlaylistComponent {
   @Input() video: VideoDetails
   @Input() playlist: VideoPlaylist
 
-  playlistVideos: Video[] = []
+  playlistElements: VideoPlaylistElement[] = []
   playlistPagination: ComponentPagination = {
     currentPage: 1,
     itemsPerPage: 30,
@@ -28,7 +28,7 @@ export class VideoWatchPlaylistComponent {
 
   constructor (
     private auth: AuthService,
-    private videoService: VideoService,
+    private videoPlaylist: VideoPlaylistService,
     private router: Router
   ) {}
 
@@ -40,8 +40,8 @@ export class VideoWatchPlaylistComponent {
     this.loadPlaylistElements(this.playlist,false)
   }
 
-  onElementRemoved (video: Video) {
+  onElementRemoved (playlistElement: VideoPlaylistElement) {
-    this.playlistVideos = this.playlistVideos.filter(v => v.id !== video.id)
+    this.playlistElements = this.playlistElements.filter(e => e.id !== playlistElement.id)
 
     this.playlistPagination.totalItems--
   }
@@ -65,12 +65,13 @@ export class VideoWatchPlaylistComponent {
   }
 
   loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) {
-    this.videoService.getPlaylistVideos(playlist.uuid, this.playlistPagination)
+    this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination)
         .subscribe(({ total, data }) => {
-          this.playlistVideos = this.playlistVideos.concat(data)
+          this.playlistElements = this.playlistElements.concat(data)
           this.playlistPagination.totalItems = total
 
-          if (total === 0) {
+          const firstAvailableVideos = this.playlistElements.find(e => !!e.video)
+          if (!firstAvailableVideos) {
             this.noPlaylistVideos = true
             return
           }
@@ -79,7 +80,7 @@ export class VideoWatchPlaylistComponent {
 
           if (redirectToFirst) {
             const extras = {
-              queryParams: { videoId: this.playlistVideos[ 0 ].uuid },
+              queryParams: { videoId: firstAvailableVideos.video.uuid },
               replaceUrl: true
             }
             this.router.navigate([], extras)
@@ -88,11 +89,11 @@ export class VideoWatchPlaylistComponent {
   }
 
   updatePlaylistIndex (video: VideoDetails) {
-    if (this.playlistVideos.length === 0 || !video) return
+    if (this.playlistElements.length === 0 || !video) return
 
-    for (const playlistVideo of this.playlistVideos) {
+    for (const playlistElement of this.playlistElements) {
-      if (playlistVideo.id === video.id) {
+      if (playlistElement.video && playlistElement.video.id === video.id) {
-        this.currentPlaylistPosition = playlistVideo.playlistElement.position
+        this.currentPlaylistPosition = playlistElement.position
         return
       }
     }
@@ -103,11 +104,17 @@ export class VideoWatchPlaylistComponent {
 
   navigateToNextPlaylistVideo () {
     if (this.currentPlaylistPosition < this.playlistPagination.totalItems) {
-      const next = this.playlistVideos.find(v => v.playlistElement.position === this.currentPlaylistPosition + 1)
+      const next = this.playlistElements.find(e => e.position === this.currentPlaylistPosition + 1)
 
-      const start = next.playlistElement.startTimestamp
+      if (!next || !next.video) {
-      const stop = next.playlistElement.stopTimestamp
+        this.currentPlaylistPosition++
-      this.router.navigate([],{ queryParams: { videoId: next.uuid, start, stop } })
+        this.navigateToNextPlaylistVideo()
+        return
+      }
+
+      const start = next.startTimestamp
+      const stop = next.stopTimestamp
+      this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } })
     }
   }
 }

client/src/app/videos/+video-watch/video-watch.component.ts

@@ -464,7 +464,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     }
 
     this.zone.runOutsideAngular(async () => {
-      this.player = await PeertubePlayerManager.initialize(mode, options)
+      this.player = await PeertubePlayerManager.initialize(mode, options, player => this.player = player)
 
       this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
 

client/src/assets/player/peertube-player-manager.ts

@@ -86,6 +86,7 @@ export class PeertubePlayerManager {
 
   private static videojsLocaleCache: { [ path: string ]: any } = {}
   private static playerElementClassName: string
+  private static onPlayerChange: (player: any) => void
 
   static getServerTranslations (serverUrl: string, locale: string) {
     const path = PeertubePlayerManager.getLocalePath(serverUrl, locale)
@@ -100,9 +101,10 @@ export class PeertubePlayerManager {
       })
   }
 
-  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions) {
+  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: any) => void) {
     let p2pMediaLoader: any
 
+    this.onPlayerChange = onPlayerChange
     this.playerElementClassName = options.common.playerElement.className
 
     if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin')
@@ -171,6 +173,8 @@ export class PeertubePlayerManager {
       const player = this
 
       self.addContextMenu(mode, player, options.common.embedUrl)
+
+      PeertubePlayerManager.onPlayerChange(player)
     })
   }
 

client/src/assets/player/videojs-components/settings-menu-item.ts

@@ -43,6 +43,9 @@ class SettingsMenuItem extends MenuItem {
     player.ready(() => {
       // Voodoo magic for IOS
       setTimeout(() => {
+        // Player was destroyed
+        if (!this.player_) return
+
         this.build()
 
         // Update on rate change

client/src/standalone/videos/embed.ts

@@ -212,7 +212,7 @@ export class PeerTubeEmbed {
       })
     }
 
-    this.player = await PeertubePlayerManager.initialize(this.mode, options)
+    this.player = await PeertubePlayerManager.initialize(this.mode, options, player => this.player = player)
     this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
 
     window[ 'videojsPlayer' ] = this.player

server/controllers/api/users/my-video-playlists.ts

@@ -35,6 +35,7 @@ async function doVideosInPlaylistExist (req: express.Request, res: express.Respo
   for (const result of results) {
     for (const element of result.VideoPlaylistElements) {
       existObject[element.videoId].push({
+        playlistElementId: element.id,
         playlistId: result.id,
         startTimestamp: element.startTimestamp,
         stopTimestamp: element.stopTimestamp

server/controllers/api/video-playlist.ts

@@ -4,14 +4,13 @@ import {
   asyncMiddleware,
   asyncRetryTransactionMiddleware,
   authenticate,
-  commonVideosFiltersValidator,
   optionalAuthenticate,
   paginationValidator,
   setDefaultPagination,
   setDefaultSort
 } from '../../middlewares'
 import { videoPlaylistsSortValidator } from '../../middlewares/validators'
-import { buildNSFWFilter, createReqFiles, isUserAbleToSearchRemoteURI } from '../../helpers/express-utils'
+import { buildNSFWFilter, createReqFiles } from '../../helpers/express-utils'
 import { MIMETYPES, VIDEO_PLAYLIST_PRIVACIES } from '../../initializers/constants'
 import { logger } from '../../helpers/logger'
 import { resetSequelizeInstance } from '../../helpers/database-utils'
@@ -32,7 +31,6 @@ import { join } from 'path'
 import { sendCreateVideoPlaylist, sendDeleteVideoPlaylist, sendUpdateVideoPlaylist } from '../../lib/activitypub/send'
 import { getVideoPlaylistActivityPubUrl, getVideoPlaylistElementActivityPubUrl } from '../../lib/activitypub/url'
 import { VideoPlaylistUpdate } from '../../../shared/models/videos/playlist/video-playlist-update.model'
-import { VideoModel } from '../../models/video/video'
 import { VideoPlaylistElementModel } from '../../models/video/video-playlist-element'
 import { VideoPlaylistElementCreate } from '../../../shared/models/videos/playlist/video-playlist-element-create.model'
 import { VideoPlaylistElementUpdate } from '../../../shared/models/videos/playlist/video-playlist-element-update.model'
@@ -88,7 +86,6 @@ videoPlaylistRouter.get('/:playlistId/videos',
   paginationValidator,
   setDefaultPagination,
   optionalAuthenticate,
-  commonVideosFiltersValidator,
   asyncMiddleware(getVideoPlaylistVideos)
 )
 
@@ -104,13 +101,13 @@ videoPlaylistRouter.post('/:playlistId/videos/reorder',
   asyncRetryTransactionMiddleware(reorderVideosPlaylist)
 )
 
-videoPlaylistRouter.put('/:playlistId/videos/:videoId',
+videoPlaylistRouter.put('/:playlistId/videos/:playlistElementId',
   authenticate,
   asyncMiddleware(videoPlaylistsUpdateOrRemoveVideoValidator),
   asyncRetryTransactionMiddleware(updateVideoPlaylistElement)
 )
 
-videoPlaylistRouter.delete('/:playlistId/videos/:videoId',
+videoPlaylistRouter.delete('/:playlistId/videos/:playlistElementId',
   authenticate,
   asyncMiddleware(videoPlaylistsUpdateOrRemoveVideoValidator),
   asyncRetryTransactionMiddleware(removeVideoFromPlaylist)
@@ -426,26 +423,20 @@ async function reorderVideosPlaylist (req: express.Request, res: express.Respons
 
 async function getVideoPlaylistVideos (req: express.Request, res: express.Response) {
   const videoPlaylistInstance = res.locals.videoPlaylist
-  const followerActorId = isUserAbleToSearchRemoteURI(res) ? null : undefined
+  const user = res.locals.oauth ? res.locals.oauth.token.User : undefined
+  const server = await getServerActor()
 
-  const resultList = await VideoModel.listForApi({
+  const resultList = await VideoPlaylistElementModel.listForApi({
-    followerActorId,
     start: req.query.start,
     count: req.query.count,
-    sort: 'VideoPlaylistElements.position',
-    includeLocalVideos: true,
-    categoryOneOf: req.query.categoryOneOf,
-    licenceOneOf: req.query.licenceOneOf,
-    languageOneOf: req.query.languageOneOf,
-    tagsOneOf: req.query.tagsOneOf,
-    tagsAllOf: req.query.tagsAllOf,
-    filter: req.query.filter,
-    nsfw: buildNSFWFilter(res, req.query.nsfw),
-    withFiles: false,
     videoPlaylistId: videoPlaylistInstance.id,
-    user: res.locals.oauth ? res.locals.oauth.token.User : undefined
+    serverAccount: server.Account,
+    user
   })
 
-  const additionalAttributes = { playlistInfo: true }
+  const options = {
-  return res.json(getFormattedObjects(resultList.data, resultList.total, { additionalAttributes }))
+    displayNSFW: buildNSFWFilter(res, req.query.nsfw),
+    accountId: user ? user.Account.id : undefined
+  }
+  return res.json(getFormattedObjects(resultList.data, resultList.total, options))
 }

server/initializers/constants.ts

@@ -14,7 +14,7 @@ import { CONFIG, registerConfigChangedHandler } from './config'
 
 // ---------------------------------------------------------------------------
 
-const LAST_MIGRATION_VERSION = 405
+const LAST_MIGRATION_VERSION = 410
 
 // ---------------------------------------------------------------------------
 

server/initializers/migrations/0410-video-playlist-element.ts

@@ -0,0 +1,39 @@
+import * as Sequelize from 'sequelize'
+
+async function up (utils: {
+  transaction: Sequelize.Transaction,
+  queryInterface: Sequelize.QueryInterface,
+  sequelize: Sequelize.Sequelize,
+  db: any
+}): Promise<void> {
+  {
+    const data = {
+      type: Sequelize.INTEGER,
+      allowNull: true,
+      defaultValue: null
+    }
+
+    await utils.queryInterface.changeColumn('videoPlaylistElement', 'videoId', data)
+  }
+
+  await utils.queryInterface.removeConstraint('videoPlaylistElement', 'videoPlaylistElement_videoId_fkey')
+
+  await utils.queryInterface.addConstraint('videoPlaylistElement', [ 'videoId' ], {
+    type: 'foreign key',
+    references: {
+      table: 'video',
+      field: 'id'
+    },
+    onDelete: 'set null',
+    onUpdate: 'CASCADE'
+  })
+}
+
+function down (options) {
+  throw new Error('Not implemented.')
+}
+
+export {
+  up,
+  down
+}

server/middlewares/validators/videos/video-playlists.ts

@@ -207,8 +207,8 @@ const videoPlaylistsAddVideoValidator = [
 const videoPlaylistsUpdateOrRemoveVideoValidator = [
   param('playlistId')
     .custom(isIdOrUUIDValid).withMessage('Should have a valid playlist id/uuid'),
-  param('videoId')
+  param('playlistElementId')
-    .custom(isIdOrUUIDValid).withMessage('Should have an video id/uuid'),
+    .custom(isIdValid).withMessage('Should have an element id/uuid'),
   body('startTimestamp')
     .optional()
     .custom(isVideoPlaylistTimestampValid).withMessage('Should have a valid start timestamp'),
@@ -222,12 +222,10 @@ const videoPlaylistsUpdateOrRemoveVideoValidator = [
     if (areValidationErrors(req, res)) return
 
     if (!await doesVideoPlaylistExist(req.params.playlistId, res, 'all')) return
-    if (!await doesVideoExist(req.params.videoId, res, 'id')) return
 
     const videoPlaylist = res.locals.videoPlaylist
-    const video = res.locals.video
 
-    const videoPlaylistElement = await VideoPlaylistElementModel.loadByPlaylistAndVideo(videoPlaylist.id, video.id)
+    const videoPlaylistElement = await VideoPlaylistElementModel.loadById(req.params.playlistElementId)
     if (!videoPlaylistElement) {
       res.status(404)
          .json({ error: 'Video playlist element not found' })

server/models/account/account-video-rate.ts

@@ -9,7 +9,7 @@ import { ActorModel } from '../activitypub/actor'
 import { getSort, throwIfNotValid } from '../utils'
 import { isActivityPubUrlValid } from '../../helpers/custom-validators/activitypub/misc'
 import { AccountVideoRate } from '../../../shared'
-import { ScopeNames as VideoChannelScopeNames, VideoChannelModel } from '../video/video-channel'
+import { ScopeNames as VideoChannelScopeNames, SummaryOptions, VideoChannelModel } from '../video/video-channel'
 
 /*
   Account rates per video.
@@ -109,7 +109,7 @@ export class AccountVideoRateModel extends Model<AccountVideoRateModel> {
           required: true,
           include: [
             {
-              model: VideoChannelModel.scope({ method: [VideoChannelScopeNames.SUMMARY, true] }),
+              model: VideoChannelModel.scope({ method: [VideoChannelScopeNames.SUMMARY, { withAccount: true } as SummaryOptions ] }),
               required: true
             }
           ]

server/models/account/account.ts

@@ -27,12 +27,19 @@ import { UserModel } from './user'
 import { AvatarModel } from '../avatar/avatar'
 import { VideoPlaylistModel } from '../video/video-playlist'
 import { CONSTRAINTS_FIELDS, WEBSERVER } from '../../initializers/constants'
-import { Op, Transaction, WhereOptions } from 'sequelize'
+import { FindOptions, IncludeOptions, Op, Transaction, WhereOptions } from 'sequelize'
+import { AccountBlocklistModel } from './account-blocklist'
+import { ServerBlocklistModel } from '../server/server-blocklist'
 
 export enum ScopeNames {
   SUMMARY = 'SUMMARY'
 }
 
+export type SummaryOptions = {
+  whereActor?: WhereOptions
+  withAccountBlockerIds?: number[]
+}
+
 @DefaultScope(() => ({
   include: [
     {
@@ -42,8 +49,16 @@ export enum ScopeNames {
   ]
 }))
 @Scopes(() => ({
-  [ ScopeNames.SUMMARY ]: (whereActor?: WhereOptions) => {
+  [ ScopeNames.SUMMARY ]: (options: SummaryOptions = {}) => {
-    return {
+    const whereActor = options.whereActor || undefined
+
+    const serverInclude: IncludeOptions = {
+      attributes: [ 'host' ],
+      model: ServerModel.unscoped(),
+      required: false
+    }
+
+    const query: FindOptions = {
       attributes: [ 'id', 'name' ],
       include: [
         {
@@ -52,11 +67,8 @@ export enum ScopeNames {
           required: true,
           where: whereActor,
           include: [
-            {
+            serverInclude,
-              attributes: [ 'host' ],
+
-              model: ServerModel.unscoped(),
-              required: false
-            },
             {
               model: AvatarModel.unscoped(),
               required: false
@@ -65,6 +77,35 @@ export enum ScopeNames {
         }
       ]
     }
+
+    if (options.withAccountBlockerIds) {
+      query.include.push({
+        attributes: [ 'id' ],
+        model: AccountBlocklistModel.unscoped(),
+        as: 'BlockedAccounts',
+        required: false,
+        where: {
+          accountId: {
+            [Op.in]: options.withAccountBlockerIds
+          }
+        }
+      })
+
+      serverInclude.include = [
+        {
+          attributes: [ 'id' ],
+          model: ServerBlocklistModel.unscoped(),
+          required: false,
+          where: {
+            accountId: {
+              [Op.in]: options.withAccountBlockerIds
+            }
+          }
+        }
+      ]
+    }
+
+    return query
   }
 }))
 @Table({
@@ -163,6 +204,16 @@ export class AccountModel extends Model<AccountModel> {
   })
   VideoComments: VideoCommentModel[]
 
+  @HasMany(() => AccountBlocklistModel, {
+    foreignKey: {
+      name: 'targetAccountId',
+      allowNull: false
+    },
+    as: 'BlockedAccounts',
+    onDelete: 'CASCADE'
+  })
+  BlockedAccounts: AccountBlocklistModel[]
+
   @BeforeDestroy
   static async sendDeleteIfOwned (instance: AccountModel, options) {
     if (!instance.Actor) {
@@ -343,4 +394,8 @@ export class AccountModel extends Model<AccountModel> {
   getDisplayName () {
     return this.name
   }
+
+  isBlocked () {
+    return this.BlockedAccounts && this.BlockedAccounts.length !== 0
+  }
 }

server/models/server/server-blocklist.ts

@@ -67,7 +67,6 @@ export class ServerBlocklistModel extends Model<ServerBlocklistModel> {
 
   @BelongsTo(() => ServerModel, {
     foreignKey: {
-      name: 'targetServerId',
       allowNull: false
     },
     onDelete: 'CASCADE'

server/models/server/server.ts

@@ -2,6 +2,8 @@ import { AllowNull, Column, CreatedAt, Default, HasMany, Is, Model, Table, Updat
 import { isHostValid } from '../../helpers/custom-validators/servers'
 import { ActorModel } from '../activitypub/actor'
 import { throwIfNotValid } from '../utils'
+import { AccountBlocklistModel } from '../account/account-blocklist'
+import { ServerBlocklistModel } from './server-blocklist'
 
 @Table({
   tableName: 'server',
@@ -40,6 +42,14 @@ export class ServerModel extends Model<ServerModel> {
   })
   Actors: ActorModel[]
 
+  @HasMany(() => ServerBlocklistModel, {
+    foreignKey: {
+      allowNull: false
+    },
+    onDelete: 'CASCADE'
+  })
+  BlockedByAccounts: ServerBlocklistModel[]
+
   static loadByHost (host: string) {
     const query = {
       where: {
@@ -50,6 +60,10 @@ export class ServerModel extends Model<ServerModel> {
     return ServerModel.findOne(query)
   }
 
+  isBlocked () {
+    return this.BlockedByAccounts && this.BlockedByAccounts.length !== 0
+  }
+
   toFormattedJSON () {
     return {
       host: this.host

server/models/video/video-blacklist.ts

@@ -1,7 +1,7 @@
 import { AllowNull, BelongsTo, Column, CreatedAt, DataType, Default, ForeignKey, Is, Model, Table, UpdatedAt } from 'sequelize-typescript'
 import { getSortOnModel, SortType, throwIfNotValid } from '../utils'
 import { ScopeNames as VideoModelScopeNames, VideoModel } from './video'
-import { ScopeNames as VideoChannelScopeNames, VideoChannelModel } from './video-channel'
+import { ScopeNames as VideoChannelScopeNames, SummaryOptions, VideoChannelModel } from './video-channel'
 import { isVideoBlacklistReasonValid, isVideoBlacklistTypeValid } from '../../helpers/custom-validators/video-blacklist'
 import { VideoBlacklist, VideoBlacklistType } from '../../../shared/models/videos'
 import { CONSTRAINTS_FIELDS } from '../../initializers/constants'
@@ -71,7 +71,7 @@ export class VideoBlacklistModel extends Model<VideoBlacklistModel> {
         required: true,
         include: [
           {
-            model: VideoChannelModel.scope({ method: [ VideoChannelScopeNames.SUMMARY, true ] }),
+            model: VideoChannelModel.scope({ method: [ VideoChannelScopeNames.SUMMARY, { withAccount: true } as SummaryOptions ] }),
             required: true
           },
           {

server/models/video/video-channel.ts

@@ -24,7 +24,7 @@ import {
   isVideoChannelSupportValid
 } from '../../helpers/custom-validators/video-channels'
 import { sendDeleteActor } from '../../lib/activitypub/send'
-import { AccountModel, ScopeNames as AccountModelScopeNames } from '../account/account'
+import { AccountModel, ScopeNames as AccountModelScopeNames, SummaryOptions as AccountSummaryOptions } from '../account/account'
 import { ActorModel, unusedActorAttributesForAPI } from '../activitypub/actor'
 import { buildServerIdsFollowedBy, buildTrigramSearchIndex, createSimilarityAttribute, getSort, throwIfNotValid } from '../utils'
 import { VideoModel } from './video'
@@ -58,6 +58,11 @@ type AvailableForListOptions = {
   actorId: number
 }
 
+export type SummaryOptions = {
+  withAccount?: boolean // Default: false
+  withAccountBlockerIds?: number[]
+}
+
 @DefaultScope(() => ({
   include: [
     {
@@ -67,7 +72,7 @@ type AvailableForListOptions = {
   ]
 }))
 @Scopes(() => ({
-  [ScopeNames.SUMMARY]: (withAccount = false) => {
+  [ScopeNames.SUMMARY]: (options: SummaryOptions = {}) => {
     const base: FindOptions = {
       attributes: [ 'name', 'description', 'id', 'actorId' ],
       include: [
@@ -90,9 +95,11 @@ type AvailableForListOptions = {
       ]
     }
 
-    if (withAccount === true) {
+    if (options.withAccount === true) {
       base.include.push({
-        model: AccountModel.scope(AccountModelScopeNames.SUMMARY),
+        model: AccountModel.scope({
+          method: [ AccountModelScopeNames.SUMMARY, { withAccountBlockerIds: options.withAccountBlockerIds } as AccountSummaryOptions ]
+        }),
         required: true
       })
     }

server/models/video/video-format-utils.ts

@@ -26,7 +26,6 @@ export type VideoFormattingJSONOptions = {
     waitTranscoding?: boolean,
     scheduledUpdate?: boolean,
     blacklistInfo?: boolean
-    playlistInfo?: boolean
   }
 }
 function videoModelToFormattedJSON (video: VideoModel, options?: VideoFormattingJSONOptions): Video {
@@ -98,17 +97,6 @@ function videoModelToFormattedJSON (video: VideoModel, options?: VideoFormatting
       videoObject.blacklisted = !!video.VideoBlacklist
       videoObject.blacklistedReason = video.VideoBlacklist ? video.VideoBlacklist.reason : null
     }
-
-    if (options.additionalAttributes.playlistInfo === true) {
-      // We filtered on a specific videoId/videoPlaylistId, that is unique
-      const playlistElement = video.VideoPlaylistElements[0]
-
-      videoObject.playlistElement = {
-        position: playlistElement.position,
-        startTimestamp: playlistElement.startTimestamp,
-        stopTimestamp: playlistElement.stopTimestamp
-      }
-    }
   }
 
   return videoObject

server/models/video/video-playlist-element.ts

@@ -13,14 +13,18 @@ import {
   Table,
   UpdatedAt
 } from 'sequelize-typescript'
-import { VideoModel } from './video'
+import { ForAPIOptions, ScopeNames as VideoScopeNames, VideoModel } from './video'
 import { VideoPlaylistModel } from './video-playlist'
 import { getSort, throwIfNotValid } from '../utils'
 import { isActivityPubUrlValid } from '../../helpers/custom-validators/activitypub/misc'
 import { CONSTRAINTS_FIELDS } from '../../initializers/constants'
 import { PlaylistElementObject } from '../../../shared/models/activitypub/objects/playlist-element-object'
 import * as validator from 'validator'
-import { AggregateOptions, Op, Sequelize, Transaction } from 'sequelize'
+import { AggregateOptions, Op, ScopeOptions, Sequelize, Transaction } from 'sequelize'
+import { UserModel } from '../account/user'
+import { VideoPlaylistElement, VideoPlaylistElementType } from '../../../shared/models/videos/playlist/video-playlist-element.model'
+import { AccountModel } from '../account/account'
+import { VideoPrivacy } from '../../../shared/models/videos'
 
 @Table({
   tableName: 'videoPlaylistElement',
@@ -90,9 +94,9 @@ export class VideoPlaylistElementModel extends Model<VideoPlaylistElementModel>
 
   @BelongsTo(() => VideoModel, {
     foreignKey: {
-      allowNull: false
+      allowNull: true
     },
-    onDelete: 'CASCADE'
+    onDelete: 'set null'
   })
   Video: VideoModel
 
@@ -107,6 +111,57 @@ export class VideoPlaylistElementModel extends Model<VideoPlaylistElementModel>
     return VideoPlaylistElementModel.destroy(query)
   }
 
+  static listForApi (options: {
+    start: number,
+    count: number,
+    videoPlaylistId: number,
+    serverAccount: AccountModel,
+    user?: UserModel
+  }) {
+    const accountIds = [ options.serverAccount.id ]
+    const videoScope: (ScopeOptions | string)[] = [
+      VideoScopeNames.WITH_BLACKLISTED
+    ]
+
+    if (options.user) {
+      accountIds.push(options.user.Account.id)
+      videoScope.push({ method: [ VideoScopeNames.WITH_USER_HISTORY, options.user.id ] })
+    }
+
+    const forApiOptions: ForAPIOptions = { withAccountBlockerIds: accountIds }
+    videoScope.push({
+      method: [
+        VideoScopeNames.FOR_API, forApiOptions
+      ]
+    })
+
+    const findQuery = {
+      offset: options.start,
+      limit: options.count,
+      order: getSort('position'),
+      where: {
+        videoPlaylistId: options.videoPlaylistId
+      },
+      include: [
+        {
+          model: VideoModel.scope(videoScope),
+          required: false
+        }
+      ]
+    }
+
+    const countQuery = {
+      where: {
+        videoPlaylistId: options.videoPlaylistId
+      }
+    }
+
+    return Promise.all([
+      VideoPlaylistElementModel.count(countQuery),
+      VideoPlaylistElementModel.findAll(findQuery)
+    ]).then(([ total, data ]) => ({ total, data }))
+  }
+
   static loadByPlaylistAndVideo (videoPlaylistId: number, videoId: number) {
     const query = {
       where: {
@@ -118,6 +173,10 @@ export class VideoPlaylistElementModel extends Model<VideoPlaylistElementModel>
     return VideoPlaylistElementModel.findOne(query)
   }
 
+  static loadById (playlistElementId: number) {
+    return VideoPlaylistElementModel.findByPk(playlistElementId)
+  }
+
   static loadByPlaylistAndVideoForAP (playlistId: number | string, videoId: number | string) {
     const playlistWhere = validator.isUUID('' + playlistId) ? { uuid: playlistId } : { id: playlistId }
     const videoWhere = validator.isUUID('' + videoId) ? { uuid: videoId } : { id: videoId }
@@ -213,6 +272,42 @@ export class VideoPlaylistElementModel extends Model<VideoPlaylistElementModel>
     return VideoPlaylistElementModel.increment({ position: by }, query)
   }
 
+  getType (displayNSFW?: boolean, accountId?: number) {
+    const video = this.Video
+
+    if (!video) return VideoPlaylistElementType.DELETED
+
+    // Owned video, don't filter it
+    if (accountId && video.VideoChannel.Account.id === accountId) return VideoPlaylistElementType.REGULAR
+
+    if (video.privacy === VideoPrivacy.PRIVATE) return VideoPlaylistElementType.PRIVATE
+
+    if (video.isBlacklisted() || video.isBlocked()) return VideoPlaylistElementType.UNAVAILABLE
+    if (video.nsfw === true && displayNSFW === false) return VideoPlaylistElementType.UNAVAILABLE
+
+    return VideoPlaylistElementType.REGULAR
+  }
+
+  getVideoElement (displayNSFW?: boolean, accountId?: number) {
+    if (!this.Video) return null
+    if (this.getType(displayNSFW, accountId) !== VideoPlaylistElementType.REGULAR) return null
+
+    return this.Video.toFormattedJSON()
+  }
+
+  toFormattedJSON (options: { displayNSFW?: boolean, accountId?: number } = {}): VideoPlaylistElement {
+    return {
+      id: this.id,
+      position: this.position,
+      startTimestamp: this.startTimestamp,
+      stopTimestamp: this.stopTimestamp,
+
+      type: this.getType(options.displayNSFW, options.accountId),
+
+      video: this.getVideoElement(options.displayNSFW, options.accountId)
+    }
+  }
+
   toActivityPubObject (): PlaylistElementObject {
     const base: PlaylistElementObject = {
       id: this.url,

server/models/video/video-playlist.ts

@@ -33,7 +33,7 @@ import {
   WEBSERVER
 } from '../../initializers/constants'
 import { VideoPlaylist } from '../../../shared/models/videos/playlist/video-playlist.model'
-import { AccountModel, ScopeNames as AccountScopeNames } from '../account/account'
+import { AccountModel, ScopeNames as AccountScopeNames, SummaryOptions } from '../account/account'
 import { ScopeNames as VideoChannelScopeNames, VideoChannelModel } from './video-channel'
 import { join } from 'path'
 import { VideoPlaylistElementModel } from './video-playlist-element'
@@ -115,7 +115,7 @@ type AvailableForListOptions = {
   [ ScopeNames.AVAILABLE_FOR_LIST ]: (options: AvailableForListOptions) => {
     // Only list local playlists OR playlists that are on an instance followed by actorId
     const inQueryInstanceFollow = buildServerIdsFollowedBy(options.followerActorId)
-    const actorWhere = {
+    const whereActor = {
       [ Op.or ]: [
         {
           serverId: null
@@ -159,7 +159,7 @@ type AvailableForListOptions = {
     }
 
     const accountScope = {
-      method: [ AccountScopeNames.SUMMARY, actorWhere ]
+      method: [ AccountScopeNames.SUMMARY, { whereActor } as SummaryOptions ]
     }
 
     return {
@@ -341,7 +341,7 @@ export class VideoPlaylistModel extends Model<VideoPlaylistModel> {
       },
       include: [
         {
-          attributes: [ 'videoId', 'startTimestamp', 'stopTimestamp' ],
+          attributes: [ 'id', 'videoId', 'startTimestamp', 'stopTimestamp' ],
           model: VideoPlaylistElementModel.unscoped(),
           where: {
             videoId: {

server/models/video/video.ts

@@ -91,7 +91,7 @@ import {
 } from '../utils'
 import { TagModel } from './tag'
 import { VideoAbuseModel } from './video-abuse'
-import { ScopeNames as VideoChannelScopeNames, VideoChannelModel } from './video-channel'
+import { ScopeNames as VideoChannelScopeNames, SummaryOptions, VideoChannelModel } from './video-channel'
 import { VideoCommentModel } from './video-comment'
 import { VideoFileModel } from './video-file'
 import { VideoShareModel } from './video-share'
@@ -190,26 +190,29 @@ export enum ScopeNames {
   WITH_FILES = 'WITH_FILES',
   WITH_SCHEDULED_UPDATE = 'WITH_SCHEDULED_UPDATE',
   WITH_BLACKLISTED = 'WITH_BLACKLISTED',
+  WITH_BLOCKLIST = 'WITH_BLOCKLIST',
   WITH_USER_HISTORY = 'WITH_USER_HISTORY',
   WITH_STREAMING_PLAYLISTS = 'WITH_STREAMING_PLAYLISTS',
   WITH_USER_ID = 'WITH_USER_ID',
   WITH_THUMBNAILS = 'WITH_THUMBNAILS'
 }
 
-type ForAPIOptions = {
+export type ForAPIOptions = {
-  ids: number[]
+  ids?: number[]
 
   videoPlaylistId?: number
 
   withFiles?: boolean
+
+  withAccountBlockerIds?: number[]
 }
 
-type AvailableForListIDsOptions = {
+export type AvailableForListIDsOptions = {
   serverAccountId: number
   followerActorId: number
   includeLocalVideos: boolean
 
-  withoutId?: boolean
+  attributesType?: 'none' | 'id' | 'all'
 
   filter?: VideoFilter
   categoryOneOf?: number[]
@@ -236,14 +239,16 @@ type AvailableForListIDsOptions = {
 @Scopes(() => ({
   [ ScopeNames.FOR_API ]: (options: ForAPIOptions) => {
     const query: FindOptions = {
-      where: {
-        id: {
-          [ Op.in ]: options.ids // FIXME: sequelize ANY seems broken
-        }
-      },
       include: [
         {
-          model: VideoChannelModel.scope({ method: [ VideoChannelScopeNames.SUMMARY, true ] }),
+          model: VideoChannelModel.scope({
+            method: [
+              VideoChannelScopeNames.SUMMARY, {
+                withAccount: true,
+                withAccountBlockerIds: options.withAccountBlockerIds
+              } as SummaryOptions
+            ]
+          }),
           required: true
         },
         {
@@ -254,6 +259,14 @@ type AvailableForListIDsOptions = {
       ]
     }
 
+    if (options.ids) {
+      query.where = {
+        id: {
+          [ Op.in ]: options.ids // FIXME: sequelize ANY seems broken
+        }
+      }
+    }
+
     if (options.withFiles === true) {
       query.include.push({
         model: VideoFileModel.unscoped(),
@@ -278,10 +291,14 @@ type AvailableForListIDsOptions = {
 
     const query: FindOptions = {
       raw: true,
-      attributes: options.withoutId === true ? [] : [ 'id' ],
       include: []
     }
 
+    const attributesType = options.attributesType || 'id'
+
+    if (attributesType === 'id') query.attributes = [ 'id' ]
+    else if (attributesType === 'none') query.attributes = [ ]
+
     whereAnd.push({
       id: {
         [ Op.notIn ]: Sequelize.literal(
@@ -290,17 +307,19 @@ type AvailableForListIDsOptions = {
       }
     })
 
-    whereAnd.push({
+    if (options.serverAccountId) {
-      channelId: {
+      whereAnd.push({
-        [ Op.notIn ]: Sequelize.literal(
+        channelId: {
-          '(' +
+          [ Op.notIn ]: Sequelize.literal(
-            'SELECT id FROM "videoChannel" WHERE "accountId" IN (' +
+            '(' +
-              buildBlockedAccountSQL(options.serverAccountId, options.user ? options.user.Account.id : undefined) +
+              'SELECT id FROM "videoChannel" WHERE "accountId" IN (' +
-            ')' +
+                buildBlockedAccountSQL(options.serverAccountId, options.user ? options.user.Account.id : undefined) +
-          ')'
+              ')' +
-        )
+            ')'
-      }
+          )
-    })
+        }
+      })
+    }
 
     // Only list public/published videos
     if (!options.filter || options.filter !== 'all-local') {
@@ -527,6 +546,9 @@ type AvailableForListIDsOptions = {
     }
 
     return query
+  },
+  [ScopeNames.WITH_BLOCKLIST]: {
+
   },
   [ ScopeNames.WITH_THUMBNAILS ]: {
     include: [
@@ -845,9 +867,9 @@ export class VideoModel extends Model<VideoModel> {
   @HasMany(() => VideoPlaylistElementModel, {
     foreignKey: {
       name: 'videoId',
-      allowNull: false
+      allowNull: true
     },
-    onDelete: 'cascade'
+    onDelete: 'set null'
   })
   VideoPlaylistElements: VideoPlaylistElementModel[]
 
@@ -1586,7 +1608,7 @@ export class VideoModel extends Model<VideoModel> {
       serverAccountId: serverActor.Account.id,
       followerActorId,
       includeLocalVideos: true,
-      withoutId: true // Don't break aggregation
+      attributesType: 'none' // Don't break aggregation
     }
 
     const query: FindOptions = {
@@ -1719,6 +1741,11 @@ export class VideoModel extends Model<VideoModel> {
     return !!this.VideoBlacklist
   }
 
+  isBlocked () {
+    return (this.VideoChannel.Account.Actor.Server && this.VideoChannel.Account.Actor.Server.isBlocked()) ||
+      this.VideoChannel.Account.isBlocked()
+  }
+
   getOriginalFile () {
     if (Array.isArray(this.VideoFiles) === false) return undefined
 

server/tests/api/check-params/video-playlists.ts

@@ -37,6 +37,7 @@ describe('Test video playlists API validator', function () {
   let watchLaterPlaylistId: number
   let videoId: number
   let videoId2: number
+  let playlistElementId: number
 
   // ---------------------------------------------------------------
 
@@ -132,18 +133,18 @@ describe('Test video playlists API validator', function () {
   })
 
   describe('When listing videos of a playlist', function () {
-    const path = '/api/v1/video-playlists'
+    const path = '/api/v1/video-playlists/'
 
     it('Should fail with a bad start pagination', async function () {
-      await checkBadStartPagination(server.url, path, server.accessToken)
+      await checkBadStartPagination(server.url, path + playlistUUID + '/videos', server.accessToken)
     })
 
     it('Should fail with a bad count pagination', async function () {
-      await checkBadCountPagination(server.url, path, server.accessToken)
+      await checkBadCountPagination(server.url, path + playlistUUID + '/videos', server.accessToken)
     })
 
-    it('Should fail with a bad filter', async function () {
+    it('Should success with the correct parameters', async function () {
-      await checkBadSortPagination(server.url, path, server.accessToken)
+      await makeGetRequest({ url: server.url, path: path + playlistUUID + '/videos', statusCodeExpected: 200 })
     })
   })
 
@@ -296,7 +297,7 @@ describe('Test video playlists API validator', function () {
         token: server.accessToken,
         playlistId: playlistUUID,
         elementAttrs: Object.assign({
-          videoId: videoId,
+          videoId,
           startTimestamp: 2,
           stopTimestamp: 3
         }, elementAttrs)
@@ -344,7 +345,8 @@ describe('Test video playlists API validator', function () {
 
     it('Succeed with the correct params', async function () {
       const params = getBase({}, { expectedStatus: 200 })
-      await addVideoInPlaylist(params)
+      const res = await addVideoInPlaylist(params)
+      playlistElementId = res.body.videoPlaylistElement.id
     })
 
     it('Should fail if the video was already added in the playlist', async function () {
@@ -362,7 +364,7 @@ describe('Test video playlists API validator', function () {
           startTimestamp: 1,
           stopTimestamp: 2
         }, elementAttrs),
-        videoId: videoId,
+        playlistElementId,
         playlistId: playlistUUID,
         expectedStatus: 400
       }, wrapper)
@@ -390,14 +392,14 @@ describe('Test video playlists API validator', function () {
       }
     })
 
-    it('Should fail with an unknown or incorrect video id', async function () {
+    it('Should fail with an unknown or incorrect playlistElement id', async function () {
       {
-        const params = getBase({}, { videoId: 'toto' })
+        const params = getBase({}, { playlistElementId: 'toto' })
         await updateVideoPlaylistElement(params)
       }
 
       {
-        const params = getBase({}, { videoId: 42, expectedStatus: 404 })
+        const params = getBase({}, { playlistElementId: 42, expectedStatus: 404 })
         await updateVideoPlaylistElement(params)
       }
     })
@@ -415,7 +417,7 @@ describe('Test video playlists API validator', function () {
     })
 
     it('Should fail with an unknown element', async function () {
-      const params = getBase({}, { videoId: videoId2, expectedStatus: 404 })
+      const params = getBase({}, { playlistElementId: 888, expectedStatus: 404 })
       await updateVideoPlaylistElement(params)
     })
 
@@ -587,7 +589,7 @@ describe('Test video playlists API validator', function () {
       return Object.assign({
         url: server.url,
         token: server.accessToken,
-        videoId: videoId,
+        playlistElementId,
         playlistId: playlistUUID,
         expectedStatus: 400
       }, wrapper)
@@ -617,18 +619,18 @@ describe('Test video playlists API validator', function () {
 
     it('Should fail with an unknown or incorrect video id', async function () {
       {
-        const params = getBase({ videoId: 'toto' })
+        const params = getBase({ playlistElementId: 'toto' })
         await removeVideoFromPlaylist(params)
       }
 
       {
-        const params = getBase({ videoId: 42, expectedStatus: 404 })
+        const params = getBase({ playlistElementId: 42, expectedStatus: 404 })
         await removeVideoFromPlaylist(params)
       }
     })
 
     it('Should fail with an unknown element', async function () {
-      const params = getBase({ videoId: videoId2, expectedStatus: 404 })
+      const params = getBase({ playlistElementId: 888, expectedStatus: 404 })
       await removeVideoFromPlaylist(params)
     })
 

server/tests/api/check-params/videos-filter.ts

@@ -15,13 +15,12 @@ import {
 import { UserRole } from '../../../../shared/models/users'
 import { VideoPlaylistPrivacy } from '../../../../shared/models/videos/playlist/video-playlist-privacy.model'
 
-async function testEndpoints (server: ServerInfo, token: string, filter: string, playlistUUID: string, statusCodeExpected: number) {
+async function testEndpoints (server: ServerInfo, token: string, filter: string, statusCodeExpected: number) {
   const paths = [
     '/api/v1/video-channels/root_channel/videos',
     '/api/v1/accounts/root/videos',
     '/api/v1/videos',
-    '/api/v1/search/videos',
+    '/api/v1/search/videos'
-    '/api/v1/video-playlists/' + playlistUUID + '/videos'
   ]
 
   for (const path of paths) {
@@ -70,39 +69,28 @@ describe('Test videos filters', function () {
       }
     )
     moderatorAccessToken = await userLogin(server, moderator)
-
-    const res = await createVideoPlaylist({
-      url: server.url,
-      token: server.accessToken,
-      playlistAttrs: {
-        displayName: 'super playlist',
-        privacy: VideoPlaylistPrivacy.PUBLIC,
-        videoChannelId: server.videoChannel.id
-      }
-    })
-    playlistUUID = res.body.videoPlaylist.uuid
   })
 
   describe('When setting a video filter', function () {
 
     it('Should fail with a bad filter', async function () {
-      await testEndpoints(server, server.accessToken, 'bad-filter', playlistUUID, 400)
+      await testEndpoints(server, server.accessToken, 'bad-filter', 400)
     })
 
     it('Should succeed with a good filter', async function () {
-      await testEndpoints(server, server.accessToken,'local', playlistUUID, 200)
+      await testEndpoints(server, server.accessToken,'local', 200)
     })
 
     it('Should fail to list all-local with a simple user', async function () {
-      await testEndpoints(server, userAccessToken, 'all-local', playlistUUID, 401)
+      await testEndpoints(server, userAccessToken, 'all-local', 401)
     })
 
     it('Should succeed to list all-local with a moderator', async function () {
-      await testEndpoints(server, moderatorAccessToken, 'all-local', playlistUUID, 200)
+      await testEndpoints(server, moderatorAccessToken, 'all-local', 200)
     })
 
     it('Should succeed to list all-local with an admin', async function () {
-      await testEndpoints(server, server.accessToken, 'all-local', playlistUUID, 200)
+      await testEndpoints(server, server.accessToken, 'all-local', 200)
     })
 
     // Because we cannot authenticate the user on the RSS endpoint

server/tests/api/check-params/videos.ts

@@ -62,7 +62,7 @@ describe('Test videos API validator', function () {
     }
   })
 
-  describe('When listing a video', function () {
+  describe('When listing videos', function () {
     it('Should fail with a bad start pagination', async function () {
       await checkBadStartPagination(server.url, path)
     })

shared/extra-utils/server/jobs.ts

@@ -2,7 +2,6 @@ import * as request from 'supertest'
 import { Job, JobState } from '../../models'
 import { wait } from '../miscs/miscs'
 import { ServerInfo } from './servers'
-import { inspect } from 'util'
 
 function getJobsList (url: string, accessToken: string, state: JobState) {
   const path = '/api/v1/jobs/' + state
@@ -37,11 +36,10 @@ async function waitJobs (serversArg: ServerInfo[] | ServerInfo) {
   else servers = serversArg as ServerInfo[]
 
   const states: JobState[] = [ 'waiting', 'active', 'delayed' ]
-  let pendingRequests = false
+  let pendingRequests: boolean
 
   function tasksBuilder () {
     const tasks: Promise<any>[] = []
-    pendingRequests = false
 
     // Check if each server has pending request
     for (const server of servers) {
@@ -62,6 +60,7 @@ async function waitJobs (serversArg: ServerInfo[] | ServerInfo) {
   }
 
   do {
+    pendingRequests = false
     await Promise.all(tasksBuilder())
 
     // Retry, in case of new jobs were created

shared/extra-utils/videos/video-playlists.ts

@@ -196,11 +196,11 @@ function updateVideoPlaylistElement (options: {
   url: string,
   token: string,
   playlistId: number | string,
-  videoId: number | string,
+  playlistElementId: number | string,
   elementAttrs: VideoPlaylistElementUpdate,
   expectedStatus?: number
 }) {
-  const path = '/api/v1/video-playlists/' + options.playlistId + '/videos/' + options.videoId
+  const path = '/api/v1/video-playlists/' + options.playlistId + '/videos/' + options.playlistElementId
 
   return makePutBodyRequest({
     url: options.url,
@@ -215,10 +215,10 @@ function removeVideoFromPlaylist (options: {
   url: string,
   token: string,
   playlistId: number | string,
-  videoId: number | string,
+  playlistElementId: number,
   expectedStatus?: number
 }) {
-  const path = '/api/v1/video-playlists/' + options.playlistId + '/videos/' + options.videoId
+  const path = '/api/v1/video-playlists/' + options.playlistId + '/videos/' + options.playlistElementId
 
   return makeDeleteRequest({
     url: options.url,

shared/models/videos/index.ts

@@ -19,6 +19,7 @@ export * from './playlist/video-playlist-privacy.model'
 export * from './playlist/video-playlist-type.model'
 export * from './playlist/video-playlist-update.model'
 export * from './playlist/video-playlist.model'
+export * from './playlist/video-playlist-element.model'
 export * from './video-change-ownership.model'
 export * from './video-change-ownership-create.model'
 export * from './video-create.model'

shared/models/videos/playlist/video-exist-in-playlist.model.ts

@@ -1,5 +1,6 @@
 export type VideoExistInPlaylist = {
   [videoId: number ]: {
+    playlistElementId: number
     playlistId: number
     startTimestamp?: number
     stopTimestamp?: number

shared/models/videos/playlist/video-playlist-element.model.ts

@@ -0,0 +1,19 @@
+import { Video } from '../video.model'
+
+export enum VideoPlaylistElementType {
+  REGULAR = 0,
+  DELETED = 1,
+  PRIVATE = 2,
+  UNAVAILABLE = 3 // Blacklisted, blocked by the user/instance, NSFW...
+}
+
+export interface VideoPlaylistElement {
+  id: number
+  position: number
+  startTimestamp: number
+  stopTimestamp: number
+
+  type: VideoPlaylistElementType
+
+  video?: Video
+}

shared/models/videos/video.model.ts

@@ -17,12 +17,6 @@ export interface VideoFile {
   fps: number
 }
 
-export interface PlaylistElement {
-  position: number
-  startTimestamp: number
-  stopTimestamp: number
-}
-
 export interface Video {
   id: number
   uuid: string
@@ -59,8 +53,6 @@ export interface Video {
   userHistory?: {
     currentTime: number
   }
-
-  playlistElement?: PlaylistElement
 }
 
 export interface VideoDetails extends Video {

support/doc/api/openapi.yaml

@@ -1922,6 +1922,9 @@ components:
           type: number
         stopTimestamp:
           type: number
+        video:
+          nullable: true
+          $ref: '#/components/schemas/Video'
     VideoFile:
       properties:
         magnetUri:
@@ -2029,9 +2032,6 @@ components:
           properties:
             currentTime:
               type: number
-        playlistElement:
-          nullable: true
-          $ref: '#/components/schemas/PlaylistElement'
     VideoDetails:
       allOf:
         - $ref: '#/components/schemas/Video'