diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2016-05-22 10:43:06 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2016-05-22 10:44:35 +0200 |
commit | 322940742b4dca168de6dfed0d1ebf5926dab528 (patch) | |
tree | 7b7fdb77595aa7d6a89d1045ab6012a9e1d68aab /client/angular/videos/components/list | |
parent | 46246b5f194caafba4e3a72e9365acd8b35785de (diff) | |
download | PeerTube-322940742b4dca168de6dfed0d1ebf5926dab528.tar.gz PeerTube-322940742b4dca168de6dfed0d1ebf5926dab528.tar.zst PeerTube-322940742b4dca168de6dfed0d1ebf5926dab528.zip |
Add pagination support to the client
Diffstat (limited to 'client/angular/videos/components/list')
5 files changed, 38 insertions, 17 deletions
diff --git a/client/angular/videos/components/list/video-miniature.component.html b/client/angular/videos/components/list/video-miniature.component.html index b88a19d5e..244254b5a 100644 --- a/client/angular/videos/components/list/video-miniature.component.html +++ b/client/angular/videos/components/list/video-miniature.component.html | |||
@@ -1,4 +1,4 @@ | |||
1 | <div class="video-miniature" (mouseenter)="onHover()" (mouseleave)="onBlur()"> | 1 | <div class="video-miniature col-md-4" (mouseenter)="onHover()" (mouseleave)="onBlur()"> |
2 | <a | 2 | <a |
3 | [routerLink]="['VideosWatch', { id: video.id }]" [attr.title]="video.description" | 3 | [routerLink]="['VideosWatch', { id: video.id }]" [attr.title]="video.description" |
4 | class="video-miniature-thumbnail" | 4 | class="video-miniature-thumbnail" |
diff --git a/client/angular/videos/components/list/video-miniature.component.scss b/client/angular/videos/components/list/video-miniature.component.scss index dbcd65820..4488abe22 100644 --- a/client/angular/videos/components/list/video-miniature.component.scss +++ b/client/angular/videos/components/list/video-miniature.component.scss | |||
@@ -1,8 +1,6 @@ | |||
1 | .video-miniature { | 1 | .video-miniature { |
2 | width: 200px; | ||
3 | height: 200px; | 2 | height: 200px; |
4 | display: inline-block; | 3 | display: inline-block; |
5 | margin-right: 40px; | ||
6 | position: relative; | 4 | position: relative; |
7 | 5 | ||
8 | .video-miniature-thumbnail { | 6 | .video-miniature-thumbnail { |
@@ -11,7 +9,7 @@ | |||
11 | 9 | ||
12 | .video-miniature-duration { | 10 | .video-miniature-duration { |
13 | position: absolute; | 11 | position: absolute; |
14 | right: 2px; | 12 | right: 60px; |
15 | bottom: 2px; | 13 | bottom: 2px; |
16 | display: inline-block; | 14 | display: inline-block; |
17 | background-color: rgba(0, 0, 0, 0.8); | 15 | background-color: rgba(0, 0, 0, 0.8); |
@@ -24,7 +22,7 @@ | |||
24 | .video-miniature-remove { | 22 | .video-miniature-remove { |
25 | display: inline-block; | 23 | display: inline-block; |
26 | position: absolute; | 24 | position: absolute; |
27 | left: 2px; | 25 | left: 16px; |
28 | background-color: rgba(0, 0, 0, 0.8); | 26 | background-color: rgba(0, 0, 0, 0.8); |
29 | color: rgba(255, 255, 255, 0.8); | 27 | color: rgba(255, 255, 255, 0.8); |
30 | padding: 2px; | 28 | padding: 2px; |
diff --git a/client/angular/videos/components/list/videos-list.component.html b/client/angular/videos/components/list/videos-list.component.html index 776339d10..39cdf29ba 100644 --- a/client/angular/videos/components/list/videos-list.component.html +++ b/client/angular/videos/components/list/videos-list.component.html | |||
@@ -1,3 +1,11 @@ | |||
1 | <div *ngIf="videos.length === 0">There is no video.</div> | 1 | <div class="videos-miniatures"> |
2 | <my-video-miniature *ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)"> | 2 | <div *ngIf="videos.length === 0">There is no video.</div> |
3 | </my-video-miniature> | 3 | |
4 | <my-video-miniature *ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)"> | ||
5 | </my-video-miniature> | ||
6 | </div> | ||
7 | |||
8 | <pagination | ||
9 | [totalItems]="pagination.total" [itemsPerPage]="pagination.itemsPerPage" [(ngModel)]="pagination.currentPage" | ||
10 | (ngModelChange)="getVideos()" | ||
11 | ></pagination> | ||
diff --git a/client/angular/videos/components/list/videos-list.component.scss b/client/angular/videos/components/list/videos-list.component.scss index ac930978c..05c38b833 100644 --- a/client/angular/videos/components/list/videos-list.component.scss +++ b/client/angular/videos/components/list/videos-list.component.scss | |||
@@ -1,8 +1,12 @@ | |||
1 | .loading { | 1 | .videos-miniatures { |
2 | display: inline-block; | 2 | min-height: 600px; |
3 | margin-top: 100px; | ||
4 | } | 3 | } |
5 | 4 | ||
6 | my-videos-miniature { | 5 | my-videos-miniature { |
7 | display: inline-block; | 6 | display: inline-block; |
8 | } | 7 | } |
8 | |||
9 | pagination { | ||
10 | display: block; | ||
11 | text-align: center; | ||
12 | } | ||
diff --git a/client/angular/videos/components/list/videos-list.component.ts b/client/angular/videos/components/list/videos-list.component.ts index 6fc0c1f04..341afdaa6 100644 --- a/client/angular/videos/components/list/videos-list.component.ts +++ b/client/angular/videos/components/list/videos-list.component.ts | |||
@@ -1,7 +1,10 @@ | |||
1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from '@angular/core'; |
2 | import { ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated'; | 2 | import { ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated'; |
3 | 3 | ||
4 | import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination'; | ||
5 | |||
4 | import { AuthService } from '../../../users/services/auth.service'; | 6 | import { AuthService } from '../../../users/services/auth.service'; |
7 | import { Pagination } from '../../pagination'; | ||
5 | import { User } from '../../../users/models/user'; | 8 | import { User } from '../../../users/models/user'; |
6 | import { VideosService } from '../../videos.service'; | 9 | import { VideosService } from '../../videos.service'; |
7 | import { Video } from '../../video'; | 10 | import { Video } from '../../video'; |
@@ -11,21 +14,26 @@ import { VideoMiniatureComponent } from './video-miniature.component'; | |||
11 | selector: 'my-videos-list', | 14 | selector: 'my-videos-list', |
12 | styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ], | 15 | styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ], |
13 | templateUrl: 'app/angular/videos/components/list/videos-list.component.html', | 16 | templateUrl: 'app/angular/videos/components/list/videos-list.component.html', |
14 | directives: [ ROUTER_DIRECTIVES, VideoMiniatureComponent ] | 17 | directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent ] |
15 | }) | 18 | }) |
16 | 19 | ||
17 | export class VideosListComponent implements OnInit { | 20 | export class VideosListComponent implements OnInit { |
18 | user: User = null; | 21 | user: User = null; |
19 | videos: Video[] = []; | 22 | videos: Video[] = []; |
23 | pagination: Pagination = { | ||
24 | currentPage: 1, | ||
25 | itemsPerPage: 9, | ||
26 | total: 0 | ||
27 | } | ||
20 | 28 | ||
21 | private search: string; | 29 | private search: string; |
22 | 30 | ||
23 | constructor( | 31 | constructor( |
24 | private _authService: AuthService, | 32 | private _authService: AuthService, |
25 | private _videosService: VideosService, | 33 | private _videosService: VideosService, |
26 | routeParams: RouteParams | 34 | private _routeParams: RouteParams |
27 | ) { | 35 | ) { |
28 | this.search = routeParams.get('search'); | 36 | this.search = this._routeParams.get('search'); |
29 | } | 37 | } |
30 | 38 | ||
31 | ngOnInit() { | 39 | ngOnInit() { |
@@ -40,13 +48,16 @@ export class VideosListComponent implements OnInit { | |||
40 | let observable = null; | 48 | let observable = null; |
41 | 49 | ||
42 | if (this.search !== null) { | 50 | if (this.search !== null) { |
43 | observable = this._videosService.searchVideos(this.search); | 51 | observable = this._videosService.searchVideos(this.search, this.pagination); |
44 | } else { | 52 | } else { |
45 | observable = this._videosService.getVideos(); | 53 | observable = this._videosService.getVideos(this.pagination); |
46 | } | 54 | } |
47 | 55 | ||
48 | observable.subscribe( | 56 | observable.subscribe( |
49 | videos => this.videos = videos, | 57 | ({ videos, totalVideos }) => { |
58 | this.videos = videos; | ||
59 | this.pagination.total = totalVideos; | ||
60 | }, | ||
50 | error => alert(error) | 61 | error => alert(error) |
51 | ); | 62 | ); |
52 | } | 63 | } |