From 4a6995be18b15de1834a39c8921a0e4109671bb6 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 3 Jun 2016 22:08:03 +0200 Subject: First draft to use webpack instead of systemjs --- client/src/app/app.component.html | 60 +++++++++++ client/src/app/app.component.scss | 32 ++++++ client/src/app/app.component.ts | 109 +++++++++++++++++++ client/src/app/friends/friend.service.ts | 31 ++++++ client/src/app/friends/index.ts | 1 + client/src/app/login/index.ts | 1 + client/src/app/login/login.component.html | 14 +++ client/src/app/login/login.component.ts | 36 +++++++ client/src/app/shared/index.ts | 2 + client/src/app/shared/search/index.ts | 3 + client/src/app/shared/search/search-field.type.ts | 1 + client/src/app/shared/search/search.component.html | 17 +++ client/src/app/shared/search/search.component.ts | 46 ++++++++ client/src/app/shared/search/search.model.ts | 6 ++ client/src/app/shared/users/auth-status.model.ts | 4 + client/src/app/shared/users/auth.service.ts | 108 +++++++++++++++++++ client/src/app/shared/users/index.ts | 4 + client/src/app/shared/users/token.model.ts | 32 ++++++ client/src/app/shared/users/user.model.ts | 20 ++++ client/src/app/videos/index.ts | 4 + client/src/app/videos/shared/index.ts | 5 + client/src/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/src/app/videos/shared/pagination.model.ts | 5 + client/src/app/videos/shared/sort-field.type.ts | 3 + client/src/app/videos/shared/video.model.ts | 64 +++++++++++ client/src/app/videos/shared/video.service.ts | 82 ++++++++++++++ client/src/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 ++++++ .../app/videos/video-add/video-add.component.ts | 69 ++++++++++++ client/src/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 | 105 ++++++++++++++++++ .../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 | 35 ++++++ client/src/app/videos/video-watch/index.ts | 2 + .../videos/video-watch/video-watch.component.html | 10 ++ .../videos/video-watch/video-watch.component.scss | 13 +++ .../videos/video-watch/video-watch.component.ts | 72 +++++++++++++ .../app/videos/video-watch/webtorrent.service.ts | 26 +++++ client/src/assets/favicon.png | Bin 0 -> 2335 bytes client/src/custom-typings.d.ts | 119 +++++++++++++++++++++ client/src/index.html | 17 +++ client/src/main.ts | 10 ++ client/src/polyfills.ts | 28 +++++ client/src/sass/application.scss | 11 ++ client/src/sass/pre-customizations.scss | 1 + client/src/vendor.ts | 28 +++++ 55 files changed, 1538 insertions(+) create mode 100644 client/src/app/app.component.html create mode 100644 client/src/app/app.component.scss create mode 100644 client/src/app/app.component.ts create mode 100644 client/src/app/friends/friend.service.ts create mode 100644 client/src/app/friends/index.ts create mode 100644 client/src/app/login/index.ts create mode 100644 client/src/app/login/login.component.html create mode 100644 client/src/app/login/login.component.ts create mode 100644 client/src/app/shared/index.ts create mode 100644 client/src/app/shared/search/index.ts create mode 100644 client/src/app/shared/search/search-field.type.ts create mode 100644 client/src/app/shared/search/search.component.html create mode 100644 client/src/app/shared/search/search.component.ts create mode 100644 client/src/app/shared/search/search.model.ts create mode 100644 client/src/app/shared/users/auth-status.model.ts create mode 100644 client/src/app/shared/users/auth.service.ts create mode 100644 client/src/app/shared/users/index.ts create mode 100644 client/src/app/shared/users/token.model.ts create mode 100644 client/src/app/shared/users/user.model.ts create mode 100644 client/src/app/videos/index.ts create mode 100644 client/src/app/videos/shared/index.ts create mode 100644 client/src/app/videos/shared/loader/index.ts create mode 100644 client/src/app/videos/shared/loader/loader.component.html create mode 100644 client/src/app/videos/shared/loader/loader.component.scss create mode 100644 client/src/app/videos/shared/loader/loader.component.ts create mode 100644 client/src/app/videos/shared/pagination.model.ts create mode 100644 client/src/app/videos/shared/sort-field.type.ts create mode 100644 client/src/app/videos/shared/video.model.ts create mode 100644 client/src/app/videos/shared/video.service.ts create mode 100644 client/src/app/videos/video-add/index.ts create mode 100644 client/src/app/videos/video-add/video-add.component.html create mode 100644 client/src/app/videos/video-add/video-add.component.scss create mode 100644 client/src/app/videos/video-add/video-add.component.ts create mode 100644 client/src/app/videos/video-list/index.ts create mode 100644 client/src/app/videos/video-list/video-list.component.html create mode 100644 client/src/app/videos/video-list/video-list.component.scss create mode 100644 client/src/app/videos/video-list/video-list.component.ts create mode 100644 client/src/app/videos/video-list/video-miniature.component.html create mode 100644 client/src/app/videos/video-list/video-miniature.component.scss create mode 100644 client/src/app/videos/video-list/video-miniature.component.ts create mode 100644 client/src/app/videos/video-list/video-sort.component.html create mode 100644 client/src/app/videos/video-list/video-sort.component.ts create mode 100644 client/src/app/videos/video-watch/index.ts create mode 100644 client/src/app/videos/video-watch/video-watch.component.html create mode 100644 client/src/app/videos/video-watch/video-watch.component.scss create mode 100644 client/src/app/videos/video-watch/video-watch.component.ts create mode 100644 client/src/app/videos/video-watch/webtorrent.service.ts create mode 100644 client/src/assets/favicon.png create mode 100644 client/src/custom-typings.d.ts create mode 100644 client/src/index.html create mode 100644 client/src/main.ts create mode 100644 client/src/polyfills.ts create mode 100644 client/src/sass/application.scss create mode 100644 client/src/sass/pre-customizations.scss create mode 100644 client/src/vendor.ts (limited to 'client/src') diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html new file mode 100644 index 000000000..48e97d523 --- /dev/null +++ b/client/src/app/app.component.html @@ -0,0 +1,60 @@ +
+ +
+
+

PeerTube

+
+ +
+ +
+
+ + +
+ + +
+
+ + Login + Logout +
+
+ +
+
+ + Get videos +
+ + +
+ +
+
+ + Make friends +
+ +
+ + Quit friends +
+
+ + +
+ +
+ +
+ + +
+ PeerTube, CopyLeft 2015-2016 +
+
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss new file mode 100644 index 000000000..e02c2d5b0 --- /dev/null +++ b/client/src/app/app.component.scss @@ -0,0 +1,32 @@ +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/src/app/app.component.ts b/client/src/app/app.component.ts new file mode 100644 index 000000000..81b700a21 --- /dev/null +++ b/client/src/app/app.component.ts @@ -0,0 +1,109 @@ +import { Component } from '@angular/core'; +import { HTTP_PROVIDERS } from '@angular/http'; +import { RouteConfig, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; + +import { FriendService } from './friends'; +import { LoginComponent } from './login'; +import { + AuthService, + AuthStatus, + Search, + SearchComponent +} from './shared'; +import { + VideoAddComponent, + VideoListComponent, + VideoWatchComponent, + VideoService +} from './videos'; + +@RouteConfig([ + { + path: '/users/login', + name: 'UserLogin', + component: LoginComponent + }, + { + path: '/videos/list', + name: 'VideosList', + component: VideoListComponent, + useAsDefault: true + }, + { + path: '/videos/watch/:id', + name: 'VideosWatch', + component: VideoWatchComponent + }, + { + path: '/videos/add', + name: 'VideosAdd', + component: VideoAddComponent + } +]) + +@Component({ + selector: 'my-app', + template: require('./app.component.html'), + styles: [ require('./app.component.scss') ], + directives: [ ROUTER_DIRECTIVES, SearchComponent ], + providers: [ AuthService, FriendService, HTTP_PROVIDERS, ROUTER_PROVIDERS, VideoService ] +}) + +export class AppComponent { + choices = []; + isLoggedIn: boolean; + + constructor( + private authService: AuthService, + private friendService: FriendService, + private router: Router + ) { + this.isLoggedIn = this.authService.isLoggedIn(); + + this.authService.loginChangedSource.subscribe( + status => { + if (status === AuthStatus.LoggedIn) { + this.isLoggedIn = true; + } + } + ); + } + + onSearch(search: Search) { + if (search.value !== '') { + const params = { + field: search.field, + search: search.value + }; + this.router.navigate(['VideosList', params]); + } else { + this.router.navigate(['VideosList']); + } + } + + logout() { + // this._authService.logout(); + } + + makeFriends() { + this.friendService.makeFriends().subscribe( + status => { + if (status === 409) { + alert('Already made friends!'); + } else { + alert('Made friends!'); + } + }, + error => alert(error) + ); + } + + quitFriends() { + this.friendService.quitFriends().subscribe( + status => { + alert('Quit friends!'); + }, + error => alert(error) + ); + } +} diff --git a/client/src/app/friends/friend.service.ts b/client/src/app/friends/friend.service.ts new file mode 100644 index 000000000..a8b1a1bd3 --- /dev/null +++ b/client/src/app/friends/friend.service.ts @@ -0,0 +1,31 @@ +import { Injectable } from '@angular/core'; +import { Http, Response } from '@angular/http'; +import { Observable } from 'rxjs/Rx'; + +import { AuthService } from '../shared'; + +@Injectable() +export class FriendService { + private static BASE_FRIEND_URL: string = '/api/v1/pods/'; + + constructor (private http: Http, private authService: AuthService) {} + + makeFriends() { + const headers = this.authService.getRequestHeader(); + return this.http.get(FriendService.BASE_FRIEND_URL + 'makefriends', { headers }) + .map(res => res.status) + .catch(this.handleError); + } + + quitFriends() { + const headers = this.authService.getRequestHeader(); + return this.http.get(FriendService.BASE_FRIEND_URL + 'quitfriends', { headers }) + .map(res => res.status) + .catch(this.handleError); + } + + private handleError (error: Response): Observable { + console.error(error); + return Observable.throw(error.json().error || 'Server error'); + } +} diff --git a/client/src/app/friends/index.ts b/client/src/app/friends/index.ts new file mode 100644 index 000000000..0adc256c4 --- /dev/null +++ b/client/src/app/friends/index.ts @@ -0,0 +1 @@ +export * from './friend.service'; diff --git a/client/src/app/login/index.ts b/client/src/app/login/index.ts new file mode 100644 index 000000000..69c16441f --- /dev/null +++ b/client/src/app/login/index.ts @@ -0,0 +1 @@ +export * from './login.component'; diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html new file mode 100644 index 000000000..940694515 --- /dev/null +++ b/client/src/app/login/login.component.html @@ -0,0 +1,14 @@ +

Login

+
+
+ + +
+ +
+ + +
+ + +
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts new file mode 100644 index 000000000..9d88536ca --- /dev/null +++ b/client/src/app/login/login.component.ts @@ -0,0 +1,36 @@ +import { Component } from '@angular/core'; +import { Router } from '@angular/router-deprecated'; + +import { AuthService, AuthStatus, User } from '../shared'; + +@Component({ + selector: 'my-login', + template: require('./login.component.html') +}) + +export class LoginComponent { + 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/src/app/shared/index.ts b/client/src/app/shared/index.ts new file mode 100644 index 000000000..0cab7dad0 --- /dev/null +++ b/client/src/app/shared/index.ts @@ -0,0 +1,2 @@ +export * from './search'; +export * from './users' diff --git a/client/src/app/shared/search/index.ts b/client/src/app/shared/search/index.ts new file mode 100644 index 000000000..a49a4f1a9 --- /dev/null +++ b/client/src/app/shared/search/index.ts @@ -0,0 +1,3 @@ +export * from './search-field.type'; +export * from './search.component'; +export * from './search.model'; diff --git a/client/src/app/shared/search/search-field.type.ts b/client/src/app/shared/search/search-field.type.ts new file mode 100644 index 000000000..846236290 --- /dev/null +++ b/client/src/app/shared/search/search-field.type.ts @@ -0,0 +1 @@ +export type SearchField = "name" | "author" | "podUrl" | "magnetUri"; diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html new file mode 100644 index 000000000..fb13ac72e --- /dev/null +++ b/client/src/app/shared/search/search.component.html @@ -0,0 +1,17 @@ +
+
+ + +
+ + +
diff --git a/client/src/app/shared/search/search.component.ts b/client/src/app/shared/search/search.component.ts new file mode 100644 index 000000000..31f8b1535 --- /dev/null +++ b/client/src/app/shared/search/search.component.ts @@ -0,0 +1,46 @@ +import { Component, EventEmitter, Output } from '@angular/core'; + +import { DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/components/dropdown'; + +import { Search } from './search.model'; +import { SearchField } from './search-field.type'; + +@Component({ + selector: 'my-search', + template: require('./search.component.html'), + directives: [ DROPDOWN_DIRECTIVES ] +}) + +export class SearchComponent { + @Output() search = new EventEmitter(); + + fieldChoices = { + name: 'Name', + author: 'Author', + podUrl: 'Pod Url', + magnetUri: 'Magnet Uri' + }; + searchCriterias: Search = { + field: 'name', + value: '' + }; + + get choiceKeys() { + return Object.keys(this.fieldChoices); + } + + choose($event: MouseEvent, choice: SearchField) { + $event.preventDefault(); + $event.stopPropagation(); + + this.searchCriterias.field = choice; + } + + doSearch() { + this.search.emit(this.searchCriterias); + } + + getStringChoice(choiceKey: SearchField) { + return this.fieldChoices[choiceKey]; + } +} diff --git a/client/src/app/shared/search/search.model.ts b/client/src/app/shared/search/search.model.ts new file mode 100644 index 000000000..932a6566c --- /dev/null +++ b/client/src/app/shared/search/search.model.ts @@ -0,0 +1,6 @@ +import { SearchField } from './search-field.type'; + +export interface Search { + field: SearchField; + value: string; +} diff --git a/client/src/app/shared/users/auth-status.model.ts b/client/src/app/shared/users/auth-status.model.ts new file mode 100644 index 000000000..f646bd4cf --- /dev/null +++ b/client/src/app/shared/users/auth-status.model.ts @@ -0,0 +1,4 @@ +export enum AuthStatus { + LoggedIn, + LoggedOut +} diff --git a/client/src/app/shared/users/auth.service.ts b/client/src/app/shared/users/auth.service.ts new file mode 100644 index 000000000..d63fe38f3 --- /dev/null +++ b/client/src/app/shared/users/auth.service.ts @@ -0,0 +1,108 @@ +import { Injectable } from '@angular/core'; +import { Headers, Http, RequestOptions, Response, URLSearchParams } from '@angular/http'; +import { Observable, Subject } from 'rxjs/Rx'; + +import { AuthStatus } from './auth-status.model'; +import { User } from './user.model'; + +@Injectable() +export class AuthService { + private static BASE_CLIENT_URL = '/api/v1/users/client'; + private static BASE_LOGIN_URL = '/api/v1/users/token'; + + loginChangedSource: Observable; + + private clientId: string; + private clientSecret: string; + private loginChanged: Subject; + + constructor(private http: Http) { + this.loginChanged = new Subject(); + this.loginChangedSource = this.loginChanged.asObservable(); + + // Fetch the client_id/client_secret + // FIXME: save in local storage? + this.http.get(AuthService.BASE_CLIENT_URL) + .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); + } + ); + } + + getAuthRequestOptions(): RequestOptions { + return new RequestOptions({ headers: this.getRequestHeader() }); + } + + getRequestHeader() { + return new Headers({ 'Authorization': `${this.getTokenType()} ${this.getToken()}` }); + } + + getToken() { + return localStorage.getItem('access_token'); + } + + getTokenType() { + return localStorage.getItem('token_type'); + } + + getUser(): User { + if (this.isLoggedIn() === false) { + return null; + } + + const user = User.load(); + + return user; + } + + isLoggedIn() { + if (this.getToken()) { + return true; + } else { + return false; + } + } + + 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(AuthService.BASE_LOGIN_URL, body.toString(), options) + .map(res => res.json()) + .catch(this.handleError); + } + + logout() { + // TODO make HTTP request + } + + 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/src/app/shared/users/index.ts b/client/src/app/shared/users/index.ts new file mode 100644 index 000000000..c6816b3c6 --- /dev/null +++ b/client/src/app/shared/users/index.ts @@ -0,0 +1,4 @@ +export * from './auth-status.model'; +export * from './auth.service'; +export * from './token.model'; +export * from './user.model'; diff --git a/client/src/app/shared/users/token.model.ts b/client/src/app/shared/users/token.model.ts new file mode 100644 index 000000000..021c83fad --- /dev/null +++ b/client/src/app/shared/users/token.model.ts @@ -0,0 +1,32 @@ +export class Token { + access_token: string; + refresh_token: string; + token_type: string; + + static load() { + 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() { + 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/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts new file mode 100644 index 000000000..ca0a5f26c --- /dev/null +++ b/client/src/app/shared/users/user.model.ts @@ -0,0 +1,20 @@ +import { Token } from './token.model'; + +export class User { + username: string; + token: Token; + + static load() { + return new User(localStorage.getItem('username'), Token.load()); + } + + constructor(username: string, hash_token: any) { + this.username = username; + this.token = new Token(hash_token); + } + + save() { + localStorage.setItem('username', this.username); + this.token.save(); + } +} diff --git a/client/src/app/videos/index.ts b/client/src/app/videos/index.ts new file mode 100644 index 000000000..9a92fa57a --- /dev/null +++ b/client/src/app/videos/index.ts @@ -0,0 +1,4 @@ +export * from './shared'; +export * from './video-add'; +export * from './video-list'; +export * from './video-watch'; diff --git a/client/src/app/videos/shared/index.ts b/client/src/app/videos/shared/index.ts new file mode 100644 index 000000000..a54120f5d --- /dev/null +++ b/client/src/app/videos/shared/index.ts @@ -0,0 +1,5 @@ +export * from './loader'; +export * from './pagination.model'; +export * from './sort-field.type'; +export * from './video.model'; +export * from './video.service'; diff --git a/client/src/app/videos/shared/loader/index.ts b/client/src/app/videos/shared/loader/index.ts new file mode 100644 index 000000000..ab22584e4 --- /dev/null +++ b/client/src/app/videos/shared/loader/index.ts @@ -0,0 +1 @@ +export * from './loader.component'; diff --git a/client/src/app/videos/shared/loader/loader.component.html b/client/src/app/videos/shared/loader/loader.component.html new file mode 100644 index 000000000..d02296a2d --- /dev/null +++ b/client/src/app/videos/shared/loader/loader.component.html @@ -0,0 +1,3 @@ +
+
+
diff --git a/client/src/app/videos/shared/loader/loader.component.scss b/client/src/app/videos/shared/loader/loader.component.scss new file mode 100644 index 000000000..454195811 --- /dev/null +++ b/client/src/app/videos/shared/loader/loader.component.scss @@ -0,0 +1,26 @@ +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/src/app/videos/shared/loader/loader.component.ts b/client/src/app/videos/shared/loader/loader.component.ts new file mode 100644 index 000000000..cdd07d1b4 --- /dev/null +++ b/client/src/app/videos/shared/loader/loader.component.ts @@ -0,0 +1,11 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'my-loader', + styles: [ require('./loader.component.scss') ], + template: require('./loader.component.html') +}) + +export class LoaderComponent { + @Input() loading: boolean; +} diff --git a/client/src/app/videos/shared/pagination.model.ts b/client/src/app/videos/shared/pagination.model.ts new file mode 100644 index 000000000..06f7a7875 --- /dev/null +++ b/client/src/app/videos/shared/pagination.model.ts @@ -0,0 +1,5 @@ +export interface Pagination { + currentPage: number; + itemsPerPage: number; + total: number; +} diff --git a/client/src/app/videos/shared/sort-field.type.ts b/client/src/app/videos/shared/sort-field.type.ts new file mode 100644 index 000000000..6e8cc7936 --- /dev/null +++ b/client/src/app/videos/shared/sort-field.type.ts @@ -0,0 +1,3 @@ +export type SortField = "name" | "-name" + | "duration" | "-duration" + | "createdDate" | "-createdDate"; diff --git a/client/src/app/videos/shared/video.model.ts b/client/src/app/videos/shared/video.model.ts new file mode 100644 index 000000000..614403d79 --- /dev/null +++ b/client/src/app/videos/shared/video.model.ts @@ -0,0 +1,64 @@ +export class Video { + author: string; + by: string; + createdDate: Date; + description: string; + duration: string; + id: string; + isLocal: boolean; + magnetUri: string; + name: string; + podUrl: string; + thumbnailPath: string; + + private static createByString(author: string, podUrl: string) { + let [ host, port ] = podUrl.replace(/^https?:\/\//, '').split(':'); + + if (port === '80' || port === '443') { + port = ''; + } else { + port = ':' + port; + } + + return author + '@' + host + port; + } + + private static createDurationString(duration: number) { + 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(); + } + + constructor(hash: { + author: string, + createdDate: string, + description: string, + duration: number; + id: string, + isLocal: boolean, + magnetUri: string, + name: string, + podUrl: string, + thumbnailPath: string + }) { + this.author = hash.author; + this.createdDate = new Date(hash.createdDate); + this.description = hash.description; + this.duration = Video.createDurationString(hash.duration); + this.id = hash.id; + this.isLocal = hash.isLocal; + this.magnetUri = hash.magnetUri; + this.name = hash.name; + this.podUrl = hash.podUrl; + this.thumbnailPath = hash.thumbnailPath; + + this.by = Video.createByString(hash.author, hash.podUrl); + } + + isRemovableBy(user) { + return this.isLocal === true && user && this.author === user.username; + } +} diff --git a/client/src/app/videos/shared/video.service.ts b/client/src/app/videos/shared/video.service.ts new file mode 100644 index 000000000..76d46cbb4 --- /dev/null +++ b/client/src/app/videos/shared/video.service.ts @@ -0,0 +1,82 @@ +import { Injectable } from '@angular/core'; +import { Http, Response, URLSearchParams } from '@angular/http'; +import { Observable } from 'rxjs/Rx'; + +import { Pagination } from './pagination.model'; +import { Search } from '../../shared'; +import { SortField } from './sort-field.type'; +import { AuthService } from '../../shared'; +import { Video } from './video.model'; + +@Injectable() +export class VideoService { + private static BASE_VIDEO_URL = '/api/v1/videos/'; + + constructor( + private authService: AuthService, + private http: Http + ) {} + + getVideo(id: string) { + return this.http.get(VideoService.BASE_VIDEO_URL + id) + .map(res =>