Follow the angular styleguide for the directories structure

27 files changed, 765 insertions, 0 deletions

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/app/videos/shared/loader/loader.component.html b/client/app/videos/shared/loader/loader.component.html
new file mode 100644
index 000000000..d02296a2d
--- /dev/null
+++ b/client/app/videos/shared/loader/loader.component.html
@@ -0,0 +1,3 @@
+<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
+  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>
diff --git a/client/app/videos/shared/loader/loader.component.scss b/client/app/videos/shared/loader/loader.component.scss
new file mode 100644
index 000000000..454195811
--- /dev/null
+++ b/client/app/videos/shared/loader/loader.component.scss
@@ -0,0 +1,26 @@
+div {
+  margin-top: 150px;
+}
+
+// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
+.glyphicon-refresh-animate {
+    -animation: spin .7s infinite linear;
+    -ms-animation: spin .7s infinite linear;
+    -webkit-animation: spinw .7s infinite linear;
+    -moz-animation: spinm .7s infinite linear;
+}
+
+@keyframes spin {
+    from { transform: scale(1) rotate(0deg);}
+    to { transform: scale(1) rotate(360deg);}
+}
+
+@-webkit-keyframes spinw {
+    from { -webkit-transform: rotate(0deg);}
+    to { -webkit-transform: rotate(360deg);}
+}
+
+@-moz-keyframes spinm {
+    from { -moz-transform: rotate(0deg);}
+    to { -moz-transform: rotate(360deg);}
+}
diff --git a/client/app/videos/shared/loader/loader.component.ts b/client/app/videos/shared/loader/loader.component.ts
new file mode 100644
index 000000000..666d43bc3
--- /dev/null
+++ b/client/app/videos/shared/loader/loader.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'my-loader',
+  styleUrls: [ 'client/app/videos/shared/loader/loader.component.css' ],
+  templateUrl: 'client/app/videos/shared/loader/loader.component.html'
+})
+
+export class LoaderComponent {
+  @Input() loading: boolean;
+}
diff --git a/client/app/videos/shared/pagination.model.ts b/client/app/videos/shared/pagination.model.ts
new file mode 100644
index 000000000..06f7a7875
--- /dev/null
+++ b/client/app/videos/shared/pagination.model.ts
@@ -0,0 +1,5 @@
+export interface Pagination {
+  currentPage: number;
+  itemsPerPage: number;
+  total: number;
+}
diff --git a/client/app/videos/shared/sort-field.type.ts b/client/app/videos/shared/sort-field.type.ts
new file mode 100644
index 000000000..6e8cc7936
--- /dev/null
+++ b/client/app/videos/shared/sort-field.type.ts
@@ -0,0 +1,3 @@
+export type SortField = "name" | "-name"
+                      | "duration" | "-duration"
+                      | "createdDate" | "-createdDate";
diff --git a/client/app/videos/shared/video.model.ts b/client/app/videos/shared/video.model.ts
new file mode 100644
index 000000000..eec537c9e
--- /dev/null
+++ b/client/app/videos/shared/video.model.ts
@@ -0,0 +1,63 @@
+export class Video {
+  id: string;
+  name: string;
+  description: string;
+  magnetUri: string;
+  podUrl: string;
+  isLocal: boolean;
+  thumbnailPath: string;
+  author: string;
+  createdDate: Date;
+  by: string;
+  duration: string;
+
+  private static createDurationString(duration: number): string {
+    const minutes = Math.floor(duration / 60);
+    const seconds = duration % 60;
+    const minutes_padding = minutes >= 10 ? '' : '0';
+    const seconds_padding = seconds >= 10 ? '' : '0';
+
+    return minutes_padding + minutes.toString() + ':' + seconds_padding + seconds.toString();
+  }
+
+  private static createByString(author: string, podUrl: string): string {
+    let [ host, port ] = podUrl.replace(/^https?:\/\//, '').split(':');
+
+    if (port === '80' || port === '443') {
+      port = '';
+    } else {
+      port = ':' + port;
+    }
+
+    return author + '@' + host + port;
+  }
+
+  constructor(hash: {
+    id: string,
+    name: string,
+    description: string,
+    magnetUri: string,
+    podUrl: string,
+    isLocal: boolean,
+    thumbnailPath: string,
+    author: string,
+    createdDate: string,
+    duration: number;
+  }) {
+    this.id = hash.id;
+    this.name = hash.name;
+    this.description = hash.description;
+    this.magnetUri = hash.magnetUri;
+    this.podUrl = hash.podUrl;
+    this.isLocal = hash.isLocal;
+    this.thumbnailPath = hash.thumbnailPath;
+    this.author  = hash.author;
+    this.createdDate = new Date(hash.createdDate);
+    this.duration = Video.createDurationString(hash.duration);
+    this.by = Video.createByString(hash.author, hash.podUrl);
+  }
+
+  isRemovableBy(user): boolean {
+    return this.isLocal === true && user && this.author === user.username;
+  }
+}
diff --git a/client/app/videos/shared/video.service.ts b/client/app/videos/shared/video.service.ts
new file mode 100644
index 000000000..78789c3cc
--- /dev/null
+++ b/client/app/videos/shared/video.service.ts
@@ -0,0 +1,79 @@
+import { Injectable } from '@angular/core';
+import { Http, Response, URLSearchParams } from '@angular/http';
+import { Observable } from 'rxjs/Rx';
+
+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 VideoService {
+  private _baseVideoUrl = '/api/v1/videos/';
+
+  constructor (private http: Http, private _authService: AuthService) {}
+
+  getVideos(pagination: Pagination, sort: SortField) {
+    const params = this.createPaginationParams(pagination);
+
+    if (sort) params.set('sort', sort);
+
+    return this.http.get(this._baseVideoUrl, { search: params })
+                    .map(res => res.json())
+                    .map(this.extractVideos)
+                    .catch(this.handleError);
+  }
+
+  getVideo(id: string) {
+    return this.http.get(this._baseVideoUrl + id)
+                    .map(res => <Video> res.json())
+                    .catch(this.handleError);
+  }
+
+  removeVideo(id: string) {
+    const options = this._authService.getAuthRequestOptions();
+    return this.http.delete(this._baseVideoUrl + id, options)
+                    .map(res => <number> res.status)
+                    .catch(this.handleError);
+  }
+
+  searchVideos(search: Search, pagination: Pagination, sort: SortField) {
+    const params = this.createPaginationParams(pagination);
+
+    if (search.field) params.set('field', search.field);
+    if (sort) params.set('sort', sort);
+
+    return this.http.get(this._baseVideoUrl + 'search/' + encodeURIComponent(search.value), { search: params })
+                    .map(res => res.json())
+                    .map(this.extractVideos)
+                    .catch(this.handleError);
+  }
+
+  private extractVideos (body: any) {
+    const videos_json = body.data;
+    const totalVideos = body.total;
+    const videos = [];
+    for (const video_json of videos_json) {
+      videos.push(new Video(video_json));
+    }
+
+    return { videos, totalVideos };
+  }
+
+  private handleError (error: Response) {
+    console.error(error);
+    return Observable.throw(error.json().error || 'Server error');
+  }
+
+  private createPaginationParams(pagination: Pagination) {
+    const params = new URLSearchParams();
+    const start: number = (pagination.currentPage - 1) * pagination.itemsPerPage;
+    const count: number = pagination.itemsPerPage;
+
+    params.set('start', start.toString());
+    params.set('count', count.toString());
+
+    return params;
+  }
+}
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/app/videos/video-add/video-add.component.html b/client/app/videos/video-add/video-add.component.html
new file mode 100644
index 000000000..80d229cb8
--- /dev/null
+++ b/client/app/videos/video-add/video-add.component.html
@@ -0,0 +1,41 @@
+<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="form-group">
+    <div class="btn btn-default btn-file">
+      <span>Select the video...</span>
+      <input type="file" name="videofile" id="videofile">
+    </div>
+
+    <span *ngIf="fileToUpload">{{ fileToUpload.name }}</span>
+  </div>
+
+  <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">
+    <progressbar [value]="progressBar.value" [max]="progressBar.max">{{ progressBar.value | bytes }} / {{ progressBar.max | bytes }}</progressbar>
+  </div>
+
+  <input type="submit" value="Upload" class="btn btn-default" [disabled]="!videoForm.form.valid || !fileToUpload">
+</form>
diff --git a/client/app/videos/video-add/video-add.component.scss b/client/app/videos/video-add/video-add.component.scss
new file mode 100644
index 000000000..01195f017
--- /dev/null
+++ b/client/app/videos/video-add/video-add.component.scss
@@ -0,0 +1,33 @@
+.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;
+}
+
+.form-group {
+  margin-bottom: 10px;
+}
+
+#progress {
+  margin-bottom: 10px;
+}
diff --git a/client/app/videos/video-add/video-add.component.ts b/client/app/videos/video-add/video-add.component.ts
new file mode 100644
index 000000000..ca583a103
--- /dev/null
+++ b/client/app/videos/video-add/video-add.component.ts
@@ -0,0 +1,68 @@
+import { Component, ElementRef, OnInit } from '@angular/core';
+import { Router } from '@angular/router-deprecated';
+
+import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
+import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
+
+import { AuthService, User } from '../../users/index';
+
+// TODO: import it with systemjs
+declare var jQuery:any;
+
+@Component({
+  selector: 'my-videos-add',
+  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 VideoAddComponent implements OnInit {
+  user: User;
+  fileToUpload: any;
+  progressBar: { value: number; max: number; } = { value: 0, max: 0 };
+
+  private _form: any;
+
+  constructor(
+    private _router: Router, private _elementRef: ElementRef,
+    private _authService: AuthService
+  ) {}
+
+  ngOnInit() {
+    this.user = User.load();
+    jQuery(this._elementRef.nativeElement).find('#videofile').fileupload({
+      url: '/api/v1/videos',
+      dataType: 'json',
+      singleFileUploads: true,
+      multipart: true,
+      autoupload: false,
+
+      add: (e, data) => {
+        this._form = data;
+        this.fileToUpload = data['files'][0];
+      },
+
+      progressall: (e, data) => {
+        this.progressBar.value = data.loaded;
+        // The server is a little bit slow to answer (has to seed the video)
+        // So we add more time to the progress bar (+10%)
+        this.progressBar.max = data.total + (0.1 * data.total);
+      },
+
+      done: (e, data) => {
+        this.progressBar.value = this.progressBar.max;
+        console.log('Video uploaded.');
+
+        // Print all the videos once it's finished
+        this._router.navigate(['VideosList']);
+      }
+    });
+  }
+
+  uploadFile() {
+    this._form.headers = this._authService.getRequestHeader().toJSON();
+    this._form.formData = jQuery(this._elementRef.nativeElement).find('form').serializeArray();
+    this._form.submit();
+  }
+}
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/app/videos/video-list/video-list.component.html b/client/app/videos/video-list/video-list.component.html
new file mode 100644
index 000000000..edbbaf3ae
--- /dev/null
+++ b/client/app/videos/video-list/video-list.component.html
@@ -0,0 +1,18 @@
+<div class="row videos-info">
+  <div class="col-md-9 videos-total-results"> {{ pagination.total }} videos</div>
+  <my-video-sort class="col-md-3" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
+</div>
+
+<div class="videos-miniatures">
+  <my-loader [loading]="loading"></my-loader>
+
+  <div class="col-md-12 no-video" *ngIf="!loading && videos.length === 0">There is no video.</div>
+
+  <my-video-miniature *ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)">
+  </my-video-miniature>
+</div>
+
+<pagination
+  [totalItems]="pagination.total" [itemsPerPage]="pagination.itemsPerPage" [(ngModel)]="pagination.currentPage"
+  (ngModelChange)="getVideos()"
+></pagination>
diff --git a/client/app/videos/video-list/video-list.component.scss b/client/app/videos/video-list/video-list.component.scss
new file mode 100644
index 000000000..9441d80c3
--- /dev/null
+++ b/client/app/videos/video-list/video-list.component.scss
@@ -0,0 +1,37 @@
+.videos-info {
+
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #f1f1f1;
+  height: 40px;
+  line-height: 40px;
+  width: 765px;
+  margin-left: 15px;
+
+  my-video-sort {
+    padding-right: 0;
+  }
+
+  .videos-total-results {
+    font-size: 13px;
+    padding-left: 0;
+  }
+}
+
+.videos-miniatures {
+  min-height: 600px;
+
+  my-videos-miniature {
+    display: inline-block;
+  }
+
+  .no-video {
+    margin-top: 50px;
+    text-align: center;
+  }
+}
+
+pagination {
+  display: block;
+  text-align: center;
+}
diff --git a/client/app/videos/video-list/video-list.component.ts b/client/app/videos/video-list/video-list.component.ts
new file mode 100644
index 000000000..a88fb379a
--- /dev/null
+++ b/client/app/videos/video-list/video-list.component.ts
@@ -0,0 +1,101 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated';
+
+import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
+
+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 { VideoSortComponent } from './video-sort.component';
+
+@Component({
+  selector: 'my-videos-list',
+  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 VideoListComponent implements OnInit {
+  user: User = null;
+  videos: Video[] = [];
+  pagination: Pagination = {
+    currentPage: 1,
+    itemsPerPage: 9,
+    total: 0
+  };
+  sort: SortField;
+  loading: boolean = false;
+
+  private search: Search;
+
+  constructor(
+    private _authService: AuthService,
+    private _videoService: VideoService,
+    private _routeParams: RouteParams,
+    private _router: Router
+  ) {
+    this.search = {
+      value: this._routeParams.get('search'),
+      field: <SearchField>this._routeParams.get('field')
+    };
+
+    this.sort = <SortField>this._routeParams.get('sort') || '-createdDate';
+  }
+
+  ngOnInit() {
+    if (this._authService.isLoggedIn()) {
+      this.user = User.load();
+    }
+
+    this.getVideos();
+  }
+
+  getVideos() {
+    this.loading = true;
+    this.videos = [];
+
+    let observable = null;
+
+    if (this.search.value !== null) {
+      observable = this._videoService.searchVideos(this.search, this.pagination, this.sort);
+    } else {
+      observable = this._videoService.getVideos(this.pagination, this.sort);
+    }
+
+    observable.subscribe(
+      ({ videos, totalVideos }) => {
+        this.videos = videos;
+        this.pagination.total = totalVideos;
+        this.loading = false;
+      },
+      error => alert(error)
+    );
+  }
+
+  onRemoved(video: Video): void {
+    this.videos.splice(this.videos.indexOf(video), 1);
+  }
+
+  onSort(sort: SortField) {
+    this.sort = sort;
+
+    const params: any = {
+      sort: this.sort
+    };
+
+    if (this.search.value) {
+      params.search = this.search.value;
+      params.field = this.search.field;
+    }
+
+    this._router.navigate(['VideosList', params]);
+    this.getVideos();
+  }
+}
diff --git a/client/app/videos/video-list/video-miniature.component.html b/client/app/videos/video-list/video-miniature.component.html
new file mode 100644
index 000000000..244254b5a
--- /dev/null
+++ b/client/app/videos/video-list/video-miniature.component.html
@@ -0,0 +1,22 @@
+<div class="video-miniature col-md-4" (mouseenter)="onHover()" (mouseleave)="onBlur()">
+  <a
+    [routerLink]="['VideosWatch', { id: video.id }]" [attr.title]="video.description"
+    class="video-miniature-thumbnail"
+  >
+    <img [attr.src]="video.thumbnailPath" alt="video thumbnail" />
+    <span class="video-miniature-duration">{{ video.duration }}</span>
+  </a>
+  <span
+    *ngIf="displayRemoveIcon()" (click)="removeVideo(video.id)"
+    class="video-miniature-remove glyphicon glyphicon-remove"
+  ></span>
+
+  <div class="video-miniature-informations">
+    <a [routerLink]="['VideosWatch', { id: video.id }]" class="video-miniature-name">
+      <span>{{ video.name }}</span>
+    </a>
+
+    <span class="video-miniature-author">by {{ video.by }}</span>
+    <span class="video-miniature-created-date">on {{ video.createdDate | date:'short' }}</span>
+  </div>
+</div>
diff --git a/client/app/videos/video-list/video-miniature.component.scss b/client/app/videos/video-list/video-miniature.component.scss
new file mode 100644
index 000000000..4488abe22
--- /dev/null
+++ b/client/app/videos/video-list/video-miniature.component.scss
@@ -0,0 +1,55 @@
+.video-miniature {
+  height: 200px;
+  display: inline-block;
+  position: relative;
+
+  .video-miniature-thumbnail {
+    display: block;
+    position: relative;
+
+    .video-miniature-duration {
+      position: absolute;
+      right: 60px;
+      bottom: 2px;
+      display: inline-block;
+      background-color: rgba(0, 0, 0, 0.8);
+      color: rgba(255, 255, 255, 0.8);
+      padding: 2px;
+      font-size: 11px;
+    }
+  }
+
+  .video-miniature-remove {
+    display: inline-block;
+    position: absolute;
+    left: 16px;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: rgba(255, 255, 255, 0.8);
+    padding: 2px;
+    cursor: pointer;
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.9);
+    }
+  }
+
+  .video-miniature-informations {
+    margin-left: 3px;
+
+    .video-miniature-name {
+      display: block;
+      font-weight: bold;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    .video-miniature-author, .video-miniature-created-date {
+      display: block;
+      margin-left: 1px;
+      font-size: 11px;
+      color: rgba(0, 0, 0, 0.5);
+    }
+  }
+}
diff --git a/client/app/videos/video-list/video-miniature.component.ts b/client/app/videos/video-list/video-miniature.component.ts
new file mode 100644
index 000000000..817636768
--- /dev/null
+++ b/client/app/videos/video-list/video-miniature.component.ts
@@ -0,0 +1,46 @@
+import { DatePipe } from '@angular/common';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
+
+import { Video, VideoService } from '../shared/index';
+import { User } from '../../users/index';
+
+@Component({
+  selector: 'my-video-miniature',
+  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 ]
+})
+
+export class VideoMiniatureComponent {
+  @Output() removed = new EventEmitter<any>();
+
+  @Input() video: Video;
+  @Input() user: User;
+
+  hovering: boolean = false;
+
+  constructor(private _videoService: VideoService) {}
+
+  onHover() {
+    this.hovering = true;
+  }
+
+  onBlur() {
+    this.hovering = false;
+  }
+
+  displayRemoveIcon(): boolean {
+    return this.hovering && this.video.isRemovableBy(this.user);
+  }
+
+  removeVideo(id: string) {
+    if (confirm('Do you really want to remove this video?')) {
+      this._videoService.removeVideo(id).subscribe(
+        status => this.removed.emit(true),
+        error => alert(error)
+      );
+    }
+  }
+}
diff --git a/client/app/videos/video-list/video-sort.component.html b/client/app/videos/video-list/video-sort.component.html
new file mode 100644
index 000000000..3bece0b22
--- /dev/null
+++ b/client/app/videos/video-list/video-sort.component.html
@@ -0,0 +1,5 @@
+<select class="form-control input-sm" [(ngModel)]="currentSort" (ngModelChange)="onSortChange()">
+  <option *ngFor="let choice of choiceKeys" [value]="choice">
+    {{ getStringChoice(choice) }}
+  </option>
+</select>
diff --git a/client/app/videos/video-list/video-sort.component.ts b/client/app/videos/video-list/video-sort.component.ts
new file mode 100644
index 000000000..d00d7ed49
--- /dev/null
+++ b/client/app/videos/video-list/video-sort.component.ts
@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { SortField } from '../shared/index';
+
+@Component({
+  selector: 'my-video-sort',
+  // styleUrls: [ 'app/angular/videos/components/list/video-sort.component.css' ],
+  templateUrl: 'client/app/videos/video-list/video-sort.component.html'
+})
+
+export class VideoSortComponent {
+  @Output() sort = new EventEmitter<any>();
+
+  @Input() currentSort: SortField;
+
+  sortChoices = {
+    'name': 'Name - Asc',
+    '-name': 'Name - Desc',
+    'duration': 'Duration - Asc',
+    '-duration': 'Duration - Desc',
+    'createdDate': 'Created Date - Asc',
+    '-createdDate': 'Created Date - Desc'
+  };
+
+  get choiceKeys() {
+    return Object.keys(this.sortChoices);
+  }
+
+  getStringChoice(choiceKey: SortField): string {
+    return this.sortChoices[choiceKey];
+  }
+
+  onSortChange() {
+    this.sort.emit(this.currentSort);
+  }
+}
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/app/videos/video-watch/video-watch.component.html b/client/app/videos/video-watch/video-watch.component.html
new file mode 100644
index 000000000..6c36b27e2
--- /dev/null
+++ b/client/app/videos/video-watch/video-watch.component.html
@@ -0,0 +1,10 @@
+<my-loader [loading]="loading"></my-loader>
+
+<div class="embed-responsive embed-responsive-19by9">
+</div>
+
+<div id="torrent-info">
+  <div id="torrent-info-download">Download: {{ downloadSpeed | bytes }}/s</div>
+  <div id="torrent-info-upload">Upload: {{ uploadSpeed | bytes }}/s</div>
+  <div id="torrent-info-peers">Number of peers: {{ numPeers }}</div>
+<div>
diff --git a/client/app/videos/video-watch/video-watch.component.scss b/client/app/videos/video-watch/video-watch.component.scss
new file mode 100644
index 000000000..1228d42f4
--- /dev/null
+++ b/client/app/videos/video-watch/video-watch.component.scss
@@ -0,0 +1,13 @@
+.embed-responsive {
+  height: 500px;
+}
+
+#torrent-info {
+  font-size: 10px;
+
+  div {
+    display: inline-block;
+    width: 33%;
+    text-align: center;
+  }
+}
diff --git a/client/app/videos/video-watch/video-watch.component.ts b/client/app/videos/video-watch/video-watch.component.ts
new file mode 100644
index 000000000..891e6563f
--- /dev/null
+++ b/client/app/videos/video-watch/video-watch.component.ts
@@ -0,0 +1,75 @@
+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, Video, VideoService } from '../shared/index';
+
+// TODO import it with systemjs
+declare var WebTorrent: any;
+
+@Component({
+  selector: 'my-video-watch',
+  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 VideoWatchComponent implements OnInit, CanDeactivate {
+  video: Video;
+  downloadSpeed: number;
+  uploadSpeed: number;
+  numPeers: number;
+  loading: boolean = false;
+
+  private _interval: NodeJS.Timer;
+  private client: any;
+
+  constructor(
+    private _videoService: VideoService,
+    private _routeParams: RouteParams,
+    private _elementRef: ElementRef
+  ) {
+    // TODO: use a service
+    this.client = new WebTorrent({ dht: false });
+  }
+
+  ngOnInit() {
+    let id = this._routeParams.get('id');
+    this._videoService.getVideo(id).subscribe(
+      video => this.loadVideo(video),
+      error => alert(error)
+    );
+  }
+
+  loadVideo(video: Video) {
+    this.loading = true;
+    this.video = video;
+    console.log('Adding ' + this.video.magnetUri + '.');
+    this.client.add(this.video.magnetUri, (torrent) => {
+      this.loading = false;
+      console.log('Added ' + this.video.magnetUri + '.');
+      torrent.files[0].appendTo(this._elementRef.nativeElement.querySelector('.embed-responsive'), (err) => {
+        if (err) {
+          alert('Cannot append the file.');
+          console.error(err);
+        }
+      });
+
+      // Refresh each second
+      this._interval = setInterval(() => {
+        this.downloadSpeed = torrent.downloadSpeed;
+        this.uploadSpeed = torrent.uploadSpeed;
+        this.numPeers = torrent.numPeers;
+      }, 1000);
+    });
+  }
+
+  routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) : any {
+    console.log('Removing video from webtorrent.');
+    clearInterval(this._interval);
+    this.client.remove(this.video.magnetUri);
+    return true;
+  }
+}