diff options
Diffstat (limited to 'client')
-rw-r--r-- | client/app/app.component.ts | 16 | ||||
-rw-r--r-- | client/app/shared/search.component.ts | 16 | ||||
-rw-r--r-- | client/app/users/login/login.component.ts | 5 | ||||
-rw-r--r-- | client/app/users/shared/auth.service.ts | 60 | ||||
-rw-r--r-- | client/app/videos/shared/video.model.ts | 59 | ||||
-rw-r--r-- | client/app/videos/shared/video.service.ts | 39 | ||||
-rw-r--r-- | client/app/videos/video-add/video-add.component.ts | 21 | ||||
-rw-r--r-- | client/app/videos/video-list/video-list.component.ts | 13 | ||||
-rw-r--r-- | client/app/videos/video-list/video-miniature.component.ts | 10 | ||||
-rw-r--r-- | client/app/videos/video-watch/video-watch.component.ts | 30 |
10 files changed, 138 insertions, 131 deletions
diff --git a/client/app/app.component.ts b/client/app/app.component.ts index 20c8c8724..965848105 100644 --- a/client/app/app.component.ts +++ b/client/app/app.component.ts | |||
@@ -49,13 +49,13 @@ import { | |||
49 | }) | 49 | }) |
50 | 50 | ||
51 | export class AppComponent { | 51 | export class AppComponent { |
52 | isLoggedIn: boolean; | ||
53 | search_field: string = name; | ||
54 | choices = []; | 52 | choices = []; |
53 | isLoggedIn: boolean; | ||
55 | 54 | ||
56 | constructor(private friendService: FriendService, | 55 | constructor( |
57 | private authService: AuthService, | 56 | private authService: AuthService, |
58 | private router: Router | 57 | private friendService: FriendService, |
58 | private router: Router | ||
59 | ) { | 59 | ) { |
60 | this.isLoggedIn = this.authService.isLoggedIn(); | 60 | this.isLoggedIn = this.authService.isLoggedIn(); |
61 | 61 | ||
@@ -71,8 +71,8 @@ export class AppComponent { | |||
71 | onSearch(search: Search) { | 71 | onSearch(search: Search) { |
72 | if (search.value !== '') { | 72 | if (search.value !== '') { |
73 | const params = { | 73 | const params = { |
74 | search: search.value, | 74 | field: search.field, |
75 | field: search.field | 75 | search: search.value |
76 | }; | 76 | }; |
77 | this.router.navigate(['VideosList', params]); | 77 | this.router.navigate(['VideosList', params]); |
78 | } else { | 78 | } else { |
@@ -100,7 +100,7 @@ export class AppComponent { | |||
100 | quitFriends() { | 100 | quitFriends() { |
101 | this.friendService.quitFriends().subscribe( | 101 | this.friendService.quitFriends().subscribe( |
102 | status => { | 102 | status => { |
103 | alert('Quit friends!'); | 103 | alert('Quit friends!'); |
104 | }, | 104 | }, |
105 | error => alert(error) | 105 | error => alert(error) |
106 | ); | 106 | ); |
diff --git a/client/app/shared/search.component.ts b/client/app/shared/search.component.ts index 674518aba..e1e30b9af 100644 --- a/client/app/shared/search.component.ts +++ b/client/app/shared/search.component.ts | |||
@@ -14,26 +14,21 @@ import { SearchField } from './search-field.type'; | |||
14 | export class SearchComponent { | 14 | export class SearchComponent { |
15 | @Output() search = new EventEmitter<Search>(); | 15 | @Output() search = new EventEmitter<Search>(); |
16 | 16 | ||
17 | searchCriterias: Search = { | ||
18 | field: 'name', | ||
19 | value: '' | ||
20 | }; | ||
21 | |||
22 | fieldChoices = { | 17 | fieldChoices = { |
23 | name: 'Name', | 18 | name: 'Name', |
24 | author: 'Author', | 19 | author: 'Author', |
25 | podUrl: 'Pod Url', | 20 | podUrl: 'Pod Url', |
26 | magnetUri: 'Magnet Uri' | 21 | magnetUri: 'Magnet Uri' |
27 | }; | 22 | }; |
23 | searchCriterias: Search = { | ||
24 | field: 'name', | ||
25 | value: '' | ||
26 | }; | ||
28 | 27 | ||
29 | get choiceKeys() { | 28 | get choiceKeys() { |
30 | return Object.keys(this.fieldChoices); | 29 | return Object.keys(this.fieldChoices); |
31 | } | 30 | } |
32 | 31 | ||
33 | getStringChoice(choiceKey: SearchField) { | ||
34 | return this.fieldChoices[choiceKey]; | ||
35 | } | ||
36 | |||
37 | choose($event: MouseEvent, choice: SearchField) { | 32 | choose($event: MouseEvent, choice: SearchField) { |
38 | $event.preventDefault(); | 33 | $event.preventDefault(); |
39 | $event.stopPropagation(); | 34 | $event.stopPropagation(); |
@@ -45,4 +40,7 @@ export class SearchComponent { | |||
45 | this.search.emit(this.searchCriterias); | 40 | this.search.emit(this.searchCriterias); |
46 | } | 41 | } |
47 | 42 | ||
43 | getStringChoice(choiceKey: SearchField) { | ||
44 | return this.fieldChoices[choiceKey]; | ||
45 | } | ||
48 | } | 46 | } |
diff --git a/client/app/users/login/login.component.ts b/client/app/users/login/login.component.ts index 8e369541d..09c5f1af7 100644 --- a/client/app/users/login/login.component.ts +++ b/client/app/users/login/login.component.ts | |||
@@ -10,7 +10,10 @@ import { AuthService, AuthStatus, User } from '../shared/index'; | |||
10 | }) | 10 | }) |
11 | 11 | ||
12 | export class UserLoginComponent { | 12 | export class UserLoginComponent { |
13 | constructor(private authService: AuthService, private router: Router) {} | 13 | constructor( |
14 | private authService: AuthService, | ||
15 | private router: Router | ||
16 | ) {} | ||
14 | 17 | ||
15 | login(username: string, password: string) { | 18 | login(username: string, password: string) { |
16 | this.authService.login(username, password).subscribe( | 19 | this.authService.login(username, password).subscribe( |
diff --git a/client/app/users/shared/auth.service.ts b/client/app/users/shared/auth.service.ts index b1da94436..d63fe38f3 100644 --- a/client/app/users/shared/auth.service.ts +++ b/client/app/users/shared/auth.service.ts | |||
@@ -7,14 +7,14 @@ import { User } from './user.model'; | |||
7 | 7 | ||
8 | @Injectable() | 8 | @Injectable() |
9 | export class AuthService { | 9 | export class AuthService { |
10 | private static BASE_LOGIN_URL = '/api/v1/users/token'; | ||
11 | private static BASE_CLIENT_URL = '/api/v1/users/client'; | 10 | private static BASE_CLIENT_URL = '/api/v1/users/client'; |
11 | private static BASE_LOGIN_URL = '/api/v1/users/token'; | ||
12 | 12 | ||
13 | loginChangedSource: Observable<AuthStatus>; | 13 | loginChangedSource: Observable<AuthStatus>; |
14 | 14 | ||
15 | private loginChanged: Subject<AuthStatus>; | ||
16 | private clientId: string; | 15 | private clientId: string; |
17 | private clientSecret: string; | 16 | private clientSecret: string; |
17 | private loginChanged: Subject<AuthStatus>; | ||
18 | 18 | ||
19 | constructor(private http: Http) { | 19 | constructor(private http: Http) { |
20 | this.loginChanged = new Subject<AuthStatus>(); | 20 | this.loginChanged = new Subject<AuthStatus>(); |
@@ -37,40 +37,14 @@ export class AuthService { | |||
37 | ); | 37 | ); |
38 | } | 38 | } |
39 | 39 | ||
40 | login(username: string, password: string) { | 40 | getAuthRequestOptions(): RequestOptions { |
41 | let body = new URLSearchParams(); | 41 | return new RequestOptions({ headers: this.getRequestHeader() }); |
42 | body.set('client_id', this.clientId); | ||
43 | body.set('client_secret', this.clientSecret); | ||
44 | body.set('response_type', 'code'); | ||
45 | body.set('grant_type', 'password'); | ||
46 | body.set('scope', 'upload'); | ||
47 | body.set('username', username); | ||
48 | body.set('password', password); | ||
49 | |||
50 | let headers = new Headers(); | ||
51 | headers.append('Content-Type', 'application/x-www-form-urlencoded'); | ||
52 | |||
53 | let options = { | ||
54 | headers: headers | ||
55 | }; | ||
56 | |||
57 | return this.http.post(AuthService.BASE_LOGIN_URL, body.toString(), options) | ||
58 | .map(res => res.json()) | ||
59 | .catch(this.handleError); | ||
60 | } | ||
61 | |||
62 | logout() { | ||
63 | // TODO make HTTP request | ||
64 | } | 42 | } |
65 | 43 | ||
66 | getRequestHeader() { | 44 | getRequestHeader() { |
67 | return new Headers({ 'Authorization': `${this.getTokenType()} ${this.getToken()}` }); | 45 | return new Headers({ 'Authorization': `${this.getTokenType()} ${this.getToken()}` }); |
68 | } | 46 | } |
69 | 47 | ||
70 | getAuthRequestOptions(): RequestOptions { | ||
71 | return new RequestOptions({ headers: this.getRequestHeader() }); | ||
72 | } | ||
73 | |||
74 | getToken() { | 48 | getToken() { |
75 | return localStorage.getItem('access_token'); | 49 | return localStorage.getItem('access_token'); |
76 | } | 50 | } |
@@ -97,6 +71,32 @@ export class AuthService { | |||
97 | } | 71 | } |
98 | } | 72 | } |
99 | 73 | ||
74 | login(username: string, password: string) { | ||
75 | let body = new URLSearchParams(); | ||
76 | body.set('client_id', this.clientId); | ||
77 | body.set('client_secret', this.clientSecret); | ||
78 | body.set('response_type', 'code'); | ||
79 | body.set('grant_type', 'password'); | ||
80 | body.set('scope', 'upload'); | ||
81 | body.set('username', username); | ||
82 | body.set('password', password); | ||
83 | |||
84 | let headers = new Headers(); | ||
85 | headers.append('Content-Type', 'application/x-www-form-urlencoded'); | ||
86 | |||
87 | let options = { | ||
88 | headers: headers | ||
89 | }; | ||
90 | |||
91 | return this.http.post(AuthService.BASE_LOGIN_URL, body.toString(), options) | ||
92 | .map(res => res.json()) | ||
93 | .catch(this.handleError); | ||
94 | } | ||
95 | |||
96 | logout() { | ||
97 | // TODO make HTTP request | ||
98 | } | ||
99 | |||
100 | setStatus(status: AuthStatus) { | 100 | setStatus(status: AuthStatus) { |
101 | this.loginChanged.next(status); | 101 | this.loginChanged.next(status); |
102 | } | 102 | } |
diff --git a/client/app/videos/shared/video.model.ts b/client/app/videos/shared/video.model.ts index 2b018ad86..614403d79 100644 --- a/client/app/videos/shared/video.model.ts +++ b/client/app/videos/shared/video.model.ts | |||
@@ -1,24 +1,15 @@ | |||
1 | export class Video { | 1 | export class Video { |
2 | id: string; | 2 | author: string; |
3 | name: string; | 3 | by: string; |
4 | createdDate: Date; | ||
4 | description: string; | 5 | description: string; |
6 | duration: string; | ||
7 | id: string; | ||
8 | isLocal: boolean; | ||
5 | magnetUri: string; | 9 | magnetUri: string; |
10 | name: string; | ||
6 | podUrl: string; | 11 | podUrl: string; |
7 | isLocal: boolean; | ||
8 | thumbnailPath: string; | 12 | thumbnailPath: string; |
9 | author: string; | ||
10 | createdDate: Date; | ||
11 | by: string; | ||
12 | duration: string; | ||
13 | |||
14 | private static createDurationString(duration: number) { | ||
15 | const minutes = Math.floor(duration / 60); | ||
16 | const seconds = duration % 60; | ||
17 | const minutes_padding = minutes >= 10 ? '' : '0'; | ||
18 | const seconds_padding = seconds >= 10 ? '' : '0'; | ||
19 | |||
20 | return minutes_padding + minutes.toString() + ':' + seconds_padding + seconds.toString(); | ||
21 | } | ||
22 | 13 | ||
23 | private static createByString(author: string, podUrl: string) { | 14 | private static createByString(author: string, podUrl: string) { |
24 | let [ host, port ] = podUrl.replace(/^https?:\/\//, '').split(':'); | 15 | let [ host, port ] = podUrl.replace(/^https?:\/\//, '').split(':'); |
@@ -32,28 +23,38 @@ export class Video { | |||
32 | return author + '@' + host + port; | 23 | return author + '@' + host + port; |
33 | } | 24 | } |
34 | 25 | ||
26 | private static createDurationString(duration: number) { | ||
27 | const minutes = Math.floor(duration / 60); | ||
28 | const seconds = duration % 60; | ||
29 | const minutes_padding = minutes >= 10 ? '' : '0'; | ||
30 | const seconds_padding = seconds >= 10 ? '' : '0'; | ||
31 | |||
32 | return minutes_padding + minutes.toString() + ':' + seconds_padding + seconds.toString(); | ||
33 | } | ||
34 | |||
35 | constructor(hash: { | 35 | constructor(hash: { |
36 | id: string, | ||
37 | name: string, | ||
38 | description: string, | ||
39 | magnetUri: string, | ||
40 | podUrl: string, | ||
41 | isLocal: boolean, | ||
42 | thumbnailPath: string, | ||
43 | author: string, | 36 | author: string, |
44 | createdDate: string, | 37 | createdDate: string, |
38 | description: string, | ||
45 | duration: number; | 39 | duration: number; |
40 | id: string, | ||
41 | isLocal: boolean, | ||
42 | magnetUri: string, | ||
43 | name: string, | ||
44 | podUrl: string, | ||
45 | thumbnailPath: string | ||
46 | }) { | 46 | }) { |
47 | this.id = hash.id; | 47 | this.author = hash.author; |
48 | this.name = hash.name; | 48 | this.createdDate = new Date(hash.createdDate); |
49 | this.description = hash.description; | 49 | this.description = hash.description; |
50 | this.duration = Video.createDurationString(hash.duration); | ||
51 | this.id = hash.id; | ||
52 | this.isLocal = hash.isLocal; | ||
50 | this.magnetUri = hash.magnetUri; | 53 | this.magnetUri = hash.magnetUri; |
54 | this.name = hash.name; | ||
51 | this.podUrl = hash.podUrl; | 55 | this.podUrl = hash.podUrl; |
52 | this.isLocal = hash.isLocal; | ||
53 | this.thumbnailPath = hash.thumbnailPath; | 56 | this.thumbnailPath = hash.thumbnailPath; |
54 | this.author = hash.author; | 57 | |
55 | this.createdDate = new Date(hash.createdDate); | ||
56 | this.duration = Video.createDurationString(hash.duration); | ||
57 | this.by = Video.createByString(hash.author, hash.podUrl); | 58 | this.by = Video.createByString(hash.author, hash.podUrl); |
58 | } | 59 | } |
59 | 60 | ||
diff --git a/client/app/videos/shared/video.service.ts b/client/app/videos/shared/video.service.ts index b6e0800a0..7b6519f00 100644 --- a/client/app/videos/shared/video.service.ts +++ b/client/app/videos/shared/video.service.ts | |||
@@ -12,7 +12,16 @@ import { Video } from './video.model'; | |||
12 | export class VideoService { | 12 | export class VideoService { |
13 | private static BASE_VIDEO_URL = '/api/v1/videos/'; | 13 | private static BASE_VIDEO_URL = '/api/v1/videos/'; |
14 | 14 | ||
15 | constructor(private http: Http, private authService: AuthService) {} | 15 | constructor( |
16 | private authService: AuthService, | ||
17 | private http: Http | ||
18 | ) {} | ||
19 | |||
20 | getVideo(id: string) { | ||
21 | return this.http.get(VideoService.BASE_VIDEO_URL + id) | ||
22 | .map(res => <Video> res.json()) | ||
23 | .catch(this.handleError); | ||
24 | } | ||
16 | 25 | ||
17 | getVideos(pagination: Pagination, sort: SortField) { | 26 | getVideos(pagination: Pagination, sort: SortField) { |
18 | const params = this.createPaginationParams(pagination); | 27 | const params = this.createPaginationParams(pagination); |
@@ -25,12 +34,6 @@ export class VideoService { | |||
25 | .catch(this.handleError); | 34 | .catch(this.handleError); |
26 | } | 35 | } |
27 | 36 | ||
28 | getVideo(id: string) { | ||
29 | return this.http.get(VideoService.BASE_VIDEO_URL + id) | ||
30 | .map(res => <Video> res.json()) | ||
31 | .catch(this.handleError); | ||
32 | } | ||
33 | |||
34 | removeVideo(id: string) { | 37 | removeVideo(id: string) { |
35 | const options = this.authService.getAuthRequestOptions(); | 38 | const options = this.authService.getAuthRequestOptions(); |
36 | return this.http.delete(VideoService.BASE_VIDEO_URL + id, options) | 39 | return this.http.delete(VideoService.BASE_VIDEO_URL + id, options) |
@@ -50,6 +53,17 @@ export class VideoService { | |||
50 | .catch(this.handleError); | 53 | .catch(this.handleError); |
51 | } | 54 | } |
52 | 55 | ||
56 | private createPaginationParams(pagination: Pagination) { | ||
57 | const params = new URLSearchParams(); | ||
58 | const start: number = (pagination.currentPage - 1) * pagination.itemsPerPage; | ||
59 | const count: number = pagination.itemsPerPage; | ||
60 | |||
61 | params.set('start', start.toString()); | ||
62 | params.set('count', count.toString()); | ||
63 | |||
64 | return params; | ||
65 | } | ||
66 | |||
53 | private extractVideos(body: any) { | 67 | private extractVideos(body: any) { |
54 | const videos_json = body.data; | 68 | const videos_json = body.data; |
55 | const totalVideos = body.total; | 69 | const totalVideos = body.total; |
@@ -65,15 +79,4 @@ export class VideoService { | |||
65 | console.error(error); | 79 | console.error(error); |
66 | return Observable.throw(error.json().error || 'Server error'); | 80 | return Observable.throw(error.json().error || 'Server error'); |
67 | } | 81 | } |
68 | |||
69 | private createPaginationParams(pagination: Pagination) { | ||
70 | const params = new URLSearchParams(); | ||
71 | const start: number = (pagination.currentPage - 1) * pagination.itemsPerPage; | ||
72 | const count: number = pagination.itemsPerPage; | ||
73 | |||
74 | params.set('start', start.toString()); | ||
75 | params.set('count', count.toString()); | ||
76 | |||
77 | return params; | ||
78 | } | ||
79 | } | 82 | } |
diff --git a/client/app/videos/video-add/video-add.component.ts b/client/app/videos/video-add/video-add.component.ts index 67a04a2b4..b11475ae9 100644 --- a/client/app/videos/video-add/video-add.component.ts +++ b/client/app/videos/video-add/video-add.component.ts | |||
@@ -18,20 +18,21 @@ declare var jQuery: any; | |||
18 | }) | 18 | }) |
19 | 19 | ||
20 | export class VideoAddComponent implements OnInit { | 20 | export class VideoAddComponent implements OnInit { |
21 | user: User; | ||
22 | fileToUpload: any; | 21 | fileToUpload: any; |
23 | progressBar: { value: number; max: number; } = { value: 0, max: 0 }; | 22 | progressBar: { value: number; max: number; } = { value: 0, max: 0 }; |
23 | user: User; | ||
24 | 24 | ||
25 | private _form: any; | 25 | private form: any; |
26 | 26 | ||
27 | constructor( | 27 | constructor( |
28 | private _router: Router, private _elementRef: ElementRef, | 28 | private router: Router, |
29 | private _authService: AuthService | 29 | private elementRef: ElementRef, |
30 | private authService: AuthService | ||
30 | ) {} | 31 | ) {} |
31 | 32 | ||
32 | ngOnInit() { | 33 | ngOnInit() { |
33 | this.user = User.load(); | 34 | this.user = User.load(); |
34 | jQuery(this._elementRef.nativeElement).find('#videofile').fileupload({ | 35 | jQuery(this.elementRef.nativeElement).find('#videofile').fileupload({ |
35 | url: '/api/v1/videos', | 36 | url: '/api/v1/videos', |
36 | dataType: 'json', | 37 | dataType: 'json', |
37 | singleFileUploads: true, | 38 | singleFileUploads: true, |
@@ -39,7 +40,7 @@ export class VideoAddComponent implements OnInit { | |||
39 | autoupload: false, | 40 | autoupload: false, |
40 | 41 | ||
41 | add: (e, data) => { | 42 | add: (e, data) => { |
42 | this._form = data; | 43 | this.form = data; |
43 | this.fileToUpload = data['files'][0]; | 44 | this.fileToUpload = data['files'][0]; |
44 | }, | 45 | }, |
45 | 46 | ||
@@ -55,14 +56,14 @@ export class VideoAddComponent implements OnInit { | |||
55 | console.log('Video uploaded.'); | 56 | console.log('Video uploaded.'); |
56 | 57 | ||
57 | // Print all the videos once it's finished | 58 | // Print all the videos once it's finished |
58 | this._router.navigate(['VideosList']); | 59 | this.router.navigate(['VideosList']); |
59 | } | 60 | } |
60 | }); | 61 | }); |
61 | } | 62 | } |
62 | 63 | ||
63 | uploadFile() { | 64 | uploadFile() { |
64 | this._form.headers = this._authService.getRequestHeader().toJSON(); | 65 | this.form.headers = this.authService.getRequestHeader().toJSON(); |
65 | this._form.formData = jQuery(this._elementRef.nativeElement).find('form').serializeArray(); | 66 | this.form.formData = jQuery(this.elementRef.nativeElement).find('form').serializeArray(); |
66 | this._form.submit(); | 67 | this.form.submit(); |
67 | } | 68 | } |
68 | } | 69 | } |
diff --git a/client/app/videos/video-list/video-list.component.ts b/client/app/videos/video-list/video-list.component.ts index 3f54c98ce..23b97df32 100644 --- a/client/app/videos/video-list/video-list.component.ts +++ b/client/app/videos/video-list/video-list.component.ts | |||
@@ -23,23 +23,23 @@ import { VideoSortComponent } from './video-sort.component'; | |||
23 | }) | 23 | }) |
24 | 24 | ||
25 | export class VideoListComponent implements OnInit { | 25 | export class VideoListComponent implements OnInit { |
26 | user: User = null; | 26 | loading = false; |
27 | videos: Video[] = []; | ||
28 | pagination: Pagination = { | 27 | pagination: Pagination = { |
29 | currentPage: 1, | 28 | currentPage: 1, |
30 | itemsPerPage: 9, | 29 | itemsPerPage: 9, |
31 | total: 0 | 30 | total: 0 |
32 | }; | 31 | }; |
33 | sort: SortField; | 32 | sort: SortField; |
34 | loading = false; | 33 | user: User = null; |
34 | videos: Video[] = []; | ||
35 | 35 | ||
36 | private search: Search; | 36 | private search: Search; |
37 | 37 | ||
38 | constructor( | 38 | constructor( |
39 | private authService: AuthService, | 39 | private authService: AuthService, |
40 | private videoService: VideoService, | 40 | private router: Router, |
41 | private routeParams: RouteParams, | 41 | private routeParams: RouteParams, |
42 | private router: Router | 42 | private videoService: VideoService |
43 | ) { | 43 | ) { |
44 | this.search = { | 44 | this.search = { |
45 | value: this.routeParams.get('search'), | 45 | value: this.routeParams.get('search'), |
@@ -73,6 +73,7 @@ export class VideoListComponent implements OnInit { | |||
73 | ({ videos, totalVideos }) => { | 73 | ({ videos, totalVideos }) => { |
74 | this.videos = videos; | 74 | this.videos = videos; |
75 | this.pagination.total = totalVideos; | 75 | this.pagination.total = totalVideos; |
76 | |||
76 | this.loading = false; | 77 | this.loading = false; |
77 | }, | 78 | }, |
78 | error => alert(error) | 79 | error => alert(error) |
@@ -91,8 +92,8 @@ export class VideoListComponent implements OnInit { | |||
91 | }; | 92 | }; |
92 | 93 | ||
93 | if (this.search.value) { | 94 | if (this.search.value) { |
94 | params.search = this.search.value; | ||
95 | params.field = this.search.field; | 95 | params.field = this.search.field; |
96 | params.search = this.search.value; | ||
96 | } | 97 | } |
97 | 98 | ||
98 | this.router.navigate(['VideosList', params]); | 99 | this.router.navigate(['VideosList', params]); |
diff --git a/client/app/videos/video-list/video-miniature.component.ts b/client/app/videos/video-list/video-miniature.component.ts index 73416607a..3baa1ddd6 100644 --- a/client/app/videos/video-list/video-miniature.component.ts +++ b/client/app/videos/video-list/video-miniature.component.ts | |||
@@ -16,23 +16,23 @@ import { User } from '../../users/index'; | |||
16 | export class VideoMiniatureComponent { | 16 | export class VideoMiniatureComponent { |
17 | @Output() removed = new EventEmitter<any>(); | 17 | @Output() removed = new EventEmitter<any>(); |
18 | 18 | ||
19 | @Input() video: Video; | ||
20 | @Input() user: User; | 19 | @Input() user: User; |
20 | @Input() video: Video; | ||
21 | 21 | ||
22 | hovering = false; | 22 | hovering = false; |
23 | 23 | ||
24 | constructor(private videoService: VideoService) {} | 24 | constructor(private videoService: VideoService) {} |
25 | 25 | ||
26 | onHover() { | 26 | displayRemoveIcon() { |
27 | this.hovering = true; | 27 | return this.hovering && this.video.isRemovableBy(this.user); |
28 | } | 28 | } |
29 | 29 | ||
30 | onBlur() { | 30 | onBlur() { |
31 | this.hovering = false; | 31 | this.hovering = false; |
32 | } | 32 | } |
33 | 33 | ||
34 | displayRemoveIcon() { | 34 | onHover() { |
35 | return this.hovering && this.video.isRemovableBy(this.user); | 35 | this.hovering = true; |
36 | } | 36 | } |
37 | 37 | ||
38 | removeVideo(id: string) { | 38 | removeVideo(id: string) { |
diff --git a/client/app/videos/video-watch/video-watch.component.ts b/client/app/videos/video-watch/video-watch.component.ts index c159b4004..137db8f0b 100644 --- a/client/app/videos/video-watch/video-watch.component.ts +++ b/client/app/videos/video-watch/video-watch.component.ts | |||
@@ -17,32 +17,24 @@ declare var WebTorrent: any; | |||
17 | }) | 17 | }) |
18 | 18 | ||
19 | export class VideoWatchComponent implements OnInit, CanDeactivate { | 19 | export class VideoWatchComponent implements OnInit, CanDeactivate { |
20 | video: Video; | ||
21 | downloadSpeed: number; | 20 | downloadSpeed: number; |
22 | uploadSpeed: number; | ||
23 | numPeers: number; | ||
24 | loading: boolean = false; | 21 | loading: boolean = false; |
22 | numPeers: number; | ||
23 | uploadSpeed: number; | ||
24 | video: Video; | ||
25 | 25 | ||
26 | private interval: NodeJS.Timer; | ||
27 | private client: any; | 26 | private client: any; |
27 | private interval: NodeJS.Timer; | ||
28 | 28 | ||
29 | constructor( | 29 | constructor( |
30 | private videoService: VideoService, | 30 | private elementRef: ElementRef, |
31 | private routeParams: RouteParams, | 31 | private routeParams: RouteParams, |
32 | private elementRef: ElementRef | 32 | private videoService: VideoService |
33 | ) { | 33 | ) { |
34 | // TODO: use a service | 34 | // TODO: use a service |
35 | this.client = new WebTorrent({ dht: false }); | 35 | this.client = new WebTorrent({ dht: false }); |
36 | } | 36 | } |
37 | 37 | ||
38 | ngOnInit() { | ||
39 | let id = this.routeParams.get('id'); | ||
40 | this.videoService.getVideo(id).subscribe( | ||
41 | video => this.loadVideo(video), | ||
42 | error => alert(error) | ||
43 | ); | ||
44 | } | ||
45 | |||
46 | loadVideo(video: Video) { | 38 | loadVideo(video: Video) { |
47 | this.loading = true; | 39 | this.loading = true; |
48 | this.video = video; | 40 | this.video = video; |
@@ -60,12 +52,20 @@ export class VideoWatchComponent implements OnInit, CanDeactivate { | |||
60 | // Refresh each second | 52 | // Refresh each second |
61 | this.interval = setInterval(() => { | 53 | this.interval = setInterval(() => { |
62 | this.downloadSpeed = torrent.downloadSpeed; | 54 | this.downloadSpeed = torrent.downloadSpeed; |
63 | this.uploadSpeed = torrent.uploadSpeed; | ||
64 | this.numPeers = torrent.numPeers; | 55 | this.numPeers = torrent.numPeers; |
56 | this.uploadSpeed = torrent.uploadSpeed; | ||
65 | }, 1000); | 57 | }, 1000); |
66 | }); | 58 | }); |
67 | } | 59 | } |
68 | 60 | ||
61 | ngOnInit() { | ||
62 | let id = this.routeParams.get('id'); | ||
63 | this.videoService.getVideo(id).subscribe( | ||
64 | video => this.loadVideo(video), | ||
65 | error => alert(error) | ||
66 | ); | ||
67 | } | ||
68 | |||
69 | routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) { | 69 | routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) { |
70 | console.log('Removing video from webtorrent.'); | 70 | console.log('Removing video from webtorrent.'); |
71 | clearInterval(this.interval); | 71 | clearInterval(this.interval); |