5 files changed, 123 insertions, 0 deletions

diff --git a/client/src/app/videos/video-watch/index.ts b/client/src/app/videos/video-watch/index.ts
new file mode 100644
index 000000000..b17aaacf2
--- /dev/null
+++ b/client/src/app/videos/video-watch/index.ts
@@ -0,0 +1,2 @@
+export * from './video-watch.component';
+export * from './webtorrent.service';
diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html
new file mode 100644
index 000000000..6c36b27e2
--- /dev/null
+++ b/client/src/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/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
new file mode 100644
index 000000000..1228d42f4
--- /dev/null
+++ b/client/src/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/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
new file mode 100644
index 000000000..db82283b4
--- /dev/null
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -0,0 +1,72 @@
+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';
+import { WebTorrentService } from './webtorrent.service';
+
+@Component({
+  selector: 'my-video-watch',
+  template: require('./video-watch.component.html'),
+  styles: [ require('./video-watch.component.scss') ],
+  providers: [ WebTorrentService ],
+  directives: [ LoaderComponent ],
+  pipes: [ BytesPipe ]
+})
+
+export class VideoWatchComponent implements OnInit, CanDeactivate {
+  downloadSpeed: number;
+  loading: boolean = false;
+  numPeers: number;
+  uploadSpeed: number;
+  video: Video;
+
+  private interval: NodeJS.Timer;
+
+  constructor(
+    private elementRef: ElementRef,
+    private routeParams: RouteParams,
+    private videoService: VideoService,
+    private webTorrentService: WebTorrentService
+  ) {}
+
+  loadVideo(video: Video) {
+    this.loading = true;
+    this.video = video;
+    console.log('Adding ' + this.video.magnetUri + '.');
+
+    this.webTorrentService.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.numPeers = torrent.numPeers;
+        this.uploadSpeed = torrent.uploadSpeed;
+      }, 1000);
+    });
+  }
+
+  ngOnInit() {
+    let id = this.routeParams.get('id');
+    this.videoService.getVideo(id).subscribe(
+      video => this.loadVideo(video),
+      error => alert(error)
+    );
+  }
+
+  routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
+    console.log('Removing video from webtorrent.');
+    clearInterval(this.interval);
+    this.webTorrentService.remove(this.video.magnetUri);
+    return true;
+  }
+}
diff --git a/client/src/app/videos/video-watch/webtorrent.service.ts b/client/src/app/videos/video-watch/webtorrent.service.ts
new file mode 100644
index 000000000..bf38b5aaa
--- /dev/null
+++ b/client/src/app/videos/video-watch/webtorrent.service.ts
@@ -0,0 +1,26 @@
+// Don't use webtorrent typings for now
+// It misses some little things I'll fix later
+// <reference path="../../../../typings/globals/webtorrent/index.d.ts" />
+
+import { Injectable } from '@angular/core';
+
+// import WebTorrent = require('webtorrent');
+declare var WebTorrent: any;
+
+@Injectable()
+export class WebTorrentService {
+  // private client: WebTorrent.Client;
+  private client: any;
+
+  constructor() {
+    this.client = new WebTorrent({ dht: false });
+  }
+
+  add(magnetUri: string, callback: Function) {
+    return this.client.add(magnetUri, callback);
+  }
+
+  remove(magnetUri: string) {
+    return this.client.remove(magnetUri);
+  }
+}