Client: remove videojs on destroy

1 files changed, 10 insertions, 2 deletions

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 0ae323c9f..0309938c0 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -25,6 +25,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   loading: boolean = false;
   numPeers: number;
   player: VideoJSPlayer;
+  playerElement: Element;
   uploadSpeed: number;
   video: Video = null;
 
@@ -54,23 +55,30 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       );
     });
 
+    this.playerElement = this.elementRef.nativeElement.querySelector('#video-container');
+
     const videojsOptions = {
       controls: true,
       autoplay: false
     };
 
     const self = this;
-    videojs('video-container', videojsOptions, function () {
+    videojs(this.playerElement, videojsOptions, function () {
       self.player = this;
     });
   }
 
   ngOnDestroy() {
+    // Remove WebTorrent stuff
     console.log('Removing video from webtorrent.');
     clearInterval(this.torrentInfosInterval);
     clearTimeout(this.errorTimer);
     this.webTorrentService.remove(this.video.magnetUri);
 
+    // Remove player
+    videojs(this.playerElement).dispose();
+
+    // Unsubscribe route subscription
     this.sub.unsubscribe();
   }
 
@@ -96,7 +104,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.loading = false;
 
       console.log('Added ' + this.video.magnetUri + '.');
-      torrent.files[0].renderTo('#video-container video', { autoplay: true }, (err) => {
+      torrent.files[0].renderTo(this.playerElement, { autoplay: true }, (err) => {
         if (err) {
           alert('Cannot append the file.');
           console.error(err);