`fitWidth` for `video-miniature`, fluid grid (#2830)

* Fluid abstract video list

* normalize timestamp display on miniatures

* use grid for abstract-video-list

- refactor scss function var to pvar to avoid overriding css variables
- move fluid-grid margins to adapt-margin-content-width mixin for maintainability
- fix video-miniature-name margin-top on small screen

* move sceenratio function in a mixin

* display no miniature avatar in channel videos view

23 files changed, 92 insertions, 50 deletions

diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 7a030f32c..724a04efc 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -34,7 +34,7 @@
     width: 21px;
 
     ::ng-deep {
-      @include apply-svg-color(var(--actionButtonColor));
+      @include apply-svg-color(pvar(--actionButtonColor));
     }
   }
 
diff --git a/client/src/app/shared/channel/avatar.component.scss b/client/src/app/shared/channel/avatar.component.scss
index 77b90c579..4bf8fcd21 100644
--- a/client/src/app/shared/channel/avatar.component.scss
+++ b/client/src/app/shared/channel/avatar.component.scss
@@ -30,9 +30,9 @@
   a:nth-of-type(2) img {
     height: 60%;
     width: 60%;
-    border: 2px solid var(--mainBackgroundColor);
+    border: 2px solid pvar(--mainBackgroundColor);
     transform: translateX(15%);
     position: relative;
-    background-color: var(--mainBackgroundColor);
+    background-color: pvar(--mainBackgroundColor);
   }
 }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
index 33f52fa6e..f2c76f7a1 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/forms/markdown-textarea.component.scss
@@ -14,7 +14,7 @@ $input-border-radius: 3px;
     textarea {
       @include peertube-textarea(100%, 150px);
 
-      background-color: var(--markdownTextareaBackgroundColor);
+      background-color: pvar(--markdownTextareaBackgroundColor);
 
       font-family: monospace;
       font-size: 13px;
@@ -61,7 +61,7 @@ $input-border-radius: 3px;
   flex-grow: 1;
   border-bottom-left-radius: unset;
   border-bottom-right-radius: unset;
-  border-bottom: 2px solid var(--mainColor);
+  border-bottom: 2px solid pvar(--mainColor);
 
   :first-child {
     margin-left: auto;
@@ -112,7 +112,7 @@ $input-border-radius: 3px;
     padding-left: 0px;
     padding-right: 0px;
     position: absolute;
-    background-color: var(--mainBackgroundColor);
+    background-color: pvar(--mainBackgroundColor);
     width: 100% !important;
     border-top: none;
     border-left: none;
@@ -125,8 +125,8 @@ $input-border-radius: 3px;
 
   ::ng-deep .tab-content {
     @include content-preview-base();
-    background-color: var(--mainBackgroundColor);
-    scrollbar-color: var(--actionButtonColor) var(--mainBackgroundColor);
+    background-color: pvar(--mainBackgroundColor);
+    scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
   }
 
   textarea,
@@ -214,7 +214,7 @@ $input-border-radius: 3px;
       padding: $base-padding;
       border-right: 1px dashed $input-border-color !important;
       resize: none;
-      scrollbar-color: var(--actionButtonColor) var(--markdownTextareaBackgroundColor);
+      scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
 
       &:focus {
         box-shadow: none;
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
index c1233e8a5..cf8540dc3 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -45,7 +45,7 @@
     font-size: 12px;
     line-height: 12px;
     font-weight: 500;
-    color: var(--inputPlaceholderColor);
+    color: pvar(--inputPlaceholderColor);
     background-color: rgba(217,225,232,.1);
     border: 1px solid rgba(217,225,232,.5);
   }
diff --git a/client/src/app/shared/forms/timestamp-input.component.scss b/client/src/app/shared/forms/timestamp-input.component.scss
index 9671cc65f..8092b095b 100644
--- a/client/src/app/shared/forms/timestamp-input.component.scss
+++ b/client/src/app/shared/forms/timestamp-input.component.scss
@@ -9,7 +9,7 @@ p-inputmask {
 
     &:focus-within,
     &:focus {
-      box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+      box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
     }
   }
 }
diff --git a/client/src/app/shared/images/preview-upload.component.scss b/client/src/app/shared/images/preview-upload.component.scss
index 8f3522115..88eccd5f7 100644
--- a/client/src/app/shared/images/preview-upload.component.scss
+++ b/client/src/app/shared/images/preview-upload.component.scss
@@ -22,7 +22,7 @@
 
       &.no-image {
         border: 2px solid grey;
-        background-color: var(--mainBackgroundColor);
+        background-color: pvar(--mainBackgroundColor);
       }
     }
   }
diff --git a/client/src/app/shared/instance/instance-features-table.component.scss b/client/src/app/shared/instance/instance-features-table.component.scss
index 67f2b6c84..47c064265 100644
--- a/client/src/app/shared/instance/instance-features-table.component.scss
+++ b/client/src/app/shared/instance/instance-features-table.component.scss
@@ -3,7 +3,7 @@
 
 table {
   font-size: 14px;
-  color: var(--mainForegroundColor);
+  color: pvar(--mainForegroundColor);
 
   .label,
   .sub-label {
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss
index 5f90dcf80..84dd7dce3 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.scss
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss
@@ -48,8 +48,8 @@
     width: 100%;
 
     &.active {
-      color: var(--mainBackgroundColor) !important;
-      background-color: var(--mainHoverColor);
+      color: pvar(--mainBackgroundColor) !important;
+      background-color: pvar(--mainHoverColor);
       opacity: .9;
     }
   }
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index 3c8b66cd5..43f33a53a 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -11,7 +11,7 @@
     top: -2px;
     margin: 5px;
 
-    @include apply-svg-color(var(--mainForegroundColor))
+    @include apply-svg-color(pvar(--mainForegroundColor))
   }
 }
 
@@ -25,8 +25,8 @@
       text-align: left;
       padding: 10px;
       font-size: 13px;
-      background-color: var(--mainBackgroundColor);
-      color: var(--mainForegroundColor);
+      background-color: pvar(--mainBackgroundColor);
+      color: pvar(--mainForegroundColor);
       border-radius: 3px;
 
       p {
diff --git a/client/src/app/shared/misc/list-overflow.component.scss b/client/src/app/shared/misc/list-overflow.component.scss
index 1e5fe4c10..1ec044489 100644
--- a/client/src/app/shared/misc/list-overflow.component.scss
+++ b/client/src/app/shared/misc/list-overflow.component.scss
@@ -24,7 +24,7 @@ button {
   &.routeActive {
     &::after {
       display: inherit;
-      border: 2px solid var(--mainColor);
+      border: 2px solid pvar(--mainColor);
       position: relative;
       right: 95%;
       top: 50%;
@@ -53,8 +53,8 @@ button {
     width: 100%;
 
     &.active {
-      color: var(--mainBackgroundColor) !important;
-      background-color: var(--mainHoverColor);
+      color: pvar(--mainBackgroundColor) !important;
+      background-color: pvar(--mainHoverColor);
       opacity: .9;
     }
   }
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 3d1e906a2..bc3ab85b3 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -59,7 +59,9 @@ function durationToString (duration: number) {
   const secondsPadding = seconds >= 10 ? '' : '0'
   const displayedHours = hours > 0 ? hours.toString() + ':' : ''
 
-  return displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString()
+  return (
+    displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString()
+  ).replace(/^0/, '')
 }
 
 function immutableAssign <A, B> (target: A, source: B) {
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
index ddd7abe8a..5166bd559 100644
--- a/client/src/app/shared/users/user-notifications.component.scss
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -44,7 +44,7 @@
 
   .from-date {
     font-size: 0.85em;
-    color: var(--greyForegroundColor);
+    color: pvar(--greyForegroundColor);
     padding-left: 5px;
     min-width: 70px;
     text-align: right;
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
index f572dd902..47baa997b 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -68,7 +68,7 @@
 
     .timestamp-info {
       font-size: 0.9em;
-      color: var(--greyForegroundColor);
+      color: pvar(--greyForegroundColor);
       margin-left: 5px;
     }
   }
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
index 649272c52..afd775b25 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -24,7 +24,7 @@ my-video-thumbnail,
 .video {
   display: flex;
   align-items: center;
-  background-color: var(--mainBackgroundColor);
+  background-color: pvar(--mainBackgroundColor);
   padding: 10px;
   border-bottom: 1px solid $separator-border-color;
 
@@ -49,7 +49,7 @@ my-video-thumbnail,
   a {
     @include disable-default-a-behaviour;
 
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
     display: flex;
     min-width: 0;
     align-items: center;
@@ -58,11 +58,11 @@ my-video-thumbnail,
     .position {
       font-weight: $font-semibold;
       margin-right: 10px;
-      color: var(--greyForegroundColor);
+      color: pvar(--greyForegroundColor);
       min-width: 25px;
 
       my-global-icon {
-        @include apply-svg-color(var(--greyForegroundColor));
+        @include apply-svg-color(pvar(--greyForegroundColor));
 
         width: 17px;
         position: relative;
@@ -81,7 +81,7 @@ my-video-thumbnail,
       }
 
       .video-info-account, .video-info-timestamp {
-        color: var(--greyForegroundColor);
+        color: pvar(--greyForegroundColor);
       }
     }
   }
@@ -109,7 +109,7 @@ my-video-thumbnail,
     }
 
     .icon-more {
-      @include apply-svg-color(var(--greyForegroundColor));
+      @include apply-svg-color(pvar(--greyForegroundColor));
 
       display: flex;
 
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
index 527993496..1b16dbb01 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
@@ -53,7 +53,7 @@
       @include disable-default-a-behaviour;
 
       display: block;
-      color: var(--greyForegroundColor);
+      color: pvar(--greyForegroundColor);
     }
 
     .privacy-date {
@@ -72,7 +72,7 @@
 
     .video-info-description {
       margin-top: 10px;
-      color: var(--greyForegroundColor);
+      color: pvar(--greyForegroundColor);
     }
   }
 }
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index a811fc0a8..cd8a5b840 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -36,6 +36,7 @@
       </div>
 
       <my-video-miniature
+        [fitWidth]="true"
         [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
         [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
         (videoBlacklisted)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 4149c9109..2aab40ea8 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -1,6 +1,24 @@
+@import '_bootstrap-variables';
+@import '_variables';
 @import '_mixins';
 @import '_miniature';
 
+.videos {
+  display: grid;
+  column-gap: calc(10px + .2%);
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(
+      var(--miniature-min-width, #{$video-thumbnail-width}),
+      1fr
+    )
+  );
+
+  @media screen and (min-width: #{breakpoint(xxl)}) {
+    --miniature-min-width: 300px;
+  }
+}
+
 .videos-header {
   display: flex;
   justify-content: space-between;
@@ -45,13 +63,16 @@
   margin-top: -10px;
   padding-top: 20px;
 
+  // make the element span a full grid row within .videos grid
+  grid-column: 1 / -1;
+
   &:not(:first-child) {
     border-top: 1px solid $separator-border-color;
   }
 }
 
-.margin-content {
-  @include adapt-margin-content-width;
+:host-context(.main-col:not(.expanded)) .margin-content {
+  @include adapt-margin-content-width($fluid: true);
 }
 
 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/shared/video/feed.component.scss b/client/src/app/shared/video/feed.component.scss
index f39e409a3..34dd0e937 100644
--- a/client/src/app/shared/video/feed.component.scss
+++ b/client/src/app/shared/video/feed.component.scss
@@ -15,6 +15,6 @@
     position: relative;
     top: -2px;
 
-    @include apply-svg-color(var(--mainForegroundColor))
+    @include apply-svg-color(pvar(--mainForegroundColor))
   }
 }
diff --git a/client/src/app/shared/video/modals/video-download.component.scss b/client/src/app/shared/video/modals/video-download.component.scss
index 7e2dd7d2f..b09078bea 100644
--- a/client/src/app/shared/video/modals/video-download.component.scss
+++ b/client/src/app/shared/video/modals/video-download.component.scss
@@ -41,13 +41,13 @@
     min-width: 142px;
     padding-right: 5px;
     display: inline-block;
-    color: var(--greyForegroundColor);
+    color: pvar(--greyForegroundColor);
     font-weight: $font-bold;
   }
 
   a.metadata-attribute-value {
     @include disable-default-a-behaviour;
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
 
     &:hover {
       opacity: 0.9;
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index c9ac97762..d354a2930 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -1,4 +1,4 @@
-<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow }" (mouseenter)="loadActions()">
+<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow, 'fit-width': fitWidth }" (mouseenter)="loadActions()">
   <my-video-thumbnail
     [video]="video" [nsfw]="isVideoBlur"
     [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 23d918d00..849bd54bb 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -6,7 +6,6 @@ $more-button-width: 41px;
 $more-margin-right: 15px;
 
 .video-miniature {
-  width: $video-miniature-width;
   display: inline-flex;
   flex-direction: column;
   margin-bottom: $video-miniature-margin-bottom;
@@ -19,14 +18,16 @@ $more-margin-right: 15px;
     .video-miniature-information {
       width: $video-miniature-width - $more-button-width - $more-margin-right;
       line-height: normal;
+      font-size: 13px;
 
       .video-miniature-name {
         @include miniature-name;
+        font-size: 110%;
       }
 
       .video-miniature-created-at-views {
         display: block;
-        font-size: 13px;
+        font-size: 95%;
       }
 
       .video-miniature-account,
@@ -35,8 +36,8 @@ $more-margin-right: 15px;
         @include ellipsis;
 
         display: block;
-        font-size: 13px;
-        color: var(--greyForegroundColor);
+        font-size: 95%;
+        color: pvar(--greyForegroundColor);
 
         &:hover {
           color: $grey-foreground-hover-color;
@@ -87,10 +88,6 @@ $more-margin-right: 15px;
     @media screen and (max-width: $small-view) {
       .video-miniature-information {
         margin: 0 10px;
-
-        .video-miniature-name {
-          margin-top: 0;
-        }
       }
 
       .video-actions {
@@ -109,6 +106,24 @@ $more-margin-right: 15px;
     opacity: 1;
   }
 
+  &.fit-width {
+    width: 100%;
+    height: unset;
+    margin-bottom: $video-miniature-margin-bottom / 2;
+
+    .video-bottom {
+      width: 100% !important;
+
+      .video-miniature-information {
+        width: calc(100% - 40px) !important;
+      }
+    }
+
+    my-video-thumbnail {
+      @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
+    }
+  }
+
   &.display-as-row {
     flex-direction: row;
     margin-bottom: 0;
@@ -137,7 +152,7 @@ $more-margin-right: 15px;
         .video-miniature-created-at-views,
         .video-miniature-account,
         .video-miniature-channel {
-          font-size: 14px;
+          font-size: 95%;
           width: fit-content;
         }
 
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 88b21b3a5..a1d4f0e81 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -55,6 +55,7 @@ export class VideoMiniatureComponent implements OnInit {
   }
   @Input() displayAsRow = false
   @Input() displayVideoActions = true
+  @Input() fitWidth = false
 
   @Output() videoBlacklisted = new EventEmitter()
   @Output() videoUnblacklisted = new EventEmitter()
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index 5fca916f0..feff78a87 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -14,7 +14,7 @@
 
     div {
       height: 100%;
-      background-color: var(--mainColor);
+      background-color: pvar(--mainColor);
     }
   }
 
@@ -25,7 +25,8 @@
 
     border-radius: 3px;
     font-size: 12px;
-    font-weight: $font-bold;
+    font-weight: $font-semibold;
+    line-height: 1.2;
     z-index: z(miniature);
   }
 
@@ -34,6 +35,7 @@
     padding: 0 5px;
     left: 5px;
     top: 5px;
+    font-weight: $font-bold;
 
     &.warning { background-color: orange; }
     &.danger { background-color: red; }
@@ -41,7 +43,7 @@
 
   .video-thumbnail-duration-overlay {
     position: absolute;
-    padding: 0 5px;
+    padding: 0 3px;
     right: 5px;
     bottom: 5px;
   }