aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-08-22 13:59:54 +0200
committerChocobozzz <me@florianbigard.com>2019-08-22 13:59:54 +0200
commit6eb62c33908025d877a28f1cfbc527c511ae3103 (patch)
tree90544c222a721e878ee69f0a15a339d4dc67cb18
parenta3671f0709f3f423819fcfed47a4d4879cf82780 (diff)
downloadPeerTube-6eb62c33908025d877a28f1cfbc527c511ae3103.tar.gz
PeerTube-6eb62c33908025d877a28f1cfbc527c511ae3103.tar.zst
PeerTube-6eb62c33908025d877a28f1cfbc527c511ae3103.zip
Fix video rows overflow
In discover and account channel videos pages
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.scss1
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.ts9
-rw-r--r--client/src/app/shared/misc/screen.service.ts16
-rw-r--r--client/src/app/videos/video-list/video-overview.component.html9
-rw-r--r--client/src/app/videos/video-list/video-overview.component.ts10
-rw-r--r--client/src/sass/include/_miniature.scss3
6 files changed, 37 insertions, 11 deletions
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 7f7652460..a258c7b86 100644
--- 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 @@
9.section { 9.section {
10 @include miniature-rows; 10 @include miniature-rows;
11 11
12 overflow: visible; // For the subscribe dropdown
13 padding-top: 0 !important; 12 padding-top: 0 !important;
14 13
15 .section-title { 14 .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 85dedd7de..29d2991fd 100644
--- 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'
11import { VideoService } from '@app/shared/video/video.service' 11import { VideoService } from '@app/shared/video/video.service'
12import { VideoSortField } from '@app/shared/video/sort-field.type' 12import { VideoSortField } from '@app/shared/video/sort-field.type'
13import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model' 13import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
14import { ScreenService } from '@app/shared/misc/screen.service'
14 15
15@Component({ 16@Component({
16 selector: 'my-account-video-channels', 17 selector: 'my-account-video-channels',
@@ -42,7 +43,8 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
42 private authService: AuthService, 43 private authService: AuthService,
43 private accountService: AccountService, 44 private accountService: AccountService,
44 private videoChannelService: VideoChannelService, 45 private videoChannelService: VideoChannelService,
45 private videoService: VideoService 46 private videoService: VideoService,
47 private screenService: ScreenService
46 ) { } 48 ) { }
47 49
48 get user () { 50 get user () {
@@ -83,7 +85,10 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
83 } 85 }
84 86
85 getVideosOf (videoChannel: VideoChannel) { 87 getVideosOf (videoChannel: VideoChannel) {
86 return this.videos[ videoChannel.id ] 88 const numberOfVideos = this.screenService.getNumberOfAvailableMiniatures()
89
90 // 2 rows
91 return this.videos[ videoChannel.id ].slice(0, numberOfVideos * 2)
87 } 92 }
88 93
89 onNearOfBottom () { 94 onNearOfBottom () {
diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index af75569d9..220d41d59 100644
--- 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 {
22 return 'ontouchstart' in window || navigator.msMaxTouchPoints 22 return 'ontouchstart' in window || navigator.msMaxTouchPoints
23 } 23 }
24 24
25 getNumberOfAvailableMiniatures () {
26 const screenWidth = this.getWindowInnerWidth()
27
28 let numberOfVideos = 1
29
30 if (screenWidth > 1850) numberOfVideos = 6
31 else if (screenWidth > 1600) numberOfVideos = 5
32 else if (screenWidth > 1370) numberOfVideos = 4
33 else if (screenWidth > 1100) numberOfVideos = 3
34 else if (screenWidth > 850) numberOfVideos = 2
35
36 return numberOfVideos
37 }
38
25 // Cache window inner width, because it's an expensive call 39 // Cache window inner width, because it's an expensive call
26 private getWindowInnerWidth () { 40 getWindowInnerWidth () {
27 if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth() 41 if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
28 42
29 return this.windowInnerWidth 43 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 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 @@
7 <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a> 7 <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
8 </div> 8 </div>
9 9
10 <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature> 10 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
11 </my-video-miniature>
11 </div> 12 </div>
12 13
13 <div class="section" *ngFor="let object of overview.tags"> 14 <div class="section" *ngFor="let object of overview.tags">
@@ -15,7 +16,8 @@
15 <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a> 16 <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
16 </div> 17 </div>
17 18
18 <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature> 19 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
20 </my-video-miniature>
19 </div> 21 </div>
20 22
21 <div class="section channel" *ngFor="let object of overview.channels"> 23 <div class="section channel" *ngFor="let object of overview.channels">
@@ -27,7 +29,8 @@
27 </a> 29 </a>
28 </div> 30 </div>
29 31
30 <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature> 32 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
33 </my-video-miniature>
31 </div> 34 </div>
32 35
33</div> 36</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'
4import { VideosOverview } from '@app/shared/overview/videos-overview.model' 4import { VideosOverview } from '@app/shared/overview/videos-overview.model'
5import { OverviewService } from '@app/shared/overview' 5import { OverviewService } from '@app/shared/overview'
6import { Video } from '@app/shared/video/video.model' 6import { Video } from '@app/shared/video/video.model'
7import { ScreenService } from '@app/shared/misc/screen.service'
7 8
8@Component({ 9@Component({
9 selector: 'my-video-overview', 10 selector: 'my-video-overview',
@@ -22,7 +23,8 @@ export class VideoOverviewComponent implements OnInit {
22 private i18n: I18n, 23 private i18n: I18n,
23 private notifier: Notifier, 24 private notifier: Notifier,
24 private authService: AuthService, 25 private authService: AuthService,
25 private overviewService: OverviewService 26 private overviewService: OverviewService,
27 private screenService: ScreenService
26 ) { } 28 ) { }
27 29
28 get user () { 30 get user () {
@@ -53,4 +55,10 @@ export class VideoOverviewComponent implements OnInit {
53 buildVideoChannelAvatarUrl (object: { videos: Video[] }) { 55 buildVideoChannelAvatarUrl (object: { videos: Video[] }) {
54 return object.videos[0].videoChannelAvatarUrl 56 return object.videos[0].videoChannelAvatarUrl
55 } 57 }
58
59 buildVideos (videos: Video[]) {
60 const numberOfVideos = this.screenService.getNumberOfAvailableMiniatures()
61
62 return videos.slice(0, numberOfVideos * 2)
63 }
56} 64}
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index e4ed88d31..56126d41f 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -140,9 +140,6 @@ $play-overlay-width: 18px;
140} 140}
141 141
142@mixin miniature-rows { 142@mixin miniature-rows {
143 max-height: 540px; // 2 rows max
144 overflow: hidden;
145
146 &:first-child { 143 &:first-child {
147 padding-top: 30px; 144 padding-top: 30px;
148 145