5 files changed, 126 insertions, 35 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 @@
 import { ApplicationRef, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { removeNgStyles, createNewHosts } from '@angularclass/hmr';
+import {
+  removeNgStyles,
+  createNewHosts,
+  createInputTransfer
+} from '@angularclass/hmr';
 
 import { MetaModule, MetaLoader, MetaStaticLoader, PageTitlePositioning } from '@nglibs/meta';
 // TODO: remove, we need this to avoid error in ng2-smart-table
@@ -10,7 +14,7 @@ import 'bootstrap-loader';
 import { ENV_PROVIDERS } from './environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { AppState } from './app.service';
+import { AppState, InternalStateType } from './app.service';
 
 import { AccountModule } from './account';
 import { CoreModule } from './core';
@@ -31,6 +35,12 @@ export function metaFactory(): MetaLoader {
   });
 }
 
+type StoreType = {
+  state: InternalStateType,
+  restoreInputValues: () => void,
+  disposeOldHosts: () => void
+};
+
 // Application wide providers
 const APP_PROVIDERS = [
   AppState
@@ -67,25 +77,58 @@ const APP_PROVIDERS = [
   ]
 })
 export class AppModule {
-  constructor(public appRef: ApplicationRef, public appState: AppState) {}
-  hmrOnInit(store) {
-    if (!store || !store.state) return;
-    console.log('HMR store', store);
+  constructor(
+    public appRef: ApplicationRef,
+    public appState: AppState
+  ) {}
+
+  public hmrOnInit(store: StoreType) {
+    if (!store || !store.state) {
+      return;
+    }
+    console.log('HMR store', JSON.stringify(store, null, 2));
+    /**
+     * Set state
+     */
     this.appState._state = store.state;
+    /**
+     * Set input values
+     */
+    if ('restoreInputValues' in store) {
+      let restoreInputValues = store.restoreInputValues;
+      setTimeout(restoreInputValues);
+    }
+
     this.appRef.tick();
     delete store.state;
+    delete store.restoreInputValues;
   }
-  hmrOnDestroy(store) {
-    const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
-    // recreate elements
+
+  public hmrOnDestroy(store: StoreType) {
+    const cmpLocation = this.appRef.components.map((cmp) => cmp.location.nativeElement);
+    /**
+     * Save state
+     */
     const state = this.appState._state;
     store.state = state;
+    /**
+     * Recreate root elements
+     */
     store.disposeOldHosts = createNewHosts(cmpLocation);
-    // remove styles
+    /**
+     * Save input values
+     */
+    store.restoreInputValues  = createInputTransfer();
+    /**
+     * Remove styles
+     */
     removeNgStyles();
   }
-  hmrAfterDestroy(store) {
-    // display new elements
+
+  public hmrAfterDestroy(store: StoreType) {
+    /**
+     * Display new elements
+     */
     store.disposeOldHosts();
     delete store.disposeOldHosts;
   }
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 @@
+import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+@Injectable()
+export class DataResolver implements Resolve<any> {
+  public resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    return Observable.of({ res: 'I am data'});
+  }
+}
+
+/**
+ * An array of services to resolve routes with data.
+ */
+export const APP_RESOLVER_PROVIDERS = [
+  DataResolver
+];
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 {
 
   public _state: InternalStateType = { };
 
-  // already return a clone of the current state
+  /**
+   * Already return a clone of the current state.
+   */
   public get state() {
     return this._state = this._clone(this._state);
   }
-  // never allow mutation
+  /**
+   * Never allow mutation
+   */
   public set state(value) {
     throw new Error('do not mutate the `.state` directly');
   }
 
   public get(prop?: any) {
-    // use our state getter for the clone
+    /**
+     * Use our state getter for the clone.
+     */
     const state = this.state;
     return state.hasOwnProperty(prop) ? state[prop] : state;
   }
 
   public set(prop: string, value: any) {
-    // internally mutate our state
+    /**
+     * Internally mutate our state.
+     */
     return this._state[prop] = value;
   }
 
   private _clone(object: InternalStateType) {
-    // simple object clone
+    /**
+     * Simple object clone.
+     */
     return JSON.parse(JSON.stringify( object ));
   }
 }
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 @@
-
-// Angular 2
-// rc2 workaround
-import { enableDebugTools, disableDebugTools } from '@angular/platform-browser';
-import { enableProdMode, ApplicationRef } from '@angular/core';
-// Environment Providers
+/**
+ * Angular 2
+ */
+import {
+  enableDebugTools,
+  disableDebugTools
+} from '@angular/platform-browser';
+import {
+  ApplicationRef,
+  enableProdMode
+} from '@angular/core';
+/**
+ * Environment Providers
+ */
 let PROVIDERS: any[] = [
-  // common env directives
+  /**
+   * Common env directives
+   */
 ];
 
-// Angular debug tools in the dev console
-// https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md
-let _decorateModuleRef = function identity<T>(value: T): T { return value; };
+/**
+ * Angular debug tools in the dev console
+ * https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md
+ */
+let _decorateModuleRef = <T>(value: T): T => { return value; };
 
 if ('production' === ENV) {
   enableProdMode();
 
-  // Production
+  /**
+   * Production
+   */
   _decorateModuleRef = (modRef: any) => {
     disableDebugTools();
 
@@ -24,7 +38,9 @@ if ('production' === ENV) {
 
   PROVIDERS = [
     ...PROVIDERS,
-    // custom providers in production
+    /**
+     * Custom providers in production.
+     */
   ];
 
 } else {
@@ -33,17 +49,21 @@ if ('production' === ENV) {
     const appRef = modRef.injector.get(ApplicationRef);
     const cmpRef = appRef.components[0];
 
-    let _ng = (<any>window).ng;
+    let _ng = (<any> window).ng;
     enableDebugTools(cmpRef);
-    (<any>window).ng.probe = _ng.probe;
-    (<any>window).ng.coreTokens = _ng.coreTokens;
+    (<any> window).ng.probe = _ng.probe;
+    (<any> window).ng.coreTokens = _ng.coreTokens;
     return modRef;
   };
 
-  // Development
+  /**
+   * Development
+   */
   PROVIDERS = [
     ...PROVIDERS,
-    // custom providers in development
+    /**
+     * Custom providers in development.
+     */
   ];
 
 }
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 {
   error: boolean = false;
   loading: boolean = false;
   numPeers: number;
-  player: VideoJSPlayer;
+  player: videojs.Player;
   playerElement: Element;
   uploadSpeed: number;
   userRating: RateType = null;