From 41a2aee38cf812510010da09de9bae53590ec119 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 27 May 2016 16:23:10 +0200 Subject: Follow the angular styleguide for the directories structure --- client/.gitignore | 8 +- client/angular/app/app.component.html | 60 ------------ client/angular/app/app.component.scss | 32 ------ client/angular/app/app.component.ts | 106 -------------------- client/angular/app/search.component.html | 17 ---- client/angular/app/search.component.ts | 46 --------- client/angular/app/search.ts | 6 -- client/angular/friends/services/friends.service.ts | 27 ----- client/angular/main.ts | 4 - .../users/components/login/login.component.html | 14 --- .../users/components/login/login.component.scss | 0 .../users/components/login/login.component.ts | 36 ------- client/angular/users/models/authStatus.ts | 4 - client/angular/users/models/token.ts | 31 ------ client/angular/users/models/user.ts | 20 ---- client/angular/users/services/auth.service.ts | 107 -------------------- .../components/add/videos-add.component.html | 41 -------- .../components/add/videos-add.component.scss | 33 ------- .../videos/components/add/videos-add.component.ts | 69 ------------- client/angular/videos/components/list/sort.ts | 3 - .../components/list/video-miniature.component.html | 22 ----- .../components/list/video-miniature.component.scss | 55 ----------- .../components/list/video-miniature.component.ts | 47 --------- .../components/list/video-sort.component.html | 5 - .../videos/components/list/video-sort.component.ts | 36 ------- .../components/list/videos-list.component.html | 18 ---- .../components/list/videos-list.component.scss | 37 ------- .../components/list/videos-list.component.ts | 100 ------------------- .../components/watch/videos-watch.component.html | 10 -- .../components/watch/videos-watch.component.scss | 13 --- .../components/watch/videos-watch.component.ts | 78 --------------- client/angular/videos/loader.component.html | 3 - client/angular/videos/loader.component.scss | 26 ----- client/angular/videos/loader.component.ts | 11 --- client/angular/videos/pagination.ts | 5 - client/angular/videos/video.ts | 63 ------------ client/angular/videos/videos.service.ts | 79 --------------- client/app/app.component.html | 60 ++++++++++++ client/app/app.component.scss | 32 ++++++ client/app/app.component.ts | 109 +++++++++++++++++++++ client/app/friends/friend.service.ts | 27 +++++ client/app/friends/index.ts | 1 + client/app/shared/index.ts | 3 + client/app/shared/search-field.type.ts | 1 + client/app/shared/search.component.html | 17 ++++ client/app/shared/search.component.ts | 47 +++++++++ client/app/shared/search.model.ts | 6 ++ client/app/users/index.ts | 2 + client/app/users/login/index.ts | 1 + client/app/users/login/login.component.html | 14 +++ client/app/users/login/login.component.scss | 0 client/app/users/login/login.component.ts | 34 +++++++ client/app/users/shared/auth-status.model.ts | 4 + client/app/users/shared/auth.service.ts | 107 ++++++++++++++++++++ client/app/users/shared/index.ts | 4 + client/app/users/shared/token.model.ts | 31 ++++++ client/app/users/shared/user.model.ts | 20 ++++ client/app/videos/index.ts | 4 + client/app/videos/shared/index.ts | 5 + client/app/videos/shared/loader/index.ts | 1 + .../app/videos/shared/loader/loader.component.html | 3 + .../app/videos/shared/loader/loader.component.scss | 26 +++++ .../app/videos/shared/loader/loader.component.ts | 11 +++ client/app/videos/shared/pagination.model.ts | 5 + client/app/videos/shared/sort-field.type.ts | 3 + client/app/videos/shared/video.model.ts | 63 ++++++++++++ client/app/videos/shared/video.service.ts | 79 +++++++++++++++ client/app/videos/video-add/index.ts | 1 + .../app/videos/video-add/video-add.component.html | 41 ++++++++ .../app/videos/video-add/video-add.component.scss | 33 +++++++ client/app/videos/video-add/video-add.component.ts | 68 +++++++++++++ client/app/videos/video-list/index.ts | 3 + .../videos/video-list/video-list.component.html | 18 ++++ .../videos/video-list/video-list.component.scss | 37 +++++++ .../app/videos/video-list/video-list.component.ts | 101 +++++++++++++++++++ .../video-list/video-miniature.component.html | 22 +++++ .../video-list/video-miniature.component.scss | 55 +++++++++++ .../videos/video-list/video-miniature.component.ts | 46 +++++++++ .../videos/video-list/video-sort.component.html | 5 + .../app/videos/video-list/video-sort.component.ts | 36 +++++++ client/app/videos/video-watch/index.ts | 1 + .../videos/video-watch/video-watch.component.html | 10 ++ .../videos/video-watch/video-watch.component.scss | 13 +++ .../videos/video-watch/video-watch.component.ts | 75 ++++++++++++++ client/index.html | 24 ++--- client/main.ts | 5 + client/stylesheets/application.scss | 2 +- client/systemjs.config.js | 9 +- client/tsconfig.json | 52 ++++++---- scripts/build/client/sass.sh | 2 +- scripts/clean/client/sass.sh | 2 +- scripts/clean/client/tsc.sh | 3 +- scripts/watch/client/livereload.sh | 2 +- scripts/watch/client/sass.sh | 2 +- server.js | 4 +- 95 files changed, 1352 insertions(+), 1312 deletions(-) delete mode 100644 client/angular/app/app.component.html delete mode 100644 client/angular/app/app.component.scss delete mode 100644 client/angular/app/app.component.ts delete mode 100644 client/angular/app/search.component.html delete mode 100644 client/angular/app/search.component.ts delete mode 100644 client/angular/app/search.ts delete mode 100644 client/angular/friends/services/friends.service.ts delete mode 100644 client/angular/main.ts delete mode 100644 client/angular/users/components/login/login.component.html delete mode 100644 client/angular/users/components/login/login.component.scss delete mode 100644 client/angular/users/components/login/login.component.ts delete mode 100644 client/angular/users/models/authStatus.ts delete mode 100644 client/angular/users/models/token.ts delete mode 100644 client/angular/users/models/user.ts delete mode 100644 client/angular/users/services/auth.service.ts delete mode 100644 client/angular/videos/components/add/videos-add.component.html delete mode 100644 client/angular/videos/components/add/videos-add.component.scss delete mode 100644 client/angular/videos/components/add/videos-add.component.ts delete mode 100644 client/angular/videos/components/list/sort.ts delete mode 100644 client/angular/videos/components/list/video-miniature.component.html delete mode 100644 client/angular/videos/components/list/video-miniature.component.scss delete mode 100644 client/angular/videos/components/list/video-miniature.component.ts delete mode 100644 client/angular/videos/components/list/video-sort.component.html delete mode 100644 client/angular/videos/components/list/video-sort.component.ts delete mode 100644 client/angular/videos/components/list/videos-list.component.html delete mode 100644 client/angular/videos/components/list/videos-list.component.scss delete mode 100644 client/angular/videos/components/list/videos-list.component.ts delete mode 100644 client/angular/videos/components/watch/videos-watch.component.html delete mode 100644 client/angular/videos/components/watch/videos-watch.component.scss delete mode 100644 client/angular/videos/components/watch/videos-watch.component.ts delete mode 100644 client/angular/videos/loader.component.html delete mode 100644 client/angular/videos/loader.component.scss delete mode 100644 client/angular/videos/loader.component.ts delete mode 100644 client/angular/videos/pagination.ts delete mode 100644 client/angular/videos/video.ts delete mode 100644 client/angular/videos/videos.service.ts create mode 100644 client/app/app.component.html create mode 100644 client/app/app.component.scss create mode 100644 client/app/app.component.ts create mode 100644 client/app/friends/friend.service.ts create mode 100644 client/app/friends/index.ts create mode 100644 client/app/shared/index.ts create mode 100644 client/app/shared/search-field.type.ts create mode 100644 client/app/shared/search.component.html create mode 100644 client/app/shared/search.component.ts create mode 100644 client/app/shared/search.model.ts create mode 100644 client/app/users/index.ts create mode 100644 client/app/users/login/index.ts create mode 100644 client/app/users/login/login.component.html create mode 100644 client/app/users/login/login.component.scss create mode 100644 client/app/users/login/login.component.ts create mode 100644 client/app/users/shared/auth-status.model.ts create mode 100644 client/app/users/shared/auth.service.ts create mode 100644 client/app/users/shared/index.ts create mode 100644 client/app/users/shared/token.model.ts create mode 100644 client/app/users/shared/user.model.ts create mode 100644 client/app/videos/index.ts create mode 100644 client/app/videos/shared/index.ts create mode 100644 client/app/videos/shared/loader/index.ts create mode 100644 client/app/videos/shared/loader/loader.component.html create mode 100644 client/app/videos/shared/loader/loader.component.scss create mode 100644 client/app/videos/shared/loader/loader.component.ts create mode 100644 client/app/videos/shared/pagination.model.ts create mode 100644 client/app/videos/shared/sort-field.type.ts create mode 100644 client/app/videos/shared/video.model.ts create mode 100644 client/app/videos/shared/video.service.ts create mode 100644 client/app/videos/video-add/index.ts create mode 100644 client/app/videos/video-add/video-add.component.html create mode 100644 client/app/videos/video-add/video-add.component.scss create mode 100644 client/app/videos/video-add/video-add.component.ts create mode 100644 client/app/videos/video-list/index.ts create mode 100644 client/app/videos/video-list/video-list.component.html create mode 100644 client/app/videos/video-list/video-list.component.scss create mode 100644 client/app/videos/video-list/video-list.component.ts create mode 100644 client/app/videos/video-list/video-miniature.component.html create mode 100644 client/app/videos/video-list/video-miniature.component.scss create mode 100644 client/app/videos/video-list/video-miniature.component.ts create mode 100644 client/app/videos/video-list/video-sort.component.html create mode 100644 client/app/videos/video-list/video-sort.component.ts create mode 100644 client/app/videos/video-watch/index.ts create mode 100644 client/app/videos/video-watch/video-watch.component.html create mode 100644 client/app/videos/video-watch/video-watch.component.scss create mode 100644 client/app/videos/video-watch/video-watch.component.ts create mode 100644 client/main.ts diff --git a/client/.gitignore b/client/.gitignore index 0ab218d71..81e4a1cf7 100644 --- a/client/.gitignore +++ b/client/.gitignore @@ -1,6 +1,8 @@ typings -angular/**/*.js -angular/**/*.map -angular/**/*.css +app/**/*.js +app/**/*.map +app/**/*.css stylesheets/index.css bundles +main.js +main.js.map 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 @@ -
- -
-
-

PeerTube

-
- -
- -
-
- - -
- - -
-
- - Login - Logout -
-
- -
-
- - Get videos -
- - -
- -
-
- - Make friends -
- -
- - Quit friends -
-
- - -
- -
- -
- - -
- PeerTube, CopyLeft 2015-2016 -
-
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 @@ -header div { - line-height: 25px; - margin-bottom: 30px; -} - -menu { - min-height: 600px; - margin-right: 20px; - border-right: 1px solid rgba(0, 0, 0, 0.2); - - .panel_button { - margin: 8px; - cursor: pointer; - transition: margin 0.2s; - - &:hover { - margin-left: 15px; - } - - a { - color: #333333; - } - } - - .glyphicon { - margin: 5px; - } -} - -.panel_block:not(:last-child) { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); -} 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 @@ -import { Component } from '@angular/core'; -import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router } from '@angular/router-deprecated'; -import { HTTP_PROVIDERS } from '@angular/http'; - -import { VideosAddComponent } from '../videos/components/add/videos-add.component'; -import { VideosListComponent } from '../videos/components/list/videos-list.component'; -import { VideosWatchComponent } from '../videos/components/watch/videos-watch.component'; -import { VideosService } from '../videos/videos.service'; -import { FriendsService } from '../friends/services/friends.service'; -import { UserLoginComponent } from '../users/components/login/login.component'; -import { AuthService } from '../users/services/auth.service'; -import { AuthStatus } from '../users/models/authStatus'; -import { SearchComponent } from './search.component'; -import { Search } from './search'; - -@RouteConfig([ - { - path: '/users/login', - name: 'UserLogin', - component: UserLoginComponent - }, - { - path: '/videos/list', - name: 'VideosList', - component: VideosListComponent, - useAsDefault: true - }, - { - path: '/videos/watch/:id', - name: 'VideosWatch', - component: VideosWatchComponent - }, - { - path: '/videos/add', - name: 'VideosAdd', - component: VideosAddComponent - } -]) - -@Component({ - selector: 'my-app', - templateUrl: 'app/angular/app/app.component.html', - styleUrls: [ 'app/angular/app/app.component.css' ], - directives: [ ROUTER_DIRECTIVES, SearchComponent ], - providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS, VideosService, FriendsService, AuthService ] -}) - -export class AppComponent { - isLoggedIn: boolean; - search_field: string = name; - choices = [ ]; - - constructor(private _friendsService: FriendsService, - private _authService: AuthService, - private _router: Router - - ) { - this.isLoggedIn = this._authService.isLoggedIn(); - - this._authService.loginChanged$.subscribe( - status => { - if (status === AuthStatus.LoggedIn) { - this.isLoggedIn = true; - } - } - ); - } - - onSearch(search: Search) { - if (search.value !== '') { - const params = { - search: search.value, - field: search.field - }; - this._router.navigate(['VideosList', params]); - } else { - this._router.navigate(['VideosList']); - } - } - - logout() { - // this._authService.logout(); - } - - makeFriends() { - this._friendsService.makeFriends().subscribe( - status => { - if (status === 409) { - alert('Already made friends!'); - } else { - alert('Made friends!'); - } - }, - error => alert(error) - ); - } - - quitFriends() { - this._friendsService.quitFriends().subscribe( - status => { - alert('Quit friends!'); - }, - error => alert(error) - ); - } -} 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 @@ -
-
- - -
- - -
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 @@ -import { Component, EventEmitter, Output } from '@angular/core'; - -import { DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/components/dropdown'; - -import { Search, SearchField } from './search'; - -@Component({ - selector: 'my-search', - templateUrl: 'app/angular/app/search.component.html', - directives: [ DROPDOWN_DIRECTIVES ] -}) - -export class SearchComponent { - @Output() search: EventEmitter = new EventEmitter(); - - searchCriterias: Search = { - field: 'name', - value: '' - }; - fieldChoices = { - name: 'Name', - author: 'Author', - podUrl: 'Pod Url', - magnetUri: 'Magnet Uri' - }; - - get choiceKeys() { - return Object.keys(this.fieldChoices); - } - - getStringChoice(choiceKey: SearchField): string { - return this.fieldChoices[choiceKey]; - } - - choose($event:MouseEvent, choice: SearchField) { - $event.preventDefault(); - $event.stopPropagation(); - - this.searchCriterias.field = choice; - } - - doSearch(): void { - this.search.emit(this.searchCriterias); - } - -} 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 @@ -export type SearchField = "name" | "author" | "podUrl" | "magnetUri"; - -export interface Search { - field: SearchField; - value: string; -} 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 @@ -import { Injectable } from '@angular/core'; -import { Http, Response } from '@angular/http'; -import { Observable } from 'rxjs/Rx'; - -@Injectable() -export class FriendsService { - private _baseFriendsUrl = '/api/v1/pods/'; - - constructor (private http: Http) {} - - makeFriends() { - return this.http.get(this._baseFriendsUrl + 'makefriends') - .map(res => res.status) - .catch(this.handleError); - } - - quitFriends() { - return this.http.get(this._baseFriendsUrl + 'quitfriends') - .map(res => res.status) - .catch(this.handleError); - } - - private handleError (error: Response) { - console.error(error); - return Observable.throw(error.json().error || 'Server error'); - } -} 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 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app/app.component'; - -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 @@ -

Login

-
-
- - -
- -
- - -
- - -
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 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 @@ -import { Component } from '@angular/core'; -import { Router } from '@angular/router-deprecated'; - -import { AuthService } from '../../services/auth.service'; -import { AuthStatus } from '../../models/authStatus'; -import { User } from '../../models/user'; - -@Component({ - selector: 'my-user-login', - styleUrls: [ 'app/angular/users/components/login/login.component.css' ], - templateUrl: 'app/angular/users/components/login/login.component.html' -}) - -export class UserLoginComponent { - constructor(private _authService: AuthService, private _router: Router) {} - - login(username: string, password: string) { - this._authService.login(username, password).subscribe( - result => { - const user = new User(username, result); - user.save(); - - this._authService.setStatus(AuthStatus.LoggedIn); - - this._router.navigate(['VideosList']); - }, - error => { - if (error.error === 'invalid_grant') { - alert('Credentials are invalid.'); - } else { - alert(`${error.error}: ${error.error_description}`); - } - } - ); - } -} 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 @@ -export enum AuthStatus { - LoggedIn, - LoggedOut -} 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 @@ -export class Token { - access_token: string; - refresh_token: string; - token_type: string; - - static load(): Token { - return new Token({ - access_token: localStorage.getItem('access_token'), - refresh_token: localStorage.getItem('refresh_token'), - token_type: localStorage.getItem('token_type') - }); - } - - constructor (hash?: any) { - if (hash) { - this.access_token = hash.access_token; - this.refresh_token = hash.refresh_token; - if (hash.token_type === 'bearer') { - this.token_type = 'Bearer'; - } else { - this.token_type = hash.token_type; - } - } - } - - save():void { - localStorage.setItem('access_token', this.access_token); - localStorage.setItem('refresh_token', this.refresh_token); - localStorage.setItem('token_type', this.token_type); - } -} 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 @@ -import { Token } from './token'; - -export class User { - username: string; - token: Token; - - static load(): User { - return new User(localStorage.getItem('username'), Token.load()); - } - - constructor (username: string, hash_token: any) { - this.username = username; - this.token = new Token(hash_token); - } - - save(): void { - localStorage.setItem('username', this.username); - this.token.save(); - } -} 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 @@ -import { Injectable } from '@angular/core'; -import { Http, Response, Headers, URLSearchParams, RequestOptions } from '@angular/http'; -import { Observable, Subject } from 'rxjs/Rx'; - -import { AuthStatus } from '../models/authStatus'; -import { User } from '../models/user'; - -@Injectable() -export class AuthService { - loginChanged$; - - private _loginChanged; - private _baseLoginUrl = '/api/v1/users/token'; - private _baseClientUrl = '/api/v1/users/client'; - private _clientId = ''; - private _clientSecret = ''; - - constructor (private http: Http) { - this._loginChanged = new Subject(); - this.loginChanged$ = this._loginChanged.asObservable(); - - // Fetch the client_id/client_secret - // FIXME: save in local storage? - this.http.get(this._baseClientUrl) - .map(res => res.json()) - .catch(this.handleError) - .subscribe( - result => { - this._clientId = result.client_id; - this._clientSecret = result.client_secret; - console.log('Client credentials loaded.'); - }, - error => { - alert(error); - } - ); - } - - login(username: string, password: string) { - let body = new URLSearchParams(); - body.set('client_id', this._clientId); - body.set('client_secret', this._clientSecret); - body.set('response_type', 'code'); - body.set('grant_type', 'password'); - body.set('scope', 'upload'); - body.set('username', username); - body.set('password', password); - - let headers = new Headers(); - headers.append('Content-Type', 'application/x-www-form-urlencoded'); - - let options = { - headers: headers - }; - - return this.http.post(this._baseLoginUrl, body.toString(), options) - .map(res => res.json()) - .catch(this.handleError); - } - - logout() { - // TODO make HTTP request - } - - getRequestHeader(): Headers { - return new Headers({ 'Authorization': `${this.getTokenType()} ${this.getToken()}` }); - } - - getAuthRequestOptions(): RequestOptions { - return new RequestOptions({ headers: this.getRequestHeader() }); - } - - getToken(): string { - return localStorage.getItem('access_token'); - } - - getTokenType(): string { - return localStorage.getItem('token_type'); - } - - getUser(): User { - if (this.isLoggedIn() === false) { - return null; - } - - const user = User.load(); - - return user; - } - - isLoggedIn(): boolean { - if (this.getToken()) { - return true; - } else { - return false; - } - } - - setStatus(status: AuthStatus) { - this._loginChanged.next(status); - } - - private handleError (error: Response) { - console.error(error); - return Observable.throw(error.json() || { error: 'Server error' }); - } -} 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 @@ -

Upload a video

- -
-
- - -
- Name is required -
-
- -
-
- Select the video... - -
- - {{ fileToUpload.name }} -
- -
- - -
- A description is required -
-
- -
- {{ progressBar.value | bytes }} / {{ progressBar.max | bytes }} -
- - -
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 @@ -.btn-file { - position: relative; - overflow: hidden; -} - -.btn-file input[type=file] { - position: absolute; - top: 0; - right: 0; - min-width: 100%; - min-height: 100%; - font-size: 100px; - text-align: right; - filter: alpha(opacity=0); - opacity: 0; - outline: none; - background: white; - cursor: inherit; - display: block; -} - -.name_file { - display: inline-block; - margin-left: 10px; -} - -.form-group { - margin-bottom: 10px; -} - -#progress { - margin-bottom: 10px; -} 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 @@ -import { Component, ElementRef, OnInit } from '@angular/core'; -import { Router } from '@angular/router-deprecated'; - -import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar'; -import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; - -import { AuthService } from '../../../users/services/auth.service'; -import { User } from '../../../users/models/user'; - -// TODO: import it with systemjs -declare var jQuery:any; - -@Component({ - selector: 'my-videos-add', - styleUrls: [ 'app/angular/videos/components/add/videos-add.component.css' ], - templateUrl: 'app/angular/videos/components/add/videos-add.component.html', - directives: [ PROGRESSBAR_DIRECTIVES ], - pipes: [ BytesPipe ] -}) - -export class VideosAddComponent implements OnInit { - user: User; - fileToUpload: any; - progressBar: { value: number; max: number; } = { value: 0, max: 0 }; - - private _form: any; - - constructor( - private _router: Router, private _elementRef: ElementRef, - private _authService: AuthService - ) {} - - ngOnInit() { - this.user = User.load(); - jQuery(this._elementRef.nativeElement).find('#videofile').fileupload({ - url: '/api/v1/videos', - dataType: 'json', - singleFileUploads: true, - multipart: true, - autoupload: false, - - add: (e, data) => { - this._form = data; - this.fileToUpload = data['files'][0]; - }, - - progressall: (e, data) => { - this.progressBar.value = data.loaded; - // The server is a little bit slow to answer (has to seed the video) - // So we add more time to the progress bar (+10%) - this.progressBar.max = data.total + (0.1 * data.total); - }, - - done: (e, data) => { - this.progressBar.value = this.progressBar.max; - console.log('Video uploaded.'); - - // Print all the videos once it's finished - this._router.navigate(['VideosList']); - } - }); - } - - uploadFile() { - this._form.headers = this._authService.getRequestHeader().toJSON(); - this._form.formData = jQuery(this._elementRef.nativeElement).find('form').serializeArray(); - this._form.submit(); - } -} 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 @@ -export type SortField = "name" | "-name" - | "duration" | "-duration" - | "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 @@ -
- - video thumbnail - {{ video.duration }} - - - -
- - {{ video.name }} - - - by {{ video.by }} - on {{ video.createdDate | date:'short' }} -
-
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 @@ -.video-miniature { - height: 200px; - display: inline-block; - position: relative; - - .video-miniature-thumbnail { - display: block; - position: relative; - - .video-miniature-duration { - position: absolute; - right: 60px; - bottom: 2px; - display: inline-block; - background-color: rgba(0, 0, 0, 0.8); - color: rgba(255, 255, 255, 0.8); - padding: 2px; - font-size: 11px; - } - } - - .video-miniature-remove { - display: inline-block; - position: absolute; - left: 16px; - background-color: rgba(0, 0, 0, 0.8); - color: rgba(255, 255, 255, 0.8); - padding: 2px; - cursor: pointer; - - &:hover { - color: rgba(255, 255, 255, 0.9); - } - } - - .video-miniature-informations { - margin-left: 3px; - - .video-miniature-name { - display: block; - font-weight: bold; - - &:hover { - text-decoration: none; - } - } - - .video-miniature-author, .video-miniature-created-date { - display: block; - margin-left: 1px; - font-size: 11px; - color: rgba(0, 0, 0, 0.5); - } - } -} 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 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; -import { DatePipe } from '@angular/common'; -import { ROUTER_DIRECTIVES } from '@angular/router-deprecated'; - -import { Video } from '../../video'; -import { VideosService } from '../../videos.service'; -import { User } from '../../../users/models/user'; - -@Component({ - selector: 'my-video-miniature', - styleUrls: [ 'app/angular/videos/components/list/video-miniature.component.css' ], - templateUrl: 'app/angular/videos/components/list/video-miniature.component.html', - directives: [ ROUTER_DIRECTIVES ], - pipes: [ DatePipe ] -}) - -export class VideoMiniatureComponent { - @Output() removed = new EventEmitter(); - - @Input() video: Video; - @Input() user: User; - - hovering: boolean = false; - - constructor(private _videosService: VideosService) {} - - onHover() { - this.hovering = true; - } - - onBlur() { - this.hovering = false; - } - - displayRemoveIcon(): boolean { - return this.hovering && this.video.isRemovableBy(this.user); - } - - removeVideo(id: string) { - if (confirm('Do you really want to remove this video?')) { - this._videosService.removeVideo(id).subscribe( - status => this.removed.emit(true), - error => alert(error) - ); - } - } -} 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 @@ - 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 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; - -import { SortField } from './sort'; - -@Component({ - selector: 'my-video-sort', - // styleUrls: [ 'app/angular/videos/components/list/video-sort.component.css' ], - templateUrl: 'app/angular/videos/components/list/video-sort.component.html' -}) - -export class VideoSortComponent { - @Output() sort = new EventEmitter(); - - @Input() currentSort: SortField; - - sortChoices = { - 'name': 'Name - Asc', - '-name': 'Name - Desc', - 'duration': 'Duration - Asc', - '-duration': 'Duration - Desc', - 'createdDate': 'Created Date - Asc', - '-createdDate': 'Created Date - Desc' - }; - - get choiceKeys() { - return Object.keys(this.sortChoices); - } - - getStringChoice(choiceKey: SortField): string { - return this.sortChoices[choiceKey]; - } - - onSortChange() { - this.sort.emit(this.currentSort); - } -} 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 @@ -
-
{{ pagination.total }} videos
- -
- -
- - -
There is no video.
- - - -
- - 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 @@ -.videos-info { - - padding-bottom: 20px; - margin-bottom: 20px; - border-bottom: 1px solid #f1f1f1; - height: 40px; - line-height: 40px; - width: 765px; - margin-left: 15px; - - my-video-sort { - padding-right: 0; - } - - .videos-total-results { - font-size: 13px; - padding-left: 0; - } -} - -.videos-miniatures { - min-height: 600px; - - my-videos-miniature { - display: inline-block; - } - - .no-video { - margin-top: 50px; - text-align: center; - } -} - -pagination { - display: block; - text-align: center; -} 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 @@ -import { Component, OnInit } from '@angular/core'; -import { ROUTER_DIRECTIVES, RouteParams, Router } from '@angular/router-deprecated'; - -import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination'; - -import { AuthService } from '../../../users/services/auth.service'; -import { Pagination } from '../../pagination'; -import { User } from '../../../users/models/user'; -import { VideosService } from '../../videos.service'; -import { Video } from '../../video'; -import { VideoMiniatureComponent } from './video-miniature.component'; -import { Search, SearchField } from '../../../app/search'; -import { VideoSortComponent } from './video-sort.component'; -import { SortField } from './sort'; -import { LoaderComponent } from '../../loader.component'; - -@Component({ - selector: 'my-videos-list', - styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ], - templateUrl: 'app/angular/videos/components/list/videos-list.component.html', - directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent, LoaderComponent ] -}) - -export class VideosListComponent implements OnInit { - user: User = null; - videos: Video[] = []; - pagination: Pagination = { - currentPage: 1, - itemsPerPage: 9, - total: 0 - }; - sort: SortField; - loading: boolean = false; - - private search: Search; - - constructor( - private _authService: AuthService, - private _videosService: VideosService, - private _routeParams: RouteParams, - private _router: Router - ) { - this.search = { - value: this._routeParams.get('search'), - field: this._routeParams.get('field') - }; - - this.sort = this._routeParams.get('sort') || '-createdDate'; - } - - ngOnInit() { - if (this._authService.isLoggedIn()) { - this.user = User.load(); - } - - this.getVideos(); - } - - getVideos() { - this.loading = true; - this.videos = []; - - let observable = null; - - if (this.search.value !== null) { - observable = this._videosService.searchVideos(this.search, this.pagination, this.sort); - } else { - observable = this._videosService.getVideos(this.pagination, this.sort); - } - - observable.subscribe( - ({ videos, totalVideos }) => { - this.videos = videos; - this.pagination.total = totalVideos; - this.loading = false; - }, - error => alert(error) - ); - } - - onRemoved(video: Video): void { - this.videos.splice(this.videos.indexOf(video), 1); - } - - onSort(sort: SortField) { - this.sort = sort; - - const params: any = { - sort: this.sort - }; - - if (this.search.value) { - params.search = this.search.value; - params.field = this.search.field; - } - - this._router.navigate(['VideosList', params]); - this.getVideos(); - } -} 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 @@ - - -
-
- -
-
Download: {{ downloadSpeed | bytes }}/s
-
Upload: {{ uploadSpeed | bytes }}/s
-
Number of peers: {{ numPeers }}
-
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 @@ -.embed-responsive { - height: 500px; -} - -#torrent-info { - font-size: 10px; - - div { - display: inline-block; - width: 33%; - text-align: center; - } -} 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 @@ -import { Component, OnInit, ElementRef } from '@angular/core'; -import { RouteParams, CanDeactivate, ComponentInstruction } from '@angular/router-deprecated'; - -import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; - -import { LoaderComponent } from '../../loader.component'; - -// TODO import it with systemjs -declare var WebTorrent: any; - -import { Video } from '../../video'; -import { VideosService } from '../../videos.service'; - -@Component({ - selector: 'my-video-watch', - templateUrl: 'app/angular/videos/components/watch/videos-watch.component.html', - styleUrls: [ 'app/angular/videos/components/watch/videos-watch.component.css' ], - directives: [ LoaderComponent ], - pipes: [ BytesPipe ] -}) - -export class VideosWatchComponent implements OnInit, CanDeactivate { - video: Video; - downloadSpeed: number; - uploadSpeed: number; - numPeers: number; - loading: boolean = false; - - private _interval: NodeJS.Timer; - private client: any; - - constructor( - private _videosService: VideosService, - private _routeParams: RouteParams, - private _elementRef: ElementRef - ) { - // TODO: use a service - this.client = new WebTorrent({ dht: false }); - } - - ngOnInit() { - let id = this._routeParams.get('id'); - this._videosService.getVideo(id).subscribe( - video => this.loadVideo(video), - error => alert(error) - ); - } - - loadVideo(video: Video) { - this.loading = true; - this.video = video; - console.log('Adding ' + this.video.magnetUri + '.'); - this.client.add(this.video.magnetUri, (torrent) => { - this.loading = false; - console.log('Added ' + this.video.magnetUri + '.'); - torrent.files[0].appendTo(this._elementRef.nativeElement.querySelector('.embed-responsive'), (err) => { - if (err) { - alert('Cannot append the file.'); - console.error(err); - } - }); - - // Refresh each second - this._interval = setInterval(() => { - this.downloadSpeed = torrent.downloadSpeed; - this.uploadSpeed = torrent.uploadSpeed; - this.numPeers = torrent.numPeers; - }, 1000); - }); - } - - routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) : any { - console.log('Removing video from webtorrent.'); - clearInterval(this._interval); - this.client.remove(this.video.magnetUri); - return true; - } -} 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 @@ -
-
-
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 @@ -div { - margin-top: 150px; -} - -// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d -.glyphicon-refresh-animate { - -animation: spin .7s infinite linear; - -ms-animation: spin .7s infinite linear; - -webkit-animation: spinw .7s infinite linear; - -moz-animation: spinm .7s infinite linear; -} - -@keyframes spin { - from { transform: scale(1) rotate(0deg);} - to { transform: scale(1) rotate(360deg);} -} - -@-webkit-keyframes spinw { - from { -webkit-transform: rotate(0deg);} - to { -webkit-transform: rotate(360deg);} -} - -@-moz-keyframes spinm { - from { -moz-transform: rotate(0deg);} - to { -moz-transform: rotate(360deg);} -} 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 @@ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'my-loader', - styleUrls: [ 'app/angular/videos/loader.component.css' ], - templateUrl: 'app/angular/videos/loader.component.html' -}) - -export class LoaderComponent { - @Input() loading: boolean; -} 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 @@ -export interface Pagination { - currentPage: number; - itemsPerPage: number; - total: number; -} 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 @@ -export class Video { - id: string; - name: string; - description: string; - magnetUri: string; - podUrl: string; - isLocal: boolean; - thumbnailPath: string; - author: string; - createdDate: Date; - by: string; - duration: string; - - private static createDurationString(duration: number): string { - const minutes = Math.floor(duration / 60); - const seconds = duration % 60; - const minutes_padding = minutes >= 10 ? '' : '0'; - const seconds_padding = seconds >= 10 ? '' : '0'; - - return minutes_padding + minutes.toString() + ':' + seconds_padding + seconds.toString(); - } - - private static createByString(author: string, podUrl: string): string { - let [ host, port ] = podUrl.replace(/^https?:\/\//, '').split(':'); - - if (port === '80' || port === '443') { - port = ''; - } else { - port = ':' + port; - } - - return author + '@' + host + port; - } - - constructor(hash: { - id: string, - name: string, - description: string, - magnetUri: string, - podUrl: string, - isLocal: boolean, - thumbnailPath: string, - author: string, - createdDate: string, - duration: number; - }) { - this.id = hash.id; - this.name = hash.name; - this.description = hash.description; - this.magnetUri = hash.magnetUri; - this.podUrl = hash.podUrl; - this.isLocal = hash.isLocal; - this.thumbnailPath = hash.thumbnailPath; - this.author = hash.author; - this.createdDate = new Date(hash.createdDate); - this.duration = Video.createDurationString(hash.duration); - this.by = Video.createByString(hash.author, hash.podUrl); - } - - isRemovableBy(user): boolean { - return this.isLocal === true && user && this.author === user.username; - } -} 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 @@ -import { Injectable } from '@angular/core'; -import { Http, Response, URLSearchParams } from '@angular/http'; -import { Observable } from 'rxjs/Rx'; - -import { Pagination } from './pagination'; -import { Video } from './video'; -import { AuthService } from '../users/services/auth.service'; -import { Search } from '../app/search'; -import { SortField } from './components/list/sort'; - -@Injectable() -export class VideosService { - private _baseVideoUrl = '/api/v1/videos/'; - - constructor (private http: Http, private _authService: AuthService) {} - - getVideos(pagination: Pagination, sort: SortField) { - const params = this.createPaginationParams(pagination); - - if (sort) params.set('sort', sort); - - return this.http.get(this._baseVideoUrl, { search: params }) - .map(res => res.json()) - .map(this.extractVideos) - .catch(this.handleError); - } - - getVideo(id: string) { - return this.http.get(this._baseVideoUrl + id) - .map(res =>