aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/app.module.ts67
-rw-r--r--client/src/app/app.resolver.ts18
-rw-r--r--client/src/app/app.service.ts20
-rw-r--r--client/src/app/environment.ts54
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.ts2
-rw-r--r--client/src/custom-typings.d.ts2
-rw-r--r--client/src/index.html6
-rw-r--r--client/src/main.browser.aot.ts24
-rw-r--r--client/src/main.browser.ts27
9 files changed, 170 insertions, 50 deletions
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index 7d1760fcd..8a072eaac 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -1,6 +1,10 @@
1import { ApplicationRef, NgModule } from '@angular/core'; 1import { ApplicationRef, NgModule } from '@angular/core';
2import { BrowserModule } from '@angular/platform-browser'; 2import { BrowserModule } from '@angular/platform-browser';
3import { removeNgStyles, createNewHosts } from '@angularclass/hmr'; 3import {
4 removeNgStyles,
5 createNewHosts,
6 createInputTransfer
7} from '@angularclass/hmr';
4 8
5import { MetaModule, MetaLoader, MetaStaticLoader, PageTitlePositioning } from '@nglibs/meta'; 9import { MetaModule, MetaLoader, MetaStaticLoader, PageTitlePositioning } from '@nglibs/meta';
6// TODO: remove, we need this to avoid error in ng2-smart-table 10// TODO: remove, we need this to avoid error in ng2-smart-table
@@ -10,7 +14,7 @@ import 'bootstrap-loader';
10import { ENV_PROVIDERS } from './environment'; 14import { ENV_PROVIDERS } from './environment';
11import { AppRoutingModule } from './app-routing.module'; 15import { AppRoutingModule } from './app-routing.module';
12import { AppComponent } from './app.component'; 16import { AppComponent } from './app.component';
13import { AppState } from './app.service'; 17import { AppState, InternalStateType } from './app.service';
14 18
15import { AccountModule } from './account'; 19import { AccountModule } from './account';
16import { CoreModule } from './core'; 20import { CoreModule } from './core';
@@ -31,6 +35,12 @@ export function metaFactory(): MetaLoader {
31 }); 35 });
32} 36}
33 37
38type StoreType = {
39 state: InternalStateType,
40 restoreInputValues: () => void,
41 disposeOldHosts: () => void
42};
43
34// Application wide providers 44// Application wide providers
35const APP_PROVIDERS = [ 45const APP_PROVIDERS = [
36 AppState 46 AppState
@@ -67,25 +77,58 @@ const APP_PROVIDERS = [
67 ] 77 ]
68}) 78})
69export class AppModule { 79export class AppModule {
70 constructor(public appRef: ApplicationRef, public appState: AppState) {} 80 constructor(
71 hmrOnInit(store) { 81 public appRef: ApplicationRef,
72 if (!store || !store.state) return; 82 public appState: AppState
73 console.log('HMR store', store); 83 ) {}
84
85 public hmrOnInit(store: StoreType) {
86 if (!store || !store.state) {
87 return;
88 }
89 console.log('HMR store', JSON.stringify(store, null, 2));
90 /**
91 * Set state
92 */
74 this.appState._state = store.state; 93 this.appState._state = store.state;
94 /**
95 * Set input values
96 */
97 if ('restoreInputValues' in store) {
98 let restoreInputValues = store.restoreInputValues;
99 setTimeout(restoreInputValues);
100 }
101
75 this.appRef.tick(); 102 this.appRef.tick();
76 delete store.state; 103 delete store.state;
104 delete store.restoreInputValues;
77 } 105 }
78 hmrOnDestroy(store) { 106
79 const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement); 107 public hmrOnDestroy(store: StoreType) {
80 // recreate elements 108 const cmpLocation = this.appRef.components.map((cmp) => cmp.location.nativeElement);
109 /**
110 * Save state
111 */
81 const state = this.appState._state; 112 const state = this.appState._state;
82 store.state = state; 113 store.state = state;
114 /**
115 * Recreate root elements
116 */
83 store.disposeOldHosts = createNewHosts(cmpLocation); 117 store.disposeOldHosts = createNewHosts(cmpLocation);
84 // remove styles 118 /**
119 * Save input values
120 */
121 store.restoreInputValues = createInputTransfer();
122 /**
123 * Remove styles
124 */
85 removeNgStyles(); 125 removeNgStyles();
86 } 126 }
87 hmrAfterDestroy(store) { 127
88 // display new elements 128 public hmrAfterDestroy(store: StoreType) {
129 /**
130 * Display new elements
131 */
89 store.disposeOldHosts(); 132 store.disposeOldHosts();
90 delete store.disposeOldHosts; 133 delete store.disposeOldHosts;
91 } 134 }
diff --git a/client/src/app/app.resolver.ts b/client/src/app/app.resolver.ts
new file mode 100644
index 000000000..45774b8d1
--- /dev/null
+++ b/client/src/app/app.resolver.ts
@@ -0,0 +1,18 @@
1import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
2import { Injectable } from '@angular/core';
3import { Observable } from 'rxjs/Observable';
4import 'rxjs/add/observable/of';
5
6@Injectable()
7export class DataResolver implements Resolve<any> {
8 public resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
9 return Observable.of({ res: 'I am data'});
10 }
11}
12
13/**
14 * An array of services to resolve routes with data.
15 */
16export const APP_RESOLVER_PROVIDERS = [
17 DataResolver
18];
diff --git a/client/src/app/app.service.ts b/client/src/app/app.service.ts
index 9b582e472..a7eb880a4 100644
--- a/client/src/app/app.service.ts
+++ b/client/src/app/app.service.ts
@@ -9,28 +9,38 @@ export class AppState {
9 9
10 public _state: InternalStateType = { }; 10 public _state: InternalStateType = { };
11 11
12 // already return a clone of the current state 12 /**
13 * Already return a clone of the current state.
14 */
13 public get state() { 15 public get state() {
14 return this._state = this._clone(this._state); 16 return this._state = this._clone(this._state);
15 } 17 }
16 // never allow mutation 18 /**
19 * Never allow mutation
20 */
17 public set state(value) { 21 public set state(value) {
18 throw new Error('do not mutate the `.state` directly'); 22 throw new Error('do not mutate the `.state` directly');
19 } 23 }
20 24
21 public get(prop?: any) { 25 public get(prop?: any) {
22 // use our state getter for the clone 26 /**
27 * Use our state getter for the clone.
28 */
23 const state = this.state; 29 const state = this.state;
24 return state.hasOwnProperty(prop) ? state[prop] : state; 30 return state.hasOwnProperty(prop) ? state[prop] : state;
25 } 31 }
26 32
27 public set(prop: string, value: any) { 33 public set(prop: string, value: any) {
28 // internally mutate our state 34 /**
35 * Internally mutate our state.
36 */
29 return this._state[prop] = value; 37 return this._state[prop] = value;
30 } 38 }
31 39
32 private _clone(object: InternalStateType) { 40 private _clone(object: InternalStateType) {
33 // simple object clone 41 /**
42 * Simple object clone.
43 */
34 return JSON.parse(JSON.stringify( object )); 44 return JSON.parse(JSON.stringify( object ));
35 } 45 }
36} 46}
diff --git a/client/src/app/environment.ts b/client/src/app/environment.ts
index 929e09490..799102d82 100644
--- a/client/src/app/environment.ts
+++ b/client/src/app/environment.ts
@@ -1,21 +1,35 @@
1 1/**
2// Angular 2 2 * Angular 2
3// rc2 workaround 3 */
4import { enableDebugTools, disableDebugTools } from '@angular/platform-browser'; 4import {
5import { enableProdMode, ApplicationRef } from '@angular/core'; 5 enableDebugTools,
6// Environment Providers 6 disableDebugTools
7} from '@angular/platform-browser';
8import {
9 ApplicationRef,
10 enableProdMode
11} from '@angular/core';
12/**
13 * Environment Providers
14 */
7let PROVIDERS: any[] = [ 15let PROVIDERS: any[] = [
8 // common env directives 16 /**
17 * Common env directives
18 */
9]; 19];
10 20
11// Angular debug tools in the dev console 21/**
12// https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md 22 * Angular debug tools in the dev console
13let _decorateModuleRef = function identity<T>(value: T): T { return value; }; 23 * https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md
24 */
25let _decorateModuleRef = <T>(value: T): T => { return value; };
14 26
15if ('production' === ENV) { 27if ('production' === ENV) {
16 enableProdMode(); 28 enableProdMode();
17 29
18 // Production 30 /**
31 * Production
32 */
19 _decorateModuleRef = (modRef: any) => { 33 _decorateModuleRef = (modRef: any) => {
20 disableDebugTools(); 34 disableDebugTools();
21 35
@@ -24,7 +38,9 @@ if ('production' === ENV) {
24 38
25 PROVIDERS = [ 39 PROVIDERS = [
26 ...PROVIDERS, 40 ...PROVIDERS,
27 // custom providers in production 41 /**
42 * Custom providers in production.
43 */
28 ]; 44 ];
29 45
30} else { 46} else {
@@ -33,17 +49,21 @@ if ('production' === ENV) {
33 const appRef = modRef.injector.get(ApplicationRef); 49 const appRef = modRef.injector.get(ApplicationRef);
34 const cmpRef = appRef.components[0]; 50 const cmpRef = appRef.components[0];
35 51
36 let _ng = (<any>window).ng; 52 let _ng = (<any> window).ng;
37 enableDebugTools(cmpRef); 53 enableDebugTools(cmpRef);
38 (<any>window).ng.probe = _ng.probe; 54 (<any> window).ng.probe = _ng.probe;
39 (<any>window).ng.coreTokens = _ng.coreTokens; 55 (<any> window).ng.coreTokens = _ng.coreTokens;
40 return modRef; 56 return modRef;
41 }; 57 };
42 58
43 // Development 59 /**
60 * Development
61 */
44 PROVIDERS = [ 62 PROVIDERS = [
45 ...PROVIDERS, 63 ...PROVIDERS,
46 // custom providers in development 64 /**
65 * Custom providers in development.
66 */
47 ]; 67 ];
48 68
49} 69}
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 d4b60b001..32c847785 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -31,7 +31,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
31 error: boolean = false; 31 error: boolean = false;
32 loading: boolean = false; 32 loading: boolean = false;
33 numPeers: number; 33 numPeers: number;
34 player: VideoJSPlayer; 34 player: videojs.Player;
35 playerElement: Element; 35 playerElement: Element;
36 uploadSpeed: number; 36 uploadSpeed: number;
37 userRating: RateType = null; 37 userRating: RateType = null;
diff --git a/client/src/custom-typings.d.ts b/client/src/custom-typings.d.ts
index 7cb57b62b..621a416b4 100644
--- a/client/src/custom-typings.d.ts
+++ b/client/src/custom-typings.d.ts
@@ -83,7 +83,7 @@ type AsyncRoutes = {
83 [component: string]: Es6PromiseLoader | 83 [component: string]: Es6PromiseLoader |
84 Function | 84 Function |
85 FactoryEs6PromiseLoader | 85 FactoryEs6PromiseLoader |
86 FactoryPromise 86 FactoryPromise ;
87}; 87};
88 88
89type IdleCallbacks = Es6PromiseLoader | 89type IdleCallbacks = Es6PromiseLoader |
diff --git a/client/src/index.html b/client/src/index.html
index 07658bbb7..e18b83dc8 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -11,13 +11,15 @@
11 <!-- opengraph tags --> 11 <!-- opengraph tags -->
12 <!-- Do not remove it! --> 12 <!-- Do not remove it! -->
13 13
14 <link rel="icon" type="image/png" href="/client/assets/favicon.png" />
15
16 <!-- TODO: bundle it with webpack when https://github.com/webpack/webpack/pull/1931 will be merged --> 14 <!-- TODO: bundle it with webpack when https://github.com/webpack/webpack/pull/1931 will be merged -->
17 <script src="/client/assets/webtorrent/webtorrent.min.js"></script> 15 <script src="/client/assets/webtorrent/webtorrent.min.js"></script>
18 16
17 <link rel="icon" type="image/png" href="/client/assets/favicon.png" />
18
19 <!-- base url --> 19 <!-- base url -->
20 <base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>"> 20 <base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">
21
22 <%= htmlWebpackPlugin.files.webpackManifest %>
21 </head> 23 </head>
22 24
23 <!-- 3. Display the application --> 25 <!-- 3. Display the application -->
diff --git a/client/src/main.browser.aot.ts b/client/src/main.browser.aot.ts
index 29ecf7349..718cb3a80 100644
--- a/client/src/main.browser.aot.ts
+++ b/client/src/main.browser.aot.ts
@@ -1,13 +1,14 @@
1import { platformBrowser } from '@angular/platform-browser'; 1import { platformBrowser } from '@angular/platform-browser';
2import { decorateModuleRef } from './app/environment'; 2import { decorateModuleRef } from './app/environment';
3/* 3
4/**
4 * App Module 5 * App Module
5 * our top level module that holds all of our components 6 * our top level module that holds all of our components.
6 */ 7 */
7import { AppModuleNgFactory } from '../compiled/src/app/app.module.ngfactory'; 8import { AppModuleNgFactory } from '../compiled/src/app/app.module.ngfactory';
8 9
9/* 10/**
10 * Bootstrap our Angular app with a top level NgModule 11 * Bootstrap our Angular app with a top level NgModule.
11 */ 12 */
12export function main(): Promise<any> { 13export function main(): Promise<any> {
13 return platformBrowser() 14 return platformBrowser()
@@ -16,8 +17,17 @@ export function main(): Promise<any> {
16 .catch((err) => console.error(err)); 17 .catch((err) => console.error(err));
17} 18}
18 19
19export function bootstrapDomReady() { 20switch (document.readyState) {
20 document.addEventListener('DOMContentLoaded', main); 21 case 'loading':
22 document.addEventListener('DOMContentLoaded', _domReadyHandler, false);
23 break;
24 case 'interactive':
25 case 'complete':
26 default:
27 main();
21} 28}
22 29
23bootstrapDomReady(); 30function _domReadyHandler() {
31 document.removeEventListener('DOMContentLoaded', _domReadyHandler, false);
32 main();
33}
diff --git a/client/src/main.browser.ts b/client/src/main.browser.ts
index 70bf48537..f627ba7df 100644
--- a/client/src/main.browser.ts
+++ b/client/src/main.browser.ts
@@ -1,20 +1,37 @@
1import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 1import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2import { decorateModuleRef } from './app/environment'; 2import { decorateModuleRef } from './app/environment';
3import { bootloader } from '@angularclass/hmr'; 3
4/* 4/**
5 * App Module 5 * App Module
6 * our top level module that holds all of our components 6 * our top level module that holds all of our components
7 */ 7 */
8import { AppModule } from './app'; 8import { AppModule } from './app';
9 9
10/* 10/**
11 * Bootstrap our Angular app with a top level NgModule 11 * Bootstrap our Angular app with a top level NgModule
12 */ 12 */
13export function main(): Promise<any> { 13export function main(): Promise<any> {
14 return platformBrowserDynamic() 14 return platformBrowserDynamic()
15 .bootstrapModule(AppModule) 15 .bootstrapModule(AppModule)
16 .then(decorateModuleRef) 16 .then(decorateModuleRef)
17 .catch(err => console.error(err)); 17 .catch((err) => console.error(err));
18} 18}
19 19
20bootloader(main); 20/**
21 * Needed for hmr
22 * in prod this is replace for document ready
23 */
24switch (document.readyState) {
25 case 'loading':
26 document.addEventListener('DOMContentLoaded', _domReadyHandler, false);
27 break;
28 case 'interactive':
29 case 'complete':
30 default:
31 main();
32}
33
34function _domReadyHandler() {
35 document.removeEventListener('DOMContentLoaded', _domReadyHandler, false);
36 main();
37}