aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/video-list/video-list.component.html9
-rw-r--r--client/src/app/videos/video-list/video-list.component.ts80
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.html4
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.ts3
4 files changed, 71 insertions, 25 deletions
diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/video-list.component.html
index 0e17ef2c4..e119517a8 100644
--- a/client/src/app/videos/video-list/video-list.component.html
+++ b/client/src/app/videos/video-list/video-list.component.html
@@ -8,13 +8,16 @@
8</div> 8</div>
9 9
10<div class="videos-miniatures"> 10<div class="videos-miniatures">
11 <div class="col-md-12 no-video" *ngIf="noVideo()">There is no video.</div> 11 <div class="col-md-12 no-video" *ngIf="isThereNoVideo()">There is no video.</div>
12 12
13 <my-video-miniature class="ng-animate "*ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)"> 13 <my-video-miniature
14 class="ng-animate"
15 *ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort" (removed)="onRemoved(video)"
16 >
14 </my-video-miniature> 17 </my-video-miniature>
15</div> 18</div>
16 19
17<pagination *ngIf="pagination.totalItems !== null" 20<pagination *ngIf="pagination.totalItems !== null"
18 [totalItems]="pagination.totalItems" [itemsPerPage]="pagination.itemsPerPage" [maxSize]="6" [boundaryLinks]="true" [rotate]="false" 21 [totalItems]="pagination.totalItems" [itemsPerPage]="pagination.itemsPerPage" [maxSize]="6" [boundaryLinks]="true" [rotate]="false"
19 [(ngModel)]="pagination.currentPage" (pageChanged)="getVideos()" 22 [(ngModel)]="pagination.currentPage" (pageChanged)="onPageChanged($event)"
20></pagination> 23></pagination>
diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
index 0ebf0ef5c..5691d684e 100644
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -37,7 +37,8 @@ export class VideoListComponent implements OnInit, OnDestroy {
37 videos: Video[] = []; 37 videos: Video[] = [];
38 38
39 private search: Search; 39 private search: Search;
40 private sub: any; 40 private subActivatedRoute: any;
41 private subSearch: any;
41 42
42 constructor( 43 constructor(
43 private authService: AuthService, 44 private authService: AuthService,
@@ -49,33 +50,35 @@ export class VideoListComponent implements OnInit, OnDestroy {
49 ) {} 50 ) {}
50 51
51 ngOnInit() { 52 ngOnInit() {
52 this.sub = this.route.params.subscribe(routeParams => { 53 if (this.authService.isLoggedIn()) {
53 if (this.authService.isLoggedIn()) { 54 this.user = User.load();
54 this.user = User.load(); 55 }
55 }
56 56
57 this.search = { 57 // Subscribe to route changes
58 value: routeParams['search'], 58 this.subActivatedRoute = this.route.params.subscribe(routeParams => {
59 field: <SearchField>routeParams['field'] 59 this.loadRouteParams(routeParams);
60 };
61 60
62 // Update the search service component 61 // Update the search service component
63 this.searchService.searchChanged.next(this.search); 62 this.searchService.updateSearch.next(this.search);
63 this.getVideos();
64 });
64 65
65 this.sort = <SortField>routeParams['sort'] || '-createdDate'; 66 // Subscribe to search changes
67 this.subSearch = this.searchService.searchUpdated.subscribe(search => {
68 this.search = search;
66 69
67 this.getVideos(); 70 this.navigateToNewParams();
68 }); 71 });
69 } 72 }
70 73
71 ngOnDestroy() { 74 ngOnDestroy() {
72 this.sub.unsubscribe(); 75 this.subActivatedRoute.unsubscribe();
76 this.subSearch.unsubscribe();
73 } 77 }
74 78
75 getVideos(detectChanges = true) { 79 getVideos(detectChanges = true) {
76 this.loading.next(true); 80 this.loading.next(true);
77 this.videos = []; 81 this.videos = [];
78 this.pagination.currentPage = 1;
79 82
80 this.changeDetector.detectChanges(); 83 this.changeDetector.detectChanges();
81 84
@@ -98,26 +101,65 @@ export class VideoListComponent implements OnInit, OnDestroy {
98 ); 101 );
99 } 102 }
100 103
101 noVideo() { 104 isThereNoVideo() {
102 return !this.loading && this.videos.length === 0; 105 return !this.loading.getValue() && this.videos.length === 0;
106 }
107
108 onPageChanged(event: any) {
109 // Be sure the current page is set
110 this.pagination.currentPage = event.page;
111
112 this.navigateToNewParams();
103 } 113 }
104 114
105 onRemoved(video: Video) { 115 onRemoved(video: Video) {
106 this.getVideos(false); 116 this.getVideos();
107 } 117 }
108 118
109 onSort(sort: SortField) { 119 onSort(sort: SortField) {
110 this.sort = sort; 120 this.sort = sort;
111 121
122 this.navigateToNewParams();
123 }
124
125 private buildRouteParams() {
126 // There is always a sort and a current page
112 const params: any = { 127 const params: any = {
113 sort: this.sort 128 sort: this.sort,
129 page: this.pagination.currentPage
114 }; 130 };
115 131
132 // Maybe there is a search
116 if (this.search.value) { 133 if (this.search.value) {
117 params.field = this.search.field; 134 params.field = this.search.field;
118 params.search = this.search.value; 135 params.search = this.search.value;
119 } 136 }
120 137
121 this.router.navigate(['/videos/list', params]); 138 return params;
139 }
140
141 private loadRouteParams(routeParams) {
142 if (routeParams['search'] !== undefined) {
143 this.search = {
144 value: routeParams['search'],
145 field: <SearchField>routeParams['field']
146 };
147 } else {
148 this.search = {
149 value: '',
150 field: 'name'
151 };
152 }
153
154 this.sort = <SortField>routeParams['sort'] || '-createdDate';
155
156 this.pagination.currentPage = parseInt(routeParams['page']) || 1;
157
158 this.changeDetector.detectChanges();
159 }
160
161 private navigateToNewParams() {
162 const routeParams = this.buildRouteParams();
163 this.router.navigate(['/videos/list', routeParams]);
122 } 164 }
123} 165}
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index 3cf28620e..373ff6bfb 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -17,12 +17,12 @@
17 17
18 <div class="video-miniature-tags"> 18 <div class="video-miniature-tags">
19 <span *ngFor="let tag of video.tags" class="video-miniature-tag"> 19 <span *ngFor="let tag of video.tags" class="video-miniature-tag">
20 <a [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">{{ tag }}</a> 20 <a [routerLink]="['/videos/list', { field: 'tags', search: tag, sort: currentSort }]" class="label label-primary">{{ tag }}</a>
21 </span> 21 </span>
22 </div> 22 </div>
23 </span> 23 </span>
24 24
25 <a [routerLink]="['/videos/list', { field: 'author', search: video.author }]" class="video-miniature-author">{{ video.by }}</a> 25 <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
26 <span class="video-miniature-created-date">{{ video.createdDate | date:'short' }}</span> 26 <span class="video-miniature-created-date">{{ video.createdDate | date:'short' }}</span>
27 </div> 27 </div>
28</div> 28</div>
diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/video-miniature.component.ts
index 90645d67f..84bab950e 100644
--- a/client/src/app/videos/video-list/video-miniature.component.ts
+++ b/client/src/app/videos/video-list/video-miniature.component.ts
@@ -2,7 +2,7 @@ import { DatePipe } from '@angular/common';
2import { Component, Input, Output, EventEmitter } from '@angular/core'; 2import { Component, Input, Output, EventEmitter } from '@angular/core';
3import { ROUTER_DIRECTIVES } from '@angular/router'; 3import { ROUTER_DIRECTIVES } from '@angular/router';
4 4
5import { Video, VideoService } from '../shared'; 5import { SortField, Video, VideoService } from '../shared';
6import { User } from '../../shared'; 6import { User } from '../../shared';
7 7
8@Component({ 8@Component({
@@ -16,6 +16,7 @@ import { User } from '../../shared';
16export class VideoMiniatureComponent { 16export class VideoMiniatureComponent {
17 @Output() removed = new EventEmitter<any>(); 17 @Output() removed = new EventEmitter<any>();
18 18
19 @Input() currentSort: SortField;
19 @Input() user: User; 20 @Input() user: User;
20 @Input() video: Video; 21 @Input() video: Video;
21 22