aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-01 16:17:32 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-01 16:17:32 +0100
commit2bbb34127fccd187ed690949b6791e49fdd77194 (patch)
treed9ebcc72ab5e1d439f08e73881dc62baecb3bc36 /client/src/app/videos
parent9bf9d2a5c223bf006496ae7adf0c0bd7a7975108 (diff)
downloadPeerTube-2bbb34127fccd187ed690949b6791e49fdd77194.tar.gz
PeerTube-2bbb34127fccd187ed690949b6791e49fdd77194.tar.zst
PeerTube-2bbb34127fccd187ed690949b6791e49fdd77194.zip
Add auto scroll to videos list
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/video-list/shared/abstract-video-list.html14
-rw-r--r--client/src/app/videos/video-list/shared/abstract-video-list.ts63
-rw-r--r--client/src/app/videos/video-list/video-recently-added.component.ts1
-rw-r--r--client/src/app/videos/video-list/video-trending.component.ts1
-rw-r--r--client/src/app/videos/videos.module.ts4
5 files changed, 61 insertions, 22 deletions
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.html b/client/src/app/videos/video-list/shared/abstract-video-list.html
index ab5530e68..69e16319e 100644
--- a/client/src/app/videos/video-list/shared/abstract-video-list.html
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.html
@@ -2,15 +2,17 @@
2 {{ titlePage }} 2 {{ titlePage }}
3</div> 3</div>
4 4
5<div class="videos-miniatures"> 5<div
6 class="videos-miniatures"
7 infiniteScroll
8 [infiniteScrollUpDistance]="1.5"
9 [infiniteScrollDistance]="0.5"
10 (scrolled)="onNearOfBottom()"
11 (scrolledUp)="onNearOfTop()"
12>
6 <my-video-miniature 13 <my-video-miniature
7 class="ng-animate" 14 class="ng-animate"
8 *ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort" 15 *ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort"
9 > 16 >
10 </my-video-miniature> 17 </my-video-miniature>
11</div> 18</div>
12
13<pagination *ngIf="pagination.totalItems !== null && pagination.totalItems !== 0"
14 [totalItems]="pagination.totalItems" [itemsPerPage]="pagination.itemsPerPage" [maxSize]="6" [boundaryLinks]="true" [rotate]="false"
15 [(ngModel)]="pagination.currentPage" (pageChanged)="onPageChanged($event)"
16></pagination>
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.ts b/client/src/app/videos/video-list/shared/abstract-video-list.ts
index 262ea4e21..44cdc1d9f 100644
--- a/client/src/app/videos/video-list/shared/abstract-video-list.ts
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.ts
@@ -19,44 +19,77 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
19 protected notificationsService: NotificationsService 19 protected notificationsService: NotificationsService
20 protected router: Router 20 protected router: Router
21 protected route: ActivatedRoute 21 protected route: ActivatedRoute
22
23 protected subActivatedRoute: Subscription 22 protected subActivatedRoute: Subscription
24 23
24 protected abstract currentRoute: string
25
25 abstract titlePage: string 26 abstract titlePage: string
27 private loadedPages: { [ id: number ]: boolean } = {}
28
26 abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}> 29 abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}>
27 30
28 ngOnInit () { 31 ngOnInit () {
29 // Subscribe to route changes 32 // Subscribe to route changes
30 this.subActivatedRoute = this.route.params.subscribe(routeParams => { 33 const routeParams = this.route.snapshot.params
31 this.loadRouteParams(routeParams) 34 this.loadRouteParams(routeParams)
32 35 this.loadMoreVideos('after')
33 this.getVideos()
34 })
35 } 36 }
36 37
37 ngOnDestroy () { 38 ngOnDestroy () {
38 this.subActivatedRoute.unsubscribe() 39 this.subActivatedRoute.unsubscribe()
39 } 40 }
40 41
41 getVideos () { 42 onNearOfTop () {
42 this.videos = [] 43 if (this.pagination.currentPage > 1) {
44 this.previousPage()
45 }
46 }
47
48 onNearOfBottom () {
49 if (this.hasMoreVideos()) {
50 this.nextPage()
51 }
52 }
53
54 loadMoreVideos (where: 'before' | 'after') {
55 if (this.loadedPages[this.pagination.currentPage] === true) return
43 56
44 const observable = this.getVideosObservable() 57 const observable = this.getVideosObservable()
45 58
46 observable.subscribe( 59 observable.subscribe(
47 ({ videos, totalVideos }) => { 60 ({ videos, totalVideos }) => {
48 this.videos = videos 61 this.loadedPages[this.pagination.currentPage] = true
49 this.pagination.totalItems = totalVideos 62 this.pagination.totalItems = totalVideos
63
64 if (where === 'before') {
65 this.videos = videos.concat(this.videos)
66 } else {
67 this.videos = this.videos.concat(videos)
68 }
50 }, 69 },
51 error => this.notificationsService.error('Error', error.text) 70 error => this.notificationsService.error('Error', error.text)
52 ) 71 )
53 } 72 }
54 73
55 onPageChanged (event: { page: number }) { 74 protected hasMoreVideos () {
56 // Be sure the current page is set 75 if (!this.pagination.totalItems) return true
57 this.pagination.currentPage = event.page 76
77 const maxPage = this.pagination.totalItems/this.pagination.itemsPerPage
78 return maxPage > this.pagination.currentPage
79 }
80
81 protected previousPage () {
82 this.pagination.currentPage--
83
84 this.setNewRouteParams()
85 this.loadMoreVideos('before')
86 }
87
88 protected nextPage () {
89 this.pagination.currentPage++
58 90
59 this.navigateToNewParams() 91 this.setNewRouteParams()
92 this.loadMoreVideos('after')
60 } 93 }
61 94
62 protected buildRouteParams () { 95 protected buildRouteParams () {
@@ -79,8 +112,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
79 } 112 }
80 } 113 }
81 114
82 protected navigateToNewParams () { 115 protected setNewRouteParams () {
83 const routeParams = this.buildRouteParams() 116 const routeParams = this.buildRouteParams()
84 this.router.navigate([ '/videos/list', routeParams ]) 117 this.router.navigate([ this.currentRoute, routeParams ])
85 } 118 }
86} 119}
diff --git a/client/src/app/videos/video-list/video-recently-added.component.ts b/client/src/app/videos/video-list/video-recently-added.component.ts
index dbba264df..9bf69bd78 100644
--- a/client/src/app/videos/video-list/video-recently-added.component.ts
+++ b/client/src/app/videos/video-list/video-recently-added.component.ts
@@ -11,6 +11,7 @@ import { AbstractVideoList } from './shared'
11}) 11})
12export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit, OnDestroy { 12export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit, OnDestroy {
13 titlePage = 'Recently added' 13 titlePage = 'Recently added'
14 currentRoute = '/videos/recently-added'
14 15
15 constructor (protected router: Router, 16 constructor (protected router: Router,
16 protected route: ActivatedRoute, 17 protected route: ActivatedRoute,
diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts
index b97966c12..a1df68711 100644
--- a/client/src/app/videos/video-list/video-trending.component.ts
+++ b/client/src/app/videos/video-list/video-trending.component.ts
@@ -11,6 +11,7 @@ import { AbstractVideoList } from './shared'
11}) 11})
12export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy { 12export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy {
13 titlePage = 'Trending' 13 titlePage = 'Trending'
14 currentRoute = '/videos/trending'
14 15
15 constructor (protected router: Router, 16 constructor (protected router: Router,
16 protected route: ActivatedRoute, 17 protected route: ActivatedRoute,
diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts
index 93193000c..f3981d275 100644
--- a/client/src/app/videos/videos.module.ts
+++ b/client/src/app/videos/videos.module.ts
@@ -1,4 +1,5 @@
1import { NgModule } from '@angular/core' 1import { NgModule } from '@angular/core'
2import { InfiniteScrollModule } from 'ngx-infinite-scroll'
2import { SharedModule } from '../shared' 3import { SharedModule } from '../shared'
3import { VideoService } from './shared' 4import { VideoService } from './shared'
4import { MyVideosComponent, VideoMiniatureComponent } from './video-list' 5import { MyVideosComponent, VideoMiniatureComponent } from './video-list'
@@ -10,7 +11,8 @@ import { VideosComponent } from './videos.component'
10@NgModule({ 11@NgModule({
11 imports: [ 12 imports: [
12 VideosRoutingModule, 13 VideosRoutingModule,
13 SharedModule 14 SharedModule,
15 InfiniteScrollModule
14 ], 16 ],
15 17
16 declarations: [ 18 declarations: [