From 80958c78fdc733c02077a9d2200be0c3f5ee623e Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Tue, 28 Nov 2017 15:40:53 +0100
Subject: Add loader when expanding long video description

---
 .../app/videos/+video-watch/video-watch.component.html  |  7 ++++---
 .../app/videos/+video-watch/video-watch.component.scss  |  4 ++++
 .../app/videos/+video-watch/video-watch.component.ts    | 17 +++++++++++++----
 3 files changed, 21 insertions(+), 7 deletions(-)

(limited to 'client/src/app/videos/+video-watch')

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 fd3ce2b84..f528d73c3 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -130,14 +130,15 @@
 
       <div class="video-details-description" [innerHTML]="videoHTMLDescription"></div>
 
-      <div *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()" class="video-details-description-more">
+      <div class="video-details-description-more" *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()">
         Show more
-        <span class="glyphicon glyphicon-menu-down"></span>
+        <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
+        <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
       </div>
 
       <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-details-description-more">
         Show less
-        <span class="glyphicon glyphicon-menu-up"></span>
+        <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
       </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 fcad7f7b0..cad21dd18 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -166,6 +166,10 @@
     .video-details-date-description {
       padding-left: $video-watch-info-padding-left;
 
+      .description-loading {
+        display: inline-block;
+      }
+
       .video-details-date {
         font-weight: bold;
         margin-bottom: 30px;
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 5e2486b9c..2a7290cbd 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -16,6 +16,7 @@ import { VideoReportComponent } from './video-report.component'
 import { VideoDetails, VideoService, MarkdownService } from '../shared'
 import { VideoBlacklistService } from '../../shared'
 import { UserVideoRateType, VideoRateType } from '../../../../../shared'
+import { BehaviorSubject } from 'rxjs/BehaviorSubject'
 
 @Component({
   selector: 'my-video-watch',
@@ -38,6 +39,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   video: VideoDetails = null
   videoPlayerLoaded = false
   videoNotFound = false
+  descriptionLoading = false
 
   completeDescriptionShown = false
   completeVideoDescription: string
@@ -159,32 +161,39 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   showMoreDescription () {
-    this.completeDescriptionShown = true
-
     if (this.completeVideoDescription === undefined) {
       return this.loadCompleteDescription()
     }
 
     this.updateVideoDescription(this.completeVideoDescription)
+    this.completeDescriptionShown = true
   }
 
   showLessDescription () {
-    this.completeDescriptionShown = false
 
     this.updateVideoDescription(this.shortVideoDescription)
+    this.completeDescriptionShown = false
   }
 
   loadCompleteDescription () {
+    this.descriptionLoading = true
+
     this.videoService.loadCompleteDescription(this.video.descriptionPath)
       .subscribe(
         description => {
+          this.completeDescriptionShown = true
+          this.descriptionLoading = false
+
           this.shortVideoDescription = this.video.description
           this.completeVideoDescription = description
 
           this.updateVideoDescription(this.completeVideoDescription)
         },
 
-        error => this.notificationsService.error('Error', error.text)
+        error => {
+          this.descriptionLoading = false
+          this.notificationsService.error('Error', error.text)
+        }
       )
   }
 
-- 
cgit v1.2.3