Client: add video not found message if the video... is not found

client/src/app/app.component.scss

@@ -17,3 +17,7 @@ header div {
     padding: 0 3px 0 3px;
   }
 }
+
+[hidden] {
+  display: none !important;
+}

client/src/app/videos/video-watch/video-watch.component.html

@@ -15,9 +15,12 @@
 
 <div class="row">
   <div class="col-md-12">
-    <div class="embed-responsive embed-responsive-19by9">
+    <!-- We need the video container for videojs so we just hide it -->
+    <div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9">
        <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"></video>
     </div>
+
+    <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
   </div>
 </div>
 

client/src/app/videos/video-watch/video-watch.component.scss

@@ -3,6 +3,14 @@
   height: 100%;
 }
 
+#video-not-found {
+  height: 300px;
+  line-height: 300px;
+  margin-top: 50px;
+  text-align: center;
+  font-weight: bold;
+}
+
 .embed-responsive {
   height: 500px;
 }

client/src/app/videos/video-watch/video-watch.component.ts

@@ -28,6 +28,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   playerElement: Element;
   uploadSpeed: number;
   video: Video = null;
+  videoNotFound = false;
 
   private errorTimer: NodeJS.Timer;
   private sub: any;
@@ -51,7 +52,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           this.setOpenGraphTags();
           this.loadVideo();
         },
-        error => alert(error.text)
+        error => {
+          this.videoNotFound = true;
+        }
       );
     });
 
@@ -73,7 +76,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     console.log('Removing video from webtorrent.');
     clearInterval(this.torrentInfosInterval);
     clearTimeout(this.errorTimer);
-    this.webTorrentService.remove(this.video.magnetUri);
+
+    if (this.video !== null) {
+      this.webTorrentService.remove(this.video.magnetUri);
+    }
 
     // Remove player
     videojs(this.playerElement).dispose();

client/src/sass/application.scss

@@ -46,6 +46,10 @@ menu {
   width: 200px;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 
 footer {
   border-top: 1px solid rgba(0, 0, 0, 0.2);