Add max rows to videos list

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) {

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 {

client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss

@@ -1,20 +1,24 @@
 .custom-markup-container {
 
   ::ng-deep .peertube-container {
+
+    &.layout-row {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+
+    &.layout-column {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .header {
       margin: 30px 0 15px;
+    }
 
     h4 {
       margin-bottom: 0;
     }
-
-    .layout-row {
-      display: flex;
-      flex-direction: row;
-    }
-
-    .layout-column {
-      display: flex;
-      flex-direction: column;
-    }
   }
 }

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 || data.description) {
+      const headerElement = document.createElement('div')
+      headerElement.classList.add('header')
+
       if (data.title) {
         const titleElement = document.createElement('h4')
         titleElement.innerText = data.title
-      root.appendChild(titleElement)
+        headerElement.appendChild(titleElement)
       }
 
       if (data.description) {
         const descriptionElement = document.createElement('div')
         descriptionElement.innerText = data.description
-      root.appendChild(descriptionElement)
+        headerElement.append(descriptionElement)
+      }
+
+      root.insertBefore(headerElement, root.firstChild)
     }
 
     return root

client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html

@@ -1,8 +1,13 @@
-<div class="videos">
+<div class="root">
+  <div class="videos" [ngStyle]="limitRowsStyle()">
+
+    <div class="video-wrapper" *ngFor="let video of videos">
       <my-video-miniature
-    *ngFor="let video of videos"
         [video]="video" [user]="getUser()" [displayAsRow]="false"
         [displayVideoActions]="false" [displayOptions]="displayOptions"
       >
       </my-video-miniature>
+    </div>
+
+  </div>
 </div>

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 {
+.root {
-  @include margin-right(15px);
+  @include grid-videos-miniature-layout;
-
-  display: inline-block;
-  min-width: $video-thumbnail-width;
-  max-width: $video-thumbnail-width;
 }

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)) {

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 {

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;
+}

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 = {