Add loader when expanding long video description

diff --git a/client/src/app/shared/misc/loader.component.html b/client/src/app/shared/misc/loader.component.html
new file mode 100644 (file)
index 0000000..38d0695
--- /dev/null
+++ b/client/src/app/shared/misc/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/shared/misc/loader.component.ts b/client/src/app/shared/misc/loader.component.ts
new file mode 100644 (file)
index 0000000..f37d70c
--- /dev/null
+++ b/client/src/app/shared/misc/loader.component.ts
@@ -0,0 +1,11 @@
+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/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/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
new file mode 100644 (file)
index 0000000..9ee0c52
--- /dev/null
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -0,0 +1,56 @@
+.btn-file {
+  position: relative;
+  overflow: hidden;
+  display: block;
+}
+
+.btn-file input[type=file] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 100%;
+  min-height: 100%;
+  font-size: 100px;
+  text-align: right;
+  filter: alpha(opacity=0);
+  opacity: 0;
+  outline: none;
+  background: white;
+  cursor: inherit;
+  display: block;
+}
+
+.form-group {
+  margin-bottom: 10px;
+}
+
+div.tags {
+  height: 40px;
+  font-size: 20px;
+  margin-top: 20px;
+
+  .tag {
+    margin-right: 10px;
+
+    .remove {
+      cursor: pointer;
+    }
+  }
+}
+
+div.file-to-upload {
+  height: 40px;
+
+  .glyphicon-remove {
+    cursor: pointer;
+  }
+}
+
+.little-information {
+  font-size: 0.8em;
+  font-style: italic;
+}
+
+.label-tags {
+  margin-bottom: 0;
+}

diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
new file mode 100644 (file)
index 0000000..c64cea9
--- /dev/null
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -0,0 +1,33 @@
+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'
+
+@NgModule({
+  imports: [
+    TagInputModule,
+    TabsModule.forRoot(),
+
+    SharedModule
+  ],
+
+  declarations: [
+    VideoDescriptionComponent
+  ],
+
+  exports: [
+    TagInputModule,
+    TabsModule,
+
+    VideoDescriptionComponent
+  ],
+
+  providers: [
+    VideoService,
+    MarkdownService
+  ]
+})
+export class VideoEditModule { }

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-edit.component.scss b/client/src/app/videos/+video-edit/video-edit.component.scss
deleted file mode 100644 (file)
index 9ee0c52..0000000
--- a/client/src/app/videos/+video-edit/video-edit.component.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.btn-file {
-  position: relative;
-  overflow: hidden;
-  display: block;
-}
-
-.btn-file input[type=file] {
-  position: absolute;
-  top: 0;
-  right: 0;
-  min-width: 100%;
-  min-height: 100%;
-  font-size: 100px;
-  text-align: right;
-  filter: alpha(opacity=0);
-  opacity: 0;
-  outline: none;
-  background: white;
-  cursor: inherit;
-  display: block;
-}
-
-.form-group {
-  margin-bottom: 10px;
-}
-
-div.tags {
-  height: 40px;
-  font-size: 20px;
-  margin-top: 20px;
-
-  .tag {
-    margin-right: 10px;
-
-    .remove {
-      cursor: pointer;
-    }
-  }
-}
-
-div.file-to-upload {
-  height: 40px;
-
-  .glyphicon-remove {
-    cursor: pointer;
-  }
-}
-
-.little-information {
-  font-size: 0.8em;
-  font-style: italic;
-}
-
-.label-tags {
-  margin-bottom: 0;
-}

diff --git a/client/src/app/videos/+video-edit/video-edit.module.ts b/client/src/app/videos/+video-edit/video-edit.module.ts
deleted file mode 100644 (file)
index 33f6549..0000000
--- a/client/src/app/videos/+video-edit/video-edit.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-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'
-
-@NgModule({
-  imports: [
-    TagInputModule,
-    TabsModule.forRoot(),
-
-    SharedModule
-  ],
-
-  declarations: [
-    VideoDescriptionComponent
-  ],
-
-  exports: [
-    TagInputModule,
-    TabsModule,
-
-    VideoDescriptionComponent
-  ],
-
-  providers: [
-    VideoService,
-    MarkdownService
-  ]
-})
-export class VideoEditModule { }

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/video-list/shared/loader.component.html b/client/src/app/videos/video-list/shared/loader.component.html
deleted file mode 100644 (file)
index 38d0695..0000000
--- 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 (file)
index f37d70c..0000000
--- 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 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: [