3 files changed, 7 insertions, 6 deletions

diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 7f3d1cc2e..3df5b7b19 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -9,7 +9,7 @@
 
     <div id="videojs-wrapper"></div>
 
-    <div *ngIf="playlist && video" class="playlist">
+    <div *ngIf="playlist && video" class="playlist"  myInfiniteScroller [autoInit]="true" [onItself]="true" (nearOfBottom)="onPlaylistVideosNearOfBottom()">
       <div class="playlist-info">
         <div class="playlist-display-name">
           {{ playlist.displayName }}
@@ -27,10 +27,10 @@
         </div>
       </div>
 
-      <div *ngFor="let playlistVideo of playlistVideos" myInfiniteScroller [autoInit]="true" #elem [container]="elem" (nearOfBottom)="onPlaylistVideosNearOfBottom()">
+      <div *ngFor="let playlistVideo of playlistVideos">
         <my-video-playlist-element-miniature
           [video]="playlistVideo" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
-          [playing]="currentPlaylistPosition === playlistVideo.playlistElement.position" [accountLink]="false"
+          [playing]="currentPlaylistPosition === playlistVideo.playlistElement.position" [accountLink]="false" [position]="playlistVideo.playlistElement.position"
         ></my-video-playlist-element-miniature>
       </div>
     </div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index e1cb249ef..281b9240b 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -43,11 +43,12 @@ $other-videos-width: 260px;
   .playlist {
     width: 400px;
     height: 66vh;
-    background-color: #e4e4e4;
+    background-color: var(--mainBackgroundColor);
     overflow-y: auto;
 
     .playlist-info {
       padding: 5px 30px;
+      background-color: #e4e4e4;
 
       .playlist-display-name {
         font-size: 18px;
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index ddd0f1766..adb728aba 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -58,7 +58,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   playlistVideos: Video[] = []
   playlistPagination: ComponentPagination = {
     currentPage: 1,
-    itemsPerPage: 10,
+    itemsPerPage: 30,
     totalItems: null
   }
   noPlaylistVideos = false
@@ -401,7 +401,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   private loadPlaylistElements (redirectToFirst = false) {
-    this.videoService.getPlaylistVideos(this.playlist.id, this.playlistPagination)
+    this.videoService.getPlaylistVideos(this.playlist.uuid, this.playlistPagination)
         .subscribe(({ totalVideos, videos }) => {
           this.playlistVideos = this.playlistVideos.concat(videos)
           this.playlistPagination.totalItems = totalVideos