Try to optimize frontend

33 files changed, 198 insertions, 47 deletions

diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index 191ae6974..0f9484344 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core'
-import { Routes, RouterModule, PreloadAllModules } from '@angular/router'
+import { Routes, RouterModule } from '@angular/router'
+
+import { PreloadSelectedModulesList } from './core'
 
 const routes: Routes = [
   {
@@ -17,9 +19,10 @@ const routes: Routes = [
   imports: [
     RouterModule.forRoot(routes, {
       useHash: Boolean(history.pushState) === false,
-      preloadingStrategy: PreloadAllModules
+      preloadingStrategy: PreloadSelectedModulesList
     })
   ],
+  providers: [ PreloadSelectedModulesList ],
   exports: [ RouterModule ]
 })
 export class AppRoutingModule {}
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index ae86bc96f..82e647c98 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -2,7 +2,6 @@ import { Component, OnInit, ViewContainerRef } from '@angular/core'
 import { Router } from '@angular/router'
 
 import { AuthService, ConfigService } from './core'
-import { VideoService } from './videos'
 import { UserService } from './shared'
 
 @Component({
@@ -30,8 +29,7 @@ export class AppComponent implements OnInit {
     private router: Router,
     private authService: AuthService,
     private configService: ConfigService,
-    private userService: UserService,
-    private videoService: VideoService
+    private userService: UserService
   ) {}
 
   ngOnInit () {
@@ -43,9 +41,6 @@ export class AppComponent implements OnInit {
     }
 
     this.configService.loadConfig()
-    this.videoService.loadVideoCategories()
-    this.videoService.loadVideoLicences()
-    this.videoService.loadVideoLanguages()
 
     // Do not display menu on small screens
     if (window.innerWidth < 600) {
diff --git a/client/src/app/core/index.ts b/client/src/app/core/index.ts
index 01b12ce7e..31322138f 100644
--- a/client/src/app/core/index.ts
+++ b/client/src/app/core/index.ts
@@ -2,4 +2,5 @@ export * from './auth'
 export * from './config'
 export * from './confirm'
 export * from './menu'
+export * from './routing'
 export * from './core.module'
diff --git a/client/src/app/core/routing/index.ts b/client/src/app/core/routing/index.ts
new file mode 100644
index 000000000..17f3ee833
--- /dev/null
+++ b/client/src/app/core/routing/index.ts
@@ -0,0 +1 @@
+export * from './preload-selected-modules-list'
diff --git a/client/src/app/core/routing/preload-selected-modules-list.ts b/client/src/app/core/routing/preload-selected-modules-list.ts
new file mode 100644
index 000000000..dd5be6ad9
--- /dev/null
+++ b/client/src/app/core/routing/preload-selected-modules-list.ts
@@ -0,0 +1,16 @@
+import { Route, PreloadingStrategy } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/timer';
+import 'rxjs/add/operator/switchMap';
+
+export class PreloadSelectedModulesList implements PreloadingStrategy {
+  preload(route: Route, load: Function): Observable<any> {
+    if (!route.data || !route.data.preload) return Observable.of(null);
+
+    if (typeof route.data.preload === 'number') {
+      return Observable.timer(route.data.preload).switchMap(() => load());
+    }
+
+    return load();
+  }
+}
diff --git a/client/src/app/videos/+video-edit/index.ts b/client/src/app/videos/+video-edit/index.ts
new file mode 100644
index 000000000..63e0414dd
--- /dev/null
+++ b/client/src/app/videos/+video-edit/index.ts
@@ -0,0 +1,2 @@
+export * from './video-add.module'
+export * from './video-update.module'
diff --git a/client/src/app/videos/+video-edit/video-add-routing.module.ts b/client/src/app/videos/+video-edit/video-add-routing.module.ts
new file mode 100644
index 000000000..9e8fa4acc
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-add-routing.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+
+import { MetaGuard } from '@ngx-meta/core'
+
+import { VideoAddComponent } from './video-add.component'
+
+const videoAddRoutes: Routes = [
+  {
+    path: '',
+    component: VideoAddComponent,
+    canActivateChild: [ MetaGuard ]
+  }
+]
+
+@NgModule({
+  imports: [ RouterModule.forChild(videoAddRoutes) ],
+  exports: [ RouterModule ]
+})
+export class VideoAddRoutingModule {}
diff --git a/client/src/app/videos/video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html
index 698152ff9..698152ff9 100644
--- a/client/src/app/videos/video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
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 21311b184..21311b184 100644
--- a/client/src/app/videos/video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
diff --git a/client/src/app/videos/+video-edit/video-add.module.ts b/client/src/app/videos/+video-edit/video-add.module.ts
new file mode 100644
index 000000000..141d33ad2
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-add.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core'
+
+import { TagInputModule } from 'ngx-chips'
+
+import { VideoAddRoutingModule } from './video-add-routing.module'
+import { VideoAddComponent } from './video-add.component'
+import { VideoService } from '../shared'
+import { SharedModule } from '../../shared'
+
+@NgModule({
+  imports: [
+    TagInputModule,
+
+    VideoAddRoutingModule,
+    SharedModule
+  ],
+
+  declarations: [
+    VideoAddComponent
+  ],
+
+  exports: [
+    VideoAddComponent
+  ],
+
+  providers: [
+    VideoService
+  ]
+})
+export class VideoAddModule { }
diff --git a/client/src/app/videos/video-edit/video-edit.component.scss b/client/src/app/videos/+video-edit/video-edit.component.scss
index 9ee0c520c..9ee0c520c 100644
--- a/client/src/app/videos/video-edit/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/video-edit.component.scss
diff --git a/client/src/app/videos/+video-edit/video-update-routing.module.ts b/client/src/app/videos/+video-edit/video-update-routing.module.ts
new file mode 100644
index 000000000..1d06a7ac3
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-update-routing.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+
+import { MetaGuard } from '@ngx-meta/core'
+
+import { VideoUpdateComponent } from './video-update.component'
+
+const videoUpdateRoutes: Routes = [
+  {
+    path: '',
+    component: VideoUpdateComponent,
+    canActivateChild: [ MetaGuard ]
+  }
+]
+
+@NgModule({
+  imports: [ RouterModule.forChild(videoUpdateRoutes) ],
+  exports: [ RouterModule ]
+})
+export class VideoUpdateRoutingModule {}
diff --git a/client/src/app/videos/video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
index 7f4faf21b..7f4faf21b 100644
--- a/client/src/app/videos/video-edit/video-update.component.html
+++ b/client/src/app/videos/+video-edit/video-update.component.html
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 141ed3522..141ed3522 100644
--- a/client/src/app/videos/video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
diff --git a/client/src/app/videos/+video-edit/video-update.module.ts b/client/src/app/videos/+video-edit/video-update.module.ts
new file mode 100644
index 000000000..eeb2e35e2
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-update.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core'
+
+import { TagInputModule } from 'ngx-chips'
+
+import { VideoUpdateRoutingModule } from './video-update-routing.module'
+import { VideoUpdateComponent } from './video-update.component'
+import { VideoService } from '../shared'
+import { SharedModule } from '../../shared'
+
+@NgModule({
+  imports: [
+    TagInputModule,
+
+    VideoUpdateRoutingModule,
+    SharedModule
+  ],
+
+  declarations: [
+    VideoUpdateComponent
+  ],
+
+  exports: [
+    VideoUpdateComponent
+  ],
+
+  providers: [
+    VideoService
+  ]
+})
+export class VideoUpdateModule { }
diff --git a/client/src/app/videos/+video-watch/index.ts b/client/src/app/videos/+video-watch/index.ts
new file mode 100644
index 000000000..b19bfdb1e
--- /dev/null
+++ b/client/src/app/videos/+video-watch/index.ts
@@ -0,0 +1 @@
+export * from './video-watch.module'
diff --git a/client/src/app/videos/video-watch/video-magnet.component.html b/client/src/app/videos/+video-watch/video-magnet.component.html
index 484280c45..484280c45 100644
--- a/client/src/app/videos/video-watch/video-magnet.component.html
+++ b/client/src/app/videos/+video-watch/video-magnet.component.html
diff --git a/client/src/app/videos/video-watch/video-magnet.component.ts b/client/src/app/videos/+video-watch/video-magnet.component.ts
index f9432e92c..f9432e92c 100644
--- a/client/src/app/videos/video-watch/video-magnet.component.ts
+++ b/client/src/app/videos/+video-watch/video-magnet.component.ts
diff --git a/client/src/app/videos/video-watch/video-report.component.html b/client/src/app/videos/+video-watch/video-report.component.html
index 741080ead..741080ead 100644
--- a/client/src/app/videos/video-watch/video-report.component.html
+++ b/client/src/app/videos/+video-watch/video-report.component.html
diff --git a/client/src/app/videos/video-watch/video-report.component.ts b/client/src/app/videos/+video-watch/video-report.component.ts
index d9c83a640..d9c83a640 100644
--- a/client/src/app/videos/video-watch/video-report.component.ts
+++ b/client/src/app/videos/+video-watch/video-report.component.ts
diff --git a/client/src/app/videos/video-watch/video-share.component.html b/client/src/app/videos/+video-watch/video-share.component.html
index 88f59c063..88f59c063 100644
--- a/client/src/app/videos/video-watch/video-share.component.html
+++ b/client/src/app/videos/+video-watch/video-share.component.html
diff --git a/client/src/app/videos/video-watch/video-share.component.ts b/client/src/app/videos/+video-watch/video-share.component.ts
index 133f93498..133f93498 100644
--- a/client/src/app/videos/video-watch/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/video-share.component.ts
diff --git a/client/src/app/videos/+video-watch/video-watch-routing.module.ts b/client/src/app/videos/+video-watch/video-watch-routing.module.ts
new file mode 100644
index 000000000..97fa5c725
--- /dev/null
+++ b/client/src/app/videos/+video-watch/video-watch-routing.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+
+import { MetaGuard } from '@ngx-meta/core'
+
+import { VideoWatchComponent } from './video-watch.component'
+
+const videoWatchRoutes: Routes = [
+  {
+    path: '',
+    component: VideoWatchComponent,
+    canActivateChild: [ MetaGuard ]
+  }
+]
+
+@NgModule({
+  imports: [ RouterModule.forChild(videoWatchRoutes) ],
+  exports: [ RouterModule ]
+})
+export class VideoWatchRoutingModule {}
diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 88863131a..88863131a 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
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 69661747c..69661747c 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
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 db3e1cdd6..874dd5997 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { Observable } from 'rxjs/Observable'
 import { Subscription } from 'rxjs/Subscription'
diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts
new file mode 100644
index 000000000..5f20b171e
--- /dev/null
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core'
+
+import { VideoWatchRoutingModule } from './video-watch-routing.module'
+import { VideoService } from '../shared'
+import { SharedModule } from '../../shared'
+
+import { VideoWatchComponent } from './video-watch.component'
+import { VideoReportComponent } from './video-report.component'
+import { VideoShareComponent } from './video-share.component'
+import { VideoMagnetComponent } from './video-magnet.component'
+
+@NgModule({
+  imports: [
+    VideoWatchRoutingModule,
+    SharedModule
+  ],
+
+  declarations: [
+    VideoWatchComponent,
+
+    VideoMagnetComponent,
+    VideoShareComponent,
+    VideoReportComponent
+  ],
+
+  exports: [
+    VideoWatchComponent
+  ],
+
+  providers: [
+    VideoService
+  ]
+})
+export class VideoWatchModule { }
diff --git a/client/src/app/videos/index.ts b/client/src/app/videos/index.ts
index 83edcc758..028a5854b 100644
--- a/client/src/app/videos/index.ts
+++ b/client/src/app/videos/index.ts
@@ -1,7 +1 @@
-export * from './shared'
-export * from './video-edit'
-export * from './video-list'
-export * from './video-watch'
-export * from './videos-routing.module'
-export * from './videos.component'
 export * from './videos.module'
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 3b4a9cb87..000000000
--- a/client/src/app/videos/video-edit/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './video-add.component'
-export * from './video-update.component'
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 105872469..000000000
--- a/client/src/app/videos/video-watch/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './video-magnet.component'
-export * from './video-share.component'
-export * from './video-report.component'
-export * from './video-watch.component'
diff --git a/client/src/app/videos/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts
index 715671ba7..225b6b018 100644
--- a/client/src/app/videos/videos-routing.module.ts
+++ b/client/src/app/videos/videos-routing.module.ts
@@ -3,10 +3,8 @@ import { RouterModule, Routes } from '@angular/router'
 
 import { MetaGuard } from '@ngx-meta/core'
 
-import { VideoAddComponent, VideoUpdateComponent } from './video-edit'
 import { VideoListComponent } from './video-list'
 import { VideosComponent } from './videos.component'
-import { VideoWatchComponent } from './video-watch'
 
 const videosRoutes: Routes = [
   {
@@ -25,7 +23,7 @@ const videosRoutes: Routes = [
       },
       {
         path: 'add',
-        component: VideoAddComponent,
+        loadChildren: 'app/videos/+video-edit#VideoAddModule',
         data: {
           meta: {
             title: 'Add a video'
@@ -34,7 +32,7 @@ const videosRoutes: Routes = [
       },
       {
         path: 'edit/:uuid',
-        component: VideoUpdateComponent,
+        loadChildren: 'app/videos/+video-edit#VideoUpdateModule',
         data: {
           meta: {
             title: 'Edit a video'
@@ -47,7 +45,10 @@ const videosRoutes: Routes = [
       },
       {
         path: 'watch/:uuid',
-        component: VideoWatchComponent
+        loadChildren: 'app/videos/+video-watch#VideoWatchModule',
+        data: {
+          preload: 3000
+        }
       }
     ]
   }
diff --git a/client/src/app/videos/videos.component.ts b/client/src/app/videos/videos.component.ts
index 972c2221f..26d9d28d4 100644
--- a/client/src/app/videos/videos.component.ts
+++ b/client/src/app/videos/videos.component.ts
@@ -1,8 +1,16 @@
-import { Component } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
+
+import { VideoService } from './shared'
 
 @Component({
   template: '<router-outlet></router-outlet>'
 })
+export class VideosComponent implements OnInit {
+  constructor(private videoService: VideoService) {}
 
-export class VideosComponent {
+  ngOnInit () {
+    this.videoService.loadVideoCategories()
+    this.videoService.loadVideoLicences()
+    this.videoService.loadVideoLanguages()
+  }
 }
diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts
index bc86118cc..3a0c3feac 100644
--- a/client/src/app/videos/videos.module.ts
+++ b/client/src/app/videos/videos.module.ts
@@ -1,24 +1,13 @@
 import { NgModule } from '@angular/core'
 
-import { TagInputModule } from 'ngx-chips'
-
 import { VideosRoutingModule } from './videos-routing.module'
 import { VideosComponent } from './videos.component'
-import { VideoAddComponent, VideoUpdateComponent } from './video-edit'
 import { LoaderComponent, VideoListComponent, VideoMiniatureComponent, VideoSortComponent } from './video-list'
-import {
-  VideoWatchComponent,
-  VideoMagnetComponent,
-  VideoReportComponent,
-  VideoShareComponent
-} from './video-watch'
 import { VideoService } from './shared'
 import { SharedModule } from '../shared'
 
 @NgModule({
   imports: [
-    TagInputModule,
-
     VideosRoutingModule,
     SharedModule
   ],
@@ -26,18 +15,10 @@ import { SharedModule } from '../shared'
   declarations: [
     VideosComponent,
 
-    VideoAddComponent,
-    VideoUpdateComponent,
-
     VideoListComponent,
     VideoMiniatureComponent,
     VideoSortComponent,
 
-    VideoWatchComponent,
-    VideoMagnetComponent,
-    VideoShareComponent,
-    VideoReportComponent,
-
     LoaderComponent
   ],