From 5d6395af72e01ba7c4393b485b7089bcb33e0155 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 9 Jun 2021 10:59:20 +0200
Subject: Add max rows to videos list

---
 .../videos-list-markup.component.html                 | 19 ++++++++++++-------
 .../videos-list-markup.component.scss                 |  9 +++------
 .../videos-list-markup.component.ts                   | 11 +++++++++++
 3 files changed, 26 insertions(+), 13 deletions(-)

(limited to 'client/src/app/shared/shared-custom-markup/peertube-custom-tags')

diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html
index a2fd2fe40..15ef9d418 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html
@@ -1,8 +1,13 @@
-<div class="videos">
-  <my-video-miniature
-    *ngFor="let video of videos"
-    [video]="video" [user]="getUser()" [displayAsRow]="false"
-    [displayVideoActions]="false" [displayOptions]="displayOptions"
-  >
-  </my-video-miniature>
+<div class="root">
+  <div class="videos" [ngStyle]="limitRowsStyle()">
+
+    <div class="video-wrapper" *ngFor="let video of videos">
+      <my-video-miniature
+        [video]="video" [user]="getUser()" [displayAsRow]="false"
+        [displayVideoActions]="false" [displayOptions]="displayOptions"
+      >
+      </my-video-miniature>
+    </div>
+
+  </div>
 </div>
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
index 6b7274480..5a9a926fe 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
@@ -1,10 +1,7 @@
 @import '_variables';
 @import '_mixins';
+@import '_miniature';
 
-my-video-miniature {
-  @include margin-right(15px);
-
-  display: inline-block;
-  min-width: $video-thumbnail-width;
-  max-width: $video-thumbnail-width;
+.root {
+  @include grid-videos-miniature-layout;
 }
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
index fe084afd9..d4402dd9f 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
@@ -20,6 +20,7 @@ export class VideosListMarkupComponent implements OnInit {
   @Input() count: number
   @Input() onlyDisplayTitle: boolean
   @Input() filter: VideoFilter
+  @Input() maxRows: number
 
   videos: Video[]
 
@@ -43,6 +44,16 @@ export class VideosListMarkupComponent implements OnInit {
     return this.auth.getUser()
   }
 
+  limitRowsStyle () {
+    if (this.maxRows <= 0) return {}
+
+    return {
+      'grid-template-rows': `repeat(${this.maxRows}, 1fr)`,
+      'grid-auto-rows': '0', // Set height to 0 for autogenerated grid rows
+      'overflow-y': 'hidden' // Hide grid items that overflow
+    }
+  }
+
   ngOnInit () {
     if (this.onlyDisplayTitle) {
       for (const key of Object.keys(this.displayOptions)) {
-- 
cgit v1.2.3