From 157cb9c9713e08ff70078660a32dd77ecb87eabc Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Thu, 26 May 2016 20:40:03 +0200
Subject: [PATCH] Add a loader animation when loading the videos list

---
 .../list/videos-list.component.html           |  4 ++-
 .../list/videos-list.component.scss           | 31 +++++++++++--------
 .../components/list/videos-list.component.ts  |  8 ++++-
 .../watch/videos-watch.component.html         |  5 +--
 .../watch/videos-watch.component.scss         | 27 ----------------
 .../watch/videos-watch.component.ts           |  3 ++
 client/angular/videos/loader.component.html   |  3 ++
 client/angular/videos/loader.component.scss   | 26 ++++++++++++++++
 client/angular/videos/loader.component.ts     | 11 +++++++
 client/tsconfig.json                          |  1 +
 10 files changed, 73 insertions(+), 46 deletions(-)
 create mode 100644 client/angular/videos/loader.component.html
 create mode 100644 client/angular/videos/loader.component.scss
 create mode 100644 client/angular/videos/loader.component.ts

diff --git a/client/angular/videos/components/list/videos-list.component.html b/client/angular/videos/components/list/videos-list.component.html
index 3e30b39b0..edbbaf3ae 100644
--- a/client/angular/videos/components/list/videos-list.component.html
+++ b/client/angular/videos/components/list/videos-list.component.html
@@ -4,7 +4,9 @@
 </div>
 
 <div class="videos-miniatures">
-  <div *ngIf="videos.length === 0">There is no video.</div>
+  <my-loader [loading]="loading"></my-loader>
+
+  <div class="col-md-12 no-video" *ngIf="!loading && videos.length === 0">There is no video.</div>
 
   <my-video-miniature *ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)">
   </my-video-miniature>
diff --git a/client/angular/videos/components/list/videos-list.component.scss b/client/angular/videos/components/list/videos-list.component.scss
index 2abc47b1b..9441d80c3 100644
--- a/client/angular/videos/components/list/videos-list.component.scss
+++ b/client/angular/videos/components/list/videos-list.component.scss
@@ -1,16 +1,3 @@
-.videos-miniatures {
-  min-height: 600px;
-}
-
-my-videos-miniature {
-  display: inline-block;
-}
-
-pagination {
-  display: block;
-  text-align: center;
-}
-
 .videos-info {
 
   padding-bottom: 20px;
@@ -30,3 +17,21 @@ pagination {
     padding-left: 0;
   }
 }
+
+.videos-miniatures {
+  min-height: 600px;
+
+  my-videos-miniature {
+    display: inline-block;
+  }
+
+  .no-video {
+    margin-top: 50px;
+    text-align: center;
+  }
+}
+
+pagination {
+  display: block;
+  text-align: center;
+}
diff --git a/client/angular/videos/components/list/videos-list.component.ts b/client/angular/videos/components/list/videos-list.component.ts
index 94b064e16..56230e331 100644
--- a/client/angular/videos/components/list/videos-list.component.ts
+++ b/client/angular/videos/components/list/videos-list.component.ts
@@ -12,12 +12,13 @@ import { VideoMiniatureComponent } from './video-miniature.component';
 import { Search, SearchField } from '../../../app/search';
 import { VideoSortComponent } from './video-sort.component';
 import { SortField } from './sort';
+import { LoaderComponent } from '../../loader.component';
 
 @Component({
   selector: 'my-videos-list',
   styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ],
   templateUrl: 'app/angular/videos/components/list/videos-list.component.html',
-  directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ]
+  directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent, LoaderComponent ]
 })
 
 export class VideosListComponent implements OnInit {
@@ -29,6 +30,7 @@ export class VideosListComponent implements OnInit {
     total: 0
   };
   sort: SortField;
+  loading: boolean = false;
 
   private search: Search;
 
@@ -55,6 +57,9 @@ export class VideosListComponent implements OnInit {
   }
 
   getVideos() {
+    this.loading = true;
+    this.videos = [];
+
     let observable = null;
 
     if (this.search.value !== null) {
@@ -67,6 +72,7 @@ export class VideosListComponent implements OnInit {
       ({ videos, totalVideos }) => {
         this.videos = videos;
         this.pagination.total = totalVideos;
+        this.loading = false;
       },
       error => alert(error)
     );
diff --git a/client/angular/videos/components/watch/videos-watch.component.html b/client/angular/videos/components/watch/videos-watch.component.html
index 9e8f50908..6c36b27e2 100644
--- a/client/angular/videos/components/watch/videos-watch.component.html
+++ b/client/angular/videos/components/watch/videos-watch.component.html
@@ -1,7 +1,4 @@
-<!-- Loader -->
-<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
-  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
-</div>
+<my-loader [loading]="loading"></my-loader>
 
 <div class="embed-responsive embed-responsive-19by9">
 </div>
diff --git a/client/angular/videos/components/watch/videos-watch.component.scss b/client/angular/videos/components/watch/videos-watch.component.scss
index 62ae8a126..1228d42f4 100644
--- a/client/angular/videos/components/watch/videos-watch.component.scss
+++ b/client/angular/videos/components/watch/videos-watch.component.scss
@@ -2,33 +2,6 @@
   height: 500px;
 }
 
-#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);}
-}
-
 #torrent-info {
   font-size: 10px;
 
diff --git a/client/angular/videos/components/watch/videos-watch.component.ts b/client/angular/videos/components/watch/videos-watch.component.ts
index 6e212e8bc..e551e1f9a 100644
--- a/client/angular/videos/components/watch/videos-watch.component.ts
+++ b/client/angular/videos/components/watch/videos-watch.component.ts
@@ -3,6 +3,8 @@ import { RouteParams, CanDeactivate, ComponentInstruction } from '@angular/route
 
 import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
 
+import { LoaderComponent } from '../../loader.component';
+
 // TODO import it with systemjs
 declare var WebTorrent: any;
 
@@ -13,6 +15,7 @@ import { VideosService } from '../../videos.service';
   selector: 'my-video-watch',
   templateUrl: 'app/angular/videos/components/watch/videos-watch.component.html',
   styleUrls: [ 'app/angular/videos/components/watch/videos-watch.component.css' ],
+  directives: [ LoaderComponent ],
   pipes: [ BytesPipe ]
 })
 
diff --git a/client/angular/videos/loader.component.html b/client/angular/videos/loader.component.html
new file mode 100644
index 000000000..d02296a2d
--- /dev/null
+++ b/client/angular/videos/loader.component.html
@@ -0,0 +1,3 @@
+<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
+  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>
diff --git a/client/angular/videos/loader.component.scss b/client/angular/videos/loader.component.scss
new file mode 100644
index 000000000..454195811
--- /dev/null
+++ b/client/angular/videos/loader.component.scss
@@ -0,0 +1,26 @@
+div {
+  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/loader.component.ts b/client/angular/videos/loader.component.ts
new file mode 100644
index 000000000..24329432e
--- /dev/null
+++ b/client/angular/videos/loader.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'my-loader',
+  styleUrls: [ 'app/angular/videos/loader.component.css' ],
+  templateUrl: 'app/angular/videos/loader.component.html'
+})
+
+export class LoaderComponent {
+  @Input() loading: boolean;
+}
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 270524e5f..8e786ca28 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -36,6 +36,7 @@
     "angular/videos/components/list/video-sort.component.ts",
     "angular/videos/components/list/videos-list.component.ts",
     "angular/videos/components/watch/videos-watch.component.ts",
+    "angular/videos/loader.component.ts",
     "angular/videos/pagination.ts",
     "angular/videos/video.ts",
     "angular/videos/videos.service.ts",
-- 
2.41.0