Fix video rows overflow

In discover and account channel videos pages

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 7f765246061b1562581709704ef14668f432f13a..a258c7b869b7b64c5aa8733459cfd541963047d9 100644 (file)
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -9,7 +9,6 @@
 .section {
   @include miniature-rows;
 
-  overflow: visible; // For the subscribe dropdown
   padding-top: 0 !important;
 
   .section-title {

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
index 85dedd7defe03d49a778639d0028f44715acf29d..29d2991fddbabca192aedd94c081e381ca40adaa 100644 (file)
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
@@ -11,6 +11,7 @@ import { AuthService } from '@app/core'
 import { VideoService } from '@app/shared/video/video.service'
 import { VideoSortField } from '@app/shared/video/sort-field.type'
 import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 @Component({
   selector: 'my-account-video-channels',
@@ -42,7 +43,8 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
     private authService: AuthService,
     private accountService: AccountService,
     private videoChannelService: VideoChannelService,
-    private videoService: VideoService
+    private videoService: VideoService,
+    private screenService: ScreenService
   ) { }
 
   get user () {
@@ -83,7 +85,10 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
   }
 
   getVideosOf (videoChannel: VideoChannel) {
-    return this.videos[ videoChannel.id ]
+    const numberOfVideos = this.screenService.getNumberOfAvailableMiniatures()
+
+    // 2 rows
+    return this.videos[ videoChannel.id ].slice(0, numberOfVideos * 2)
   }
 
   onNearOfBottom () {

diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index af75569d9bd66fb61b82cd070d4c30300cfbf1ce..220d41d59b732736644afb5efff6c41de7dbb0cd 100644 (file)
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/client/src/app/shared/misc/screen.service.ts
@@ -22,8 +22,22 @@ export class ScreenService {
     return 'ontouchstart' in window || navigator.msMaxTouchPoints
   }
 
+  getNumberOfAvailableMiniatures () {
+    const screenWidth = this.getWindowInnerWidth()
+
+    let numberOfVideos = 1
+
+    if (screenWidth > 1850) numberOfVideos = 6
+    else if (screenWidth > 1600) numberOfVideos = 5
+    else if (screenWidth > 1370) numberOfVideos = 4
+    else if (screenWidth > 1100) numberOfVideos = 3
+    else if (screenWidth > 850) numberOfVideos = 2
+
+    return numberOfVideos
+  }
+
   // Cache window inner width, because it's an expensive call
-  private getWindowInnerWidth () {
+  getWindowInnerWidth () {
     if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
 
     return this.windowInnerWidth

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 f59de584a1bcc49554b42bc0422c29119ab70657..5fe1f5c80a7ba4999e44d5af14c7ac5b0b41db77 100644 (file)
--- 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 7ff52b259f04f2c6a754f3a2f72b23e6b7f0a7f3..4fee92d54a1e9f7997ca8ac55b42fac2e5a609c4 100644 (file)
--- 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)
+  }
 }

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index e4ed88d31d261984663c519870dd496fa3135a5e..56126d41f9e91950bf87b01a5f7b15374c6dadd1 100644 (file)
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -140,9 +140,6 @@ $play-overlay-width: 18px;
 }
 
 @mixin miniature-rows {
-  max-height: 540px; // 2 rows max
-  overflow: hidden;
-
   &:first-child {
     padding-top: 30px;