Client: little refractoring

9 files changed, 39 insertions, 33 deletions

diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts
index 1f6d6a4e7..71d3b78e6 100644
--- a/client/src/app/videos/video-list/index.ts
+++ b/client/src/app/videos/video-list/index.ts
@@ -1,3 +1,4 @@
+export * from './loader.component';
 export * from './video-list.component';
 export * from './video-miniature.component';
 export * from './video-sort.component';
diff --git a/client/src/app/videos/video-list/loader.component.html b/client/src/app/videos/video-list/loader.component.html
new file mode 100644
index 000000000..38d06950e
--- /dev/null
+++ b/client/src/app/videos/video-list/loader.component.html
@@ -0,0 +1,3 @@
+<div id="video-loading" *ngIf="loading">
+  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>
diff --git a/client/src/app/videos/video-list/loader.component.scss b/client/src/app/videos/video-list/loader.component.scss
new file mode 100644
index 000000000..44cf1f9da
--- /dev/null
+++ b/client/src/app/videos/video-list/loader.component.scss
@@ -0,0 +1,22 @@
+// 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/src/app/videos/video-list/loader.component.ts b/client/src/app/videos/video-list/loader.component.ts
new file mode 100644
index 000000000..e72d2f3f3
--- /dev/null
+++ b/client/src/app/videos/video-list/loader.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'my-loader',
+  styleUrls: [ './loader.component.scss' ],
+  templateUrl: './loader.component.html'
+})
+
+export class LoaderComponent {
+  @Input() loading: boolean;
+}
diff --git a/client/src/app/videos/video-list/video-list.component.scss b/client/src/app/videos/video-list/video-list.component.scss
index b48a4f125..4b4409602 100644
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ b/client/src/app/videos/video-list/video-list.component.scss
@@ -23,19 +23,6 @@
 
   my-video-miniature {
     text-align: left;
-    transition: all 0.5s ease;
-
-    &.ng-enter {
-      opacity: 0;
-    }
-
-    &.ng-enter-active {
-      opacity: 1;
-    }
-
-    &.ng-leave {
-      opacity: 0;
-    }
   }
 
   .no-video {
diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
index 16e1b5bcc..16a40bdc4 100644
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -76,10 +76,7 @@ export class VideoListComponent implements OnInit, OnDestroy {
     this.loading.next(true);
     this.videos = [];
 
-    this.changeDetector.detectChanges();
-
     let observable = null;
-
     if (this.search.value) {
       observable = this.videoService.searchVideos(this.search, this.pagination, this.sort);
     } else {
@@ -150,8 +147,6 @@ export class VideoListComponent implements OnInit, OnDestroy {
     } else {
       this.pagination.currentPage = 1;
     }
-
-    this.changeDetector.detectChanges();
   }
 
   private navigateToNewParams() {
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index 1d3451c2b..648ef61b1 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -1,4 +1,4 @@
-<div class="video-miniature" (mouseenter)="onHover()" (mouseleave)="onBlur()">
+<div class="video-miniature">
   <a
     [routerLink]="['/videos/watch', video.id]" [attr.title]="video.description"
     class="video-miniature-thumbnail"
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss
index f7fecdc35..c2743c3be 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/video-miniature.component.scss
@@ -1,5 +1,3 @@
-@import "../../../sass/pre-customizations.scss";
-
 .video-miniature {
   margin-top: 30px;
   display: inline-block;
@@ -71,7 +69,7 @@
       }
 
       .video-miniature-tags {
-        // Fix for chrome when tags a long
+        // Fix for chrome when tags are long
         width: 201px;
 
         .video-miniature-tag {
@@ -81,7 +79,6 @@
           top: -2px;
 
           .label {
-            line-height: $line-height-base;
             transition: background-color 0.2s;
           }
         }
diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/video-miniature.component.ts
index 13deec381..28601ca7f 100644
--- a/client/src/app/videos/video-list/video-miniature.component.ts
+++ b/client/src/app/videos/video-list/video-miniature.component.ts
@@ -17,8 +17,6 @@ export class VideoMiniatureComponent {
   @Input() user: User;
   @Input() video: Video;
 
-  hovering = false;
-
   constructor(
     private notificationsService: NotificationsService,
     private confirmService: ConfirmService,
@@ -33,14 +31,6 @@ export class VideoMiniatureComponent {
     return this.video.name;
   }
 
-  onBlur() {
-    this.hovering = false;
-  }
-
-  onHover() {
-    this.hovering = true;
-  }
-
   isVideoNSFWForThisUser() {
     return this.video.isVideoNSFWForUser(this.user);
   }