aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/video-list
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-03-11 16:41:38 +0100
committerChocobozzz <me@florianbigard.com>2020-03-11 16:45:09 +0100
commit111fdc267b36201cf1be1fdf91017005102b4a5e (patch)
tree5ea98f766cc74de3434a855e998e763324e9da72 /client/src/app/videos/video-list
parent764a965778ac89e027fd05dd35697c6763e0dc18 (diff)
downloadPeerTube-111fdc267b36201cf1be1fdf91017005102b4a5e.tar.gz
PeerTube-111fdc267b36201cf1be1fdf91017005102b4a5e.tar.zst
PeerTube-111fdc267b36201cf1be1fdf91017005102b4a5e.zip
Handle overview pagination in client
Diffstat (limited to 'client/src/app/videos/video-list')
-rw-r--r--client/src/app/videos/video-list/video-overview.component.html55
-rw-r--r--client/src/app/videos/video-list/video-overview.component.ts67
2 files changed, 80 insertions, 42 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 5fe1f5c80..84999cfb2 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -2,35 +2,44 @@
2 2
3 <div class="no-results" i18n *ngIf="notResults">No results.</div> 3 <div class="no-results" i18n *ngIf="notResults">No results.</div>
4 4
5 <div class="section" *ngFor="let object of overview.categories"> 5 <div
6 <div class="section-title"> 6 myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"
7 <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a> 7 >
8 </div> 8 <ng-container *ngFor="let overview of overviews">
9 9
10 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false"> 10 <div class="section" *ngFor="let object of overview.categories">
11 </my-video-miniature> 11 <div class="section-title">
12 </div> 12 <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
13 </div>
13 14
14 <div class="section" *ngFor="let object of overview.tags"> 15 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
15 <div class="section-title"> 16 </my-video-miniature>
16 <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a> 17 </div>
17 </div>
18 18
19 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false"> 19 <div class="section" *ngFor="let object of overview.tags">
20 </my-video-miniature> 20 <div class="section-title">
21 </div> 21 <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
22 </div>
23
24 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
25 </my-video-miniature>
26 </div>
27
28 <div class="section channel" *ngFor="let object of overview.channels">
29 <div class="section-title">
30 <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
31 <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
32
33 <div>{{ object.channel.displayName }}</div>
34 </a>
35 </div>
22 36
23 <div class="section channel" *ngFor="let object of overview.channels"> 37 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
24 <div class="section-title"> 38 </my-video-miniature>
25 <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]"> 39 </div>
26 <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
27 40
28 <div>{{ object.channel.displayName }}</div> 41 </ng-container>
29 </a>
30 </div>
31 42
32 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
33 </my-video-miniature>
34 </div> 43 </div>
35 44
36</div> 45</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 4fee92d54..101073949 100644
--- a/client/src/app/videos/video-list/video-overview.component.ts
+++ b/client/src/app/videos/video-list/video-overview.component.ts
@@ -5,6 +5,7 @@ import { 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' 7import { ScreenService } from '@app/shared/misc/screen.service'
8import { Subject } from 'rxjs'
8 9
9@Component({ 10@Component({
10 selector: 'my-video-overview', 11 selector: 'my-video-overview',
@@ -12,13 +13,17 @@ import { ScreenService } from '@app/shared/misc/screen.service'
12 styleUrls: [ './video-overview.component.scss' ] 13 styleUrls: [ './video-overview.component.scss' ]
13}) 14})
14export class VideoOverviewComponent implements OnInit { 15export class VideoOverviewComponent implements OnInit {
15 overview: VideosOverview = { 16 onDataSubject = new Subject<any>()
16 categories: [], 17
17 channels: [], 18 overviews: VideosOverview[] = []
18 tags: []
19 }
20 notResults = false 19 notResults = false
21 20
21 private loaded = false
22 private currentPage = 1
23 private maxPage = 20
24 private lastWasEmpty = false
25 private isLoading = false
26
22 constructor ( 27 constructor (
23 private i18n: I18n, 28 private i18n: I18n,
24 private notifier: Notifier, 29 private notifier: Notifier,
@@ -32,20 +37,7 @@ export class VideoOverviewComponent implements OnInit {
32 } 37 }
33 38
34 ngOnInit () { 39 ngOnInit () {
35 this.overviewService.getVideosOverview() 40 this.loadMoreResults()
36 .subscribe(
37 overview => {
38 this.overview = overview
39
40 if (
41 this.overview.categories.length === 0 &&
42 this.overview.channels.length === 0 &&
43 this.overview.tags.length === 0
44 ) this.notResults = true
45 },
46
47 err => this.notifier.error(err.message)
48 )
49 } 41 }
50 42
51 buildVideoChannelBy (object: { videos: Video[] }) { 43 buildVideoChannelBy (object: { videos: Video[] }) {
@@ -61,4 +53,41 @@ export class VideoOverviewComponent implements OnInit {
61 53
62 return videos.slice(0, numberOfVideos * 2) 54 return videos.slice(0, numberOfVideos * 2)
63 } 55 }
56
57 onNearOfBottom () {
58 if (this.currentPage >= this.maxPage) return
59 if (this.lastWasEmpty) return
60 if (this.isLoading) return
61
62 this.currentPage++
63 this.loadMoreResults()
64 }
65
66 private loadMoreResults () {
67 this.isLoading = true
68
69 this.overviewService.getVideosOverview(this.currentPage)
70 .subscribe(
71 overview => {
72 this.isLoading = false
73
74 if (overview.tags.length === 0 && overview.channels.length === 0 && overview.categories.length === 0) {
75 this.lastWasEmpty = true
76 if (this.loaded === false) this.notResults = true
77
78 return
79 }
80
81 this.loaded = true
82 this.onDataSubject.next(overview)
83
84 this.overviews.push(overview)
85 },
86
87 err => {
88 this.notifier.error(err.message)
89 this.isLoading = false
90 }
91 )
92 }
64} 93}