Add loader gif when loading the video

4 files changed, 37 insertions, 1 deletions

diff --git a/client/angular/videos/components/watch/videos-watch.component.html b/client/angular/videos/components/watch/videos-watch.component.html
index 1ec0b1e19..f2a50eccd 100644
--- a/client/angular/videos/components/watch/videos-watch.component.html
+++ b/client/angular/videos/components/watch/videos-watch.component.html
@@ -1,5 +1,11 @@
+<!-- Loader -->
+<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
+  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>
+
 <div class="embed-responsive embed-responsive-19by9">
 </div>
+
 <div id="torrent-info">
   <div>Download: {{ downloadSpeed | bytes }}/s</div>
   <div>Upload: {{ uploadSpeed | bytes }}/s</div>
diff --git a/client/angular/videos/components/watch/videos-watch.component.scss b/client/angular/videos/components/watch/videos-watch.component.scss
index 27f34b33d..b6c2fc050 100644
--- a/client/angular/videos/components/watch/videos-watch.component.scss
+++ b/client/angular/videos/components/watch/videos-watch.component.scss
@@ -1,3 +1,30 @@
 .embed-responsive {
   height: 100%;
 }
+
+#video-loading {
+  margin-top: 150px;
+}
+
+// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
+.glyphicon-refresh-animate {
+    -animation: spin .7s infinite linear;
+    -ms-animation: spin .7s infinite linear;
+    -webkit-animation: spinw .7s infinite linear;
+    -moz-animation: spinm .7s infinite linear;
+}
+
+@keyframes spin {
+    from { transform: scale(1) rotate(0deg);}
+    to { transform: scale(1) rotate(360deg);}
+}
+
+@-webkit-keyframes spinw {
+    from { -webkit-transform: rotate(0deg);}
+    to { -webkit-transform: rotate(360deg);}
+}
+
+@-moz-keyframes spinm {
+    from { -moz-transform: rotate(0deg);}
+    to { -moz-transform: rotate(360deg);}
+}
diff --git a/client/angular/videos/components/watch/videos-watch.component.ts b/client/angular/videos/components/watch/videos-watch.component.ts
index d2203727e..52c31fe32 100644
--- a/client/angular/videos/components/watch/videos-watch.component.ts
+++ b/client/angular/videos/components/watch/videos-watch.component.ts
@@ -20,6 +20,7 @@ export class VideosWatchComponent implements OnInit, CanDeactivate {
   downloadSpeed: number;
   uploadSpeed: number;
   numPeers: number;
+  loading: boolean = false;
 
   private _interval: number;
   private client: any;
@@ -42,9 +43,11 @@ export class VideosWatchComponent implements OnInit, CanDeactivate {
   }
 
   loadVideo(video: Video) {
+    this.loading = true;
     this.video = video;
     console.log('Adding ' + this.video.magnetUri + '.');
     this.client.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) {
diff --git a/package.json b/package.json
index 42acf1b90..a9d053f6e 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "build": "concurrently \"npm run client:sass\" \"npm run client:tsc\"",
     "client:clean": "concurrently \"npm run client:tsc:clean\" \"npm run client:sass:clean\"",
     "client:sass:index": "npm run client:sass:index:clean && cd client && node-sass --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css",
-    "client:sass:index:watch": "cd client && node-sass -w --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css",
+    "client:sass:index:watch": "cd client && node-sass -w --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css client/angular/**/ client/angular/**/**",
     "client:sass:index:clean": "cd client && rm -f stylesheets/index.css",
     "client:sass:angular": "cd client && node-sass angular/ --output angular/",
     "client:sass:angular:watch": "cd client && node-sass -w angular/ --output angular/",