Add loader when expanding long video description

13 files changed, 33 insertions, 45 deletions

diff --git a/client/src/app/videos/+video-edit/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 9ee0c520c..9ee0c520c 100644
--- a/client/src/app/videos/+video-edit/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
diff --git a/client/src/app/videos/+video-edit/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
index 33f654960..c64cea920 100644
--- a/client/src/app/videos/+video-edit/video-edit.module.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'
 import { TagInputModule } from 'ngx-chips'
 import { TabsModule } from 'ngx-bootstrap/tabs'
 
-import { VideoService, MarkdownService, VideoDescriptionComponent } from '../shared'
-import { SharedModule } from '../../shared'
+import { VideoService, MarkdownService, VideoDescriptionComponent } from '../../shared'
+import { SharedModule } from '../../../shared'
 
 @NgModule({
   imports: [
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
index c8094f792..1704cf486 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -23,7 +23,7 @@ import { HttpEventType, HttpResponse } from '@angular/common/http'
 
 @Component({
   selector: 'my-videos-add',
-  styleUrls: [ './video-edit.component.scss' ],
+  styleUrls: [ './shared/video-edit.component.scss' ],
   templateUrl: './video-add.component.html'
 })
 
diff --git a/client/src/app/videos/+video-edit/video-add.module.ts b/client/src/app/videos/+video-edit/video-add.module.ts
index 3d937b008..f58d12dac 100644
--- a/client/src/app/videos/+video-edit/video-add.module.ts
+++ b/client/src/app/videos/+video-edit/video-add.module.ts
@@ -1,9 +1,8 @@
 import { NgModule } from '@angular/core'
-
+import { SharedModule } from '../../shared'
+import { VideoEditModule } from './shared/video-edit.module'
 import { VideoAddRoutingModule } from './video-add-routing.module'
 import { VideoAddComponent } from './video-add.component'
-import { VideoEditModule } from './video-edit.module'
-import { SharedModule } from '../../shared'
 
 @NgModule({
   imports: [
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
index be663575f..0e966cb50 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -21,7 +21,7 @@ import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.
 
 @Component({
   selector: 'my-videos-update',
-  styleUrls: [ './video-edit.component.scss' ],
+  styleUrls: [ './shared/video-edit.component.scss' ],
   templateUrl: './video-update.component.html'
 })
 
diff --git a/client/src/app/videos/+video-edit/video-update.module.ts b/client/src/app/videos/+video-edit/video-update.module.ts
index f7bd77c75..3b45c72a5 100644
--- a/client/src/app/videos/+video-edit/video-update.module.ts
+++ b/client/src/app/videos/+video-edit/video-update.module.ts
@@ -1,9 +1,8 @@
 import { NgModule } from '@angular/core'
-
+import { SharedModule } from '../../shared'
+import { VideoEditModule } from './shared/video-edit.module'
 import { VideoUpdateRoutingModule } from './video-update-routing.module'
 import { VideoUpdateComponent } from './video-update.component'
-import { VideoEditModule } from './video-edit.module'
-import { SharedModule } from '../../shared'
 
 @NgModule({
   imports: [
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)
+        }
       )
   }
 
diff --git a/client/src/app/videos/video-list/shared/index.ts b/client/src/app/videos/video-list/shared/index.ts
index 2c9804e6d..d8f73bcda 100644
--- a/client/src/app/videos/video-list/shared/index.ts
+++ b/client/src/app/videos/video-list/shared/index.ts
@@ -1,4 +1,3 @@
 export * from './abstract-video-list'
-export * from './loader.component'
 export * from './video-miniature.component'
 export * from './video-sort.component'
diff --git a/client/src/app/videos/video-list/shared/loader.component.html b/client/src/app/videos/video-list/shared/loader.component.html
deleted file mode 100644
index 38d06950e..000000000
--- a/client/src/app/videos/video-list/shared/loader.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<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/shared/loader.component.ts b/client/src/app/videos/video-list/shared/loader.component.ts
deleted file mode 100644
index f37d70c85..000000000
--- a/client/src/app/videos/video-list/shared/loader.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core'
-
-@Component({
-  selector: 'my-loader',
-  styleUrls: [ ],
-  templateUrl: './loader.component.html'
-})
-
-export class LoaderComponent {
-  @Input() loading: boolean
-}
diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts
index ecc351b65..4f3054c3a 100644
--- a/client/src/app/videos/videos.module.ts
+++ b/client/src/app/videos/videos.module.ts
@@ -1,16 +1,9 @@
 import { NgModule } from '@angular/core'
-
+import { SharedModule } from '../shared'
+import { VideoService } from './shared'
+import { MyVideosComponent, VideoListComponent, VideoMiniatureComponent, VideoSortComponent } from './video-list'
 import { VideosRoutingModule } from './videos-routing.module'
 import { VideosComponent } from './videos.component'
-import {
-  LoaderComponent,
-  VideoListComponent,
-  MyVideosComponent,
-  VideoMiniatureComponent,
-  VideoSortComponent
-} from './video-list'
-import { VideoService } from './shared'
-import { SharedModule } from '../shared'
 
 @NgModule({
   imports: [
@@ -24,9 +17,7 @@ import { SharedModule } from '../shared'
     VideoListComponent,
     MyVideosComponent,
     VideoMiniatureComponent,
-    VideoSortComponent,
-
-    LoaderComponent
+    VideoSortComponent
   ],
 
   exports: [