Move to angular cli

51 files changed, 132 insertions, 313 deletions

diff --git a/client/src/app/+admin/follows/following-add/following-add.component.scss b/client/src/app/+admin/follows/following-add/following-add.component.scss
index 2cb3efe28..7594b502c 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.scss
+++ b/client/src/app/+admin/follows/following-add/following-add.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 textarea {
   height: 250px;
 }
@@ -6,4 +9,3 @@ input[type=submit] {
   @include peertube-button;
   @include orange-button;
 }
-
diff --git a/client/src/app/+admin/follows/shared/follow.service.ts b/client/src/app/+admin/follows/shared/follow.service.ts
index 0bfbe8eb6..3a430ff64 100644
--- a/client/src/app/+admin/follows/shared/follow.service.ts
+++ b/client/src/app/+admin/follows/shared/follow.service.ts
@@ -1,17 +1,16 @@
-import { Injectable } from '@angular/core'
 import { HttpClient, HttpParams } from '@angular/common/http'
-import { Observable } from 'rxjs/Observable'
+import { Injectable } from '@angular/core'
+import { SortMeta } from 'primeng/primeng'
 import 'rxjs/add/operator/catch'
 import 'rxjs/add/operator/map'
-
-import { SortMeta } from 'primeng/primeng'
-
-import { RestExtractor, RestPagination, RestService } from '../../../shared'
+import { Observable } from 'rxjs/Observable'
 import { AccountFollow, ResultList } from '../../../../../../shared'
+import { environment } from '../../../../environments/environment'
+import { RestExtractor, RestPagination, RestService } from '../../../shared'
 
 @Injectable()
 export class FollowService {
-  private static BASE_APPLICATION_URL = API_URL + '/api/v1/server'
+  private static BASE_APPLICATION_URL = environment.apiUrl + '/api/v1/server'
 
   constructor (
     private authHttp: HttpClient,
diff --git a/client/src/app/+admin/index.ts b/client/src/app/+admin/index.ts
deleted file mode 100644
index b628a3662..000000000
--- a/client/src/app/+admin/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './admin.module'
diff --git a/client/src/app/+admin/jobs/job.routes.ts b/client/src/app/+admin/jobs/job.routes.ts
index a7bf2b221..331dc2af2 100644
--- a/client/src/app/+admin/jobs/job.routes.ts
+++ b/client/src/app/+admin/jobs/job.routes.ts
@@ -1,9 +1,6 @@
 import { Routes } from '@angular/router'
-
-import { UserRightGuard } from '../../core'
-import { FollowingAddComponent } from './following-add'
 import { UserRight } from '../../../../../shared'
-import { FollowingListComponent } from './following-list/following-list.component'
+import { UserRightGuard } from '../../core'
 import { JobsComponent } from './job.component'
 import { JobsListComponent } from './jobs-list/jobs-list.component'
 
diff --git a/client/src/app/+admin/jobs/shared/job.service.ts b/client/src/app/+admin/jobs/shared/job.service.ts
index 0cfbdbbea..61ee16077 100644
--- a/client/src/app/+admin/jobs/shared/job.service.ts
+++ b/client/src/app/+admin/jobs/shared/job.service.ts
@@ -6,12 +6,12 @@ import 'rxjs/add/operator/map'
 import { Observable } from 'rxjs/Observable'
 import { ResultList } from '../../../../../../shared'
 import { Job } from '../../../../../../shared/models/job.model'
-
+import { environment } from '../../../../environments/environment'
 import { RestExtractor, RestPagination, RestService } from '../../../shared'
 
 @Injectable()
 export class JobService {
-  private static BASE_JOB_URL = API_URL + '/api/v1/jobs'
+  private static BASE_JOB_URL = environment.apiUrl + '/api/v1/jobs'
 
   constructor (
     private authHttp: HttpClient,
diff --git a/client/src/app/+admin/users/shared/user.service.ts b/client/src/app/+admin/users/shared/user.service.ts
index dc77cc1d8..6536546fb 100644
--- a/client/src/app/+admin/users/shared/user.service.ts
+++ b/client/src/app/+admin/users/shared/user.service.ts
@@ -6,11 +6,12 @@ import 'rxjs/add/operator/catch'
 import 'rxjs/add/operator/map'
 import { Observable } from 'rxjs/Observable'
 import { ResultList, UserCreate, UserUpdate } from '../../../../../../shared'
+import { environment } from '../../../../environments/environment'
 import { RestExtractor, RestPagination, RestService, User } from '../../../shared'
 
 @Injectable()
 export class UserService {
-  private static BASE_USERS_URL = API_URL + '/api/v1/users/'
+  private static BASE_USERS_URL = environment.apiUrl + '/api/v1/users/'
   private bytesPipe = new BytesPipe()
 
   constructor (
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss
index 68d270c19..1bb1c5f0f 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .admin-sub-title {
   margin-bottom: 30px;
 }
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index 8b22f67ff..72d31a0cc 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -1,11 +1,14 @@
-  .add-button {
-    @include peertube-button-link;
-    @include orange-button;
+@import '_variables';
+@import '_mixins';
 
-    .icon.icon-add {
-      @include icon(22px);
+.add-button {
+  @include peertube-button-link;
+  @include orange-button;
 
-      margin-right: 3px;
-      background-image: url('../../../../assets/images/admin/add.svg');
-    }
+  .icon.icon-add {
+    @include icon(22px);
+
+    margin-right: 3px;
+    background-image: url('../../../../assets/images/admin/add.svg');
   }
+}
diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss
index 7a4fdb34d..f8279ffd3 100644
--- a/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss
+++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 input[type=password] {
   @include peertube-input-text(340px);
   display: block;
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.scss b/client/src/app/account/account-settings/account-details/account-details.component.scss
index 5c369f968..1bdb19a38 100644
--- a/client/src/app/account/account-settings/account-details/account-details.component.scss
+++ b/client/src/app/account/account-settings/account-details/account-details.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 label {
   font-size: 15px;
   font-weight: $font-regular;
diff --git a/client/src/app/account/account-settings/account-settings.component.scss b/client/src/app/account/account-settings/account-settings.component.scss
index f514809b0..7f1ade377 100644
--- a/client/src/app/account/account-settings/account-settings.component.scss
+++ b/client/src/app/account/account-settings/account-settings.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .user {
   display: flex;
 
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss
index 5459014a6..28b298c3d 100644
--- a/client/src/app/account/account-videos/account-videos.component.scss
+++ b/client/src/app/account/account-videos/account-videos.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .action-selection-mode {
   width: 174px;
   display: flex;
diff --git a/client/src/app/account/account.module.ts b/client/src/app/account/account.module.ts
index 020199e23..2299c1919 100644
--- a/client/src/app/account/account.module.ts
+++ b/client/src/app/account/account.module.ts
@@ -5,7 +5,6 @@ import { AccountChangePasswordComponent } from './account-settings/account-chang
 import { AccountDetailsComponent } from './account-settings/account-details/account-details.component'
 import { AccountSettingsComponent } from './account-settings/account-settings.component'
 import { AccountComponent } from './account.component'
-import { AccountService } from './account.service'
 import { AccountVideosComponent } from './account-videos/account-videos.component'
 
 @NgModule({
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index fe72c9181..f31b51e23 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -11,7 +11,7 @@ const routes: Routes = [
   },
   {
     path: 'admin',
-    loadChildren: './+admin#AdminModule'
+    loadChildren: './+admin/admin.module#AdminModule'
   }
 ]
 
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index c0ec2025d..2aadb1c97 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .main-row {
   min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
 }
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index 1326e3411..e69edbc4b 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -1,18 +1,10 @@
-import { ApplicationRef, NgModule } from '@angular/core'
+import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
-import {
-  removeNgStyles,
-  createNewHosts,
-  createInputTransfer
-} from '@angularclass/hmr'
 
 import { MetaModule, MetaLoader, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core'
-import 'bootstrap-loader'
 
-import { ENV_PROVIDERS } from './environment'
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
-import { AppState, InternalStateType } from './app.service'
 
 import { AccountModule } from './account'
 import { CoreModule } from './core'
@@ -35,17 +27,6 @@ export function metaFactory (): MetaLoader {
   })
 }
 
-type StoreType = {
-  state: InternalStateType,
-  restoreInputValues: () => void,
-  disposeOldHosts: () => void
-}
-
-// Application wide providers
-const APP_PROVIDERS = [
-  AppState
-]
-
 @NgModule({
   bootstrap: [ AppComponent ],
   declarations: [
@@ -74,65 +55,6 @@ const APP_PROVIDERS = [
       useFactory: (metaFactory)
     })
   ],
-  providers: [ // expose our Services and Providers into Angular's dependency injection
-    ENV_PROVIDERS,
-    APP_PROVIDERS
-  ]
+  providers: [ ]
 })
-export class AppModule {
-  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
-  }
-
-  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)
-    /**
-     * Save input values
-     */
-    store.restoreInputValues = createInputTransfer()
-    /**
-     * Remove styles
-     */
-    removeNgStyles()
-  }
-
-  public hmrAfterDestroy (store: StoreType) {
-    /**
-     * Display new elements
-     */
-    store.disposeOldHosts()
-    delete store.disposeOldHosts
-  }
-}
+export class AppModule {}
diff --git a/client/src/app/app.resolver.ts b/client/src/app/app.resolver.ts
deleted file mode 100644
index bc054e90b..000000000
--- a/client/src/app/app.resolver.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/* tslint:disable */
-
-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
deleted file mode 100644
index abffc87f1..000000000
--- a/client/src/app/app.service.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/* tslint:disable */
-
-import { Injectable } from '@angular/core'
-
-export type InternalStateType = {
-  [key: string]: any
-}
-
-@Injectable()
-export class AppState {
-
-  public _state: InternalStateType = { }
-
-  /**
-   * Already return a clone of the current state.
-   */
-  public get state() {
-    return this._state = this._clone(this._state)
-  }
-  /**
-   * 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.
-     */
-    const state = this.state
-    return state.hasOwnProperty(prop) ? state[prop] : state
-  }
-
-  public set(prop: string, value: any) {
-    /**
-     * Internally mutate our state.
-     */
-    return this._state[prop] = value
-  }
-
-  private _clone(object: InternalStateType) {
-    /**
-     * Simple object clone.
-     */
-    return JSON.parse(JSON.stringify( object ))
-  }
-}
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index e887dde1f..e2b8b6ba5 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -1,7 +1,6 @@
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Router } from '@angular/router'
-
 import { NotificationsService } from 'angular2-notifications'
 import 'rxjs/add/observable/throw'
 import 'rxjs/add/operator/do'
@@ -13,10 +12,9 @@ import { Subject } from 'rxjs/Subject'
 import { OAuthClientLocal, User as UserServerModel, UserRefreshToken, UserRole, VideoChannel } from '../../../../../shared'
 import { Account } from '../../../../../shared/models/accounts'
 import { UserLogin } from '../../../../../shared/models/users/user-login.model'
-// Do not use the barrel (dependency loop)
+import { environment } from '../../../environments/environment'
 import { RestExtractor } from '../../shared/rest'
 import { UserConstructorHash } from '../../shared/users/user.model'
-
 import { AuthStatus } from './auth-status.model'
 import { AuthUser } from './auth-user.model'
 
@@ -43,9 +41,9 @@ interface UserLoginWithUserInformation extends UserLogin {
 
 @Injectable()
 export class AuthService {
-  private static BASE_CLIENT_URL = API_URL + '/api/v1/oauth-clients/local'
-  private static BASE_TOKEN_URL = API_URL + '/api/v1/users/token'
-  private static BASE_USER_INFORMATION_URL = API_URL + '/api/v1/users/me'
+  private static BASE_CLIENT_URL = environment.apiUrl + '/api/v1/oauth-clients/local'
+  private static BASE_TOKEN_URL = environment.apiUrl + '/api/v1/users/token'
+  private static BASE_USER_INFORMATION_URL = environment.apiUrl + '/api/v1/users/me'
 
   loginChangedSource: Observable<AuthStatus>
   userInformationLoaded = new ReplaySubject<boolean>(1)
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index 75262e6cf..a58fe6ebe 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -11,7 +11,6 @@ import { AuthService } from './auth'
 import { LoginGuard, UserRightGuard } from './routing'
 import { ServerService } from './server'
 import { ConfirmComponent, ConfirmService } from './confirm'
-import { MenuComponent, MenuAdminComponent } from './menu'
 import { throwIfAlreadyLoaded } from './module-import-guard'
 
 @NgModule({
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 16e0595b6..a5be9e199 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -2,13 +2,13 @@ import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import 'rxjs/add/operator/do'
 import { ReplaySubject } from 'rxjs/ReplaySubject'
-
 import { ServerConfig } from '../../../../../shared'
+import { environment } from '../../../environments/environment'
 
 @Injectable()
 export class ServerService {
-  private static BASE_CONFIG_URL = API_URL + '/api/v1/config/'
-  private static BASE_VIDEO_URL = API_URL + '/api/v1/videos/'
+  private static BASE_CONFIG_URL = environment.apiUrl + '/api/v1/config/'
+  private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
 
   videoPrivaciesLoaded = new ReplaySubject<boolean>(1)
   videoCategoriesLoaded = new ReplaySubject<boolean>(1)
diff --git a/client/src/app/environment.ts b/client/src/app/environment.ts
deleted file mode 100644
index dd327a62e..000000000
--- a/client/src/app/environment.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-/* tslint:disable */
-
-/**
- * Angular 2
- */
-import {
-  enableDebugTools,
-  disableDebugTools
-} from '@angular/platform-browser';
-import {
-  ApplicationRef,
-  enableProdMode
-} from '@angular/core';
-/**
- * Environment Providers
- */
-let PROVIDERS: any[] = [
-  /**
-   * Common env directives
-   */
-];
-
-/**
- * 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
-   */
-  _decorateModuleRef = (modRef: any) => {
-    disableDebugTools();
-
-    return modRef;
-  };
-
-  PROVIDERS = [
-    ...PROVIDERS,
-    /**
-     * Custom providers in production.
-     */
-  ];
-
-} else {
-
-  _decorateModuleRef = (modRef: any) => {
-    const appRef = modRef.injector.get(ApplicationRef);
-    const cmpRef = appRef.components[0];
-
-    let _ng = (<any> window).ng;
-    enableDebugTools(cmpRef);
-    (<any> window).ng.probe = _ng.probe;
-    (<any> 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/header/header.component.scss b/client/src/app/header/header.component.scss
index fba70dd2f..1b67042fc 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 #search-video {
   @include peertube-input-text($search-input-width);
   margin-right: 15px;
diff --git a/client/src/app/login/login.component.scss b/client/src/app/login/login.component.scss
index 3b4326de4..efec6b706 100644
--- a/client/src/app/login/login.component.scss
+++ b/client/src/app/login/login.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 input:not([type=submit]) {
   @include peertube-input-text(340px);
   display: block;
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 97ceadde3..8cb94b3dd 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 menu {
   background-color: $black-background;
   margin: 0;
diff --git a/client/src/app/shared/account/account.model.ts b/client/src/app/shared/account/account.model.ts
index 0b008188a..9d1fd3e1d 100644
--- a/client/src/app/shared/account/account.model.ts
+++ b/client/src/app/shared/account/account.model.ts
@@ -1,5 +1,6 @@
 import { Account as ServerAccount } from '../../../../../shared/models/accounts/account.model'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
+import { environment } from '../../../environments/environment'
 
 export class Account implements ServerAccount {
   id: number
@@ -15,6 +16,6 @@ export class Account implements ServerAccount {
   static GET_ACCOUNT_AVATAR_PATH (account: Account) {
     if (account && account.avatar) return account.avatar.path
 
-    return API_URL + '/client/assets/images/default-avatar.png'
+    return environment.apiUrl + '/client/assets/images/default-avatar.png'
   }
 }
diff --git a/client/src/app/shared/forms/form-validators/host.validator.ts b/client/src/app/shared/forms/form-validators/host.ts
index c18a35f9b..c18a35f9b 100644
--- a/client/src/app/shared/forms/form-validators/host.validator.ts
+++ b/client/src/app/shared/forms/form-validators/host.ts
diff --git a/client/src/app/shared/forms/form-validators/index.ts b/client/src/app/shared/forms/form-validators/index.ts
index efe77d4ae..09ae86f8a 100644
--- a/client/src/app/shared/forms/form-validators/index.ts
+++ b/client/src/app/shared/forms/form-validators/index.ts
@@ -1,4 +1,4 @@
-export * from './host.validator'
+export * from './host'
 export * from './user'
 export * from './video-abuse'
 export * from './video'
diff --git a/client/src/app/shared/forms/form-validators/validator-message.ts b/client/src/app/shared/forms/form-validators/validator-message.ts
new file mode 100644
index 000000000..5ce45833b
--- /dev/null
+++ b/client/src/app/shared/forms/form-validators/validator-message.ts
@@ -0,0 +1,5 @@
+export type ValidatorMessage = {
+  [ id: string ]: {
+    [ error: string ]: string
+  }
+}
diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts
index 45da7df4a..500b5bc5f 100644
--- a/client/src/app/shared/forms/form-validators/video.ts
+++ b/client/src/app/shared/forms/form-validators/video.ts
@@ -1,11 +1,5 @@
 import { Validators } from '@angular/forms'
 
-export type ValidatorMessage = {
-  [ id: string ]: {
-    [ error: string ]: string
-  }
-}
-
 export const VIDEO_NAME = {
   VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(120) ],
   MESSAGES: {
diff --git a/client/src/app/shared/misc/button.component.scss b/client/src/app/shared/misc/button.component.scss
index 5fcae4f10..c380c7ae1 100644
--- a/client/src/app/shared/misc/button.component.scss
+++ b/client/src/app/shared/misc/button.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .action-button {
   @include peertube-button-link;
 
diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts
index 6d1017fc9..d97edbcbe 100644
--- a/client/src/app/shared/users/user.service.ts
+++ b/client/src/app/shared/users/user.service.ts
@@ -1,14 +1,14 @@
-import { Injectable } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
 import 'rxjs/add/operator/catch'
 import 'rxjs/add/operator/map'
-
-import { RestExtractor } from '../rest'
 import { UserCreate, UserUpdateMe } from '../../../../../shared'
+import { environment } from '../../../environments/environment'
+import { RestExtractor } from '../rest'
 
 @Injectable()
 export class UserService {
-  static BASE_USERS_URL = API_URL + '/api/v1/users/'
+  static BASE_USERS_URL = environment.apiUrl + '/api/v1/users/'
 
   constructor (
     private authHttp: HttpClient,
diff --git a/client/src/app/shared/video-abuse/video-abuse.service.ts b/client/src/app/shared/video-abuse/video-abuse.service.ts
index 8d979de31..96a1f1fd2 100644
--- a/client/src/app/shared/video-abuse/video-abuse.service.ts
+++ b/client/src/app/shared/video-abuse/video-abuse.service.ts
@@ -1,19 +1,17 @@
-import { Injectable } from '@angular/core'
 import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { SortMeta } from 'primeng/components/common/sortmeta'
 import 'rxjs/add/operator/catch'
 import 'rxjs/add/operator/map'
 import { Observable } from 'rxjs/Observable'
-
-import { SortMeta } from 'primeng/components/common/sortmeta'
-
-import { AuthService } from '../core'
+import { ResultList, VideoAbuse } from '../../../../../shared'
 import { RestExtractor, RestPagination, RestService } from '../rest'
 import { Utils } from '../utils'
-import { ResultList, VideoAbuse } from '../../../../../shared'
+import { environment } from '../../../environments/environment'
 
 @Injectable()
 export class VideoAbuseService {
-  private static BASE_VIDEO_ABUSE_URL = API_URL + '/api/v1/videos/'
+  private static BASE_VIDEO_ABUSE_URL = environment.apiUrl + '/api/v1/videos/'
 
   constructor (
     private authHttp: HttpClient,
diff --git a/client/src/app/shared/video-blacklist/video-blacklist.service.ts b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
index 17373d52e..1231690aa 100644
--- a/client/src/app/shared/video-blacklist/video-blacklist.service.ts
+++ b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
@@ -1,18 +1,17 @@
-import { Injectable } from '@angular/core'
 import { HttpClient, HttpParams } from '@angular/common/http'
-import { Observable } from 'rxjs/Observable'
+import { Injectable } from '@angular/core'
+import { SortMeta } from 'primeng/components/common/sortmeta'
 import 'rxjs/add/operator/catch'
 import 'rxjs/add/operator/map'
-
-import { SortMeta } from 'primeng/components/common/sortmeta'
-
+import { Observable } from 'rxjs/Observable'
+import { BlacklistedVideo, ResultList } from '../../../../../shared'
+import { environment } from '../../../environments/environment'
 import { RestExtractor, RestPagination, RestService } from '../rest'
 import { Utils } from '../utils'
-import { BlacklistedVideo, ResultList } from '../../../../../shared'
 
 @Injectable()
 export class VideoBlacklistService {
-  private static BASE_VIDEOS_URL = API_URL + '/api/v1/videos/'
+  private static BASE_VIDEOS_URL = environment.apiUrl + '/api/v1/videos/'
 
   constructor (
     private authHttp: HttpClient,
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 37e84897b..49ba1e51c 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .video-miniature {
   display: inline-block;
   padding-right: 15px;
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index ab4f9bcb1..0fc2df220 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .video-thumbnail {
   display: inline-block;
   position: relative;
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index d86ef8f92..32c33829d 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -1,6 +1,7 @@
-import { Video as VideoServerModel } from '../../../../../shared'
 import { User } from '../'
+import { Video as VideoServerModel } from '../../../../../shared'
 import { Account } from '../../../../../shared/models/accounts'
+import { environment } from '../../../environments/environment'
 
 export class Video implements VideoServerModel {
   accountName: string
@@ -48,7 +49,7 @@ export class Video implements VideoServerModel {
   }
 
   constructor (hash: VideoServerModel) {
-    let absoluteAPIUrl = API_URL
+    let absoluteAPIUrl = environment.apiUrl
     if (!absoluteAPIUrl) {
       // The API is on the same domain
       absoluteAPIUrl = window.location.origin
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 1a0644c3d..91dd3977a 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -9,9 +9,9 @@ import { UserVideoRateUpdate } from '../../../../../shared/models/videos/user-vi
 import { UserVideoRate } from '../../../../../shared/models/videos/user-video-rate.model'
 import { VideoRateType } from '../../../../../shared/models/videos/video-rate.type'
 import { VideoUpdate } from '../../../../../shared/models/videos/video-update.model'
+import { environment } from '../../../environments/environment'
 import { RestExtractor } from '../rest/rest-extractor.service'
 import { RestService } from '../rest/rest.service'
-import { Search } from '../header/search.model'
 import { UserService } from '../users/user.service'
 import { SortField } from './sort-field.type'
 import { VideoDetails } from './video-details.model'
@@ -21,7 +21,7 @@ import { Video } from './video.model'
 
 @Injectable()
 export class VideoService {
-  private static BASE_VIDEO_URL = API_URL + '/api/v1/videos/'
+  private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
 
   constructor (
     private authHttp: HttpClient,
@@ -118,7 +118,7 @@ export class VideoService {
 
   loadCompleteDescription (descriptionPath: string) {
     return this.authHttp
-      .get(API_URL + descriptionPath)
+      .get(environment.apiUrl + descriptionPath)
       .map(res => res['description'])
       .catch((res) => this.restExtractor.handleError(res))
   }
diff --git a/client/src/app/signup/signup.component.scss b/client/src/app/signup/signup.component.scss
index 3b4326de4..efec6b706 100644
--- a/client/src/app/signup/signup.component.scss
+++ b/client/src/app/signup/signup.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 input:not([type=submit]) {
   @include peertube-input-text(340px);
   display: block;
diff --git a/client/src/app/videos/+video-edit/index.ts b/client/src/app/videos/+video-edit/index.ts
deleted file mode 100644
index 63e0414dd..000000000
--- a/client/src/app/videos/+video-edit/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './video-add.module'
-export * from './video-update.module'
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.scss b/client/src/app/videos/+video-edit/shared/video-description.component.scss
index 2a4c8d189..d6a5190c5 100644
--- a/client/src/app/videos/+video-edit/shared/video-description.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 textarea {
   @include peertube-input-text(100%);
 
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index d363499ce..f4466bdde 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .video-edit {
   height: 100%;
 
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.ts b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
index 5b1cc3f9c..28c9134a7 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
@@ -2,12 +2,10 @@ import { Component, Input, OnInit } from '@angular/core'
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 import { NotificationsService } from 'angular2-notifications'
-import { ServerService } from 'app/core'
-import { VideoEdit } from 'app/shared/video/video-edit.model'
 import 'rxjs/add/observable/forkJoin'
-import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
+import { ServerService } from '../../../core/server'
+import { ValidatorMessage } from '../../../shared/forms/form-validators/validator-message'
 import {
-  ValidatorMessage,
   VIDEO_CATEGORY,
   VIDEO_DESCRIPTION,
   VIDEO_LANGUAGE,
@@ -15,7 +13,8 @@ import {
   VIDEO_NAME,
   VIDEO_PRIVACY,
   VIDEO_TAGS
-} from '../../../shared/forms/form-validators'
+} from '../../../shared/forms/form-validators/video'
+import { VideoEdit } from '../../../shared/video/video-edit.model'
 
 @Component({
   selector: 'my-video-edit',
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index 39673b4b7..78140e0e9 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .upload-video-container {
   border-radius: 3px;
   background-color: #F7F7F7;
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
index 2bbc3de17..503f705db 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -3,13 +3,12 @@ import { Component, OnInit, ViewChild } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { Router } from '@angular/router'
 import { NotificationsService } from 'angular2-notifications'
-import { VideoService } from 'app/shared/video/video.service'
-import { VideoCreate } from '../../../../../shared'
 import { VideoPrivacy } from '../../../../../shared/models/videos'
 import { AuthService, ServerService } from '../../core'
 import { FormReactive } from '../../shared'
-import { ValidatorMessage } from '../../shared/forms/form-validators'
+import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message'
 import { VideoEdit } from '../../shared/video/video-edit.model'
+import { VideoService } from '../../shared/video/video.service'
 
 @Component({
   selector: 'my-videos-add',
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
index d1da8b6d8..08b74f4c3 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -3,10 +3,10 @@ import { FormBuilder, FormGroup } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 import { NotificationsService } from 'angular2-notifications'
 import 'rxjs/add/observable/forkJoin'
-import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
+import { VideoPrivacy } from '../../../../../shared/models/videos'
 import { ServerService } from '../../core'
 import { FormReactive } from '../../shared'
-import { ValidatorMessage } from '../../shared/forms/form-validators'
+import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message'
 import { VideoEdit } from '../../shared/video/video-edit.model'
 import { VideoService } from '../../shared/video/video.service'
 
@@ -25,8 +25,6 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
   validationMessages: ValidatorMessage = {}
   videoPrivacies = []
 
-  fileError = ''
-
   constructor (
     private formBuilder: FormBuilder,
     private route: ActivatedRoute,
diff --git a/client/src/app/videos/+video-watch/index.ts b/client/src/app/videos/+video-watch/index.ts
deleted file mode 100644
index b19bfdb1e..000000000
--- a/client/src/app/videos/+video-watch/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './video-watch.module'
diff --git a/client/src/app/videos/+video-watch/video-download.component.scss b/client/src/app/videos/+video-watch/video-download.component.scss
index c9d5af9c1..7eac3d1c9 100644
--- a/client/src/app/videos/+video-watch/video-download.component.scss
+++ b/client/src/app/videos/+video-watch/video-download.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .resolution-block:not(:first-child) {
   margin-top: 30px;
 }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 9daa757b4..52082944a 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 #video-container {
   background-color: #000;
   display: flex;
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 bec6932ae..3825e8449 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -2,10 +2,9 @@ import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/co
 import { ActivatedRoute, Router } from '@angular/router'
 import { MetaService } from '@ngx-meta/core'
 import { NotificationsService } from 'angular2-notifications'
-import { VideoService } from 'app/shared/video/video.service'
 import { Observable } from 'rxjs/Observable'
 import { Subscription } from 'rxjs/Subscription'
-import videojs from 'video.js'
+import * as videojs from 'video.js'
 import { UserVideoRateType, VideoRateType } from '../../../../../shared'
 import '../../../assets/player/peertube-videojs-plugin'
 import { AuthService, ConfirmService } from '../../core'
@@ -13,6 +12,7 @@ import { VideoBlacklistService } from '../../shared'
 import { Account } from '../../shared/account/account.model'
 import { VideoDetails } from '../../shared/video/video-details.model'
 import { Video } from '../../shared/video/video.model'
+import { VideoService } from '../../shared/video/video.service'
 import { MarkdownService } from '../shared'
 import { VideoDownloadComponent } from './video-download.component'
 import { VideoReportComponent } from './video-report.component'
diff --git a/client/src/app/videos/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts
index 6910421b7..29ec5fd4f 100644
--- a/client/src/app/videos/videos-routing.module.ts
+++ b/client/src/app/videos/videos-routing.module.ts
@@ -46,7 +46,7 @@ const videosRoutes: Routes = [
       },
       {
         path: 'upload',
-        loadChildren: 'app/videos/+video-edit#VideoAddModule',
+        loadChildren: 'app/videos/+video-edit/video-add.module#VideoAddModule',
         data: {
           meta: {
             title: 'Upload a video'
@@ -55,7 +55,7 @@ const videosRoutes: Routes = [
       },
       {
         path: 'edit/:uuid',
-        loadChildren: 'app/videos/+video-edit#VideoUpdateModule',
+        loadChildren: 'app/videos/+video-edit/video-update.module#VideoUpdateModule',
         data: {
           meta: {
             title: 'Edit a video'
@@ -69,7 +69,7 @@ const videosRoutes: Routes = [
       },
       {
         path: 'watch/:uuid',
-        loadChildren: 'app/videos/+video-watch#VideoWatchModule',
+        loadChildren: 'app/videos/+video-watch/video-watch.module#VideoWatchModule',
         data: {
           preload: 3000
         }