X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bmy-account%2Fmy-account-video-playlists%2Fmy-account-video-playlist-elements.component.html;h=284694b7fd1339d0049d008b8b3e6b5cad091761;hb=3143ae17a014576ec21b535ba9e8266ca727a152;hp=bc26e198ed269c61254fda29dad5a8b6b808c7e4;hpb=e2f01c47e08d26a30ad47068d195b3d21d0df8a1;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
index bc26e198e..284694b7f 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
@@ -1,11 +1,26 @@
-<div i18n class="no-results" *ngIf="pagination.totalItems === 0">No videos in this playlist.</div>
+<div class="row">
 
-<div
-  class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()"
-  cdkDropList (cdkDropListDropped)="drop($event)"
->
-  <div class="video" *ngFor="let video of videos" cdkDrag (cdkDragMoved)="onDragMove($event)">
-    <my-video-playlist-element-miniature [video]="video" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)">
-    </my-video-playlist-element-miniature>
+  <div class="playlist-info col-xs-12 col-md-5 col-xl-3">
+    <my-video-playlist-miniature
+      *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true"
+      [displayDescription]="true" [displayPrivacy]="true"
+    ></my-video-playlist-miniature>
+  </div>
+
+  <div class="playlist-elements col-xs-12 col-md-7 col-xl-9">
+    <div i18n class="no-results" *ngIf="pagination.totalItems === 0">No videos in this playlist.</div>
+
+    <div
+      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)">
+        <my-video-playlist-element-miniature
+          [video]="video" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)"
+          [position]="video.playlistElement.position"
+        >
+        </my-video-playlist-element-miniature>
+      </div>
+    </div>
   </div>
 </div>