Add max rows to videos list

10 files changed, 76 insertions, 38 deletions

diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
index 1e82ac765..b3131de7e 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
@@ -14,7 +14,7 @@
 }
 
 .margin-content {
-  @include grid-videos-miniature-layout;
+  @include grid-videos-miniature-layout-with-margins;
 }
 
 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index cb3ae2b9b..cb9308dda 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -8,7 +8,7 @@
 }
 
 .margin-content {
-  @include grid-videos-miniature-layout;
+  @include grid-videos-miniature-layout-with-margins;
 }
 
 .section {
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss
index 862da7c18..704d908c3 100644
--- a/client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss
+++ b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss
@@ -1,20 +1,24 @@
 .custom-markup-container {
 
   ::ng-deep .peertube-container {
-    margin: 30px 0 15px;
 
-    h4 {
-      margin-bottom: 0;
-    }
-
-    .layout-row {
+    &.layout-row {
       display: flex;
       flex-direction: row;
+      flex-wrap: wrap;
     }
 
-    .layout-column {
+    &.layout-column {
       display: flex;
       flex-direction: column;
     }
+
+    .header {
+      margin: 30px 0 15px;
+    }
+
+    h4 {
+      margin-bottom: 0;
+    }
   }
 }
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
index aa5dbe643..729cd296b 100644
--- a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
+++ b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
@@ -168,11 +168,15 @@ export class CustomMarkupService {
 
     const model = {
       onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false,
+      maxRows: this.buildNumber(data.maxRows) ?? -1,
+
       sort: data.sort || '-publishedAt',
+      count: this.buildNumber(data.count) || 10,
+
       categoryOneOf: this.buildArrayNumber(data.categoryOneOf) ?? [],
       languageOneOf: this.buildArrayString(data.languageOneOf) ?? [],
-      filter: this.buildBoolean(data.onlyLocal) ? 'local' as VideoFilter : undefined,
-      count: this.buildNumber(data.count) || 10
+
+      filter: this.buildBoolean(data.onlyLocal) ? 'local' as VideoFilter : undefined
     }
 
     this.dynamicElementService.setModel(component, model)
@@ -183,11 +187,16 @@ export class CustomMarkupService {
   private containerBuilder (el: HTMLElement) {
     const data = el.dataset as ContainerMarkupData
 
+    // Move inner HTML in the new element we'll create
+    const content = el.innerHTML
+    el.innerHTML = ''
+
     const root = document.createElement('div')
+    root.innerHTML = content
 
     const layoutClass = data.layout
       ? 'layout-' + data.layout
-      : 'layout-row'
+      : 'layout-column'
 
     root.classList.add('peertube-container', layoutClass)
 
@@ -195,16 +204,23 @@ export class CustomMarkupService {
       root.setAttribute('width', data.width)
     }
 
-    if (data.title) {
-      const titleElement = document.createElement('h4')
-      titleElement.innerText = data.title
-      root.appendChild(titleElement)
-    }
+    if (data.title || data.description) {
+      const headerElement = document.createElement('div')
+      headerElement.classList.add('header')
+
+      if (data.title) {
+        const titleElement = document.createElement('h4')
+        titleElement.innerText = data.title
+        headerElement.appendChild(titleElement)
+      }
+
+      if (data.description) {
+        const descriptionElement = document.createElement('div')
+        descriptionElement.innerText = data.description
+        headerElement.append(descriptionElement)
+      }
 
-    if (data.description) {
-      const descriptionElement = document.createElement('div')
-      descriptionElement.innerText = data.description
-      root.appendChild(descriptionElement)
+      root.insertBefore(headerElement, root.firstChild)
     }
 
     return root
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)) {
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 dd9ab18a8..c8dda2900 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
@@ -51,7 +51,7 @@ $icon-size: 16px;
 }
 
 .margin-content {
-  @include grid-videos-miniature-layout;
+  @include grid-videos-miniature-layout-with-margins;
 }
 
 .display-as-row.videos {
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index f782d374a..0d3f2b6e0 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -118,8 +118,6 @@
 }
 
 @mixin grid-videos-miniature-layout {
-  @include grid-videos-miniature-margins;
-
   @media screen and (min-width: $mobile-view) {
     .videos,
     .playlists {
@@ -156,3 +154,8 @@
     }
   }
 }
+
+@mixin grid-videos-miniature-layout-with-margins {
+  @include grid-videos-miniature-margins;
+  @include grid-videos-miniature-layout;
+}
diff --git a/shared/models/custom-markup/custom-markup-data.model.ts b/shared/models/custom-markup/custom-markup-data.model.ts
index f3c23ec2c..06c9b544d 100644
--- a/shared/models/custom-markup/custom-markup-data.model.ts
+++ b/shared/models/custom-markup/custom-markup-data.model.ts
@@ -25,14 +25,16 @@ export type ChannelMiniatureMarkupData = {
 
 export type VideosListMarkupData = {
   onlyDisplayTitle?: string // boolean
+  maxRows?: string // number
 
   sort?: string
-  count?: string
+  count?: string // number
 
   categoryOneOf?: string // coma separated values
   languageOneOf?: string // coma separated values
 
   onlyLocal?: string // boolean
+
 }
 
 export type ButtonMarkupData = {