aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/video-list
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos/video-list')
-rw-r--r--client/src/app/videos/video-list/index.ts5
-rw-r--r--client/src/app/videos/video-list/my-videos.component.ts36
-rw-r--r--client/src/app/videos/video-list/shared/abstract-video-list.html (renamed from client/src/app/videos/video-list/video-list.component.html)0
-rw-r--r--client/src/app/videos/video-list/shared/abstract-video-list.scss (renamed from client/src/app/videos/video-list/video-list.component.scss)0
-rw-r--r--client/src/app/videos/video-list/shared/abstract-video-list.ts104
-rw-r--r--client/src/app/videos/video-list/shared/index.ts4
-rw-r--r--client/src/app/videos/video-list/shared/loader.component.html (renamed from client/src/app/videos/video-list/loader.component.html)0
-rw-r--r--client/src/app/videos/video-list/shared/loader.component.ts (renamed from client/src/app/videos/video-list/loader.component.ts)0
-rw-r--r--client/src/app/videos/video-list/shared/video-miniature.component.html (renamed from client/src/app/videos/video-list/video-miniature.component.html)0
-rw-r--r--client/src/app/videos/video-list/shared/video-miniature.component.scss (renamed from client/src/app/videos/video-list/video-miniature.component.scss)0
-rw-r--r--client/src/app/videos/video-list/shared/video-miniature.component.ts (renamed from client/src/app/videos/video-list/video-miniature.component.ts)4
-rw-r--r--client/src/app/videos/video-list/shared/video-sort.component.html (renamed from client/src/app/videos/video-list/video-sort.component.html)0
-rw-r--r--client/src/app/videos/video-list/shared/video-sort.component.ts (renamed from client/src/app/videos/video-list/video-sort.component.ts)2
-rw-r--r--client/src/app/videos/video-list/video-list.component.ts102
14 files changed, 170 insertions, 87 deletions
diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts
index a490e6bb5..ed2bb1657 100644
--- a/client/src/app/videos/video-list/index.ts
+++ b/client/src/app/videos/video-list/index.ts
@@ -1,4 +1,3 @@
1export * from './loader.component' 1export * from './my-videos.component'
2export * from './video-list.component' 2export * from './video-list.component'
3export * from './video-miniature.component' 3export * from './shared'
4export * from './video-sort.component'
diff --git a/client/src/app/videos/video-list/my-videos.component.ts b/client/src/app/videos/video-list/my-videos.component.ts
new file mode 100644
index 000000000..648741a40
--- /dev/null
+++ b/client/src/app/videos/video-list/my-videos.component.ts
@@ -0,0 +1,36 @@
1import { Component, OnDestroy, OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router'
3
4import { NotificationsService } from 'angular2-notifications'
5
6import { AbstractVideoList } from './shared'
7import { VideoService } from '../shared'
8
9@Component({
10 selector: 'my-videos',
11 styleUrls: [ './shared/abstract-video-list.scss' ],
12 templateUrl: './shared/abstract-video-list.html'
13})
14export class MyVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
15
16 constructor (
17 protected router: Router,
18 protected route: ActivatedRoute,
19 protected notificationsService: NotificationsService,
20 private videoService: VideoService
21 ) {
22 super()
23 }
24
25 ngOnInit () {
26 super.ngOnInit()
27 }
28
29 ngOnDestroy () {
30 this.subActivatedRoute.unsubscribe()
31 }
32
33 getVideosObservable () {
34 return this.videoService.getMyVideos(this.pagination, this.sort)
35 }
36}
diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/shared/abstract-video-list.html
index 680fba3f5..680fba3f5 100644
--- a/client/src/app/videos/video-list/video-list.component.html
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.html
diff --git a/client/src/app/videos/video-list/video-list.component.scss b/client/src/app/videos/video-list/shared/abstract-video-list.scss
index 4b4409602..4b4409602 100644
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.scss
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
new file mode 100644
index 000000000..87d5bc48a
--- /dev/null
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.ts
@@ -0,0 +1,104 @@
1import { OnDestroy, OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router'
3import { Subscription } from 'rxjs/Subscription'
4import { BehaviorSubject } from 'rxjs/BehaviorSubject'
5import { Observable } from 'rxjs/Observable'
6
7import { NotificationsService } from 'angular2-notifications'
8
9import {
10 SortField,
11 Video,
12 VideoPagination
13} from '../../shared'
14
15export abstract class AbstractVideoList implements OnInit, OnDestroy {
16 loading: BehaviorSubject<boolean> = new BehaviorSubject(false)
17 pagination: VideoPagination = {
18 currentPage: 1,
19 itemsPerPage: 25,
20 totalItems: null
21 }
22 sort: SortField
23 videos: Video[] = []
24
25 protected notificationsService: NotificationsService
26 protected router: Router
27 protected route: ActivatedRoute
28
29 protected subActivatedRoute: Subscription
30
31 abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}>
32
33 ngOnInit () {
34 // Subscribe to route changes
35 this.subActivatedRoute = this.route.params.subscribe(routeParams => {
36 this.loadRouteParams(routeParams)
37
38 this.getVideos()
39 })
40 }
41
42 ngOnDestroy () {
43 this.subActivatedRoute.unsubscribe()
44 }
45
46 getVideos () {
47 this.loading.next(true)
48 this.videos = []
49
50 const observable = this.getVideosObservable()
51
52 observable.subscribe(
53 ({ videos, totalVideos }) => {
54 this.videos = videos
55 this.pagination.totalItems = totalVideos
56
57 this.loading.next(false)
58 },
59 error => this.notificationsService.error('Error', error.text)
60 )
61 }
62
63 isThereNoVideo () {
64 return !this.loading.getValue() && this.videos.length === 0
65 }
66
67 onPageChanged (event: { page: number }) {
68 // Be sure the current page is set
69 this.pagination.currentPage = event.page
70
71 this.navigateToNewParams()
72 }
73
74 onSort (sort: SortField) {
75 this.sort = sort
76
77 this.navigateToNewParams()
78 }
79
80 protected buildRouteParams () {
81 // There is always a sort and a current page
82 const params = {
83 sort: this.sort,
84 page: this.pagination.currentPage
85 }
86
87 return params
88 }
89
90 protected loadRouteParams (routeParams: { [ key: string ]: any }) {
91 this.sort = routeParams['sort'] as SortField || '-createdAt'
92
93 if (routeParams['page'] !== undefined) {
94 this.pagination.currentPage = parseInt(routeParams['page'], 10)
95 } else {
96 this.pagination.currentPage = 1
97 }
98 }
99
100 protected navigateToNewParams () {
101 const routeParams = this.buildRouteParams()
102 this.router.navigate([ '/videos/list', routeParams ])
103 }
104}
diff --git a/client/src/app/videos/video-list/shared/index.ts b/client/src/app/videos/video-list/shared/index.ts
new file mode 100644
index 000000000..2c9804e6d
--- /dev/null
+++ b/client/src/app/videos/video-list/shared/index.ts
@@ -0,0 +1,4 @@
1export * from './abstract-video-list'
2export * from './loader.component'
3export * from './video-miniature.component'
4export * from './video-sort.component'
diff --git a/client/src/app/videos/video-list/loader.component.html b/client/src/app/videos/video-list/shared/loader.component.html
index 38d06950e..38d06950e 100644
--- a/client/src/app/videos/video-list/loader.component.html
+++ b/client/src/app/videos/video-list/shared/loader.component.html
diff --git a/client/src/app/videos/video-list/loader.component.ts b/client/src/app/videos/video-list/shared/loader.component.ts
index f37d70c85..f37d70c85 100644
--- a/client/src/app/videos/video-list/loader.component.ts
+++ b/client/src/app/videos/video-list/shared/loader.component.ts
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/shared/video-miniature.component.html
index abe87025f..abe87025f 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/shared/video-miniature.component.html
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss
index 066792d10..066792d10 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/shared/video-miniature.component.scss
diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/shared/video-miniature.component.ts
index 18434dad2..e5a87907b 100644
--- a/client/src/app/videos/video-list/video-miniature.component.ts
+++ b/client/src/app/videos/video-list/shared/video-miniature.component.ts
@@ -1,7 +1,7 @@
1import { Component, Input } from '@angular/core' 1import { Component, Input } from '@angular/core'
2 2
3import { SortField, Video } from '../shared' 3import { SortField, Video } from '../../shared'
4import { User } from '../../shared' 4import { User } from '../../../shared'
5 5
6@Component({ 6@Component({
7 selector: 'my-video-miniature', 7 selector: 'my-video-miniature',
diff --git a/client/src/app/videos/video-list/video-sort.component.html b/client/src/app/videos/video-list/shared/video-sort.component.html
index 3bece0b22..3bece0b22 100644
--- a/client/src/app/videos/video-list/video-sort.component.html
+++ b/client/src/app/videos/video-list/shared/video-sort.component.html
diff --git a/client/src/app/videos/video-list/video-sort.component.ts b/client/src/app/videos/video-list/shared/video-sort.component.ts
index 64916bf16..8aa89d32b 100644
--- a/client/src/app/videos/video-list/video-sort.component.ts
+++ b/client/src/app/videos/video-list/shared/video-sort.component.ts
@@ -1,6 +1,6 @@
1import { Component, EventEmitter, Input, Output } from '@angular/core' 1import { Component, EventEmitter, Input, Output } from '@angular/core'
2 2
3import { SortField } from '../shared' 3import { SortField } from '../../shared'
4 4
5@Component({ 5@Component({
6 selector: 'my-video-sort', 6 selector: 'my-video-sort',
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 bf6f60215..784162679 100644
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -1,51 +1,33 @@
1import { Component, OnDestroy, OnInit } from '@angular/core' 1import { Component, OnDestroy, OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router' 2import { ActivatedRoute, Router } from '@angular/router'
3import { Subscription } from 'rxjs/Subscription' 3import { Subscription } from 'rxjs/Subscription'
4import { BehaviorSubject } from 'rxjs/BehaviorSubject'
5 4
6import { NotificationsService } from 'angular2-notifications' 5import { NotificationsService } from 'angular2-notifications'
7 6
8import { AuthService } from '../../core' 7import { VideoService } from '../shared'
9import { 8import { Search, SearchField, SearchService } from '../../shared'
10 SortField, 9import { AbstractVideoList } from './shared'
11 Video,
12 VideoService,
13 VideoPagination
14} from '../shared'
15import { Search, SearchField, SearchService, User } from '../../shared'
16 10
17@Component({ 11@Component({
18 selector: 'my-videos-list', 12 selector: 'my-videos-list',
19 styleUrls: [ './video-list.component.scss' ], 13 styleUrls: [ './shared/abstract-video-list.scss' ],
20 templateUrl: './video-list.component.html' 14 templateUrl: './shared/abstract-video-list.html'
21}) 15})
22export class VideoListComponent implements OnInit, OnDestroy { 16export class VideoListComponent extends AbstractVideoList implements OnInit, OnDestroy {
23 loading: BehaviorSubject<boolean> = new BehaviorSubject(false)
24 pagination: VideoPagination = {
25 currentPage: 1,
26 itemsPerPage: 25,
27 totalItems: null
28 }
29 sort: SortField
30 user: User
31 videos: Video[] = []
32
33 private search: Search 17 private search: Search
34 private subActivatedRoute: Subscription
35 private subSearch: Subscription 18 private subSearch: Subscription
36 19
37 constructor ( 20 constructor (
38 private authService: AuthService, 21 protected router: Router,
39 private notificationsService: NotificationsService, 22 protected route: ActivatedRoute,
40 private router: Router, 23 protected notificationsService: NotificationsService,
41 private route: ActivatedRoute,
42 private videoService: VideoService, 24 private videoService: VideoService,
43 private searchService: SearchService 25 private searchService: SearchService
44 ) {} 26 ) {
27 super()
28 }
45 29
46 ngOnInit () { 30 ngOnInit () {
47 this.user = this.authService.getUser()
48
49 // Subscribe to route changes 31 // Subscribe to route changes
50 this.subActivatedRoute = this.route.params.subscribe(routeParams => { 32 this.subActivatedRoute = this.route.params.subscribe(routeParams => {
51 this.loadRouteParams(routeParams) 33 this.loadRouteParams(routeParams)
@@ -66,14 +48,12 @@ export class VideoListComponent implements OnInit, OnDestroy {
66 } 48 }
67 49
68 ngOnDestroy () { 50 ngOnDestroy () {
69 this.subActivatedRoute.unsubscribe() 51 super.ngOnDestroy()
52
70 this.subSearch.unsubscribe() 53 this.subSearch.unsubscribe()
71 } 54 }
72 55
73 getVideos () { 56 getVideosObservable () {
74 this.loading.next(true)
75 this.videos = []
76
77 let observable = null 57 let observable = null
78 if (this.search.value) { 58 if (this.search.value) {
79 observable = this.videoService.searchVideos(this.search, this.pagination, this.sort) 59 observable = this.videoService.searchVideos(this.search, this.pagination, this.sort)
@@ -81,40 +61,11 @@ export class VideoListComponent implements OnInit, OnDestroy {
81 observable = this.videoService.getVideos(this.pagination, this.sort) 61 observable = this.videoService.getVideos(this.pagination, this.sort)
82 } 62 }
83 63
84 observable.subscribe( 64 return observable
85 ({ videos, totalVideos }) => {
86 this.videos = videos
87 this.pagination.totalItems = totalVideos
88
89 this.loading.next(false)
90 },
91 error => this.notificationsService.error('Error', error.text)
92 )
93 }
94
95 isThereNoVideo () {
96 return !this.loading.getValue() && this.videos.length === 0
97 }
98
99 onPageChanged (event: { page: number }) {
100 // Be sure the current page is set
101 this.pagination.currentPage = event.page
102
103 this.navigateToNewParams()
104 } 65 }
105 66
106 onSort (sort: SortField) { 67 protected buildRouteParams () {
107 this.sort = sort 68 const params = super.buildRouteParams()
108
109 this.navigateToNewParams()
110 }
111
112 private buildRouteParams () {
113 // There is always a sort and a current page
114 const params = {
115 sort: this.sort,
116 page: this.pagination.currentPage
117 }
118 69
119 // Maybe there is a search 70 // Maybe there is a search
120 if (this.search.value) { 71 if (this.search.value) {
@@ -125,7 +76,9 @@ export class VideoListComponent implements OnInit, OnDestroy {
125 return params 76 return params
126 } 77 }
127 78
128 private loadRouteParams (routeParams: { [ key: string ]: any }) { 79 protected loadRouteParams (routeParams: { [ key: string ]: any }) {
80 super.loadRouteParams(routeParams)
81
129 if (routeParams['search'] !== undefined) { 82 if (routeParams['search'] !== undefined) {
130 this.search = { 83 this.search = {
131 value: routeParams['search'], 84 value: routeParams['search'],
@@ -137,18 +90,5 @@ export class VideoListComponent implements OnInit, OnDestroy {
137 field: 'name' 90 field: 'name'
138 } 91 }
139 } 92 }
140
141 this.sort = routeParams['sort'] as SortField || '-createdAt'
142
143 if (routeParams['page'] !== undefined) {
144 this.pagination.currentPage = parseInt(routeParams['page'], 10)
145 } else {
146 this.pagination.currentPage = 1
147 }
148 }
149
150 private navigateToNewParams () {
151 const routeParams = this.buildRouteParams()
152 this.router.navigate([ '/videos/list', routeParams ])
153 } 93 }
154} 94}