Prevent layout shift in videos list

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-video-playlist / video-playlist-element-miniature.component.html

diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
index e3f7ef017e773f2180b874d5b7d010371549d344..f58d5f7f6e33ed5f57b907c3e8d7a94127ee87fd 100644 (file)
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
@@ -8,19 +8,31 @@
     <my-video-thumbnail
       *ngIf="playlistElement.video"
       [video]="playlistElement.video" [nsfw]="isVideoBlur(playlistElement.video)"
-      [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
+      [videoRouterLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
     ></my-video-thumbnail>
 
     <div class="fake-thumbnail" *ngIf="!playlistElement.video"></div>
 
     <div class="video-info">
       <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>
+        <div class="video-info-header">
+          <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 ]">
+          <span *ngIf="isVideoPrivate()" class="pt-badge badge-yellow">Private</span>
+        </div>
+
+        <span class="video-miniature-created-at-views">
+          <my-date-toggle [date]="playlistElement.video.publishedAt"></my-date-toggle>
+
+          <span class="views" [title]="playlistElement.video.getExactNumberOfViews()">
+            • <my-video-views-counter [video]="playlistElement.video"></my-video-views-counter>
+          </span>
+        </span>
+
+        <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/a', playlistElement.video.byAccount ]">
           {{ playlistElement.video.byAccount }}
         </a>
         <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ playlistElement.video.byAccount }}</span>
@@ -36,10 +48,10 @@
     </div>
   </a>
 
-  <my-edit-button *ngIf="owned && touchScreenEditButton" [routerLink]="[ '/my-account', 'video-playlists', playlist.uuid ]"></my-edit-button>
+  <my-edit-button *ngIf="owned && touchScreenEditButton" [routerLink]="[ '/my-library', 'video-playlists', playlist.uuid ]"></my-edit-button>
 
-  <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom auto"
-       (openChange)="onDropdownOpenChange()" autoClose="outside"
+  <div *ngIf="owned" class="more dropdown-root" ngbDropdown #moreDropdown="ngbDropdown" placement="left auto"
+       (openChange)="onDropdownOpenChange()" autoClose="outside" container="body"
   >
     <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>