Fix video rows overflow

In discover and account channel videos pages

2 files changed, 15 insertions, 4 deletions

diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index f59de584a..5fe1f5c80 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -7,7 +7,8 @@
       <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
     </div>
 
-    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature>
+    <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
+    </my-video-miniature>
   </div>
 
   <div class="section" *ngFor="let object of overview.tags">
@@ -15,7 +16,8 @@
       <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
     </div>
 
-    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature>
+    <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
+    </my-video-miniature>
   </div>
 
   <div class="section channel" *ngFor="let object of overview.channels">
@@ -27,7 +29,8 @@
       </a>
     </div>
 
-    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature>
+    <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
+    </my-video-miniature>
   </div>
 
 </div>
diff --git a/client/src/app/videos/video-list/video-overview.component.ts b/client/src/app/videos/video-list/video-overview.component.ts
index 7ff52b259..4fee92d54 100644
--- a/client/src/app/videos/video-list/video-overview.component.ts
+++ b/client/src/app/videos/video-list/video-overview.component.ts
@@ -4,6 +4,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideosOverview } from '@app/shared/overview/videos-overview.model'
 import { OverviewService } from '@app/shared/overview'
 import { Video } from '@app/shared/video/video.model'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 @Component({
   selector: 'my-video-overview',
@@ -22,7 +23,8 @@ export class VideoOverviewComponent implements OnInit {
     private i18n: I18n,
     private notifier: Notifier,
     private authService: AuthService,
-    private overviewService: OverviewService
+    private overviewService: OverviewService,
+    private screenService: ScreenService
   ) { }
 
   get user () {
@@ -53,4 +55,10 @@ export class VideoOverviewComponent implements OnInit {
   buildVideoChannelAvatarUrl (object: { videos: Video[] }) {
     return object.videos[0].videoChannelAvatarUrl
   }
+
+  buildVideos (videos: Video[]) {
+    const numberOfVideos = this.screenService.getNumberOfAvailableMiniatures()
+
+    return videos.slice(0, numberOfVideos * 2)
+  }
 }