Refactor video miniature

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

9 files changed, 263 insertions, 226 deletions

diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
index 41d5906cf..81c773b5a 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
@@ -52,7 +52,7 @@
 
       <div class="video-wrapper">
         <my-video-miniature
-          [fitWidth]="true" [video]="video" [user]="userMiniature"
+          [video]="video" [user]="userMiniature"
           [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
           (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
         >
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index 0a8aa8fa4..26c412402 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -69,7 +69,7 @@ $iconSize: 16px;
 }
 
 .margin-content {
-  @include fluid-videos-miniature-layout;
+  @include grid-videos-miniature-layout;
 }
 
 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index a07930321..efa443b45 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -1,4 +1,4 @@
-<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow, 'fit-width': fitWidth }" (mouseenter)="loadActions()">
+<div class="video-miniature" [ngClass]="getClasses()" (mouseenter)="loadActions()">
   <my-video-thumbnail
     [video]="video" [nsfw]="isVideoBlur" [videoRouterLink]="videoRouterLink" [videoHref]="videoHref" [videoTarget]="videoTarget"
     [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index a9628c696..39d6e97c9 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -3,204 +3,206 @@
 @import '_miniature';
 
 $more-button-width: 40px;
-$more-margin-right: 15px;
 
-.video-miniature {
-  display: inline-flex;
-  flex-direction: column;
-  padding-bottom: $video-miniature-margin-bottom;
-  vertical-align: top;
+.video-miniature-name {
+  @include miniature-name;
+}
 
-  .video-bottom {
-    display: flex;
+.video-miniature-information {
+  width: calc(100% - #{$more-button-width});
+}
 
-    .video-miniature-information {
-      width: $video-miniature-width - $more-button-width - $more-margin-right;
-      line-height: normal;
+.avatar {
+  margin: 10px 10px 0 0;
 
-      .avatar {
-        margin: 10px 10px 0 0;
+  img:not(.channel) {
+    @include avatar(40px);
+  }
 
-        img:not(.channel) {
-          @include avatar(40px);
-        }
+  img.channel {
+    @include channel-avatar(40px);
+  }
+}
 
-        img.channel {
-          @include channel-avatar(40px);
-        }
-      }
+.video-miniature-created-at-views {
+  font-size: 13px;
+}
 
-      .video-miniature-name {
-        @include miniature-name;
+.video-miniature-account,
+.video-miniature-channel {
+  @include disable-default-a-behaviour;
+  @include ellipsis;
 
-        word-wrap: break-word;
-        width: calc(100% - #{$more-button-width});
-      }
+  display: block;
+  font-size: 13px;
+  color: pvar(--greyForegroundColor);
 
-      .video-miniature-meta {
-        width: calc(100% + #{$more-button-width});
-        overflow: hidden;
-      }
+  &:hover {
+    color: $grey-foreground-hover-color;
+  }
+}
 
-      .video-miniature-created-at-views {
-        display: block;
-        font-size: 13px;
-      }
+.video-info-privacy,
+.video-info-blocked .blocked-label,
+.video-info-nsfw {
+  font-weight: $font-semibold;
+}
 
-      .video-miniature-account,
-      .video-miniature-channel {
-        @include disable-default-a-behaviour;
-        @include ellipsis;
+.video-info-blocked {
+  color: red;
 
-        display: block;
-        font-size: 13px;
-        color: pvar(--greyForegroundColor);
+  .blocked-reason::before {
+    content: ' - ';
+  }
+}
 
-        &:hover {
-          color: $grey-foreground-hover-color;
-        }
-      }
+.video-info-nsfw {
+  color: red;
+}
 
-      .video-info-privacy,
-      .video-info-blocked .blocked-label,
-      .video-info-nsfw {
-        font-weight: $font-semibold;
-      }
+.video-actions {
+  width: $more-button-width;
+  height: 30px;
 
-      .video-info-blocked {
-        color: red;
+  ::ng-deep .dropdown-root:not(.show) {
+    opacity: 0;
+  }
 
-        .blocked-reason::before {
-          content: ' - ';
-        }
-      }
+  ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
+    opacity: 1;
+  }
 
-      .video-info-nsfw {
-        color: red;
-      }
-    }
+  ::ng-deep .more-icon {
+    opacity: .6;
 
-    .video-actions {
-      margin-top: 3px;
-      width: $more-button-width;
-      height: 30px;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
 
-      ::ng-deep .dropdown-root:not(.show) {
-        opacity: 0;
-      }
+.video-miniature {
+  &:hover ::ng-deep .video-thumbnail-actions-overlay,
+  &:hover .video-actions ::ng-deep .dropdown-root {
+    opacity: 1 !important;
+  }
+}
 
-      ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
-        opacity: 1;
-      }
+// Grid mode
+// Takes all the width on mobile
+.video-miniature:not(.display-as-row) {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: $video-miniature-margin-bottom;
+  width: 100%;
 
-      ::ng-deep .more-icon {
-        opacity: .6;
+  my-video-thumbnail {
+    @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
+  }
 
-        &:hover {
-          opacity: 1;
-        }
-      }
-    }
+  .video-bottom {
+    display: flex;
+    width: 100%;
+  }
 
-    @media screen and (max-width: $small-view) {
-      .video-miniature-information {
-        margin: 0 10px;
-      }
 
-      .video-actions {
-        margin: 0;
-        top: -3px;
+  .video-miniature-name {
+    margin-top: 10px;
+    margin-bottom: 5px;
+  }
 
-        ::ng-deep .dropdown-root {
-          opacity: 1 !important;
-        }
-      }
-    }
+  .video-miniature-created-at-views {
+    display: block;
   }
 
-  &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay,
-  &:hover .video-bottom .video-actions ::ng-deep .dropdown-root {
-    opacity: 1;
+  .video-actions {
+    margin-top: 3px;
   }
 
-  &.fit-width {
+  @media screen and (max-width: $small-view) {
     width: 100%;
+    margin-bottom: 25px;
+
+    .video-miniature-information {
+      margin: 0 10px;
+
+      width: 100%;
+      text-align: left;
+    }
 
-    .video-bottom {
-      width: 100% !important;
+    .video-actions {
+      margin: 0;
+      top: -3px;
 
-      .video-miniature-information {
-        width: calc(100% - #{$more-button-width}) !important;
+      ::ng-deep .dropdown-root {
+        opacity: 1 !important;
       }
     }
 
-    my-video-thumbnail {
-      @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
+    ::ng-deep .video-thumbnail {
+      border-radius: 0;
     }
   }
+}
+
+.video-miniature.display-as-row {
+  --rowThumbnailWidth: #{$video-thumbnail-width};
+  --rowThumbnailHeight: #{$video-thumbnail-height};
+
+  display: flex;
+  flex-direction: row;
 
-  &.display-as-row {
-    flex-direction: row;
-    padding-bottom: 0;
-    height: auto;
+  .video-bottom {
     display: flex;
-    flex-grow: 1;
+  }
 
-    my-video-thumbnail {
-      margin-right: 10px;
-    }
+  // We don't display avatar in row mode
+  .avatar {
+    display: none;
+  }
 
-    .video-bottom {
-      .video-miniature-information {
-        @media screen and (min-width: $small-view) {
-          width: auto;
-          min-width: 500px;
-        }
-
-        .video-miniature-name {
-          @include ellipsis-multiline(1.3em, 2);
-
-          margin-top: 2px;
-          margin-bottom: 5px;
-        }
-
-        .video-miniature-created-at-views,
-        .video-miniature-account,
-        .video-miniature-channel {
-          font-size: 95%;
-          width: fit-content;
-        }
-
-        .video-miniature-created-at-views + .video-miniature-channel {
-          margin-top: 5px;
-        }
-
-        .video-info-privacy {
-          margin-top: 5px;
-        }
-
-        .video-info-blocked {
-          margin-top: 3px;
-        }
-      }
+  my-video-thumbnail {
+    min-width: var(--rowThumbnailWidth);
+    max-width: var(--rowThumbnailWidth);
+    height: var(--rowThumbnailHeight);
+    margin-right: 10px;
+  }
 
-      .video-actions {
-        margin: 0;
-        top: -3px;
-      }
-    }
+  .video-miniature-name {
+    @include ellipsis-multiline(1.3em, 2);
+  }
+
+  .video-miniature-created-at-views,
+  .video-miniature-account,
+  .video-miniature-channel {
+    font-size: 14px;
+  }
 
-    @media screen and (max-width: $small-view) {
-      flex-direction: column;
-      height: auto;
+  .video-actions {
+    margin-top: -3px;
+  }
+}
 
-      my-video-thumbnail {
-        margin-right: 0;
-      }
+@include on-small-main-col {
+  .video-miniature.display-as-row {
+    --rowThumbnailWidth: #{$video-thumbnail-medium-width};
+    --rowThumbnailHeight: #{$video-thumbnail-medium-height};
+  }
+}
 
-      .video-miniature-information {
-        min-width: initial;
-      }
+@include on-mobile-main-col {
+  .video-miniature.display-as-row {
+    --rowThumbnailWidth: #{$video-thumbnail-small-width};
+    --rowThumbnailHeight: #{$video-thumbnail-small-height};
+
+    .video-miniature-name {
+      font-size: 14px;
+    }
+
+    .video-miniature-created-at-views,
+    .video-miniature-account,
+    .video-miniature-channel {
+      font-size: 12px;
     }
   }
 }
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index 987a65e40..48da92d6b 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -16,7 +16,6 @@ import { Video } from '../shared-main'
 import { VideoPlaylistService } from '../shared-video-playlist'
 import { VideoActionsDisplayType } from './video-actions-dropdown.component'
 
-export type OwnerDisplayType = 'account' | 'videoChannel'
 export type MiniatureDisplayOptions = {
   date?: boolean
   views?: boolean
@@ -50,9 +49,9 @@ export class VideoMiniatureComponent implements OnInit {
     state: false,
     blacklistInfo: false
   }
-  @Input() displayAsRow = false
   @Input() displayVideoActions = true
-  @Input() fitWidth = false
+
+  @Input() displayAsRow = false
 
   @Input() videoLinkType: VideoLinkType = 'internal'
 
@@ -243,6 +242,12 @@ export class VideoMiniatureComponent implements OnInit {
     return this.displayVideoActions && this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined
   }
 
+  getClasses () {
+    return {
+      'display-as-row': this.displayAsRow
+    }
+  }
+
   private setUpBy () {
     const accountName = this.video.account.name
 
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
index c33e11889..a2939d521 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
@@ -5,24 +5,24 @@
   display: flex;
   justify-content: flex-end;
   flex-grow: 1;
+}
 
-  .action-selection-mode-child {
-    position: fixed;
-
-    .action-button {
-      display: block;
-      margin-left: 55px;
-    }
+.action-selection-mode-child {
+  position: fixed;
 
-    .action-button-cancel-selection {
-      @include peertube-button;
-      @include grey-button;
-    }
+  .action-button {
+    display: block;
+    margin-left: 55px;
   }
 }
 
+.action-button-cancel-selection {
+  @include peertube-button;
+  @include grey-button;
+}
+
 .video {
-  @include row-blocks;
+  @include row-blocks($column-responsive: false);
 
   &:first-child {
     margin-top: 47px;
@@ -40,18 +40,16 @@
   }
 }
 
-@media screen and (max-width: $small-view) {
-  .video {
-    flex-direction: column;
-    height: auto;
 
-    .checkbox-container {
-      display: none;
-    }
+@include on-small-main-col {
+  .video {
+    flex-wrap: wrap;
+  }
+}
 
-    my-button {
-      margin-top: 10px;
-    }
+@include on-mobile-main-col {
+  .checkbox-container {
+    display: none;
   }
 
   .action-selection-mode {
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 ]