Follow the angular styleguide for the directories structure

53 files changed, 169 insertions, 130 deletions

diff --git a/client/.gitignore b/client/.gitignore
index 0ab218d71..81e4a1cf7 100644
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -1,6 +1,8 @@
 typings
-angular/**/*.js
-angular/**/*.map
-angular/**/*.css
+app/**/*.js
+app/**/*.map
+app/**/*.css
 stylesheets/index.css
 bundles
+main.js
+main.js.map
diff --git a/client/angular/app/app.component.html b/client/app/app.component.html
index 48e97d523..48e97d523 100644
--- a/client/angular/app/app.component.html
+++ b/client/app/app.component.html
diff --git a/client/angular/app/app.component.scss b/client/app/app.component.scss
index e02c2d5b0..e02c2d5b0 100644
--- a/client/angular/app/app.component.scss
+++ b/client/app/app.component.scss
diff --git a/client/angular/app/app.component.ts b/client/app/app.component.ts
index 722d0dca0..c94ff79a7 100644
--- a/client/angular/app/app.component.ts
+++ b/client/app/app.component.ts
@@ -1,17 +1,20 @@
 import { Component } from '@angular/core';
-import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router } from '@angular/router-deprecated';
 import { HTTP_PROVIDERS } from '@angular/http';
+import { RouteConfig, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
 
-import { VideosAddComponent } from '../videos/components/add/videos-add.component';
-import { VideosListComponent } from '../videos/components/list/videos-list.component';
-import { VideosWatchComponent } from '../videos/components/watch/videos-watch.component';
-import { VideosService } from '../videos/videos.service';
-import { FriendsService } from '../friends/services/friends.service';
-import { UserLoginComponent } from '../users/components/login/login.component';
-import { AuthService } from '../users/services/auth.service';
-import { AuthStatus } from '../users/models/authStatus';
-import { SearchComponent } from './search.component';
-import { Search } from './search';
+import { FriendService } from './friends/index';
+import { Search, SearchComponent } from './shared/index';
+import {
+  UserLoginComponent,
+  AuthService,
+  AuthStatus
+} from './users/index';
+import {
+  VideoAddComponent,
+  VideoListComponent,
+  VideoWatchComponent,
+  VideoService
+} from './videos/index';
 
 @RouteConfig([
   {
@@ -22,35 +25,35 @@ import { Search } from './search';
   {
     path: '/videos/list',
     name: 'VideosList',
-    component: VideosListComponent,
+    component: VideoListComponent,
     useAsDefault: true
   },
   {
     path: '/videos/watch/:id',
     name: 'VideosWatch',
-    component: VideosWatchComponent
+    component: VideoWatchComponent
   },
   {
     path: '/videos/add',
     name: 'VideosAdd',
-    component: VideosAddComponent
+    component: VideoAddComponent
   }
 ])
 
 @Component({
     selector: 'my-app',
-    templateUrl: 'app/angular/app/app.component.html',
-    styleUrls: [ 'app/angular/app/app.component.css' ],
+    templateUrl: 'client/app/app.component.html',
+    styleUrls: [ 'client/app/app.component.css' ],
     directives: [ ROUTER_DIRECTIVES, SearchComponent ],
-    providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS, VideosService, FriendsService, AuthService ]
+    providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS, VideoService, FriendService, AuthService ]
 })
 
 export class AppComponent {
   isLoggedIn: boolean;
   search_field: string = name;
-  choices = [  ];
+  choices = [ ];
 
-  constructor(private _friendsService: FriendsService,
+  constructor(private _friendService: FriendService,
               private _authService: AuthService,
               private _router: Router
 
@@ -83,7 +86,7 @@ export class AppComponent {
   }
 
   makeFriends() {
-    this._friendsService.makeFriends().subscribe(
+    this._friendService.makeFriends().subscribe(
       status => {
         if (status === 409) {
           alert('Already made friends!');
@@ -96,7 +99,7 @@ export class AppComponent {
   }
 
   quitFriends() {
-    this._friendsService.quitFriends().subscribe(
+    this._friendService.quitFriends().subscribe(
       status => {
           alert('Quit friends!');
       },
diff --git a/client/angular/friends/services/friends.service.ts b/client/app/friends/friend.service.ts
index cb34323e4..d143ec40d 100644
--- a/client/angular/friends/services/friends.service.ts
+++ b/client/app/friends/friend.service.ts
@@ -3,7 +3,7 @@ import { Http, Response } from '@angular/http';
 import { Observable } from 'rxjs/Rx';
 
 @Injectable()
-export class FriendsService {
+export class FriendService {
   private _baseFriendsUrl = '/api/v1/pods/';
 
   constructor (private http: Http) {}
diff --git a/client/app/friends/index.ts b/client/app/friends/index.ts
new file mode 100644
index 000000000..0adc256c4
--- /dev/null
+++ b/client/app/friends/index.ts
@@ -0,0 +1 @@
+export * from './friend.service';
diff --git a/client/app/shared/index.ts b/client/app/shared/index.ts
new file mode 100644
index 000000000..a49a4f1a9
--- /dev/null
+++ b/client/app/shared/index.ts
@@ -0,0 +1,3 @@
+export * from './search-field.type';
+export * from './search.component';
+export * from './search.model';
diff --git a/client/angular/app/search.ts b/client/app/shared/search-field.type.ts
index c4e771b47..846236290 100644
--- a/client/angular/app/search.ts
+++ b/client/app/shared/search-field.type.ts
@@ -1,6 +1 @@
 export type SearchField = "name" | "author" | "podUrl" | "magnetUri";
-
-export interface Search {
-  field: SearchField;
-  value: string;
-}
diff --git a/client/angular/app/search.component.html b/client/app/shared/search.component.html
index fb13ac72e..fb13ac72e 100644
--- a/client/angular/app/search.component.html
+++ b/client/app/shared/search.component.html
diff --git a/client/angular/app/search.component.ts b/client/app/shared/search.component.ts
index e21b91fce..519810f9b 100644
--- a/client/angular/app/search.component.ts
+++ b/client/app/shared/search.component.ts
@@ -2,11 +2,12 @@ import { Component, EventEmitter, Output } from '@angular/core';
 
 import { DROPDOWN_DIRECTIVES} from  'ng2-bootstrap/components/dropdown';
 
-import { Search, SearchField } from './search';
+import { Search } from './search.model';
+import { SearchField } from './search-field.type';
 
 @Component({
     selector: 'my-search',
-    templateUrl: 'app/angular/app/search.component.html',
+    templateUrl: 'client/app/shared/search.component.html',
     directives: [ DROPDOWN_DIRECTIVES ]
 })
 
diff --git a/client/app/shared/search.model.ts b/client/app/shared/search.model.ts
new file mode 100644
index 000000000..932a6566c
--- /dev/null
+++ b/client/app/shared/search.model.ts
@@ -0,0 +1,6 @@
+import { SearchField } from './search-field.type';
+
+export interface Search {
+  field: SearchField;
+  value: string;
+}
diff --git a/client/app/users/index.ts b/client/app/users/index.ts
new file mode 100644
index 000000000..4f08b8bc7
--- /dev/null
+++ b/client/app/users/index.ts
@@ -0,0 +1,2 @@
+export * from './login/index';
+export * from './shared/index';
diff --git a/client/app/users/login/index.ts b/client/app/users/login/index.ts
new file mode 100644
index 000000000..69c16441f
--- /dev/null
+++ b/client/app/users/login/index.ts
@@ -0,0 +1 @@
+export * from './login.component';
diff --git a/client/angular/users/components/login/login.component.html b/client/app/users/login/login.component.html
index 940694515..940694515 100644
--- a/client/angular/users/components/login/login.component.html
+++ b/client/app/users/login/login.component.html
diff --git a/client/angular/users/components/login/login.component.scss b/client/app/users/login/login.component.scss
index e69de29bb..e69de29bb 100644
--- a/client/angular/users/components/login/login.component.scss
+++ b/client/app/users/login/login.component.scss
diff --git a/client/angular/users/components/login/login.component.ts b/client/app/users/login/login.component.ts
index d339353ef..33590ad4c 100644
--- a/client/angular/users/components/login/login.component.ts
+++ b/client/app/users/login/login.component.ts
@@ -1,14 +1,12 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router-deprecated';
 
-import { AuthService } from '../../services/auth.service';
-import { AuthStatus } from '../../models/authStatus';
-import { User } from '../../models/user';
+import { AuthService, AuthStatus, User } from '../shared/index';
 
 @Component({
   selector: 'my-user-login',
-  styleUrls: [ 'app/angular/users/components/login/login.component.css' ],
-  templateUrl: 'app/angular/users/components/login/login.component.html'
+  styleUrls: [ 'client/app/users/login/login.component.css' ],
+  templateUrl: 'client/app/users/login/login.component.html'
 })
 
 export class UserLoginComponent {
diff --git a/client/angular/users/models/authStatus.ts b/client/app/users/shared/auth-status.model.ts
index f646bd4cf..f646bd4cf 100644
--- a/client/angular/users/models/authStatus.ts
+++ b/client/app/users/shared/auth-status.model.ts
diff --git a/client/angular/users/services/auth.service.ts b/client/app/users/shared/auth.service.ts
index 099563d43..1cb042db5 100644
--- a/client/angular/users/services/auth.service.ts
+++ b/client/app/users/shared/auth.service.ts
@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
-import { Http, Response, Headers, URLSearchParams, RequestOptions } from '@angular/http';
+import { Headers, Http, RequestOptions, Response, URLSearchParams } from '@angular/http';
 import { Observable, Subject } from 'rxjs/Rx';
 
-import { AuthStatus } from '../models/authStatus';
-import { User } from '../models/user';
+import { AuthStatus } from './auth-status.model';
+import { User } from './user.model';
 
 @Injectable()
 export class AuthService {
diff --git a/client/app/users/shared/index.ts b/client/app/users/shared/index.ts
new file mode 100644
index 000000000..c6816b3c6
--- /dev/null
+++ b/client/app/users/shared/index.ts
@@ -0,0 +1,4 @@
+export * from './auth-status.model';
+export * from './auth.service';
+export * from './token.model';
+export * from './user.model';
diff --git a/client/angular/users/models/token.ts b/client/app/users/shared/token.model.ts
index b7872e74a..b7872e74a 100644
--- a/client/angular/users/models/token.ts
+++ b/client/app/users/shared/token.model.ts
diff --git a/client/angular/users/models/user.ts b/client/app/users/shared/user.model.ts
index 3367e3bb5..73fd4ddc0 100644
--- a/client/angular/users/models/user.ts
+++ b/client/app/users/shared/user.model.ts
@@ -1,4 +1,4 @@
-import { Token } from './token';
+import { Token } from './token.model';
 
 export class User {
   username: string;
diff --git a/client/app/videos/index.ts b/client/app/videos/index.ts
new file mode 100644
index 000000000..1c80ac5e5
--- /dev/null
+++ b/client/app/videos/index.ts
@@ -0,0 +1,4 @@
+export * from './shared/index';
+export * from './video-add/index';
+export * from './video-list/index';
+export * from './video-watch/index';
diff --git a/client/app/videos/shared/index.ts b/client/app/videos/shared/index.ts
new file mode 100644
index 000000000..c535c46fc
--- /dev/null
+++ b/client/app/videos/shared/index.ts
@@ -0,0 +1,5 @@
+export * from './loader/index';
+export * from './pagination.model';
+export * from './sort-field.type';
+export * from './video.model';
+export * from './video.service';
diff --git a/client/app/videos/shared/loader/index.ts b/client/app/videos/shared/loader/index.ts
new file mode 100644
index 000000000..ab22584e4
--- /dev/null
+++ b/client/app/videos/shared/loader/index.ts
@@ -0,0 +1 @@
+export * from './loader.component';
diff --git a/client/angular/videos/loader.component.html b/client/app/videos/shared/loader/loader.component.html
index d02296a2d..d02296a2d 100644
--- a/client/angular/videos/loader.component.html
+++ b/client/app/videos/shared/loader/loader.component.html
diff --git a/client/angular/videos/loader.component.scss b/client/app/videos/shared/loader/loader.component.scss
index 454195811..454195811 100644
--- a/client/angular/videos/loader.component.scss
+++ b/client/app/videos/shared/loader/loader.component.scss
diff --git a/client/angular/videos/loader.component.ts b/client/app/videos/shared/loader/loader.component.ts
index 24329432e..666d43bc3 100644
--- a/client/angular/videos/loader.component.ts
+++ b/client/app/videos/shared/loader/loader.component.ts
@@ -2,8 +2,8 @@ import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'my-loader',
-  styleUrls: [ 'app/angular/videos/loader.component.css' ],
-  templateUrl: 'app/angular/videos/loader.component.html'
+  styleUrls: [ 'client/app/videos/shared/loader/loader.component.css' ],
+  templateUrl: 'client/app/videos/shared/loader/loader.component.html'
 })
 
 export class LoaderComponent {
diff --git a/client/angular/videos/pagination.ts b/client/app/videos/shared/pagination.model.ts
index 06f7a7875..06f7a7875 100644
--- a/client/angular/videos/pagination.ts
+++ b/client/app/videos/shared/pagination.model.ts
diff --git a/client/angular/videos/components/list/sort.ts b/client/app/videos/shared/sort-field.type.ts
index 6e8cc7936..6e8cc7936 100644
--- a/client/angular/videos/components/list/sort.ts
+++ b/client/app/videos/shared/sort-field.type.ts
diff --git a/client/angular/videos/video.ts b/client/app/videos/shared/video.model.ts
index eec537c9e..eec537c9e 100644
--- a/client/angular/videos/video.ts
+++ b/client/app/videos/shared/video.model.ts
diff --git a/client/angular/videos/videos.service.ts b/client/app/videos/shared/video.service.ts
index d5438fd82..78789c3cc 100644
--- a/client/angular/videos/videos.service.ts
+++ b/client/app/videos/shared/video.service.ts
@@ -2,14 +2,14 @@ import { Injectable } from '@angular/core';
 import { Http, Response, URLSearchParams } from '@angular/http';
 import { Observable } from 'rxjs/Rx';
 
-import { Pagination } from './pagination';
-import { Video } from './video';
-import { AuthService } from '../users/services/auth.service';
-import { Search } from '../app/search';
-import { SortField } from './components/list/sort';
+import { Pagination } from './pagination.model';
+import { Search } from '../../shared/index';
+import { SortField } from './sort-field.type';
+import { AuthService } from '../../users/index';
+import { Video } from './video.model';
 
 @Injectable()
-export class VideosService {
+export class VideoService {
   private _baseVideoUrl = '/api/v1/videos/';
 
   constructor (private http: Http, private _authService: AuthService) {}
diff --git a/client/app/videos/video-add/index.ts b/client/app/videos/video-add/index.ts
new file mode 100644
index 000000000..79488e851
--- /dev/null
+++ b/client/app/videos/video-add/index.ts
@@ -0,0 +1 @@
+export * from './video-add.component';
diff --git a/client/angular/videos/components/add/videos-add.component.html b/client/app/videos/video-add/video-add.component.html
index 80d229cb8..80d229cb8 100644
--- a/client/angular/videos/components/add/videos-add.component.html
+++ b/client/app/videos/video-add/video-add.component.html
diff --git a/client/angular/videos/components/add/videos-add.component.scss b/client/app/videos/video-add/video-add.component.scss
index 01195f017..01195f017 100644
--- a/client/angular/videos/components/add/videos-add.component.scss
+++ b/client/app/videos/video-add/video-add.component.scss
diff --git a/client/angular/videos/components/add/videos-add.component.ts b/client/app/videos/video-add/video-add.component.ts
index f1652be19..ca583a103 100644
--- a/client/angular/videos/components/add/videos-add.component.ts
+++ b/client/app/videos/video-add/video-add.component.ts
@@ -1,24 +1,23 @@
 import { Component, ElementRef, OnInit } from '@angular/core';
 import { Router } from '@angular/router-deprecated';
 
-import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
 import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
+import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
 
-import { AuthService } from '../../../users/services/auth.service';
-import { User } from '../../../users/models/user';
+import { AuthService, User } from '../../users/index';
 
 // TODO: import it with systemjs
 declare var jQuery:any;
 
 @Component({
   selector: 'my-videos-add',
-  styleUrls: [ 'app/angular/videos/components/add/videos-add.component.css' ],
-  templateUrl: 'app/angular/videos/components/add/videos-add.component.html',
+  styleUrls: [ 'client/app/videos/video-add/video-add.component.css' ],
+  templateUrl: 'client/app/videos/video-add/video-add.component.html',
   directives: [ PROGRESSBAR_DIRECTIVES ],
   pipes: [ BytesPipe ]
 })
 
-export class VideosAddComponent implements OnInit {
+export class VideoAddComponent implements OnInit {
   user: User;
   fileToUpload: any;
   progressBar: { value: number; max: number; } = { value: 0, max: 0 };
diff --git a/client/app/videos/video-list/index.ts b/client/app/videos/video-list/index.ts
new file mode 100644
index 000000000..1f6d6a4e7
--- /dev/null
+++ b/client/app/videos/video-list/index.ts
@@ -0,0 +1,3 @@
+export * from './video-list.component';
+export * from './video-miniature.component';
+export * from './video-sort.component';
diff --git a/client/angular/videos/components/list/videos-list.component.html b/client/app/videos/video-list/video-list.component.html
index edbbaf3ae..edbbaf3ae 100644
--- a/client/angular/videos/components/list/videos-list.component.html
+++ b/client/app/videos/video-list/video-list.component.html
diff --git a/client/angular/videos/components/list/videos-list.component.scss b/client/app/videos/video-list/video-list.component.scss
index 9441d80c3..9441d80c3 100644
--- a/client/angular/videos/components/list/videos-list.component.scss
+++ b/client/app/videos/video-list/video-list.component.scss
diff --git a/client/angular/videos/components/list/videos-list.component.ts b/client/app/videos/video-list/video-list.component.ts
index 56230e331..a88fb379a 100644
--- a/client/angular/videos/components/list/videos-list.component.ts
+++ b/client/app/videos/video-list/video-list.component.ts
@@ -1,27 +1,28 @@
 import { Component, OnInit } from '@angular/core';
-import { ROUTER_DIRECTIVES, RouteParams, Router } from '@angular/router-deprecated';
+import { Router, ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated';
 
 import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
 
-import { AuthService } from '../../../users/services/auth.service';
-import { Pagination } from '../../pagination';
-import { User } from '../../../users/models/user';
-import { VideosService } from '../../videos.service';
-import { Video } from '../../video';
+import {
+  LoaderComponent,
+  Pagination,
+  SortField,
+  Video,
+  VideoService
+} from '../shared/index';
+import { Search, SearchField } from '../../shared/index';
+import { AuthService, User } from '../../users/index';
 import { VideoMiniatureComponent } from './video-miniature.component';
-import { Search, SearchField } from '../../../app/search';
 import { VideoSortComponent } from './video-sort.component';
-import { SortField } from './sort';
-import { LoaderComponent } from '../../loader.component';
 
 @Component({
   selector: 'my-videos-list',
-  styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ],
-  templateUrl: 'app/angular/videos/components/list/videos-list.component.html',
+  styleUrls: [ 'client/app/videos/video-list/video-list.component.css' ],
+  templateUrl: 'client/app/videos/video-list/video-list.component.html',
   directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent, LoaderComponent ]
 })
 
-export class VideosListComponent implements OnInit {
+export class VideoListComponent implements OnInit {
   user: User = null;
   videos: Video[] = [];
   pagination: Pagination = {
@@ -36,7 +37,7 @@ export class VideosListComponent implements OnInit {
 
   constructor(
     private _authService: AuthService,
-    private _videosService: VideosService,
+    private _videoService: VideoService,
     private _routeParams: RouteParams,
     private _router: Router
   ) {
@@ -63,9 +64,9 @@ export class VideosListComponent implements OnInit {
     let observable = null;
 
     if (this.search.value !== null) {
-      observable = this._videosService.searchVideos(this.search, this.pagination, this.sort);
+      observable = this._videoService.searchVideos(this.search, this.pagination, this.sort);
     } else {
-      observable = this._videosService.getVideos(this.pagination, this.sort);
+      observable = this._videoService.getVideos(this.pagination, this.sort);
     }
 
     observable.subscribe(
diff --git a/client/angular/videos/components/list/video-miniature.component.html b/client/app/videos/video-list/video-miniature.component.html
index 244254b5a..244254b5a 100644
--- a/client/angular/videos/components/list/video-miniature.component.html
+++ b/client/app/videos/video-list/video-miniature.component.html
diff --git a/client/angular/videos/components/list/video-miniature.component.scss b/client/app/videos/video-list/video-miniature.component.scss
index 4488abe22..4488abe22 100644
--- a/client/angular/videos/components/list/video-miniature.component.scss
+++ b/client/app/videos/video-list/video-miniature.component.scss
diff --git a/client/angular/videos/components/list/video-miniature.component.ts b/client/app/videos/video-list/video-miniature.component.ts
index 383c2c609..817636768 100644
--- a/client/angular/videos/components/list/video-miniature.component.ts
+++ b/client/app/videos/video-list/video-miniature.component.ts
@@ -1,15 +1,14 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { DatePipe } from '@angular/common';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
 
-import { Video } from '../../video';
-import { VideosService } from '../../videos.service';
-import { User } from '../../../users/models/user';
+import { Video, VideoService } from '../shared/index';
+import { User } from '../../users/index';
 
 @Component({
   selector: 'my-video-miniature',
-  styleUrls: [ 'app/angular/videos/components/list/video-miniature.component.css' ],
-  templateUrl: 'app/angular/videos/components/list/video-miniature.component.html',
+  styleUrls: [ 'client/app/videos/video-list/video-miniature.component.css' ],
+  templateUrl: 'client/app/videos/video-list/video-miniature.component.html',
   directives: [ ROUTER_DIRECTIVES ],
   pipes: [ DatePipe ]
 })
@@ -22,7 +21,7 @@ export class VideoMiniatureComponent {
 
   hovering: boolean = false;
 
-  constructor(private _videosService: VideosService) {}
+  constructor(private _videoService: VideoService) {}
 
   onHover() {
     this.hovering = true;
@@ -38,7 +37,7 @@ export class VideoMiniatureComponent {
 
   removeVideo(id: string) {
     if (confirm('Do you really want to remove this video?')) {
-      this._videosService.removeVideo(id).subscribe(
+      this._videoService.removeVideo(id).subscribe(
         status => this.removed.emit(true),
         error => alert(error)
       );
diff --git a/client/angular/videos/components/list/video-sort.component.html b/client/app/videos/video-list/video-sort.component.html
index 3bece0b22..3bece0b22 100644
--- a/client/angular/videos/components/list/video-sort.component.html
+++ b/client/app/videos/video-list/video-sort.component.html
diff --git a/client/angular/videos/components/list/video-sort.component.ts b/client/app/videos/video-list/video-sort.component.ts
index 0373cea38..d00d7ed49 100644
--- a/client/angular/videos/components/list/video-sort.component.ts
+++ b/client/app/videos/video-list/video-sort.component.ts
@@ -1,11 +1,11 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
-import { SortField } from './sort';
+import { SortField } from '../shared/index';
 
 @Component({
   selector: 'my-video-sort',
   // styleUrls: [ 'app/angular/videos/components/list/video-sort.component.css' ],
-  templateUrl: 'app/angular/videos/components/list/video-sort.component.html'
+  templateUrl: 'client/app/videos/video-list/video-sort.component.html'
 })
 
 export class VideoSortComponent {
diff --git a/client/app/videos/video-watch/index.ts b/client/app/videos/video-watch/index.ts
new file mode 100644
index 000000000..2228b6ed7
--- /dev/null
+++ b/client/app/videos/video-watch/index.ts
@@ -0,0 +1 @@
+export * from './video-watch.component';
diff --git a/client/angular/videos/components/watch/videos-watch.component.html b/client/app/videos/video-watch/video-watch.component.html
index 6c36b27e2..6c36b27e2 100644
--- a/client/angular/videos/components/watch/videos-watch.component.html
+++ b/client/app/videos/video-watch/video-watch.component.html
diff --git a/client/angular/videos/components/watch/videos-watch.component.scss b/client/app/videos/video-watch/video-watch.component.scss
index 1228d42f4..1228d42f4 100644
--- a/client/angular/videos/components/watch/videos-watch.component.scss
+++ b/client/app/videos/video-watch/video-watch.component.scss
diff --git a/client/angular/videos/components/watch/videos-watch.component.ts b/client/app/videos/video-watch/video-watch.component.ts
index e551e1f9a..891e6563f 100644
--- a/client/angular/videos/components/watch/videos-watch.component.ts
+++ b/client/app/videos/video-watch/video-watch.component.ts
@@ -1,25 +1,22 @@
-import { Component, OnInit, ElementRef } from '@angular/core';
-import { RouteParams, CanDeactivate, ComponentInstruction } from '@angular/router-deprecated';
+import { Component, ElementRef, OnInit } from '@angular/core';
+import { CanDeactivate, ComponentInstruction, RouteParams } from '@angular/router-deprecated';
 
 import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
 
-import { LoaderComponent } from '../../loader.component';
+import { LoaderComponent, Video, VideoService } from '../shared/index';
 
 // TODO import it with systemjs
 declare var WebTorrent: any;
 
-import { Video } from '../../video';
-import { VideosService } from '../../videos.service';
-
 @Component({
   selector: 'my-video-watch',
-  templateUrl: 'app/angular/videos/components/watch/videos-watch.component.html',
-  styleUrls: [ 'app/angular/videos/components/watch/videos-watch.component.css' ],
+  templateUrl: 'client/app/videos/video-watch/video-watch.component.html',
+  styleUrls: [ 'client/app/videos/video-watch/video-watch.component.css' ],
   directives: [ LoaderComponent ],
   pipes: [ BytesPipe ]
 })
 
-export class VideosWatchComponent implements OnInit, CanDeactivate {
+export class VideoWatchComponent implements OnInit, CanDeactivate {
   video: Video;
   downloadSpeed: number;
   uploadSpeed: number;
@@ -30,7 +27,7 @@ export class VideosWatchComponent implements OnInit, CanDeactivate {
   private client: any;
 
   constructor(
-    private _videosService: VideosService,
+    private _videoService: VideoService,
     private _routeParams: RouteParams,
     private _elementRef: ElementRef
   ) {
@@ -40,7 +37,7 @@ export class VideosWatchComponent implements OnInit, CanDeactivate {
 
   ngOnInit() {
     let id = this._routeParams.get('id');
-    this._videosService.getVideo(id).subscribe(
+    this._videoService.getVideo(id).subscribe(
       video => this.loadVideo(video),
       error => alert(error)
     );
diff --git a/client/index.html b/client/index.html
index db4b76613..bc750dde7 100644
--- a/client/index.html
+++ b/client/index.html
@@ -7,27 +7,27 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link rel="stylesheet" href="/app/stylesheets/index.css">
+    <link rel="stylesheet" href="client/stylesheets/index.css">
 
     <!-- 1. Load libraries -->
     <!-- IE required polyfills, in this exact order -->
-    <script src="/app/node_modules/es6-shim/es6-shim.min.js"></script>
-    <script src="/app/node_modules/zone.js/dist/zone.js"></script>
-    <script src="/app/node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="/app/node_modules/systemjs/dist/system.src.js"></script>
+    <script src="client/node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="client/node_modules/zone.js/dist/zone.js"></script>
+    <script src="client/node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="client/node_modules/systemjs/dist/system.src.js"></script>
 
-    <script src="/app/node_modules/jquery/dist/jquery.js"></script>
-    <script src="/app/node_modules/jquery.ui.widget/jquery.ui.widget.js"></script>
-    <script src="/app/node_modules/blueimp-file-upload/js/jquery.fileupload.js"></script>
+    <script src="client/node_modules/jquery/dist/jquery.js"></script>
+    <script src="client/node_modules/jquery.ui.widget/jquery.ui.widget.js"></script>
+    <script src="client/node_modules/blueimp-file-upload/js/jquery.fileupload.js"></script>
 
-    <script src="/app/node_modules/webtorrent/webtorrent.min.js"></script>
+    <script src="client/node_modules/webtorrent/webtorrent.min.js"></script>
 
-    <script src="/app/node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
+    <script src="client/node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
 
     <!-- 2. Configure SystemJS -->
-    <script src="/app/systemjs.config.js"></script>
+    <script src="client/systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err); });
+      System.import('client').catch(function(err){ console.error(err); });
     </script>
   </head>
 
diff --git a/client/angular/main.ts b/client/main.ts
index e35f7dbdf..5e2ea0de0 100644
--- a/client/angular/main.ts
+++ b/client/main.ts
@@ -1,4 +1,5 @@
 import { bootstrap }    from '@angular/platform-browser-dynamic';
+
 import { AppComponent } from './app/app.component';
 
 bootstrap(AppComponent);
diff --git a/client/stylesheets/application.scss b/client/stylesheets/application.scss
index b91698056..98c1e37ad 100644
--- a/client/stylesheets/application.scss
+++ b/client/stylesheets/application.scss
@@ -1,4 +1,4 @@
-$icon-font-path: "/app/node_modules/bootstrap-sass/assets/fonts/bootstrap/";
+$icon-font-path: "/client/node_modules/bootstrap-sass/assets/fonts/bootstrap/";
 
 @import "bootstrap-variables";
 @import "_bootstrap";
diff --git a/client/systemjs.config.js b/client/systemjs.config.js
index 82ca5bb70..d04bc4107 100644
--- a/client/systemjs.config.js
+++ b/client/systemjs.config.js
@@ -1,13 +1,12 @@
 ;(function (global) {
   var map = {
-    'app': 'app/angular',
-    'angular-pipes': 'app/node_modules/angular-pipes',
-    'ng2-bootstrap': 'app/node_modules/ng2-bootstrap',
-    'angular-rxjs.bundle': 'app/bundles/angular-rxjs.bundle.js'
+    'angular-pipes': 'client/node_modules/angular-pipes',
+    'ng2-bootstrap': 'client/node_modules/ng2-bootstrap',
+    'angular-rxjs.bundle': 'client/bundles/angular-rxjs.bundle.js'
   }
 
   var packages = {
-    'app': { main: 'main.js', defaultExtension: 'js' },
+    'client': { main: 'main.js', defaultExtension: 'js' },
     'ng2-bootstrap': { defaultExtension: 'js' },
     'rxjs': { defaultExtension: 'js' }
   }
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 8e786ca28..d48bd3920 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -20,26 +20,38 @@
   ],
   "compileOnSave": false,
   "files": [
-    "angular/app/app.component.ts",
-    "angular/app/search.component.ts",
-    "angular/app/search.ts",
-    "angular/friends/services/friends.service.ts",
-    "angular/main.ts",
-    "angular/users/components/login/login.component.ts",
-    "angular/users/models/authStatus.ts",
-    "angular/users/models/token.ts",
-    "angular/users/models/user.ts",
-    "angular/users/services/auth.service.ts",
-    "angular/videos/components/add/videos-add.component.ts",
-    "angular/videos/components/list/sort.ts",
-    "angular/videos/components/list/video-miniature.component.ts",
-    "angular/videos/components/list/video-sort.component.ts",
-    "angular/videos/components/list/videos-list.component.ts",
-    "angular/videos/components/watch/videos-watch.component.ts",
-    "angular/videos/loader.component.ts",
-    "angular/videos/pagination.ts",
-    "angular/videos/video.ts",
-    "angular/videos/videos.service.ts",
+    "app/app.component.ts",
+    "app/friends/friend.service.ts",
+    "app/friends/index.ts",
+    "app/shared/index.ts",
+    "app/shared/search-field.type.ts",
+    "app/shared/search.component.ts",
+    "app/shared/search.model.ts",
+    "app/users/index.ts",
+    "app/users/login/index.ts",
+    "app/users/login/login.component.ts",
+    "app/users/shared/auth-status.model.ts",
+    "app/users/shared/auth.service.ts",
+    "app/users/shared/index.ts",
+    "app/users/shared/token.model.ts",
+    "app/users/shared/user.model.ts",
+    "app/videos/index.ts",
+    "app/videos/shared/index.ts",
+    "app/videos/shared/loader/index.ts",
+    "app/videos/shared/loader/loader.component.ts",
+    "app/videos/shared/pagination.model.ts",
+    "app/videos/shared/sort-field.type.ts",
+    "app/videos/shared/video.model.ts",
+    "app/videos/shared/video.service.ts",
+    "app/videos/video-add/index.ts",
+    "app/videos/video-add/video-add.component.ts",
+    "app/videos/video-list/index.ts",
+    "app/videos/video-list/video-list.component.ts",
+    "app/videos/video-list/video-miniature.component.ts",
+    "app/videos/video-list/video-sort.component.ts",
+    "app/videos/video-watch/index.ts",
+    "app/videos/video-watch/video-watch.component.ts",
+    "main.ts",
     "typings/globals/es6-shim/index.d.ts",
     "typings/globals/jasmine/index.d.ts",
     "typings/globals/node/index.d.ts",