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

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 95f306d759cd3d46975098378edc719668ecf809..30d1bebde72aa9bc941877e0a3295dfe26d87e27 100644 (file)
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -17,3 +17,7 @@ header div {
     padding: 0 3px 0 3px;
   }
 }
+
+[hidden] {
+  display: none !important;
+}

diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html
index cb91bae7e33e4c575fb75a5e168053f968a6494c..2dfc25f56807d1bc42b422575fc1a71712b3e044 100644 (file)
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/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>
 

diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
index fe23b849f49165089fbf2ad27dd6827270599202..45446e175986006387d682d8748b5f65e27a4bd2 100644 (file)
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/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;
 }

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 0309938c0d3bfecb902fcc5342d86eca215fe9f3..3dab2bbb7f1432262bdec720d65f497b72528497 100644 (file)
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/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();

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 763e251f0331c4cc672686f88c9ad68813ac526a..f0526e84ff7ae471f4f4352be707d95302a9a3bb 100644 (file)
--- a/client/src/sass/application.scss
+++ b/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);