diff options
Diffstat (limited to 'client/src/app')
5 files changed, 37 insertions, 8 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' | |||
11 | import { VideoService } from '@app/shared/video/video.service' | 11 | import { VideoService } from '@app/shared/video/video.service' |
12 | import { VideoSortField } from '@app/shared/video/sort-field.type' | 12 | import { VideoSortField } from '@app/shared/video/sort-field.type' |
13 | import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model' | 13 | import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model' |
14 | import { 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' | |||
4 | import { VideosOverview } from '@app/shared/overview/videos-overview.model' | 4 | import { VideosOverview } from '@app/shared/overview/videos-overview.model' |
5 | import { OverviewService } from '@app/shared/overview' | 5 | import { OverviewService } from '@app/shared/overview' |
6 | import { Video } from '@app/shared/video/video.model' | 6 | import { Video } from '@app/shared/video/video.model' |
7 | import { 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 | } |