From dc8bc31be517a53e8fbe7100cfe45cd73f596de0 Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Mon, 14 Mar 2016 13:50:19 +0100
Subject: Angular application :first draft

---
 client/.gitignore                                  |  6 +-
 client/angular/app/app.component.html              | 37 ++++++++++
 client/angular/app/app.component.scss              | 28 ++++++++
 client/angular/app/app.component.ts                | 63 ++++++++++++++++
 client/angular/bootstrap.ts                        |  4 ++
 client/angular/friends/services/friends.service.ts | 27 +++++++
 .../components/add/videos-add.component.html       | 39 ++++++++++
 .../components/add/videos-add.component.scss       | 25 +++++++
 .../videos/components/add/videos-add.component.ts  | 52 ++++++++++++++
 .../components/list/videos-list.component.html     | 11 +++
 .../components/list/videos-list.component.scss     | 34 +++++++++
 .../components/list/videos-list.component.ts       | 39 ++++++++++
 .../components/watch/videos-watch.component.html   |  2 +
 .../components/watch/videos-watch.component.scss   |  0
 .../components/watch/videos-watch.component.ts     | 50 +++++++++++++
 client/angular/videos/models/video.ts              |  6 ++
 client/angular/videos/services/videos.service.ts   | 37 ++++++++++
 client/components/app/app.component.html           | 23 ------
 client/components/app/app.component.scss           |  0
 client/components/app/app.component.ts             | 43 -----------
 client/components/bootstrap.ts                     |  4 --
 .../components/videos/add/videos-add.component.ts  |  1 -
 .../videos/list/videos-list.component.ts           |  1 -
 .../videos/watch/videos-watch.component.ts         |  1 -
 client/index.html                                  | 32 +++++----
 client/package.json                                |  6 +-
 client/stylesheets/application.scss                |  6 +-
 client/stylesheets/bootstrap-variables.scss        |  6 +-
 client/stylesheets/index.scss                      | 83 ----------------------
 client/typings.json                                |  5 +-
 30 files changed, 491 insertions(+), 180 deletions(-)
 create mode 100644 client/angular/app/app.component.html
 create mode 100644 client/angular/app/app.component.scss
 create mode 100644 client/angular/app/app.component.ts
 create mode 100644 client/angular/bootstrap.ts
 create mode 100644 client/angular/friends/services/friends.service.ts
 create mode 100644 client/angular/videos/components/add/videos-add.component.html
 create mode 100644 client/angular/videos/components/add/videos-add.component.scss
 create mode 100644 client/angular/videos/components/add/videos-add.component.ts
 create mode 100644 client/angular/videos/components/list/videos-list.component.html
 create mode 100644 client/angular/videos/components/list/videos-list.component.scss
 create mode 100644 client/angular/videos/components/list/videos-list.component.ts
 create mode 100644 client/angular/videos/components/watch/videos-watch.component.html
 create mode 100644 client/angular/videos/components/watch/videos-watch.component.scss
 create mode 100644 client/angular/videos/components/watch/videos-watch.component.ts
 create mode 100644 client/angular/videos/models/video.ts
 create mode 100644 client/angular/videos/services/videos.service.ts
 delete mode 100644 client/components/app/app.component.html
 delete mode 100644 client/components/app/app.component.scss
 delete mode 100644 client/components/app/app.component.ts
 delete mode 100644 client/components/bootstrap.ts
 delete mode 100644 client/components/videos/add/videos-add.component.ts
 delete mode 100644 client/components/videos/list/videos-list.component.ts
 delete mode 100644 client/components/videos/watch/videos-watch.component.ts

(limited to 'client')

diff --git a/client/.gitignore b/client/.gitignore
index 439f0c025..4bb21ebab 100644
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -1,5 +1,5 @@
 typings
-components/**/*.js
-components/**/*.map
+angular/**/*.js
+angular/**/*.map
+angular/**/*.css
 stylesheets/index.css
-components/**/*.css
diff --git a/client/angular/app/app.component.html b/client/angular/app/app.component.html
new file mode 100644
index 000000000..590efa0d6
--- /dev/null
+++ b/client/angular/app/app.component.html
@@ -0,0 +1,37 @@
+<div class="container">
+
+  <div class="row">
+
+    <menu class="col-md-2">
+      <div id="panel_get_videos" class="panel_button">
+        <span class="glyphicon glyphicon-list"></span>
+        <a [routerLink]="['VideosList']">Get videos</a>
+      </div>
+
+      <div id="panel_upload_video" class="panel_button">
+        <span class="glyphicon glyphicon-cloud-upload"></span>
+        <a [routerLink]="['VideosAdd']">Upload a video</a>
+      </div>
+
+      <div id="panel_make_friends" class="panel_button">
+        <span class="glyphicon glyphicon-user"></span>
+        <a (click)='makeFriends()'>Make friends</a>
+      </div>
+
+      <div id="panel_quit_friends" class="panel_button">
+        <span class="glyphicon glyphicon-plane"></span>
+        <a (click)='quitFriends()'>Quit friends</a>
+      </div>
+    </menu>
+
+    <div class="col-md-9 router_outler_container">
+      <router-outlet></router-outlet>
+    </div>
+
+  </div>
+
+
+  <footer>
+    PeerTube, CopyLeft 2015-2016
+  </footer>
+</div>
diff --git a/client/angular/app/app.component.scss b/client/angular/app/app.component.scss
new file mode 100644
index 000000000..03ecba8f2
--- /dev/null
+++ b/client/angular/app/app.component.scss
@@ -0,0 +1,28 @@
+menu {
+  min-height: 300px;
+  height: 100%;
+  margin-right: 20px;
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+
+  .panel_button {
+    margin: 8px;
+    cursor: pointer;
+    transition: margin 0.2s;
+
+    &:hover {
+      margin-left: 15px;
+    }
+
+    a {
+      color: #333333;
+    }
+  }
+
+  .glyphicon {
+    margin: 5px;
+  }
+}
+
+footer {
+  margin-top: 30px;
+}
diff --git a/client/angular/app/app.component.ts b/client/angular/app/app.component.ts
new file mode 100644
index 000000000..3d41183f2
--- /dev/null
+++ b/client/angular/app/app.component.ts
@@ -0,0 +1,63 @@
+import { Component, ElementRef } from 'angular2/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+import {HTTP_PROVIDERS} from 'angular2/http';
+
+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/services/videos.service';
+import { FriendsService } from '../friends/services/friends.service';
+
+@RouteConfig([
+  {
+    path: '/videos/list',
+    name: 'VideosList',
+    component: VideosListComponent,
+    useAsDefault: true
+  },
+  {
+    path: '/videos/watch/:id',
+    name: 'VideosWatch',
+    component: VideosWatchComponent
+  },
+  {
+    path: '/videos/add',
+    name: 'VideosAdd',
+    component: VideosAddComponent
+  }
+])
+
+@Component({
+    selector: 'my-app',
+    templateUrl: 'app/angular/app/app.component.html',
+    styleUrls: [ 'app/angular/app/app.component.css' ],
+    directives: [ ROUTER_DIRECTIVES ],
+    providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS, ElementRef, VideosService, FriendsService ]
+})
+
+export class AppComponent {
+  constructor(private _friendsService: FriendsService) {}
+
+  makeFriends() {
+    this._friendsService.makeFriends().subscribe(
+      status => {
+        if (status === 409) {
+          alert('Already made friends!');
+        }
+        else {
+          alert('Made friends!');
+        }
+      },
+      error => alert(error)
+    )
+  }
+
+  quitFriends() {
+    this._friendsService.quitFriends().subscribe(
+      status => {
+          alert('Quit friends!');
+      },
+      error => alert(error)
+    )
+  }
+}
diff --git a/client/angular/bootstrap.ts b/client/angular/bootstrap.ts
new file mode 100644
index 000000000..d0f524f4a
--- /dev/null
+++ b/client/angular/bootstrap.ts
@@ -0,0 +1,4 @@
+import { bootstrap }    from 'angular2/platform/browser';
+import { AppComponent } from './app/app.component';
+
+bootstrap(AppComponent);
diff --git a/client/angular/friends/services/friends.service.ts b/client/angular/friends/services/friends.service.ts
new file mode 100644
index 000000000..a34ef0d6f
--- /dev/null
+++ b/client/angular/friends/services/friends.service.ts
@@ -0,0 +1,27 @@
+import {Injectable} from 'angular2/core';
+import {Http, Response, Headers, RequestOptions} from 'angular2/http';
+import {Observable} from 'rxjs/Rx';
+
+@Injectable()
+export class FriendsService {
+  private _baseFriendsUrl = '/api/v1/pods/';
+
+  constructor (private http: Http) {}
+
+  makeFriends() {
+    return this.http.get(this._baseFriendsUrl + 'makefriends')
+                    .map(res => <number> res.status)
+                    .catch(this.handleError);
+  }
+
+  quitFriends() {
+    return this.http.get(this._baseFriendsUrl + 'quitfriends')
+                    .map(res => <number> res.status)
+                    .catch(this.handleError);
+  }
+
+  private handleError (error: Response) {
+    console.error(error);
+    return Observable.throw(error.json().error || 'Server error');
+  }
+}
diff --git a/client/angular/videos/components/add/videos-add.component.html b/client/angular/videos/components/add/videos-add.component.html
new file mode 100644
index 000000000..5f28ae650
--- /dev/null
+++ b/client/angular/videos/components/add/videos-add.component.html
@@ -0,0 +1,39 @@
+<h3>Upload a video</h3>
+
+<form (ngSubmit)="uploadFile()" #videoForm="ngForm">
+  <div class="form-group">
+    <label for="name">Video name</label>
+    <input
+      type="text" class="form-control" name="name" id="name" required
+      ngControl="name"  #name="ngForm"
+    >
+    <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
+      Name is required
+    </div>
+  </div>
+
+  <div class="btn btn-default btn-file">
+    <span>Select the video...</span>
+    <input type="file" name="input_video" id="input_video">
+  </div>
+
+  <span *ngIf="fileToUpload">{{ fileToUpload.name }}</span>
+
+  <div class="form-group">
+    <label for="description">Description</label>
+    <textarea
+      name="description" id="description" class="form-control" placeholder="Description..." required
+      ngControl="description"  #description="ngForm"
+    >
+    </textarea>
+    <div [hidden]="description.valid || description.pristine" class="alert alert-danger">
+        A description is required
+    </div>
+  </div>
+
+  <div id="progress" *ngIf="progressBar.max !== 0">
+    <progress [value]="progressBar.value" [max]="progressBar.max"></progress>
+  </div>
+
+  <input type="submit" value="Upload" class="btn btn-default" [disabled]="!videoForm.form.valid || !fileToUpload">
+</form>
diff --git a/client/angular/videos/components/add/videos-add.component.scss b/client/angular/videos/components/add/videos-add.component.scss
new file mode 100644
index 000000000..f4187088b
--- /dev/null
+++ b/client/angular/videos/components/add/videos-add.component.scss
@@ -0,0 +1,25 @@
+.btn-file {
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-file input[type=file] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 100%;
+  min-height: 100%;
+  font-size: 100px;
+  text-align: right;
+  filter: alpha(opacity=0);
+  opacity: 0;
+  outline: none;
+  background: white;
+  cursor: inherit;
+  display: block;
+}
+
+.name_file {
+  display: inline-block;
+  margin-left: 10px;
+}
diff --git a/client/angular/videos/components/add/videos-add.component.ts b/client/angular/videos/components/add/videos-add.component.ts
new file mode 100644
index 000000000..97e3bb3b5
--- /dev/null
+++ b/client/angular/videos/components/add/videos-add.component.ts
@@ -0,0 +1,52 @@
+import {Component, ElementRef, Inject, OnInit} from 'angular2/core';
+import {Router} from 'angular2/router';
+import {NgForm} from 'angular2/common';
+
+import {Video} from '../../models/video';
+
+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'
+})
+
+export class VideosAddComponent implements OnInit {
+  fileToUpload: any;
+  progressBar: { value: number; max: number; } = { value: 0, max: 0 };
+
+  private _form: any;
+
+  constructor(private _router: Router, private _elementRef: ElementRef) {}
+
+  ngOnInit() {
+    jQuery(this._elementRef.nativeElement).find('#input_video').fileupload({
+      singleFileUploads: true,
+      multipart: true,
+      url: '/api/v1/videos',
+      autoupload: false,
+
+      add: (e, data) => {
+        this._form = data;
+        this.fileToUpload = data['files'][0];
+      },
+
+      progressall: (e, data) => {
+        this.progressBar.value = data.loaded;
+        this.progressBar.max= data.total;
+      },
+
+      done: (e, data) => {
+        console.log('finished');
+        // Print all the videos once it's finished
+        this._router.navigate(['VideosList']);
+      }
+    });
+  }
+
+  uploadFile() {
+    this._form.formData = jQuery(this._elementRef.nativeElement).find('form').serializeArray();
+    this._form.submit();
+  }
+}
diff --git a/client/angular/videos/components/list/videos-list.component.html b/client/angular/videos/components/list/videos-list.component.html
new file mode 100644
index 000000000..7ecdacee4
--- /dev/null
+++ b/client/angular/videos/components/list/videos-list.component.html
@@ -0,0 +1,11 @@
+<div *ngFor="#video of videos" class="video">
+  <div>
+    <a [routerLink]="['VideosWatch', { id: video._id }]" class="video_name">{{ video.name }}</a>
+    <span class="video_pod_url">{{ video.podUrl }}</span>
+    <span *ngIf="video.namePath !== null" (click)="removeVideo(video._id)" class="video_remove glyphicon glyphicon-remove"></span>
+  </div>
+
+  <div class="video_description">
+    {{ video.description }}
+  </div>
+</div>
diff --git a/client/angular/videos/components/list/videos-list.component.scss b/client/angular/videos/components/list/videos-list.component.scss
new file mode 100644
index 000000000..82ddd80e5
--- /dev/null
+++ b/client/angular/videos/components/list/videos-list.component.scss
@@ -0,0 +1,34 @@
+.video {
+  margin-bottom: 10px;
+  transition: margin 0.5s ease;
+
+  &:hover {
+    margin-left: 5px;
+  }
+
+  a.video_name {
+    color: #333333;
+    margin-right: 5px;
+  }
+
+  .video_pod_url {
+    font-size: small;
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .video_description {
+    font-size: small;
+    font-style: italic;
+    margin-left: 7px;
+  }
+
+  .video_remove {
+    margin: 5px;
+    cursor: pointer;
+  }
+}
+
+.loading {
+  display: inline-block;
+  margin-top: 100px;
+}
diff --git a/client/angular/videos/components/list/videos-list.component.ts b/client/angular/videos/components/list/videos-list.component.ts
new file mode 100644
index 000000000..e5af87448
--- /dev/null
+++ b/client/angular/videos/components/list/videos-list.component.ts
@@ -0,0 +1,39 @@
+import {Component, OnInit} from 'angular2/core';
+import {ROUTER_DIRECTIVES} from 'angular2/router';
+
+import {VideosService} from '../../services/videos.service';
+import {Video} from '../../models/video';
+
+@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',
+  directives: [ ROUTER_DIRECTIVES ]
+})
+
+export class VideosListComponent implements OnInit {
+  videos: Video[];
+
+  constructor(
+    private _videosService: VideosService
+  ) { }
+
+  ngOnInit() {
+    this.getVideos();
+  }
+
+  getVideos() {
+    this._videosService.getVideos().subscribe(
+      videos => this.videos = videos,
+      error => alert(error)
+    );
+  }
+
+  removeVideo(id: string) {
+    this._videosService.removeVideo(id).subscribe(
+      status => this.getVideos(),
+      error => alert(error)
+    )
+  }
+
+}
diff --git a/client/angular/videos/components/watch/videos-watch.component.html b/client/angular/videos/components/watch/videos-watch.component.html
new file mode 100644
index 000000000..e47222751
--- /dev/null
+++ b/client/angular/videos/components/watch/videos-watch.component.html
@@ -0,0 +1,2 @@
+<div class="embed-responsive embed-responsive-19by9">
+</div>
diff --git a/client/angular/videos/components/watch/videos-watch.component.scss b/client/angular/videos/components/watch/videos-watch.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/angular/videos/components/watch/videos-watch.component.ts b/client/angular/videos/components/watch/videos-watch.component.ts
new file mode 100644
index 000000000..e3a973820
--- /dev/null
+++ b/client/angular/videos/components/watch/videos-watch.component.ts
@@ -0,0 +1,50 @@
+/// <reference path='../../../../typings/browser/ambient/webtorrent/webtorrent.d.ts' />
+
+import { Component, OnInit, ElementRef } from 'angular2/core';
+import { RouteParams } from 'angular2/router';
+
+declare var WebTorrent: any;
+
+import { Video } from '../../models/video';
+import { VideosService } from '../../services/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' ]
+})
+
+export class VideosWatchComponent {
+  video: Video;
+
+  private client: any;
+
+  constructor(
+    private _videosService: VideosService,
+    private _routeParams: RouteParams,
+    private _elementRef: ElementRef
+  ) {
+    this.client = new WebTorrent({ dht: false });
+  }
+
+  ngOnInit() {
+    let id = this._routeParams.get('id');
+    this._videosService.getVideo(id).subscribe(
+      video => this.loadVideo(video),
+      error => alert(error)
+    );
+  }
+
+  loadVideo(video: Video) {
+    this.video = video;
+
+    this.client.add(this.video.magnetUri, (torrent) => {
+      torrent.files[0].appendTo(this._elementRef.nativeElement, (err) => {
+        if (err) {
+          alert('Cannot append the file.');
+          console.error(err);
+        }
+      })
+    })
+  }
+}
diff --git a/client/angular/videos/models/video.ts b/client/angular/videos/models/video.ts
new file mode 100644
index 000000000..2f998c49a
--- /dev/null
+++ b/client/angular/videos/models/video.ts
@@ -0,0 +1,6 @@
+export interface Video {
+  _id: string;
+  name: string;
+  description: string;
+  magnetUri: string;
+}
diff --git a/client/angular/videos/services/videos.service.ts b/client/angular/videos/services/videos.service.ts
new file mode 100644
index 000000000..784eec68d
--- /dev/null
+++ b/client/angular/videos/services/videos.service.ts
@@ -0,0 +1,37 @@
+import {Injectable} from 'angular2/core';
+import {Http, Response} from 'angular2/http';
+import {Observable} from 'rxjs/Rx';
+
+import {Video} from '../models/video';
+
+@Injectable()
+export class VideosService {
+  private _baseVideoUrl = '/api/v1/videos/';
+
+  constructor (private http: Http) {}
+
+  getVideos() {
+    return this.http.get(this._baseVideoUrl)
+                    .map(res => <Video[]> res.json())
+                    .catch(this.handleError);
+  }
+
+  getVideo(id: string) {
+    return this.http.get(this._baseVideoUrl + id)
+                    .map(res => <Video> res.json())
+                    .catch(this.handleError);
+  }
+
+  removeVideo(id: string) {
+    if (confirm('Are you sure?')) {
+      return this.http.delete(this._baseVideoUrl + id)
+                      .map(res => <number> res.status)
+                      .catch(this.handleError);
+    }
+  }
+
+  private handleError (error: Response) {
+    console.error(error);
+    return Observable.throw(error.json().error || 'Server error');
+  }
+}
diff --git a/client/components/app/app.component.html b/client/components/app/app.component.html
deleted file mode 100644
index 5a841ca0f..000000000
--- a/client/components/app/app.component.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<div class="container">
-  <div class="row">
-    <menu class="col-md-2">
-      <div id="panel_get_videos" class="panel_button">
-        <a [routerLink]="['VideosList']" class="glyphicon glyphicon-list">Get videos</a>
-      </div>
-
-      <div id="panel_upload_video" class="panel_button">
-        <a [routerLink]="['VideosAdd']" class="glyphicon glyphicon-cloud-upload">Upload a video</a>
-      </div>
-
-      <div id="panel_make_friends" class="panel_button">
-        <a (click)='makeFriends()' class="glyphicon glyphicon-user">Make friends</a>
-      </div>
-
-      <div id="panel_quit_friends" class="panel_button">
-        <a (click)='quitFriends()' class="glyphicon glyphicon-plane">Quit friends</a>
-      </div>
-    </menu>
-
-    <router-outlet class="col-md-9"></router-outlet>
-  </div>
-</div>
diff --git a/client/components/app/app.component.scss b/client/components/app/app.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/client/components/app/app.component.ts b/client/components/app/app.component.ts
deleted file mode 100644
index e2cebf535..000000000
--- a/client/components/app/app.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {Component} from 'angular2/core';
-import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
-
-import { VideosAddComponent } from '../videos/add/videos-add.component';
-import { VideosListComponent } from '../videos/list/videos-list.component';
-import { VideosWatchComponent } from '../videos/watch/videos-watch.component';
-
-@RouteConfig([
-  {
-    path: '/videos/list',
-    name: 'VideosList',
-    component: VideosListComponent,
-    useAsDefault: true
-  },
-  {
-    path: '/videos/watch/:id',
-    name: 'VideosWatch',
-    component: VideosWatchComponent
-  },
-  {
-    path: '/videos/add',
-    name: 'VideosAdd',
-    component: VideosAddComponent
-  }
-])
-
-@Component({
-    selector: 'my-app',
-    templateUrl: 'app/components/app/app.component.html',
-    styleUrls: [ 'app/components/app/app.component.css' ],
-    directives: [ ROUTER_DIRECTIVES ],
-    providers: [ ROUTER_PROVIDERS ]
-})
-
-export class AppComponent {
-  makeFriends() {
-    alert('make Friends');
-  }
-
-  quitFriends() {
-    alert('quit Friends');
-  }
-}
diff --git a/client/components/bootstrap.ts b/client/components/bootstrap.ts
deleted file mode 100644
index d0f524f4a..000000000
--- a/client/components/bootstrap.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { bootstrap }    from 'angular2/platform/browser';
-import { AppComponent } from './app/app.component';
-
-bootstrap(AppComponent);
diff --git a/client/components/videos/add/videos-add.component.ts b/client/components/videos/add/videos-add.component.ts
deleted file mode 100644
index 0db7c0163..000000000
--- a/client/components/videos/add/videos-add.component.ts
+++ /dev/null
@@ -1 +0,0 @@
-export class VideosAddComponent {}
diff --git a/client/components/videos/list/videos-list.component.ts b/client/components/videos/list/videos-list.component.ts
deleted file mode 100644
index 54470a5ad..000000000
--- a/client/components/videos/list/videos-list.component.ts
+++ /dev/null
@@ -1 +0,0 @@
-export class VideosListComponent {}
diff --git a/client/components/videos/watch/videos-watch.component.ts b/client/components/videos/watch/videos-watch.component.ts
deleted file mode 100644
index 84daef336..000000000
--- a/client/components/videos/watch/videos-watch.component.ts
+++ /dev/null
@@ -1 +0,0 @@
-export class VideosWatchComponent {}
diff --git a/client/index.html b/client/index.html
index f971b9fdb..4b273aae4 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,34 +1,40 @@
 <html>
   <head>
-    <title>Angular 2 QuickStart</title>
+    <title>PeerTube</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/stylesheets/index.css">
+    <link rel="stylesheet" href="/app/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/systemjs/dist/system-polyfills.js"></script>
-    <script src="app/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+    <script src="/app/node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="/app/node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="/app/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+
+    <script src="/app/node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="/app/node_modules/systemjs/dist/system.src.js"></script>
+    <script src="/app/node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="/app/node_modules/angular2/bundles/angular2.dev.js"></script>
+    <script src="/app/node_modules/angular2/bundles/router.dev.js"></script>
+    <script src="/app/node_modules/angular2/bundles/http.dev.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="/app/node_modules/webtorrent/webtorrent.min.js"></script>
 
-    <script src="app/node_modules/angular2/bundles/angular2-polyfills.js"></script>
-    <script src="app/node_modules/systemjs/dist/system.src.js"></script>
-    <script src="app/node_modules/rxjs/bundles/Rx.js"></script>
-    <script src="app/node_modules/angular2/bundles/angular2.dev.js"></script>
-    <script src="app/node_modules/angular2/bundles/router.dev.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script>
       System.config({
         packages: {
-          app: {
+          '/app': {
             components: {
               format: 'register',
               defaultExtension: 'js'
             }
-          }
+          },
         }
       });
-      System.import('app/components/bootstrap')
+      System.import('/app/angular/bootstrap')
             .then(null, console.error.bind(console));
     </script>
 
diff --git a/client/package.json b/client/package.json
index 71f305914..dbb065974 100644
--- a/client/package.json
+++ b/client/package.json
@@ -20,13 +20,17 @@
   },
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.8",
+    "angular2": "2.0.0-beta.9",
+    "blueimp-file-upload": "^9.12.1",
     "bootstrap-sass": "^3.3.6",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
+    "jquery": "^2.2.1",
+    "jquery.ui.widget": "^1.10.3",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
     "systemjs": "0.19.22",
+    "webtorrent": "^0.85.1",
     "zone.js": "0.5.15"
   },
   "devDependencies": {
diff --git a/client/stylesheets/application.scss b/client/stylesheets/application.scss
index bf9ec90ab..d1b309907 100644
--- a/client/stylesheets/application.scss
+++ b/client/stylesheets/application.scss
@@ -1,6 +1,6 @@
-$icon-font-path: "/stylesheets/vendor/fonts/bootstrap/";
+$icon-font-path: "/app/node_modules/bootstrap-sass/assets/fonts/bootstrap/";
 
 @import "bootstrap-variables";
 @import "_bootstrap";
-@import "base";
-@import "index";
\ No newline at end of file
+@import "base.scss";
+@import "index.scss";
diff --git a/client/stylesheets/bootstrap-variables.scss b/client/stylesheets/bootstrap-variables.scss
index 5a49649f9..a2472f357 100644
--- a/client/stylesheets/bootstrap-variables.scss
+++ b/client/stylesheets/bootstrap-variables.scss
@@ -108,9 +108,9 @@
 // $line-height-large:         1.3333333 // extra decimals for Win 8.1 Chrome
 // $line-height-small:         1.5
 
-$border-radius-base:        0;
-$border-radius-large:       0;
-$border-radius-small:       0;
+// $border-radius-base:        0;
+// $border-radius-large:       0;
+// $border-radius-small:       0;
 
 //** Global color for active items (e.g., navs or dropdowns).
 // $component-active-color:    #fff
diff --git a/client/stylesheets/index.scss b/client/stylesheets/index.scss
index d13dcfa90..5cba54705 100644
--- a/client/stylesheets/index.scss
+++ b/client/stylesheets/index.scss
@@ -1,88 +1,5 @@
-.span_action {
-  margin: 5px;
-  cursor: pointer;
-}
-
 header div {
   height: 50px;
   line-height: 25px;
   margin-bottom: 50px;
 }
-
-menu {
-  margin-right: 20px;
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
-}
-
-menu .panel_button {
-  margin: 8px;
-  cursor: pointer;
-  transition: margin 0.2s;
-}
-
-menu .panel_button:hover {
-  margin-left: 15px;
-}
-
-menu .glyphicon {
-  margin: 5px;
-}
-
-#ajax_load {
-  min-height: 500px;
-}
-
-.loading {
-  display: inline-block;
-  margin-top: 100px;
-}
-
-.video {
-  margin-bottom: 10px;
-  transition: margin 0.5s ease;
-}
-
-.video:hover {
-  margin-left: 5px;
-}
-
-.video_name {
-  cursor: pointer;
-  margin-right: 5px;
-}
-
-.video_pod_url {
-  font-size: small;
-  color: rgba(0, 0, 0, 0.5);
-}
-
-.video_description {
-  font-size: small;
-  font-style: italic;
-  margin-left: 7px;
-}
-
-.btn-file {
-  position: relative;
-  overflow: hidden;
-}
-.btn-file input[type=file] {
-  position: absolute;
-  top: 0;
-  right: 0;
-  min-width: 100%;
-  min-height: 100%;
-  font-size: 100px;
-  text-align: right;
-  filter: alpha(opacity=0);
-  opacity: 0;
-  outline: none;
-  background: white;
-  cursor: inherit;
-  display: block;
-}
-
-.name_file {
-  display: inline-block;
-  margin-left: 10px;
-}
\ No newline at end of file
diff --git a/client/typings.json b/client/typings.json
index f10b7c541..0e3ed5a01 100644
--- a/client/typings.json
+++ b/client/typings.json
@@ -1,6 +1,9 @@
 {
   "ambientDependencies": {
     "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c",
-    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#bc92442c075929849ec41d28ab618892ba493504"
+    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#bc92442c075929849ec41d28ab618892ba493504",
+    "node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#abc2bcfb8524b1e027e6298d3348012b5b06eda5",
+    "parse-torrent": "github:DefinitelyTyped/DefinitelyTyped/parse-torrent/parse-torrent.d.ts#abc2bcfb8524b1e027e6298d3348012b5b06eda5",
+    "webtorrent": "github:DefinitelyTyped/DefinitelyTyped/webtorrent/webtorrent.d.ts#abc2bcfb8524b1e027e6298d3348012b5b06eda5"
   }
 }
-- 
cgit v1.2.3