From ab32b0fc805b92c5a1d7ac5901cb1a38e94622ca Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 6 Sep 2016 22:40:57 +0200 Subject: Dirty update to Angular RC6 --- client/src/app/account/account.component.ts | 8 +- client/src/app/account/index.ts | 1 + client/src/app/admin/admin.component.ts | 4 +- client/src/app/admin/admin.routes.ts | 4 +- .../friends/friend-add/friend-add.component.ts | 14 +-- .../friends/friend-list/friend-list.component.ts | 4 +- client/src/app/admin/friends/friends.component.ts | 7 +- client/src/app/admin/friends/friends.routes.ts | 4 +- client/src/app/admin/friends/index.ts | 1 + client/src/app/admin/index.ts | 1 + client/src/app/admin/menu-admin.component.ts | 4 +- .../app/admin/users/user-add/user-add.component.ts | 6 +- .../admin/users/user-list/user-list.component.ts | 4 +- client/src/app/admin/users/users.component.ts | 7 +- client/src/app/admin/users/users.routes.ts | 4 +- client/src/app/app.component.ts | 11 +- client/src/app/app.module.ts | 130 +++++++++++++++++++++ client/src/app/app.routes.ts | 4 +- client/src/app/app.service.ts | 36 ++++++ client/src/app/environment.ts | 50 ++++++++ client/src/app/index.ts | 1 + client/src/app/login/login.component.ts | 6 +- client/src/app/menu.component.ts | 5 +- client/src/app/shared/search/search.component.ts | 7 +- .../app/videos/video-add/video-add.component.ts | 11 +- .../app/videos/video-list/video-list.component.ts | 12 +- .../videos/video-list/video-miniature.component.ts | 6 +- .../videos/video-watch/video-watch.component.ts | 9 +- client/src/app/videos/videos.component.ts | 4 +- client/src/app/videos/videos.routes.ts | 4 +- 30 files changed, 265 insertions(+), 104 deletions(-) create mode 100644 client/src/app/app.module.ts create mode 100644 client/src/app/app.service.ts create mode 100644 client/src/app/environment.ts create mode 100644 client/src/app/index.ts (limited to 'client/src/app') diff --git a/client/src/app/account/account.component.ts b/client/src/app/account/account.component.ts index 54939f43b..a22738d3f 100644 --- a/client/src/app/account/account.component.ts +++ b/client/src/app/account/account.component.ts @@ -1,15 +1,13 @@ -import { Validators } from '@angular/common'; +import { } from '@angular/common'; import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { AccountService } from './account.service'; @Component({ selector: 'my-account', - template: require('./account.component.html'), - providers: [ AccountService ], - directives: [ REACTIVE_FORM_DIRECTIVES ] + template: require('./account.component.html') }) export class AccountComponent implements OnInit { diff --git a/client/src/app/account/index.ts b/client/src/app/account/index.ts index 7445003fd..823d9fe5f 100644 --- a/client/src/app/account/index.ts +++ b/client/src/app/account/index.ts @@ -1,2 +1,3 @@ export * from './account.component'; export * from './account.routes'; +export * from './account.service'; diff --git a/client/src/app/admin/admin.component.ts b/client/src/app/admin/admin.component.ts index 82f2529ec..64a7400e7 100644 --- a/client/src/app/admin/admin.component.ts +++ b/client/src/app/admin/admin.component.ts @@ -1,9 +1,7 @@ import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; @Component({ - template: '', - directives: [ ROUTER_DIRECTIVES ] + template: '' }) export class AdminComponent { diff --git a/client/src/app/admin/admin.routes.ts b/client/src/app/admin/admin.routes.ts index 80b3ecbc1..1fcace994 100644 --- a/client/src/app/admin/admin.routes.ts +++ b/client/src/app/admin/admin.routes.ts @@ -1,10 +1,10 @@ -import { RouterConfig } from '@angular/router'; +import { Routes } from '@angular/router'; import { AdminComponent } from './admin.component'; import { FriendsRoutes } from './friends'; import { UsersRoutes } from './users'; -export const AdminRoutes: RouterConfig = [ +export const AdminRoutes: Routes = [ { path: 'admin', component: AdminComponent, diff --git a/client/src/app/admin/friends/friend-add/friend-add.component.ts b/client/src/app/admin/friends/friend-add/friend-add.component.ts index 2b2aceb8a..55aed9156 100644 --- a/client/src/app/admin/friends/friend-add/friend-add.component.ts +++ b/client/src/app/admin/friends/friend-add/friend-add.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; +import { FormControl, FormGroup } from '@angular/forms'; import { Router } from '@angular/router'; import { validateUrl } from '../../../shared'; @@ -8,8 +8,7 @@ import { FriendService } from '../shared'; @Component({ selector: 'my-friend-add', template: require('./friend-add.component.html'), - styles: [ require('./friend-add.component.scss') ], - directives: [ REACTIVE_FORM_DIRECTIVES ] + styles: [ require('./friend-add.component.scss') ] }) export class FriendAddComponent implements OnInit { friendAddForm: FormGroup; @@ -80,12 +79,13 @@ export class FriendAddComponent implements OnInit { this.friendService.makeFriends(notEmptyUrls).subscribe( status => { - if (status === 409) { - alert('Already made friends!'); - } else { + // TODO: extractdatastatus + // if (status === 409) { + // alert('Already made friends!'); + // } else { alert('Make friends request sent!'); this.router.navigate([ '/admin/friends/list' ]); - } + // } }, error => alert(error) ); diff --git a/client/src/app/admin/friends/friend-list/friend-list.component.ts b/client/src/app/admin/friends/friend-list/friend-list.component.ts index 38d4799a6..c76fc4df2 100644 --- a/client/src/app/admin/friends/friend-list/friend-list.component.ts +++ b/client/src/app/admin/friends/friend-list/friend-list.component.ts @@ -1,13 +1,11 @@ import { Component, OnInit } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; import { Friend, FriendService } from '../shared'; @Component({ selector: 'my-friend-list', template: require('./friend-list.component.html'), - styles: [ require('./friend-list.component.scss') ], - directives: [ ROUTER_DIRECTIVES ] + styles: [ require('./friend-list.component.scss') ] }) export class FriendListComponent implements OnInit { friends: Friend[]; diff --git a/client/src/app/admin/friends/friends.component.ts b/client/src/app/admin/friends/friends.component.ts index e66280f01..bc3f54158 100644 --- a/client/src/app/admin/friends/friends.component.ts +++ b/client/src/app/admin/friends/friends.component.ts @@ -1,12 +1,7 @@ import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; - -import { FriendService } from './shared'; @Component({ - template: '', - directives: [ ROUTER_DIRECTIVES ], - providers: [ FriendService ] + template: '' }) export class FriendsComponent { diff --git a/client/src/app/admin/friends/friends.routes.ts b/client/src/app/admin/friends/friends.routes.ts index 42b4a6c14..7fdef68f9 100644 --- a/client/src/app/admin/friends/friends.routes.ts +++ b/client/src/app/admin/friends/friends.routes.ts @@ -1,10 +1,10 @@ -import { RouterConfig } from '@angular/router'; +import { Routes } from '@angular/router'; import { FriendsComponent } from './friends.component'; import { FriendAddComponent } from './friend-add'; import { FriendListComponent } from './friend-list'; -export const FriendsRoutes: RouterConfig = [ +export const FriendsRoutes: Routes = [ { path: 'friends', component: FriendsComponent, diff --git a/client/src/app/admin/friends/index.ts b/client/src/app/admin/friends/index.ts index f3110e31d..dd4df2538 100644 --- a/client/src/app/admin/friends/index.ts +++ b/client/src/app/admin/friends/index.ts @@ -1,4 +1,5 @@ export * from './friend-add'; export * from './friend-list'; export * from './shared'; +export * from './friends.component'; export * from './friends.routes'; diff --git a/client/src/app/admin/index.ts b/client/src/app/admin/index.ts index 292973681..3d0e67b15 100644 --- a/client/src/app/admin/index.ts +++ b/client/src/app/admin/index.ts @@ -1,3 +1,4 @@ +export * from './friends'; export * from './users'; export * from './admin.component'; export * from './admin.routes'; diff --git a/client/src/app/admin/menu-admin.component.ts b/client/src/app/admin/menu-admin.component.ts index 788592872..a9115d49f 100644 --- a/client/src/app/admin/menu-admin.component.ts +++ b/client/src/app/admin/menu-admin.component.ts @@ -1,9 +1,7 @@ import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; @Component({ selector: 'my-menu-admin', - template: require('./menu-admin.component.html'), - directives: [ ROUTER_DIRECTIVES ] + template: require('./menu-admin.component.html') }) export class MenuAdminComponent { } diff --git a/client/src/app/admin/users/user-add/user-add.component.ts b/client/src/app/admin/users/user-add/user-add.component.ts index 8dd98cc5c..e3f4b2e1a 100644 --- a/client/src/app/admin/users/user-add/user-add.component.ts +++ b/client/src/app/admin/users/user-add/user-add.component.ts @@ -1,14 +1,12 @@ -import { Validators } from '@angular/common'; import { Component, OnInit } from '@angular/core'; -import { FormGroup, FormControl, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; +import { FormGroup, FormControl, Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { UserService } from '../shared'; @Component({ selector: 'my-user-add', - template: require('./user-add.component.html'), - directives: [ REACTIVE_FORM_DIRECTIVES ] + template: require('./user-add.component.html') }) export class UserAddComponent implements OnInit { userAddForm: FormGroup; diff --git a/client/src/app/admin/users/user-list/user-list.component.ts b/client/src/app/admin/users/user-list/user-list.component.ts index c89a61bca..d3827eb28 100644 --- a/client/src/app/admin/users/user-list/user-list.component.ts +++ b/client/src/app/admin/users/user-list/user-list.component.ts @@ -1,5 +1,4 @@ import { Component, OnInit } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; import { User } from '../../../shared'; import { UserService } from '../shared'; @@ -7,8 +6,7 @@ import { UserService } from '../shared'; @Component({ selector: 'my-user-list', template: require('./user-list.component.html'), - styles: [ require('./user-list.component.scss') ], - directives: [ ROUTER_DIRECTIVES ] + styles: [ require('./user-list.component.scss') ] }) export class UserListComponent implements OnInit { totalUsers: number; diff --git a/client/src/app/admin/users/users.component.ts b/client/src/app/admin/users/users.component.ts index 46aa0862f..37e3b158d 100644 --- a/client/src/app/admin/users/users.component.ts +++ b/client/src/app/admin/users/users.component.ts @@ -1,12 +1,7 @@ import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; - -import { UserService } from './shared'; @Component({ - template: '', - directives: [ ROUTER_DIRECTIVES ], - providers: [ UserService ] + template: '' }) export class UsersComponent { diff --git a/client/src/app/admin/users/users.routes.ts b/client/src/app/admin/users/users.routes.ts index 0457c3843..eb71bd0ae 100644 --- a/client/src/app/admin/users/users.routes.ts +++ b/client/src/app/admin/users/users.routes.ts @@ -1,10 +1,10 @@ -import { RouterConfig } from '@angular/router'; +import { Routes } from '@angular/router'; import { UsersComponent } from './users.component'; import { UserAddComponent } from './user-add'; import { UserListComponent } from './user-list'; -export const UsersRoutes: RouterConfig = [ +export const UsersRoutes: Routes = [ { path: 'users', component: UsersComponent, diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 9d05c272f..e81993a3f 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -1,17 +1,10 @@ import { Component } from '@angular/core'; -import { Router, ROUTER_DIRECTIVES } from '@angular/router'; - -import { MenuAdminComponent } from './admin'; -import { MenuComponent } from './menu.component'; -import { RestExtractor, RestService, SearchComponent, SearchService } from './shared'; -import { VideoService } from './videos'; +import { Router } from '@angular/router'; @Component({ selector: 'my-app', template: require('./app.component.html'), - styles: [ require('./app.component.scss') ], - directives: [ MenuAdminComponent, MenuComponent, ROUTER_DIRECTIVES, SearchComponent ], - providers: [ RestExtractor, RestService, VideoService, SearchService ] + styles: [ require('./app.component.scss') ] }) export class AppComponent { diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts new file mode 100644 index 000000000..950b3c48e --- /dev/null +++ b/client/src/app/app.module.ts @@ -0,0 +1,130 @@ +import { NgModule, ApplicationRef } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { HttpModule, RequestOptions, XHRBackend } from '@angular/http'; +import { RouterModule } from '@angular/router'; +import { removeNgStyles, createNewHosts } from '@angularclass/hmr'; + +import { FileSelectDirective } from 'ng2-file-upload/ng2-file-upload'; +import { ProgressbarModule } from 'ng2-bootstrap/components/progressbar'; +import { PaginationModule } from 'ng2-bootstrap/components/pagination'; +import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; + +/* + * Platform and Environment providers/directives/pipes + */ +import { ENV_PROVIDERS } from './environment'; +import { routes } from './app.routes'; +// App is our top level component +import { AppComponent } from './app.component'; +import { AppState } from './app.service'; +import { AccountComponent, AccountService } from './account'; +import { LoginComponent } from './login'; +import { + LoaderComponent, + VideosComponent, + VideoAddComponent, + VideoListComponent, + VideoMiniatureComponent, + VideoSortComponent, + VideoWatchComponent, + VideoService +} from './videos'; +import { + FriendsComponent, + FriendAddComponent, + FriendListComponent, + FriendService, + UsersComponent, + UserAddComponent, + UserListComponent, + UserService, + AdminComponent, + MenuAdminComponent +} from './admin'; +import { MenuComponent } from './menu.component'; +import { AuthService, AuthHttp, RestExtractor, RestService, SearchComponent, SearchService } from './shared'; + +// Application wide providers +const APP_PROVIDERS = [ + AppState, + + { + provide: AuthHttp, + useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, authService: AuthService) => { + return new AuthHttp(backend, defaultOptions, authService); + }, + deps: [ XHRBackend, RequestOptions, AuthService ] + }, + + AuthService, + RestExtractor, + RestExtractor, RestService, VideoService, SearchService, FriendService, UserService, AccountService +]; +/** + * `AppModule` is the main entry point into Angular2's bootstraping process + */ +@NgModule({ + bootstrap: [ AppComponent ], + declarations: [ + AppComponent, + BytesPipe, + FileSelectDirective, + AccountComponent, + LoginComponent, + LoaderComponent, + VideosComponent, + VideoAddComponent, + VideoListComponent, + VideoSortComponent, + VideoMiniatureComponent, + VideoWatchComponent, + FriendsComponent, + FriendAddComponent, + FriendListComponent, + UsersComponent, + UserAddComponent, + UserListComponent, + AdminComponent, + MenuAdminComponent, + MenuComponent, + SearchComponent + ], + imports: [ // import Angular's modules + BrowserModule, + FormsModule, + ReactiveFormsModule, + HttpModule, + RouterModule.forRoot(routes), + ProgressbarModule, + PaginationModule + ], + providers: [ // expose our Services and Providers into Angular's dependency injection + ENV_PROVIDERS, + APP_PROVIDERS + ] +}) +export class AppModule { + constructor(public appRef: ApplicationRef, public appState: AppState) {} + hmrOnInit(store) { + if (!store || !store.state) return; + console.log('HMR store', store); + this.appState._state = store.state; + this.appRef.tick(); + delete store.state; + } + hmrOnDestroy(store) { + const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement); + // recreate elements + const state = this.appState._state; + store.state = state; + store.disposeOldHosts = createNewHosts(cmpLocation); + // remove styles + removeNgStyles(); + } + hmrAfterDestroy(store) { + // display new elements + store.disposeOldHosts(); + delete store.disposeOldHosts; + } +} diff --git a/client/src/app/app.routes.ts b/client/src/app/app.routes.ts index d7194cb4f..03e2bce51 100644 --- a/client/src/app/app.routes.ts +++ b/client/src/app/app.routes.ts @@ -1,11 +1,11 @@ -import { RouterConfig } from '@angular/router'; +import { Routes } from '@angular/router'; import { AccountRoutes } from './account'; import { LoginRoutes } from './login'; import { AdminRoutes } from './admin'; import { VideosRoutes } from './videos'; -export const routes: RouterConfig = [ +export const routes: Routes = [ { path: '', redirectTo: '/videos/list', diff --git a/client/src/app/app.service.ts b/client/src/app/app.service.ts new file mode 100644 index 000000000..033c21900 --- /dev/null +++ b/client/src/app/app.service.ts @@ -0,0 +1,36 @@ + +import { Injectable } from '@angular/core'; + +@Injectable() +export class AppState { + _state = { }; + + constructor() { ; } + + // already return a clone of the current state + get state() { + return this._state = this._clone(this._state); + } + // never allow mutation + set state(value) { + throw new Error('do not mutate the `.state` directly'); + } + + + get(prop?: any) { + // use our state getter for the clone + const state = this.state; + return state.hasOwnProperty(prop) ? state[prop] : state; + } + + set(prop: string, value: any) { + // internally mutate our state + return this._state[prop] = value; + } + + + _clone(object) { + // simple object clone + return JSON.parse(JSON.stringify( object )); + } +} diff --git a/client/src/app/environment.ts b/client/src/app/environment.ts new file mode 100644 index 000000000..8bba89c4e --- /dev/null +++ b/client/src/app/environment.ts @@ -0,0 +1,50 @@ + +// Angular 2 +// rc2 workaround +import { enableDebugTools, disableDebugTools } from '@angular/platform-browser'; +import { enableProdMode, ApplicationRef } from '@angular/core'; +// Environment Providers +let PROVIDERS = [ + // common env directives +]; + +// Angular debug tools in the dev console +// https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md +let _decorateModuleRef = function identity(value) { return value; }; + +if ('production' === ENV) { + // Production + disableDebugTools(); + enableProdMode(); + + PROVIDERS = [ + ...PROVIDERS, + // custom providers in production + ]; + +} else { + + _decorateModuleRef = (modRef: any) => { + const appRef = modRef.injector.get(ApplicationRef); + const cmpRef = appRef.components[0]; + + let _ng = (window).ng; + enableDebugTools(cmpRef); + (window).ng.probe = _ng.probe; + (window).ng.coreTokens = _ng.coreTokens; + return modRef; + }; + + // Development + PROVIDERS = [ + ...PROVIDERS, + // custom providers in development + ]; + +} + +export const decorateModuleRef = _decorateModuleRef; + +export const ENV_PROVIDERS = [ + ...PROVIDERS +]; diff --git a/client/src/app/index.ts b/client/src/app/index.ts new file mode 100644 index 000000000..da53f6aef --- /dev/null +++ b/client/src/app/index.ts @@ -0,0 +1 @@ +export * from './app.module'; diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts index 1e0ba0fe8..7a4e15c2c 100644 --- a/client/src/app/login/login.component.ts +++ b/client/src/app/login/login.component.ts @@ -1,14 +1,12 @@ import { Component, OnInit } from '@angular/core'; -import { Validators } from '@angular/common'; -import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { AuthService } from '../shared'; @Component({ selector: 'my-login', - template: require('./login.component.html'), - directives: [ REACTIVE_FORM_DIRECTIVES ] + template: require('./login.component.html') }) export class LoginComponent implements OnInit { diff --git a/client/src/app/menu.component.ts b/client/src/app/menu.component.ts index 6b08301df..425a12e5d 100644 --- a/client/src/app/menu.component.ts +++ b/client/src/app/menu.component.ts @@ -1,12 +1,11 @@ import { Component, OnInit } from '@angular/core'; -import { Router, ROUTER_DIRECTIVES } from '@angular/router'; +import { Router } from '@angular/router'; import { AuthService, AuthStatus } from './shared'; @Component({ selector: 'my-menu', - template: require('./menu.component.html'), - directives: [ ROUTER_DIRECTIVES ] + template: require('./menu.component.html') }) export class MenuComponent implements OnInit { isLoggedIn: boolean; diff --git a/client/src/app/shared/search/search.component.ts b/client/src/app/shared/search/search.component.ts index 853f5dc7c..7878471dc 100644 --- a/client/src/app/shared/search/search.component.ts +++ b/client/src/app/shared/search/search.component.ts @@ -1,16 +1,13 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; -import { DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/components/dropdown'; - import { Search } from './search.model'; import { SearchField } from './search-field.type'; import { SearchService } from './search.service'; @Component({ - selector: 'my-search', - template: require('./search.component.html'), - directives: [ DROPDOWN_DIRECTIVES ] + selector: 'my-search', + template: require('./search.component.html') }) export class SearchComponent implements OnInit { diff --git a/client/src/app/videos/video-add/video-add.component.ts b/client/src/app/videos/video-add/video-add.component.ts index 900ef1da3..f0695d768 100644 --- a/client/src/app/videos/video-add/video-add.component.ts +++ b/client/src/app/videos/video-add/video-add.component.ts @@ -1,20 +1,15 @@ -import { Validators } from '@angular/common'; import { Component, ElementRef, OnInit } from '@angular/core'; -import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; import { Router } from '@angular/router'; -import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; -import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar'; -import { FileSelectDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload'; +import { FileUploader } from 'ng2-file-upload/ng2-file-upload'; import { AuthService } from '../../shared'; @Component({ selector: 'my-videos-add', styles: [ require('./video-add.component.scss') ], - template: require('./video-add.component.html'), - directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES, REACTIVE_FORM_DIRECTIVES ], - pipes: [ BytesPipe ] + template: require('./video-add.component.html') }) export class VideoAddComponent implements OnInit { diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts index 9a9ffe29f..fa8e497aa 100644 --- a/client/src/app/videos/video-list/video-list.component.ts +++ b/client/src/app/videos/video-list/video-list.component.ts @@ -1,27 +1,19 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; -import { AsyncPipe } from '@angular/common'; -import { ActivatedRoute, Router, ROUTER_DIRECTIVES } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; -import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination'; - import { - LoaderComponent, SortField, Video, VideoService } from '../shared'; import { AuthService, AuthUser, RestPagination, Search, SearchField } from '../../shared'; -import { VideoMiniatureComponent } from './video-miniature.component'; -import { VideoSortComponent } from './video-sort.component'; import { SearchService } from '../../shared'; @Component({ selector: 'my-videos-list', styles: [ require('./video-list.component.scss') ], - pipes: [ AsyncPipe ], - template: require('./video-list.component.html'), - directives: [ LoaderComponent, PAGINATION_DIRECTIVES, ROUTER_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ] + template: require('./video-list.component.html') }) export class VideoListComponent implements OnInit, OnDestroy { diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/video-miniature.component.ts index 84bab950e..38317f832 100644 --- a/client/src/app/videos/video-list/video-miniature.component.ts +++ b/client/src/app/videos/video-list/video-miniature.component.ts @@ -1,6 +1,4 @@ -import { DatePipe } from '@angular/common'; import { Component, Input, Output, EventEmitter } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; import { SortField, Video, VideoService } from '../shared'; import { User } from '../../shared'; @@ -8,9 +6,7 @@ import { User } from '../../shared'; @Component({ selector: 'my-video-miniature', styles: [ require('./video-miniature.component.scss') ], - template: require('./video-miniature.component.html'), - directives: [ ROUTER_DIRECTIVES ], - pipes: [ DatePipe ] + template: require('./video-miniature.component.html') }) export class VideoMiniatureComponent { diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts index d260e55c7..2a60e9327 100644 --- a/client/src/app/videos/video-watch/video-watch.component.ts +++ b/client/src/app/videos/video-watch/video-watch.component.ts @@ -1,18 +1,13 @@ import { Component, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; - -import { LoaderComponent, Video, VideoService } from '../shared'; +import { Video, VideoService } from '../shared'; import { WebTorrentService } from './webtorrent.service'; @Component({ selector: 'my-video-watch', template: require('./video-watch.component.html'), - styles: [ require('./video-watch.component.scss') ], - providers: [ WebTorrentService ], - directives: [ LoaderComponent ], - pipes: [ BytesPipe ] + styles: [ require('./video-watch.component.scss') ] }) export class VideoWatchComponent implements OnInit, OnDestroy { diff --git a/client/src/app/videos/videos.component.ts b/client/src/app/videos/videos.component.ts index 76252afbb..591e7523d 100644 --- a/client/src/app/videos/videos.component.ts +++ b/client/src/app/videos/videos.component.ts @@ -1,9 +1,7 @@ import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; @Component({ - template: '', - directives: [ ROUTER_DIRECTIVES ] + template: '' }) export class VideosComponent { diff --git a/client/src/app/videos/videos.routes.ts b/client/src/app/videos/videos.routes.ts index 1f088b376..074f96596 100644 --- a/client/src/app/videos/videos.routes.ts +++ b/client/src/app/videos/videos.routes.ts @@ -1,11 +1,11 @@ -import { RouterConfig } from '@angular/router'; +import { Routes } from '@angular/router'; import { VideoAddComponent } from './video-add'; import { VideoListComponent } from './video-list'; import { VideosComponent } from './videos.component'; import { VideoWatchComponent } from './video-watch'; -export const VideosRoutes: RouterConfig = [ +export const VideosRoutes: Routes = [ { path: 'videos', component: VideosComponent, -- cgit v1.2.3