Client: notify client if there are webtorrent errors

3 files changed, 22 insertions, 10 deletions

diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
index 08b8a4b09..2d227f6f8 100644
--- a/client/config/webpack.common.js
+++ b/client/config/webpack.common.js
@@ -8,6 +8,7 @@ const AssetsPlugin = require('assets-webpack-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin')
 const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin')
+const ProvidePlugin = require('webpack/lib/ProvidePlugin')
 const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index c27133f74..9ac9342b7 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -1,5 +1,6 @@
 import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs/Subscription';
 
 import * as videojs from 'video.js';
 import { MetaService } from 'ng2-meta';
@@ -36,7 +37,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   videoNotFound = false;
 
   private errorTimer: number;
-  private sub: any;
+  private paramsSub: Subscription;
+  private errorsSub: Subscription;
+  private warningsSub: Subscription;
   private torrentInfosInterval: number;
 
   constructor(
@@ -51,7 +54,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.sub = this.route.params.subscribe(routeParams => {
+    this.paramsSub = this.route.params.subscribe(routeParams => {
       let id = routeParams['id'];
       this.videoService.getVideo(id).subscribe(
         video => {
@@ -76,6 +79,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     videojs(this.playerElement, videojsOptions, function () {
       self.player = this;
     });
+
+    this.errorsSub = this.webTorrentService.errors.subscribe(err => this.notificationsService.error('Error', err.message));
+    this.warningsSub = this.webTorrentService.errors.subscribe(err => this.notificationsService.alert('Warning', err.message));
   }
 
   ngOnDestroy() {
@@ -91,8 +97,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     // Remove player
     videojs(this.playerElement).dispose();
 
-    // Unsubscribe route subscription
-    this.sub.unsubscribe();
+    // Unsubscribe subscriptions
+    this.paramsSub.unsubscribe();
+    this.errorsSub.unsubscribe();
+    this.warningsSub.unsubscribe();
   }
 
   loadVideo() {
diff --git a/client/src/app/videos/video-watch/webtorrent.service.ts b/client/src/app/videos/video-watch/webtorrent.service.ts
index bf38b5aaa..1839c7c27 100644
--- a/client/src/app/videos/video-watch/webtorrent.service.ts
+++ b/client/src/app/videos/video-watch/webtorrent.service.ts
@@ -1,19 +1,22 @@
-// 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 { Subject } from 'rxjs/Subject';
 
-// import WebTorrent = require('webtorrent');
-declare var WebTorrent: any;
+declare const WebTorrent;
 
 @Injectable()
 export class WebTorrentService {
+  errors = new Subject<Error>();
+  warnings = new Subject<Error>();
+
+  // TODO: use WebTorrent @type
   // private client: WebTorrent.Client;
   private client: any;
 
   constructor() {
     this.client = new WebTorrent({ dht: false });
+
+    this.client.on('error', (err) => this.errors.next(err))
+    this.client.on('warning', (err) => this.warnings.next(err))
   }
 
   add(magnetUri: string, callback: Function) {