aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/angular/videos/components
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-05-22 10:43:06 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-05-22 10:44:35 +0200
commit322940742b4dca168de6dfed0d1ebf5926dab528 (patch)
tree7b7fdb77595aa7d6a89d1045ab6012a9e1d68aab /client/angular/videos/components
parent46246b5f194caafba4e3a72e9365acd8b35785de (diff)
downloadPeerTube-322940742b4dca168de6dfed0d1ebf5926dab528.tar.gz
PeerTube-322940742b4dca168de6dfed0d1ebf5926dab528.tar.zst
PeerTube-322940742b4dca168de6dfed0d1ebf5926dab528.zip
Add pagination support to the client
Diffstat (limited to 'client/angular/videos/components')
-rw-r--r--client/angular/videos/components/list/video-miniature.component.html2
-rw-r--r--client/angular/videos/components/list/video-miniature.component.scss6
-rw-r--r--client/angular/videos/components/list/videos-list.component.html14
-rw-r--r--client/angular/videos/components/list/videos-list.component.scss10
-rw-r--r--client/angular/videos/components/list/videos-list.component.ts23
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
6my-videos-miniature { 5my-videos-miniature {
7 display: inline-block; 6 display: inline-block;
8} 7}
8
9pagination {
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 @@
1import { Component, OnInit } from '@angular/core'; 1import { Component, OnInit } from '@angular/core';
2import { ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated'; 2import { ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated';
3 3
4import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
5
4import { AuthService } from '../../../users/services/auth.service'; 6import { AuthService } from '../../../users/services/auth.service';
7import { Pagination } from '../../pagination';
5import { User } from '../../../users/models/user'; 8import { User } from '../../../users/models/user';
6import { VideosService } from '../../videos.service'; 9import { VideosService } from '../../videos.service';
7import { Video } from '../../video'; 10import { 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
17export class VideosListComponent implements OnInit { 20export 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 }