Refactor video miniature

Less dirty code, better responsive
Prepare for some regressions
Increase default miniature size

3 files changed, 77 insertions, 45 deletions

diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
index 86f6664cb..f50f95003 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
@@ -1,4 +1,4 @@
-<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage }">
+<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage, 'display-as-row': displayAsRow }">
   <a
     [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description"
     class="miniature-thumbnail"
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index 1b16dbb01..c5be5f292 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -4,6 +4,7 @@
 
 .miniature {
   display: inline-block;
+  width: 100%;
 
   &.no-videos:not(.to-manage){
     a {
@@ -17,62 +18,92 @@
       display: none;
     }
   }
+}
 
-  .miniature-thumbnail {
-    @include miniature-thumbnail;
-
-    .miniature-playlist-info-overlay {
-      @include static-thumbnail-overlay;
-
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      height: $video-thumbnail-height;
-      padding: 0 10px;
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-      font-weight: $font-semibold;
-    }
+.miniature-thumbnail {
+  @include miniature-thumbnail;
+
+  .miniature-playlist-info-overlay {
+    @include static-thumbnail-overlay;
+
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: $font-semibold;
   }
+}
 
-  .miniature-info {
-    width: 200px;
-    margin-top: 2px;
-    line-height: normal;
-
-    .miniature-name {
-      @include miniature-name;
+.miniature-info {
 
-      @include ellipsis-multiline(1.3em, 2);
+  .miniature-name {
+    @include miniature-name;
+    @include ellipsis-multiline(1.3em, 2);
 
-      margin: 0;
-    }
+    margin: 0;
+  }
 
-    .by {
-      @include disable-default-a-behaviour;
+  .by {
+    @include disable-default-a-behaviour;
 
-      display: block;
-      color: pvar(--greyForegroundColor);
-    }
+    display: block;
+    color: pvar(--greyForegroundColor);
+  }
 
-    .privacy-date {
-      margin-top: 5px;
+  .privacy-date {
+    margin-top: 5px;
 
-      .video-info-privacy {
-        font-size: 14px;
-        font-weight: $font-semibold;
+    .video-info-privacy {
+      font-size: 14px;
+      font-weight: $font-semibold;
 
-        &::after {
-          content: '-';
-          margin: 0 3px;
-        }
+      &::after {
+        content: '-';
+        margin: 0 3px;
       }
     }
+  }
 
-    .video-info-description {
-      margin-top: 10px;
-      color: pvar(--greyForegroundColor);
-    }
+  .video-info-description {
+    margin-top: 10px;
+    color: pvar(--greyForegroundColor);
+  }
+}
+
+.miniature:not(.display-as-row) {
+  .miniature-thumbnail {
+    margin-top: 10px;
+    margin-bottom: 5px;
+  }
+}
+
+.miniature.display-as-row {
+  --rowThumbnailWidth: #{$video-thumbnail-width};
+  --rowThumbnailHeight: #{$video-thumbnail-height};
+
+  display: flex;
+
+  .miniature-thumbnail {
+    width: var(--rowThumbnailWidth);
+    height: var(--rowThumbnailHeight);
+    margin-right: 10px;
+  }
+}
+
+@include on-small-main-col {
+  .miniature.display-as-row {
+    --rowThumbnailWidth: #{$video-thumbnail-medium-width};
+    --rowThumbnailHeight: #{$video-thumbnail-medium-height};
+  }
+}
+
+@include on-mobile-main-col {
+  .miniature.display-as-row {
+    --rowThumbnailWidth: #{$video-thumbnail-small-width};
+    --rowThumbnailHeight: #{$video-thumbnail-small-height};
   }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
index 251aa868a..6b0b1056f 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
@@ -12,6 +12,7 @@ export class VideoPlaylistMiniatureComponent {
   @Input() displayChannel = false
   @Input() displayDescription = false
   @Input() displayPrivacy = false
+  @Input() displayAsRow = false
 
   getPlaylistUrl () {
     if (this.toManage) return [ '/my-library/video-playlists', this.playlist.uuid ]