Add loader when expanding long video description

diff --git a/client/src/app/videos/video-list/shared/loader.component.html b/client/src/app/shared/misc/loader.component.html
similarity index 100%
rename from client/src/app/videos/video-list/shared/loader.component.html
rename to client/src/app/shared/misc/loader.component.html

diff --git a/client/src/app/videos/video-list/shared/loader.component.ts b/client/src/app/shared/misc/loader.component.ts
similarity index 100%
rename from client/src/app/videos/video-list/shared/loader.component.ts
rename to client/src/app/shared/misc/loader.component.ts

diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 47f651590c9a6c11fe90fba309ef0bb894ee7f39..456ce851e53d2487499b2682982ba1659f0903e8 100644 (file)
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -19,6 +19,7 @@ import { SearchComponent, SearchService } from './search'
 import { UserService } from './users'
 import { VideoAbuseService } from './video-abuse'
 import { VideoBlacklistService } from './video-blacklist'
+import { LoaderComponent } from './misc/loader.component'
 
 @NgModule({
   imports: [
@@ -40,7 +41,8 @@ import { VideoBlacklistService } from './video-blacklist'
   declarations: [
     BytesPipe,
     KeysPipe,
-    SearchComponent
+    SearchComponent,
+    LoaderComponent
   ],
 
   exports: [
@@ -59,7 +61,8 @@ import { VideoBlacklistService } from './video-blacklist'
     BytesPipe,
     KeysPipe,
 
-    SearchComponent
+    SearchComponent,
+    LoaderComponent
   ],
 
   providers: [

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
similarity index 100%
rename from client/src/app/videos/+video-edit/video-edit.component.scss
rename to 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
similarity index 88%
rename from client/src/app/videos/+video-edit/video-edit.module.ts
rename to client/src/app/videos/+video-edit/shared/video-edit.module.ts
index 33f65496003e1ff3afc6588f62eafb9c5ab34bf2..c64cea9203cd1a086b2b76d4c563b95a109e3ad7 100644 (file)
--- 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 c8094f79279dd8d13f36df13c37ab4a5a480e7a8..1704cf486f3e230bd7fe900b1dc93a974079b16c 100644 (file)
--- 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 3d937b008f05bf4a04731ce6cecc8f7d209a4c7d..f58d12dac6e09fea977917024ad53b04d1a52190 100644 (file)
--- 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 be663575f5f49e59b0342ea9b9d1ade2ca1927b0..0e966cb509e6163eec76259b25f60d1a7c43ebdd 100644 (file)
--- 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 f7bd77c752a69dcb620d2d69f5961d66e7e965d3..3b45c72a53a925cc6510d65eb280d46690b559dc 100644 (file)
--- 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 fd3ce2b84febc4ee3b93a5366acede0002ffa95b..f528d73c31b0a7b7a5f9d8660baf5d3946cac3a3 100644 (file)
--- 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 fcad7f7b0d832ca781dcf2158564f323cd816466..cad21dd1893bedaabfbe3a11e17392981a81d12f 100644 (file)
--- 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 5e2486b9ce91a51c37a06356f78ff128ec3d31ce..2a7290cbd99735de3ebd45c3273aff4a9c0403b4 100644 (file)
--- 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 2c9804e6df2a125d36978b66692ae1c1b55b2a4c..d8f73bcda3526153d58505ad9f274904695fc64f 100644 (file)
--- 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/videos.module.ts b/client/src/app/videos/videos.module.ts
index ecc351b654c4b3b5abeb22e58efdba3e6dc12ec7..4f3054c3a71ddd63db2d7bc962251c2b88556076 100644 (file)
--- 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: [