diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2016-05-27 16:23:10 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2016-05-27 16:23:10 +0200 |
commit | 41a2aee38cf812510010da09de9bae53590ec119 (patch) | |
tree | 79d55d6ae0ef6f66ccb88890cf1ef1946dc65fb4 /client/angular | |
parent | 157cb9c9713e08ff70078660a32dd77ecb87eabc (diff) | |
download | PeerTube-41a2aee38cf812510010da09de9bae53590ec119.tar.gz PeerTube-41a2aee38cf812510010da09de9bae53590ec119.tar.zst PeerTube-41a2aee38cf812510010da09de9bae53590ec119.zip |
Follow the angular styleguide for the directories structure
Diffstat (limited to 'client/angular')
36 files changed, 0 insertions, 1264 deletions
diff --git a/client/angular/app/app.component.html b/client/angular/app/app.component.html deleted file mode 100644 index 48e97d523..000000000 --- a/client/angular/app/app.component.html +++ /dev/null | |||
@@ -1,60 +0,0 @@ | |||
1 | <div class="container"> | ||
2 | |||
3 | <header class="row"> | ||
4 | <div class="col-md-2"> | ||
5 | <h4>PeerTube</h4> | ||
6 | </div> | ||
7 | |||
8 | <div class="col-md-9"> | ||
9 | <my-search (search)="onSearch($event)"></my-search> | ||
10 | </div> | ||
11 | </header> | ||
12 | |||
13 | |||
14 | <div class="row"> | ||
15 | |||
16 | <menu class="col-md-2 col-xs-3"> | ||
17 | <div class="panel_block"> | ||
18 | <div id="panel_user_login" class="panel_button"> | ||
19 | <span class="glyphicon glyphicon-user"></span> | ||
20 | <a *ngIf="!isLoggedIn" [routerLink]="['UserLogin']">Login</a> | ||
21 | <a *ngIf="isLoggedIn" (click)="logout()">Logout</a> | ||
22 | </div> | ||
23 | </div> | ||
24 | |||
25 | <div class="panel_block"> | ||
26 | <div id="panel_get_videos" class="panel_button"> | ||
27 | <span class="glyphicon glyphicon-list"></span> | ||
28 | <a [routerLink]="['VideosList']">Get videos</a> | ||
29 | </div> | ||
30 | |||
31 | <div id="panel_upload_video" class="panel_button" *ngIf="isLoggedIn"> | ||
32 | <span class="glyphicon glyphicon-cloud-upload"></span> | ||
33 | <a [routerLink]="['VideosAdd']">Upload a video</a> | ||
34 | </div> | ||
35 | </div> | ||
36 | |||
37 | <div class="panel_block" *ngIf="isLoggedIn"> | ||
38 | <div id="panel_make_friends" class="panel_button"> | ||
39 | <span class="glyphicon glyphicon-cloud"></span> | ||
40 | <a (click)='makeFriends()'>Make friends</a> | ||
41 | </div> | ||
42 | |||
43 | <div id="panel_quit_friends" class="panel_button"> | ||
44 | <span class="glyphicon glyphicon-plane"></span> | ||
45 | <a (click)='quitFriends()'>Quit friends</a> | ||
46 | </div> | ||
47 | </div> | ||
48 | </menu> | ||
49 | |||
50 | <div class="col-md-9 col-xs-8 router_outler_container"> | ||
51 | <router-outlet></router-outlet> | ||
52 | </div> | ||
53 | |||
54 | </div> | ||
55 | |||
56 | |||
57 | <footer> | ||
58 | PeerTube, CopyLeft 2015-2016 | ||
59 | </footer> | ||
60 | </div> | ||
diff --git a/client/angular/app/app.component.scss b/client/angular/app/app.component.scss deleted file mode 100644 index e02c2d5b0..000000000 --- a/client/angular/app/app.component.scss +++ /dev/null | |||
@@ -1,32 +0,0 @@ | |||
1 | header div { | ||
2 | line-height: 25px; | ||
3 | margin-bottom: 30px; | ||
4 | } | ||
5 | |||
6 | menu { | ||
7 | min-height: 600px; | ||
8 | margin-right: 20px; | ||
9 | border-right: 1px solid rgba(0, 0, 0, 0.2); | ||
10 | |||
11 | .panel_button { | ||
12 | margin: 8px; | ||
13 | cursor: pointer; | ||
14 | transition: margin 0.2s; | ||
15 | |||
16 | &:hover { | ||
17 | margin-left: 15px; | ||
18 | } | ||
19 | |||
20 | a { | ||
21 | color: #333333; | ||
22 | } | ||
23 | } | ||
24 | |||
25 | .glyphicon { | ||
26 | margin: 5px; | ||
27 | } | ||
28 | } | ||
29 | |||
30 | .panel_block:not(:last-child) { | ||
31 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); | ||
32 | } | ||
diff --git a/client/angular/app/app.component.ts b/client/angular/app/app.component.ts deleted file mode 100644 index 722d0dca0..000000000 --- a/client/angular/app/app.component.ts +++ /dev/null | |||
@@ -1,106 +0,0 @@ | |||
1 | import { Component } from '@angular/core'; | ||
2 | import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router } from '@angular/router-deprecated'; | ||
3 | import { HTTP_PROVIDERS } from '@angular/http'; | ||
4 | |||
5 | import { VideosAddComponent } from '../videos/components/add/videos-add.component'; | ||
6 | import { VideosListComponent } from '../videos/components/list/videos-list.component'; | ||
7 | import { VideosWatchComponent } from '../videos/components/watch/videos-watch.component'; | ||
8 | import { VideosService } from '../videos/videos.service'; | ||
9 | import { FriendsService } from '../friends/services/friends.service'; | ||
10 | import { UserLoginComponent } from '../users/components/login/login.component'; | ||
11 | import { AuthService } from '../users/services/auth.service'; | ||
12 | import { AuthStatus } from '../users/models/authStatus'; | ||
13 | import { SearchComponent } from './search.component'; | ||
14 | import { Search } from './search'; | ||
15 | |||
16 | @RouteConfig([ | ||
17 | { | ||
18 | path: '/users/login', | ||
19 | name: 'UserLogin', | ||
20 | component: UserLoginComponent | ||
21 | }, | ||
22 | { | ||
23 | path: '/videos/list', | ||
24 | name: 'VideosList', | ||
25 | component: VideosListComponent, | ||
26 | useAsDefault: true | ||
27 | }, | ||
28 | { | ||
29 | path: '/videos/watch/:id', | ||
30 | name: 'VideosWatch', | ||
31 | component: VideosWatchComponent | ||
32 | }, | ||
33 | { | ||
34 | path: '/videos/add', | ||
35 | name: 'VideosAdd', | ||
36 | component: VideosAddComponent | ||
37 | } | ||
38 | ]) | ||
39 | |||
40 | @Component({ | ||
41 | selector: 'my-app', | ||
42 | templateUrl: 'app/angular/app/app.component.html', | ||
43 | styleUrls: [ 'app/angular/app/app.component.css' ], | ||
44 | directives: [ ROUTER_DIRECTIVES, SearchComponent ], | ||
45 | providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS, VideosService, FriendsService, AuthService ] | ||
46 | }) | ||
47 | |||
48 | export class AppComponent { | ||
49 | isLoggedIn: boolean; | ||
50 | search_field: string = name; | ||
51 | choices = [ ]; | ||
52 | |||
53 | constructor(private _friendsService: FriendsService, | ||
54 | private _authService: AuthService, | ||
55 | private _router: Router | ||
56 | |||
57 | ) { | ||
58 | this.isLoggedIn = this._authService.isLoggedIn(); | ||
59 | |||
60 | this._authService.loginChanged$.subscribe( | ||
61 | status => { | ||
62 | if (status === AuthStatus.LoggedIn) { | ||
63 | this.isLoggedIn = true; | ||
64 | } | ||
65 | } | ||
66 | ); | ||
67 | } | ||
68 | |||
69 | onSearch(search: Search) { | ||
70 | if (search.value !== '') { | ||
71 | const params = { | ||
72 | search: search.value, | ||
73 | field: search.field | ||
74 | }; | ||
75 | this._router.navigate(['VideosList', params]); | ||
76 | } else { | ||
77 | this._router.navigate(['VideosList']); | ||
78 | } | ||
79 | } | ||
80 | |||
81 | logout() { | ||
82 | // this._authService.logout(); | ||
83 | } | ||
84 | |||
85 | makeFriends() { | ||
86 | this._friendsService.makeFriends().subscribe( | ||
87 | status => { | ||
88 | if (status === 409) { | ||
89 | alert('Already made friends!'); | ||
90 | } else { | ||
91 | alert('Made friends!'); | ||
92 | } | ||
93 | }, | ||
94 | error => alert(error) | ||
95 | ); | ||
96 | } | ||
97 | |||
98 | quitFriends() { | ||
99 | this._friendsService.quitFriends().subscribe( | ||
100 | status => { | ||
101 | alert('Quit friends!'); | ||
102 | }, | ||
103 | error => alert(error) | ||
104 | ); | ||
105 | } | ||
106 | } | ||
diff --git a/client/angular/app/search.component.html b/client/angular/app/search.component.html deleted file mode 100644 index fb13ac72e..000000000 --- a/client/angular/app/search.component.html +++ /dev/null | |||
@@ -1,17 +0,0 @@ | |||
1 | <div class="input-group"> | ||
2 | <div class="input-group-btn" dropdown> | ||
3 | <button id="simple-btn-keyboard-nav" type="button" class="btn btn-default" dropdownToggle> | ||
4 | {{ getStringChoice(searchCriterias.field) }} <span class="caret"></span> | ||
5 | </button> | ||
6 | <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav"> | ||
7 | <li *ngFor="let choice of choiceKeys" class="dropdown-item"> | ||
8 | <a class="dropdown-item" href="#" (click)="choose($event, choice)">{{ getStringChoice(choice) }}</a> | ||
9 | </li> | ||
10 | </ul> | ||
11 | </div> | ||
12 | |||
13 | <input | ||
14 | type="text" id="search-video" name="search-video" class="form-control" placeholder="Search a video..." class="form-control" | ||
15 | [(ngModel)]="searchCriterias.value" (keyup.enter)="doSearch()" | ||
16 | > | ||
17 | </div> | ||
diff --git a/client/angular/app/search.component.ts b/client/angular/app/search.component.ts deleted file mode 100644 index e21b91fce..000000000 --- a/client/angular/app/search.component.ts +++ /dev/null | |||
@@ -1,46 +0,0 @@ | |||
1 | import { Component, EventEmitter, Output } from '@angular/core'; | ||
2 | |||
3 | import { DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/components/dropdown'; | ||
4 | |||
5 | import { Search, SearchField } from './search'; | ||
6 | |||
7 | @Component({ | ||
8 | selector: 'my-search', | ||
9 | templateUrl: 'app/angular/app/search.component.html', | ||
10 | directives: [ DROPDOWN_DIRECTIVES ] | ||
11 | }) | ||
12 | |||
13 | export class SearchComponent { | ||
14 | @Output() search: EventEmitter<Search> = new EventEmitter<Search>(); | ||
15 | |||
16 | searchCriterias: Search = { | ||
17 | field: 'name', | ||
18 | value: '' | ||
19 | }; | ||
20 | fieldChoices = { | ||
21 | name: 'Name', | ||
22 | author: 'Author', | ||
23 | podUrl: 'Pod Url', | ||
24 | magnetUri: 'Magnet Uri' | ||
25 | }; | ||
26 | |||
27 | get choiceKeys() { | ||
28 | return Object.keys(this.fieldChoices); | ||
29 | } | ||
30 | |||
31 | getStringChoice(choiceKey: SearchField): string { | ||
32 | return this.fieldChoices[choiceKey]; | ||
33 | } | ||
34 | |||
35 | choose($event:MouseEvent, choice: SearchField) { | ||
36 | $event.preventDefault(); | ||
37 | $event.stopPropagation(); | ||
38 | |||
39 | this.searchCriterias.field = choice; | ||
40 | } | ||
41 | |||
42 | doSearch(): void { | ||
43 | this.search.emit(this.searchCriterias); | ||
44 | } | ||
45 | |||
46 | } | ||
diff --git a/client/angular/app/search.ts b/client/angular/app/search.ts deleted file mode 100644 index c4e771b47..000000000 --- a/client/angular/app/search.ts +++ /dev/null | |||
@@ -1,6 +0,0 @@ | |||
1 | export type SearchField = "name" | "author" | "podUrl" | "magnetUri"; | ||
2 | |||
3 | export interface Search { | ||
4 | field: SearchField; | ||
5 | value: string; | ||
6 | } | ||
diff --git a/client/angular/friends/services/friends.service.ts b/client/angular/friends/services/friends.service.ts deleted file mode 100644 index cb34323e4..000000000 --- a/client/angular/friends/services/friends.service.ts +++ /dev/null | |||
@@ -1,27 +0,0 @@ | |||
1 | import { Injectable } from '@angular/core'; | ||
2 | import { Http, Response } from '@angular/http'; | ||
3 | import { Observable } from 'rxjs/Rx'; | ||
4 | |||
5 | @Injectable() | ||
6 | export class FriendsService { | ||
7 | private _baseFriendsUrl = '/api/v1/pods/'; | ||
8 | |||
9 | constructor (private http: Http) {} | ||
10 | |||
11 | makeFriends() { | ||
12 | return this.http.get(this._baseFriendsUrl + 'makefriends') | ||
13 | .map(res => <number> res.status) | ||
14 | .catch(this.handleError); | ||
15 | } | ||
16 | |||
17 | quitFriends() { | ||
18 | return this.http.get(this._baseFriendsUrl + 'quitfriends') | ||
19 | .map(res => <number> res.status) | ||
20 | .catch(this.handleError); | ||
21 | } | ||
22 | |||
23 | private handleError (error: Response) { | ||
24 | console.error(error); | ||
25 | return Observable.throw(error.json().error || 'Server error'); | ||
26 | } | ||
27 | } | ||
diff --git a/client/angular/main.ts b/client/angular/main.ts deleted file mode 100644 index e35f7dbdf..000000000 --- a/client/angular/main.ts +++ /dev/null | |||
@@ -1,4 +0,0 @@ | |||
1 | import { bootstrap } from '@angular/platform-browser-dynamic'; | ||
2 | import { AppComponent } from './app/app.component'; | ||
3 | |||
4 | bootstrap(AppComponent); | ||
diff --git a/client/angular/users/components/login/login.component.html b/client/angular/users/components/login/login.component.html deleted file mode 100644 index 940694515..000000000 --- a/client/angular/users/components/login/login.component.html +++ /dev/null | |||
@@ -1,14 +0,0 @@ | |||
1 | <h3>Login</h3> | ||
2 | <form role="form" (submit)="login(username.value, password.value)"> | ||
3 | <div class="form-group"> | ||
4 | <label for="username">Username</label> | ||
5 | <input type="text" #username class="form-control" id="username" placeholder="Username"> | ||
6 | </div> | ||
7 | |||
8 | <div class="form-group"> | ||
9 | <label for="password">Password</label> | ||
10 | <input type="password" #password class="form-control" id="password" placeholder="Password"> | ||
11 | </div> | ||
12 | |||
13 | <input type="submit" value="Login" class="btn btn-default"> | ||
14 | </form> | ||
diff --git a/client/angular/users/components/login/login.component.scss b/client/angular/users/components/login/login.component.scss deleted file mode 100644 index e69de29bb..000000000 --- a/client/angular/users/components/login/login.component.scss +++ /dev/null | |||
diff --git a/client/angular/users/components/login/login.component.ts b/client/angular/users/components/login/login.component.ts deleted file mode 100644 index d339353ef..000000000 --- a/client/angular/users/components/login/login.component.ts +++ /dev/null | |||
@@ -1,36 +0,0 @@ | |||
1 | import { Component } from '@angular/core'; | ||
2 | import { Router } from '@angular/router-deprecated'; | ||
3 | |||
4 | import { AuthService } from '../../services/auth.service'; | ||
5 | import { AuthStatus } from '../../models/authStatus'; | ||
6 | import { User } from '../../models/user'; | ||
7 | |||
8 | @Component({ | ||
9 | selector: 'my-user-login', | ||
10 | styleUrls: [ 'app/angular/users/components/login/login.component.css' ], | ||
11 | templateUrl: 'app/angular/users/components/login/login.component.html' | ||
12 | }) | ||
13 | |||
14 | export class UserLoginComponent { | ||
15 | constructor(private _authService: AuthService, private _router: Router) {} | ||
16 | |||
17 | login(username: string, password: string) { | ||
18 | this._authService.login(username, password).subscribe( | ||
19 | result => { | ||
20 | const user = new User(username, result); | ||
21 | user.save(); | ||
22 | |||
23 | this._authService.setStatus(AuthStatus.LoggedIn); | ||
24 | |||
25 | this._router.navigate(['VideosList']); | ||
26 | }, | ||
27 | error => { | ||
28 | if (error.error === 'invalid_grant') { | ||
29 | alert('Credentials are invalid.'); | ||
30 | } else { | ||
31 | alert(`${error.error}: ${error.error_description}`); | ||
32 | } | ||
33 | } | ||
34 | ); | ||
35 | } | ||
36 | } | ||
diff --git a/client/angular/users/models/authStatus.ts b/client/angular/users/models/authStatus.ts deleted file mode 100644 index f646bd4cf..000000000 --- a/client/angular/users/models/authStatus.ts +++ /dev/null | |||
@@ -1,4 +0,0 @@ | |||
1 | export enum AuthStatus { | ||
2 | LoggedIn, | ||
3 | LoggedOut | ||
4 | } | ||
diff --git a/client/angular/users/models/token.ts b/client/angular/users/models/token.ts deleted file mode 100644 index b7872e74a..000000000 --- a/client/angular/users/models/token.ts +++ /dev/null | |||
@@ -1,31 +0,0 @@ | |||
1 | export class Token { | ||
2 | access_token: string; | ||
3 | refresh_token: string; | ||
4 | token_type: string; | ||
5 | |||
6 | static load(): Token { | ||
7 | return new Token({ | ||
8 | access_token: localStorage.getItem('access_token'), | ||
9 | refresh_token: localStorage.getItem('refresh_token'), | ||
10 | token_type: localStorage.getItem('token_type') | ||
11 | }); | ||
12 | } | ||
13 | |||
14 | constructor (hash?: any) { | ||
15 | if (hash) { | ||
16 | this.access_token = hash.access_token; | ||
17 | this.refresh_token = hash.refresh_token; | ||
18 | if (hash.token_type === 'bearer') { | ||
19 | this.token_type = 'Bearer'; | ||
20 | } else { | ||
21 | this.token_type = hash.token_type; | ||
22 | } | ||
23 | } | ||
24 | } | ||
25 | |||
26 | save():void { | ||
27 | localStorage.setItem('access_token', this.access_token); | ||
28 | localStorage.setItem('refresh_token', this.refresh_token); | ||
29 | localStorage.setItem('token_type', this.token_type); | ||
30 | } | ||
31 | } | ||
diff --git a/client/angular/users/models/user.ts b/client/angular/users/models/user.ts deleted file mode 100644 index 3367e3bb5..000000000 --- a/client/angular/users/models/user.ts +++ /dev/null | |||
@@ -1,20 +0,0 @@ | |||
1 | import { Token } from './token'; | ||
2 | |||
3 | export class User { | ||
4 | username: string; | ||
5 | token: Token; | ||
6 | |||
7 | static load(): User { | ||
8 | return new User(localStorage.getItem('username'), Token.load()); | ||
9 | } | ||
10 | |||
11 | constructor (username: string, hash_token: any) { | ||
12 | this.username = username; | ||
13 | this.token = new Token(hash_token); | ||
14 | } | ||
15 | |||
16 | save(): void { | ||
17 | localStorage.setItem('username', this.username); | ||
18 | this.token.save(); | ||
19 | } | ||
20 | } | ||
diff --git a/client/angular/users/services/auth.service.ts b/client/angular/users/services/auth.service.ts deleted file mode 100644 index 099563d43..000000000 --- a/client/angular/users/services/auth.service.ts +++ /dev/null | |||
@@ -1,107 +0,0 @@ | |||
1 | import { Injectable } from '@angular/core'; | ||
2 | import { Http, Response, Headers, URLSearchParams, RequestOptions } from '@angular/http'; | ||
3 | import { Observable, Subject } from 'rxjs/Rx'; | ||
4 | |||
5 | import { AuthStatus } from '../models/authStatus'; | ||
6 | import { User } from '../models/user'; | ||
7 | |||
8 | @Injectable() | ||
9 | export class AuthService { | ||
10 | loginChanged$; | ||
11 | |||
12 | private _loginChanged; | ||
13 | private _baseLoginUrl = '/api/v1/users/token'; | ||
14 | private _baseClientUrl = '/api/v1/users/client'; | ||
15 | private _clientId = ''; | ||
16 | private _clientSecret = ''; | ||
17 | |||
18 | constructor (private http: Http) { | ||
19 | this._loginChanged = new Subject<AuthStatus>(); | ||
20 | this.loginChanged$ = this._loginChanged.asObservable(); | ||
21 | |||
22 | // Fetch the client_id/client_secret | ||
23 | // FIXME: save in local storage? | ||
24 | this.http.get(this._baseClientUrl) | ||
25 | .map(res => res.json()) | ||
26 | .catch(this.handleError) | ||
27 | .subscribe( | ||
28 | result => { | ||
29 | this._clientId = result.client_id; | ||
30 | this._clientSecret = result.client_secret; | ||
31 | console.log('Client credentials loaded.'); | ||
32 | }, | ||
33 | error => { | ||
34 | alert(error); | ||
35 | } | ||
36 | ); | ||
37 | } | ||
38 | |||
39 | login(username: string, password: string) { | ||
40 | let body = new URLSearchParams(); | ||
41 | body.set('client_id', this._clientId); | ||
42 | body.set('client_secret', this._clientSecret); | ||
43 | body.set('response_type', 'code'); | ||
44 | body.set('grant_type', 'password'); | ||
45 | body.set('scope', 'upload'); | ||
46 | body.set('username', username); | ||
47 | body.set('password', password); | ||
48 | |||
49 | let headers = new Headers(); | ||
50 | headers.append('Content-Type', 'application/x-www-form-urlencoded'); | ||
51 | |||
52 | let options = { | ||
53 | headers: headers | ||
54 | }; | ||
55 | |||
56 | return this.http.post(this._baseLoginUrl, body.toString(), options) | ||
57 | .map(res => res.json()) | ||
58 | .catch(this.handleError); | ||
59 | } | ||
60 | |||
61 | logout() { | ||
62 | // TODO make HTTP request | ||
63 | } | ||
64 | |||
65 | getRequestHeader(): Headers { | ||
66 | return new Headers({ 'Authorization': `${this.getTokenType()} ${this.getToken()}` }); | ||
67 | } | ||
68 | |||
69 | getAuthRequestOptions(): RequestOptions { | ||
70 | return new RequestOptions({ headers: this.getRequestHeader() }); | ||
71 | } | ||
72 | |||
73 | getToken(): string { | ||
74 | return localStorage.getItem('access_token'); | ||
75 | } | ||
76 | |||
77 | getTokenType(): string { | ||
78 | return localStorage.getItem('token_type'); | ||
79 | } | ||
80 | |||
81 | getUser(): User { | ||
82 | if (this.isLoggedIn() === false) { | ||
83 | return null; | ||
84 | } | ||
85 | |||
86 | const user = User.load(); | ||
87 | |||
88 | return user; | ||
89 | } | ||
90 | |||
91 | isLoggedIn(): boolean { | ||
92 | if (this.getToken()) { | ||
93 | return true; | ||
94 | } else { | ||
95 | return false; | ||
96 | } | ||
97 | } | ||
98 | |||
99 | setStatus(status: AuthStatus) { | ||
100 | this._loginChanged.next(status); | ||
101 | } | ||
102 | |||
103 | private handleError (error: Response) { | ||
104 | console.error(error); | ||
105 | return Observable.throw(error.json() || { error: 'Server error' }); | ||
106 | } | ||
107 | } | ||
diff --git a/client/angular/videos/components/add/videos-add.component.html b/client/angular/videos/components/add/videos-add.component.html deleted file mode 100644 index 80d229cb8..000000000 --- a/client/angular/videos/components/add/videos-add.component.html +++ /dev/null | |||
@@ -1,41 +0,0 @@ | |||
1 | <h3>Upload a video</h3> | ||
2 | |||
3 | <form (ngSubmit)="uploadFile()" #videoForm="ngForm"> | ||
4 | <div class="form-group"> | ||
5 | <label for="name">Video name</label> | ||
6 | <input | ||
7 | type="text" class="form-control" name="name" id="name" required | ||
8 | ngControl="name" #name="ngForm" | ||
9 | > | ||
10 | <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> | ||
11 | Name is required | ||
12 | </div> | ||
13 | </div> | ||
14 | |||
15 | <div class="form-group"> | ||
16 | <div class="btn btn-default btn-file"> | ||
17 | <span>Select the video...</span> | ||
18 | <input type="file" name="videofile" id="videofile"> | ||
19 | </div> | ||
20 | |||
21 | <span *ngIf="fileToUpload">{{ fileToUpload.name }}</span> | ||
22 | </div> | ||
23 | |||
24 | <div class="form-group"> | ||
25 | <label for="description">Description</label> | ||
26 | <textarea | ||
27 | name="description" id="description" class="form-control" placeholder="Description..." required | ||
28 | ngControl="description" #description="ngForm" | ||
29 | > | ||
30 | </textarea> | ||
31 | <div [hidden]="description.valid || description.pristine" class="alert alert-danger"> | ||
32 | A description is required | ||
33 | </div> | ||
34 | </div> | ||
35 | |||
36 | <div id="progress" *ngIf="progressBar.max !== 0"> | ||
37 | <progressbar [value]="progressBar.value" [max]="progressBar.max">{{ progressBar.value | bytes }} / {{ progressBar.max | bytes }}</progressbar> | ||
38 | </div> | ||
39 | |||
40 | <input type="submit" value="Upload" class="btn btn-default" [disabled]="!videoForm.form.valid || !fileToUpload"> | ||
41 | </form> | ||
diff --git a/client/angular/videos/components/add/videos-add.component.scss b/client/angular/videos/components/add/videos-add.component.scss deleted file mode 100644 index 01195f017..000000000 --- a/client/angular/videos/components/add/videos-add.component.scss +++ /dev/null | |||
@@ -1,33 +0,0 @@ | |||
1 | .btn-file { | ||
2 | position: relative; | ||
3 | overflow: hidden; | ||
4 | } | ||
5 | |||
6 | .btn-file input[type=file] { | ||
7 | position: absolute; | ||
8 | top: 0; | ||
9 | right: 0; | ||
10 | min-width: 100%; | ||
11 | min-height: 100%; | ||
12 | font-size: 100px; | ||
13 | text-align: right; | ||
14 | filter: alpha(opacity=0); | ||
15 | opacity: 0; | ||
16 | outline: none; | ||
17 | background: white; | ||
18 | cursor: inherit; | ||
19 | display: block; | ||
20 | } | ||
21 | |||
22 | .name_file { | ||
23 | display: inline-block; | ||
24 | margin-left: 10px; | ||
25 | } | ||
26 | |||
27 | .form-group { | ||
28 | margin-bottom: 10px; | ||
29 | } | ||
30 | |||
31 | #progress { | ||
32 | margin-bottom: 10px; | ||
33 | } | ||
diff --git a/client/angular/videos/components/add/videos-add.component.ts b/client/angular/videos/components/add/videos-add.component.ts deleted file mode 100644 index f1652be19..000000000 --- a/client/angular/videos/components/add/videos-add.component.ts +++ /dev/null | |||
@@ -1,69 +0,0 @@ | |||
1 | import { Component, ElementRef, OnInit } from '@angular/core'; | ||
2 | import { Router } from '@angular/router-deprecated'; | ||
3 | |||
4 | import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar'; | ||
5 | import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; | ||
6 | |||
7 | import { AuthService } from '../../../users/services/auth.service'; | ||
8 | import { User } from '../../../users/models/user'; | ||
9 | |||
10 | // TODO: import it with systemjs | ||
11 | declare var jQuery:any; | ||
12 | |||
13 | @Component({ | ||
14 | selector: 'my-videos-add', | ||
15 | styleUrls: [ 'app/angular/videos/components/add/videos-add.component.css' ], | ||
16 | templateUrl: 'app/angular/videos/components/add/videos-add.component.html', | ||
17 | directives: [ PROGRESSBAR_DIRECTIVES ], | ||
18 | pipes: [ BytesPipe ] | ||
19 | }) | ||
20 | |||
21 | export class VideosAddComponent implements OnInit { | ||
22 | user: User; | ||
23 | fileToUpload: any; | ||
24 | progressBar: { value: number; max: number; } = { value: 0, max: 0 }; | ||
25 | |||
26 | private _form: any; | ||
27 | |||
28 | constructor( | ||
29 | private _router: Router, private _elementRef: ElementRef, | ||
30 | private _authService: AuthService | ||
31 | ) {} | ||
32 | |||
33 | ngOnInit() { | ||
34 | this.user = User.load(); | ||
35 | jQuery(this._elementRef.nativeElement).find('#videofile').fileupload({ | ||
36 | url: '/api/v1/videos', | ||
37 | dataType: 'json', | ||
38 | singleFileUploads: true, | ||
39 | multipart: true, | ||
40 | autoupload: false, | ||
41 | |||
42 | add: (e, data) => { | ||
43 | this._form = data; | ||
44 | this.fileToUpload = data['files'][0]; | ||
45 | }, | ||
46 | |||
47 | progressall: (e, data) => { | ||
48 | this.progressBar.value = data.loaded; | ||
49 | // The server is a little bit slow to answer (has to seed the video) | ||
50 | // So we add more time to the progress bar (+10%) | ||
51 | this.progressBar.max = data.total + (0.1 * data.total); | ||
52 | }, | ||
53 | |||
54 | done: (e, data) => { | ||
55 | this.progressBar.value = this.progressBar.max; | ||
56 | console.log('Video uploaded.'); | ||
57 | |||
58 | // Print all the videos once it's finished | ||
59 | this._router.navigate(['VideosList']); | ||
60 | } | ||
61 | }); | ||
62 | } | ||
63 | |||
64 | uploadFile() { | ||
65 | this._form.headers = this._authService.getRequestHeader().toJSON(); | ||
66 | this._form.formData = jQuery(this._elementRef.nativeElement).find('form').serializeArray(); | ||
67 | this._form.submit(); | ||
68 | } | ||
69 | } | ||
diff --git a/client/angular/videos/components/list/sort.ts b/client/angular/videos/components/list/sort.ts deleted file mode 100644 index 6e8cc7936..000000000 --- a/client/angular/videos/components/list/sort.ts +++ /dev/null | |||
@@ -1,3 +0,0 @@ | |||
1 | export type SortField = "name" | "-name" | ||
2 | | "duration" | "-duration" | ||
3 | | "createdDate" | "-createdDate"; | ||
diff --git a/client/angular/videos/components/list/video-miniature.component.html b/client/angular/videos/components/list/video-miniature.component.html deleted file mode 100644 index 244254b5a..000000000 --- a/client/angular/videos/components/list/video-miniature.component.html +++ /dev/null | |||
@@ -1,22 +0,0 @@ | |||
1 | <div class="video-miniature col-md-4" (mouseenter)="onHover()" (mouseleave)="onBlur()"> | ||
2 | <a | ||
3 | [routerLink]="['VideosWatch', { id: video.id }]" [attr.title]="video.description" | ||
4 | class="video-miniature-thumbnail" | ||
5 | > | ||
6 | <img [attr.src]="video.thumbnailPath" alt="video thumbnail" /> | ||
7 | <span class="video-miniature-duration">{{ video.duration }}</span> | ||
8 | </a> | ||
9 | <span | ||
10 | *ngIf="displayRemoveIcon()" (click)="removeVideo(video.id)" | ||
11 | class="video-miniature-remove glyphicon glyphicon-remove" | ||
12 | ></span> | ||
13 | |||
14 | <div class="video-miniature-informations"> | ||
15 | <a [routerLink]="['VideosWatch', { id: video.id }]" class="video-miniature-name"> | ||
16 | <span>{{ video.name }}</span> | ||
17 | </a> | ||
18 | |||
19 | <span class="video-miniature-author">by {{ video.by }}</span> | ||
20 | <span class="video-miniature-created-date">on {{ video.createdDate | date:'short' }}</span> | ||
21 | </div> | ||
22 | </div> | ||
diff --git a/client/angular/videos/components/list/video-miniature.component.scss b/client/angular/videos/components/list/video-miniature.component.scss deleted file mode 100644 index 4488abe22..000000000 --- a/client/angular/videos/components/list/video-miniature.component.scss +++ /dev/null | |||
@@ -1,55 +0,0 @@ | |||
1 | .video-miniature { | ||
2 | height: 200px; | ||
3 | display: inline-block; | ||
4 | position: relative; | ||
5 | |||
6 | .video-miniature-thumbnail { | ||
7 | display: block; | ||
8 | position: relative; | ||
9 | |||
10 | .video-miniature-duration { | ||
11 | position: absolute; | ||
12 | right: 60px; | ||
13 | bottom: 2px; | ||
14 | display: inline-block; | ||
15 | background-color: rgba(0, 0, 0, 0.8); | ||
16 | color: rgba(255, 255, 255, 0.8); | ||
17 | padding: 2px; | ||
18 | font-size: 11px; | ||
19 | } | ||
20 | } | ||
21 | |||
22 | .video-miniature-remove { | ||
23 | display: inline-block; | ||
24 | position: absolute; | ||
25 | left: 16px; | ||
26 | background-color: rgba(0, 0, 0, 0.8); | ||
27 | color: rgba(255, 255, 255, 0.8); | ||
28 | padding: 2px; | ||
29 | cursor: pointer; | ||
30 | |||
31 | &:hover { | ||
32 | color: rgba(255, 255, 255, 0.9); | ||
33 | } | ||
34 | } | ||
35 | |||
36 | .video-miniature-informations { | ||
37 | margin-left: 3px; | ||
38 | |||
39 | .video-miniature-name { | ||
40 | display: block; | ||
41 | font-weight: bold; | ||
42 | |||
43 | &:hover { | ||
44 | text-decoration: none; | ||
45 | } | ||
46 | } | ||
47 | |||
48 | .video-miniature-author, .video-miniature-created-date { | ||
49 | display: block; | ||
50 | margin-left: 1px; | ||
51 | font-size: 11px; | ||
52 | color: rgba(0, 0, 0, 0.5); | ||
53 | } | ||
54 | } | ||
55 | } | ||
diff --git a/client/angular/videos/components/list/video-miniature.component.ts b/client/angular/videos/components/list/video-miniature.component.ts deleted file mode 100644 index 383c2c609..000000000 --- a/client/angular/videos/components/list/video-miniature.component.ts +++ /dev/null | |||
@@ -1,47 +0,0 @@ | |||
1 | import { Component, Input, Output, EventEmitter } from '@angular/core'; | ||
2 | import { DatePipe } from '@angular/common'; | ||
3 | import { ROUTER_DIRECTIVES } from '@angular/router-deprecated'; | ||
4 | |||
5 | import { Video } from '../../video'; | ||
6 | import { VideosService } from '../../videos.service'; | ||
7 | import { User } from '../../../users/models/user'; | ||
8 | |||
9 | @Component({ | ||
10 | selector: 'my-video-miniature', | ||
11 | styleUrls: [ 'app/angular/videos/components/list/video-miniature.component.css' ], | ||
12 | templateUrl: 'app/angular/videos/components/list/video-miniature.component.html', | ||
13 | directives: [ ROUTER_DIRECTIVES ], | ||
14 | pipes: [ DatePipe ] | ||
15 | }) | ||
16 | |||
17 | export class VideoMiniatureComponent { | ||
18 | @Output() removed = new EventEmitter<any>(); | ||
19 | |||
20 | @Input() video: Video; | ||
21 | @Input() user: User; | ||
22 | |||
23 | hovering: boolean = false; | ||
24 | |||
25 | constructor(private _videosService: VideosService) {} | ||
26 | |||
27 | onHover() { | ||
28 | this.hovering = true; | ||
29 | } | ||
30 | |||
31 | onBlur() { | ||
32 | this.hovering = false; | ||
33 | } | ||
34 | |||
35 | displayRemoveIcon(): boolean { | ||
36 | return this.hovering && this.video.isRemovableBy(this.user); | ||
37 | } | ||
38 | |||
39 | removeVideo(id: string) { | ||
40 | if (confirm('Do you really want to remove this video?')) { | ||
41 | this._videosService.removeVideo(id).subscribe( | ||
42 | status => this.removed.emit(true), | ||
43 | error => alert(error) | ||
44 | ); | ||
45 | } | ||
46 | } | ||
47 | } | ||
diff --git a/client/angular/videos/components/list/video-sort.component.html b/client/angular/videos/components/list/video-sort.component.html deleted file mode 100644 index 3bece0b22..000000000 --- a/client/angular/videos/components/list/video-sort.component.html +++ /dev/null | |||
@@ -1,5 +0,0 @@ | |||
1 | <select class="form-control input-sm" [(ngModel)]="currentSort" (ngModelChange)="onSortChange()"> | ||
2 | <option *ngFor="let choice of choiceKeys" [value]="choice"> | ||
3 | {{ getStringChoice(choice) }} | ||
4 | </option> | ||
5 | </select> | ||
diff --git a/client/angular/videos/components/list/video-sort.component.ts b/client/angular/videos/components/list/video-sort.component.ts deleted file mode 100644 index 0373cea38..000000000 --- a/client/angular/videos/components/list/video-sort.component.ts +++ /dev/null | |||
@@ -1,36 +0,0 @@ | |||
1 | import { Component, Input, Output, EventEmitter } from '@angular/core'; | ||
2 | |||
3 | import { SortField } from './sort'; | ||
4 | |||
5 | @Component({ | ||
6 | selector: 'my-video-sort', | ||
7 | // styleUrls: [ 'app/angular/videos/components/list/video-sort.component.css' ], | ||
8 | templateUrl: 'app/angular/videos/components/list/video-sort.component.html' | ||
9 | }) | ||
10 | |||
11 | export class VideoSortComponent { | ||
12 | @Output() sort = new EventEmitter<any>(); | ||
13 | |||
14 | @Input() currentSort: SortField; | ||
15 | |||
16 | sortChoices = { | ||
17 | 'name': 'Name - Asc', | ||
18 | '-name': 'Name - Desc', | ||
19 | 'duration': 'Duration - Asc', | ||
20 | '-duration': 'Duration - Desc', | ||
21 | 'createdDate': 'Created Date - Asc', | ||
22 | '-createdDate': 'Created Date - Desc' | ||
23 | }; | ||
24 | |||
25 | get choiceKeys() { | ||
26 | return Object.keys(this.sortChoices); | ||
27 | } | ||
28 | |||
29 | getStringChoice(choiceKey: SortField): string { | ||
30 | return this.sortChoices[choiceKey]; | ||
31 | } | ||
32 | |||
33 | onSortChange() { | ||
34 | this.sort.emit(this.currentSort); | ||
35 | } | ||
36 | } | ||
diff --git a/client/angular/videos/components/list/videos-list.component.html b/client/angular/videos/components/list/videos-list.component.html deleted file mode 100644 index edbbaf3ae..000000000 --- a/client/angular/videos/components/list/videos-list.component.html +++ /dev/null | |||
@@ -1,18 +0,0 @@ | |||
1 | <div class="row videos-info"> | ||
2 | <div class="col-md-9 videos-total-results"> {{ pagination.total }} videos</div> | ||
3 | <my-video-sort class="col-md-3" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort> | ||
4 | </div> | ||
5 | |||
6 | <div class="videos-miniatures"> | ||
7 | <my-loader [loading]="loading"></my-loader> | ||
8 | |||
9 | <div class="col-md-12 no-video" *ngIf="!loading && videos.length === 0">There is no video.</div> | ||
10 | |||
11 | <my-video-miniature *ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)"> | ||
12 | </my-video-miniature> | ||
13 | </div> | ||
14 | |||
15 | <pagination | ||
16 | [totalItems]="pagination.total" [itemsPerPage]="pagination.itemsPerPage" [(ngModel)]="pagination.currentPage" | ||
17 | (ngModelChange)="getVideos()" | ||
18 | ></pagination> | ||
diff --git a/client/angular/videos/components/list/videos-list.component.scss b/client/angular/videos/components/list/videos-list.component.scss deleted file mode 100644 index 9441d80c3..000000000 --- a/client/angular/videos/components/list/videos-list.component.scss +++ /dev/null | |||
@@ -1,37 +0,0 @@ | |||
1 | .videos-info { | ||
2 | |||
3 | padding-bottom: 20px; | ||
4 | margin-bottom: 20px; | ||
5 | border-bottom: 1px solid #f1f1f1; | ||
6 | height: 40px; | ||
7 | line-height: 40px; | ||
8 | width: 765px; | ||
9 | margin-left: 15px; | ||
10 | |||
11 | my-video-sort { | ||
12 | padding-right: 0; | ||
13 | } | ||
14 | |||
15 | .videos-total-results { | ||
16 | font-size: 13px; | ||
17 | padding-left: 0; | ||
18 | } | ||
19 | } | ||
20 | |||
21 | .videos-miniatures { | ||
22 | min-height: 600px; | ||
23 | |||
24 | my-videos-miniature { | ||
25 | display: inline-block; | ||
26 | } | ||
27 | |||
28 | .no-video { | ||
29 | margin-top: 50px; | ||
30 | text-align: center; | ||
31 | } | ||
32 | } | ||
33 | |||
34 | pagination { | ||
35 | display: block; | ||
36 | text-align: center; | ||
37 | } | ||
diff --git a/client/angular/videos/components/list/videos-list.component.ts b/client/angular/videos/components/list/videos-list.component.ts deleted file mode 100644 index 56230e331..000000000 --- a/client/angular/videos/components/list/videos-list.component.ts +++ /dev/null | |||
@@ -1,100 +0,0 @@ | |||
1 | import { Component, OnInit } from '@angular/core'; | ||
2 | import { ROUTER_DIRECTIVES, RouteParams, Router } from '@angular/router-deprecated'; | ||
3 | |||
4 | import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination'; | ||
5 | |||
6 | import { AuthService } from '../../../users/services/auth.service'; | ||
7 | import { Pagination } from '../../pagination'; | ||
8 | import { User } from '../../../users/models/user'; | ||
9 | import { VideosService } from '../../videos.service'; | ||
10 | import { Video } from '../../video'; | ||
11 | import { VideoMiniatureComponent } from './video-miniature.component'; | ||
12 | import { Search, SearchField } from '../../../app/search'; | ||
13 | import { VideoSortComponent } from './video-sort.component'; | ||
14 | import { SortField } from './sort'; | ||
15 | import { LoaderComponent } from '../../loader.component'; | ||
16 | |||
17 | @Component({ | ||
18 | selector: 'my-videos-list', | ||
19 | styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ], | ||
20 | templateUrl: 'app/angular/videos/components/list/videos-list.component.html', | ||
21 | directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent, LoaderComponent ] | ||
22 | }) | ||
23 | |||
24 | export class VideosListComponent implements OnInit { | ||
25 | user: User = null; | ||
26 | videos: Video[] = []; | ||
27 | pagination: Pagination = { | ||
28 | currentPage: 1, | ||
29 | itemsPerPage: 9, | ||
30 | total: 0 | ||
31 | }; | ||
32 | sort: SortField; | ||
33 | loading: boolean = false; | ||
34 | |||
35 | private search: Search; | ||
36 | |||
37 | constructor( | ||
38 | private _authService: AuthService, | ||
39 | private _videosService: VideosService, | ||
40 | private _routeParams: RouteParams, | ||
41 | private _router: Router | ||
42 | ) { | ||
43 | this.search = { | ||
44 | value: this._routeParams.get('search'), | ||
45 | field: <SearchField>this._routeParams.get('field') | ||
46 | }; | ||
47 | |||
48 | this.sort = <SortField>this._routeParams.get('sort') || '-createdDate'; | ||
49 | } | ||
50 | |||
51 | ngOnInit() { | ||
52 | if (this._authService.isLoggedIn()) { | ||
53 | this.user = User.load(); | ||
54 | } | ||
55 | |||
56 | this.getVideos(); | ||
57 | } | ||
58 | |||
59 | getVideos() { | ||
60 | this.loading = true; | ||
61 | this.videos = []; | ||
62 | |||
63 | let observable = null; | ||
64 | |||
65 | if (this.search.value !== null) { | ||
66 | observable = this._videosService.searchVideos(this.search, this.pagination, this.sort); | ||
67 | } else { | ||
68 | observable = this._videosService.getVideos(this.pagination, this.sort); | ||
69 | } | ||
70 | |||
71 | observable.subscribe( | ||
72 | ({ videos, totalVideos }) => { | ||
73 | this.videos = videos; | ||
74 | this.pagination.total = totalVideos; | ||
75 | this.loading = false; | ||
76 | }, | ||
77 | error => alert(error) | ||
78 | ); | ||
79 | } | ||
80 | |||
81 | onRemoved(video: Video): void { | ||
82 | this.videos.splice(this.videos.indexOf(video), 1); | ||
83 | } | ||
84 | |||
85 | onSort(sort: SortField) { | ||
86 | this.sort = sort; | ||
87 | |||
88 | const params: any = { | ||
89 | sort: this.sort | ||
90 | }; | ||
91 | |||
92 | if (this.search.value) { | ||
93 | params.search = this.search.value; | ||
94 | params.field = this.search.field; | ||
95 | } | ||
96 | |||
97 | this._router.navigate(['VideosList', params]); | ||
98 | this.getVideos(); | ||
99 | } | ||
100 | } | ||
diff --git a/client/angular/videos/components/watch/videos-watch.component.html b/client/angular/videos/components/watch/videos-watch.component.html deleted file mode 100644 index 6c36b27e2..000000000 --- a/client/angular/videos/components/watch/videos-watch.component.html +++ /dev/null | |||
@@ -1,10 +0,0 @@ | |||
1 | <my-loader [loading]="loading"></my-loader> | ||
2 | |||
3 | <div class="embed-responsive embed-responsive-19by9"> | ||
4 | </div> | ||
5 | |||
6 | <div id="torrent-info"> | ||
7 | <div id="torrent-info-download">Download: {{ downloadSpeed | bytes }}/s</div> | ||
8 | <div id="torrent-info-upload">Upload: {{ uploadSpeed | bytes }}/s</div> | ||
9 | <div id="torrent-info-peers">Number of peers: {{ numPeers }}</div> | ||
10 | <div> | ||
diff --git a/client/angular/videos/components/watch/videos-watch.component.scss b/client/angular/videos/components/watch/videos-watch.component.scss deleted file mode 100644 index 1228d42f4..000000000 --- a/client/angular/videos/components/watch/videos-watch.component.scss +++ /dev/null | |||
@@ -1,13 +0,0 @@ | |||
1 | .embed-responsive { | ||
2 | height: 500px; | ||
3 | } | ||
4 | |||
5 | #torrent-info { | ||
6 | font-size: 10px; | ||
7 | |||
8 | div { | ||
9 | display: inline-block; | ||
10 | width: 33%; | ||
11 | text-align: center; | ||
12 | } | ||
13 | } | ||
diff --git a/client/angular/videos/components/watch/videos-watch.component.ts b/client/angular/videos/components/watch/videos-watch.component.ts deleted file mode 100644 index e551e1f9a..000000000 --- a/client/angular/videos/components/watch/videos-watch.component.ts +++ /dev/null | |||
@@ -1,78 +0,0 @@ | |||
1 | import { Component, OnInit, ElementRef } from '@angular/core'; | ||
2 | import { RouteParams, CanDeactivate, ComponentInstruction } from '@angular/router-deprecated'; | ||
3 | |||
4 | import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; | ||
5 | |||
6 | import { LoaderComponent } from '../../loader.component'; | ||
7 | |||
8 | // TODO import it with systemjs | ||
9 | declare var WebTorrent: any; | ||
10 | |||
11 | import { Video } from '../../video'; | ||
12 | import { VideosService } from '../../videos.service'; | ||
13 | |||
14 | @Component({ | ||
15 | selector: 'my-video-watch', | ||
16 | templateUrl: 'app/angular/videos/components/watch/videos-watch.component.html', | ||
17 | styleUrls: [ 'app/angular/videos/components/watch/videos-watch.component.css' ], | ||
18 | directives: [ LoaderComponent ], | ||
19 | pipes: [ BytesPipe ] | ||
20 | }) | ||
21 | |||
22 | export class VideosWatchComponent implements OnInit, CanDeactivate { | ||
23 | video: Video; | ||
24 | downloadSpeed: number; | ||
25 | uploadSpeed: number; | ||
26 | numPeers: number; | ||
27 | loading: boolean = false; | ||
28 | |||
29 | private _interval: NodeJS.Timer; | ||
30 | private client: any; | ||
31 | |||
32 | constructor( | ||
33 | private _videosService: VideosService, | ||
34 | private _routeParams: RouteParams, | ||
35 | private _elementRef: ElementRef | ||
36 | ) { | ||
37 | // TODO: use a service | ||
38 | this.client = new WebTorrent({ dht: false }); | ||
39 | } | ||
40 | |||
41 | ngOnInit() { | ||
42 | let id = this._routeParams.get('id'); | ||
43 | this._videosService.getVideo(id).subscribe( | ||
44 | video => this.loadVideo(video), | ||
45 | error => alert(error) | ||
46 | ); | ||
47 | } | ||
48 | |||
49 | loadVideo(video: Video) { | ||
50 | this.loading = true; | ||
51 | this.video = video; | ||
52 | console.log('Adding ' + this.video.magnetUri + '.'); | ||
53 | this.client.add(this.video.magnetUri, (torrent) => { | ||
54 | this.loading = false; | ||
55 | console.log('Added ' + this.video.magnetUri + '.'); | ||
56 | torrent.files[0].appendTo(this._elementRef.nativeElement.querySelector('.embed-responsive'), (err) => { | ||
57 | if (err) { | ||
58 | alert('Cannot append the file.'); | ||
59 | console.error(err); | ||
60 | } | ||
61 | }); | ||
62 | |||
63 | // Refresh each second | ||
64 | this._interval = setInterval(() => { | ||
65 | this.downloadSpeed = torrent.downloadSpeed; | ||
66 | this.uploadSpeed = torrent.uploadSpeed; | ||
67 | this.numPeers = torrent.numPeers; | ||
68 | }, 1000); | ||
69 | }); | ||
70 | } | ||
71 | |||
72 | routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) : any { | ||
73 | console.log('Removing video from webtorrent.'); | ||
74 | clearInterval(this._interval); | ||
75 | this.client.remove(this.video.magnetUri); | ||
76 | return true; | ||
77 | } | ||
78 | } | ||
diff --git a/client/angular/videos/loader.component.html b/client/angular/videos/loader.component.html deleted file mode 100644 index d02296a2d..000000000 --- a/client/angular/videos/loader.component.html +++ /dev/null | |||
@@ -1,3 +0,0 @@ | |||
1 | <div id="video-loading" class="col-md-12 text-center" *ngIf="loading"> | ||
2 | <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div> | ||
3 | </div> | ||
diff --git a/client/angular/videos/loader.component.scss b/client/angular/videos/loader.component.scss deleted file mode 100644 index 454195811..000000000 --- a/client/angular/videos/loader.component.scss +++ /dev/null | |||
@@ -1,26 +0,0 @@ | |||
1 | div { | ||
2 | margin-top: 150px; | ||
3 | } | ||
4 | |||
5 | // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d | ||
6 | .glyphicon-refresh-animate { | ||
7 | -animation: spin .7s infinite linear; | ||
8 | -ms-animation: spin .7s infinite linear; | ||
9 | -webkit-animation: spinw .7s infinite linear; | ||
10 | -moz-animation: spinm .7s infinite linear; | ||
11 | } | ||
12 | |||
13 | @keyframes spin { | ||
14 | from { transform: scale(1) rotate(0deg);} | ||
15 | to { transform: scale(1) rotate(360deg);} | ||
16 | } | ||
17 | |||
18 | @-webkit-keyframes spinw { | ||
19 | from { -webkit-transform: rotate(0deg);} | ||
20 | to { -webkit-transform: rotate(360deg);} | ||
21 | } | ||
22 | |||
23 | @-moz-keyframes spinm { | ||
24 | from { -moz-transform: rotate(0deg);} | ||
25 | to { -moz-transform: rotate(360deg);} | ||
26 | } | ||
diff --git a/client/angular/videos/loader.component.ts b/client/angular/videos/loader.component.ts deleted file mode 100644 index 24329432e..000000000 --- a/client/angular/videos/loader.component.ts +++ /dev/null | |||
@@ -1,11 +0,0 @@ | |||
1 | import { Component, Input } from '@angular/core'; | ||
2 | |||
3 | @Component({ | ||
4 | selector: 'my-loader', | ||
5 | styleUrls: [ 'app/angular/videos/loader.component.css' ], | ||
6 | templateUrl: 'app/angular/videos/loader.component.html' | ||
7 | }) | ||
8 | |||
9 | export class LoaderComponent { | ||
10 | @Input() loading: boolean; | ||
11 | } | ||
diff --git a/client/angular/videos/pagination.ts b/client/angular/videos/pagination.ts deleted file mode 100644 index 06f7a7875..000000000 --- a/client/angular/videos/pagination.ts +++ /dev/null | |||
@@ -1,5 +0,0 @@ | |||
1 | export interface Pagination { | ||
2 | currentPage: number; | ||
3 | itemsPerPage: number; | ||
4 | total: number; | ||
5 | } | ||
diff --git a/client/angular/videos/video.ts b/client/angular/videos/video.ts deleted file mode 100644 index eec537c9e..000000000 --- a/client/angular/videos/video.ts +++ /dev/null | |||
@@ -1,63 +0,0 @@ | |||
1 | export class Video { | ||
2 | id: string; | ||
3 | name: string; | ||
4 | description: string; | ||
5 | magnetUri: string; | ||
6 | podUrl: string; | ||
7 | isLocal: boolean; | ||
8 | thumbnailPath: string; | ||
9 | author: string; | ||
10 | createdDate: Date; | ||
11 | by: string; | ||
12 | duration: string; | ||
13 | |||
14 | private static createDurationString(duration: number): string { | ||
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 | |||
23 | private static createByString(author: string, podUrl: string): string { | ||
24 | let [ host, port ] = podUrl.replace(/^https?:\/\//, '').split(':'); | ||
25 | |||
26 | if (port === '80' || port === '443') { | ||
27 | port = ''; | ||
28 | } else { | ||
29 | port = ':' + port; | ||
30 | } | ||
31 | |||
32 | return author + '@' + host + port; | ||
33 | } | ||
34 | |||
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, | ||
44 | createdDate: string, | ||
45 | duration: number; | ||
46 | }) { | ||
47 | this.id = hash.id; | ||
48 | this.name = hash.name; | ||
49 | this.description = hash.description; | ||
50 | this.magnetUri = hash.magnetUri; | ||
51 | this.podUrl = hash.podUrl; | ||
52 | this.isLocal = hash.isLocal; | ||
53 | this.thumbnailPath = hash.thumbnailPath; | ||
54 | this.author = hash.author; | ||
55 | this.createdDate = new Date(hash.createdDate); | ||
56 | this.duration = Video.createDurationString(hash.duration); | ||
57 | this.by = Video.createByString(hash.author, hash.podUrl); | ||
58 | } | ||
59 | |||
60 | isRemovableBy(user): boolean { | ||
61 | return this.isLocal === true && user && this.author === user.username; | ||
62 | } | ||
63 | } | ||
diff --git a/client/angular/videos/videos.service.ts b/client/angular/videos/videos.service.ts deleted file mode 100644 index d5438fd82..000000000 --- a/client/angular/videos/videos.service.ts +++ /dev/null | |||
@@ -1,79 +0,0 @@ | |||
1 | import { Injectable } from '@angular/core'; | ||
2 | import { Http, Response, URLSearchParams } from '@angular/http'; | ||
3 | import { Observable } from 'rxjs/Rx'; | ||
4 | |||
5 | import { Pagination } from './pagination'; | ||
6 | import { Video } from './video'; | ||
7 | import { AuthService } from '../users/services/auth.service'; | ||
8 | import { Search } from '../app/search'; | ||
9 | import { SortField } from './components/list/sort'; | ||
10 | |||
11 | @Injectable() | ||
12 | export class VideosService { | ||
13 | private _baseVideoUrl = '/api/v1/videos/'; | ||
14 | |||
15 | constructor (private http: Http, private _authService: AuthService) {} | ||
16 | |||
17 | getVideos(pagination: Pagination, sort: SortField) { | ||
18 | const params = this.createPaginationParams(pagination); | ||
19 | |||
20 | if (sort) params.set('sort', sort); | ||
21 | |||
22 | return this.http.get(this._baseVideoUrl, { search: params }) | ||
23 | .map(res => res.json()) | ||
24 | .map(this.extractVideos) | ||
25 | .catch(this.handleError); | ||
26 | } | ||
27 | |||
28 | getVideo(id: string) { | ||
29 | return this.http.get(this._baseVideoUrl + id) | ||
30 | .map(res => <Video> res.json()) | ||
31 | .catch(this.handleError); | ||
32 | } | ||
33 | |||
34 | removeVideo(id: string) { | ||
35 | const options = this._authService.getAuthRequestOptions(); | ||
36 | return this.http.delete(this._baseVideoUrl + id, options) | ||
37 | .map(res => <number> res.status) | ||
38 | .catch(this.handleError); | ||
39 | } | ||
40 | |||
41 | searchVideos(search: Search, pagination: Pagination, sort: SortField) { | ||
42 | const params = this.createPaginationParams(pagination); | ||
43 | |||
44 | if (search.field) params.set('field', search.field); | ||
45 | if (sort) params.set('sort', sort); | ||
46 | |||
47 | return this.http.get(this._baseVideoUrl + 'search/' + encodeURIComponent(search.value), { search: params }) | ||
48 | .map(res => res.json()) | ||
49 | .map(this.extractVideos) | ||
50 | .catch(this.handleError); | ||
51 | } | ||
52 | |||
53 | private extractVideos (body: any) { | ||
54 | const videos_json = body.data; | ||
55 | const totalVideos = body.total; | ||
56 | const videos = []; | ||
57 | for (const video_json of videos_json) { | ||
58 | videos.push(new Video(video_json)); | ||
59 | } | ||
60 | |||
61 | return { videos, totalVideos }; | ||
62 | } | ||
63 | |||
64 | private handleError (error: Response) { | ||
65 | console.error(error); | ||
66 | return Observable.throw(error.json().error || 'Server error'); | ||
67 | } | ||
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 | } | ||