Lazy description and previews to video form

4 files changed, 67 insertions, 2 deletions

diff --git a/client/src/app/videos/+video-watch/video-report.component.html b/client/src/app/videos/+video-watch/video-report.component.html
index 741080ead..ceb7cf50a 100644
--- a/client/src/app/videos/+video-watch/video-report.component.html
+++ b/client/src/app/videos/+video-watch/video-report.component.html
@@ -13,7 +13,7 @@
 
         <form novalidate [formGroup]="form">
           <div class="form-group">
-            <label for="description">Reason</label>
+            <label for="reason">Reason</label>
             <textarea
               id="reason" class="form-control" placeholder="Reason..."
               formControlName="reason"
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 4b594e7ed..71f986ccd 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -129,6 +129,16 @@
       </div>
 
       <div class="video-details-description" [innerHTML]="videoHTMLDescription"></div>
+
+      <div *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()" class="video-details-description-more">
+        Show more
+        <span class="glyphicon glyphicon-menu-down"></span>
+      </div>
+
+      <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-details-description-more">
+        Show less
+        <span class="glyphicon glyphicon-menu-up"></span>
+      </div>
     </div>
 
     <div class="video-details-attributes col-xs-4 col-md-3">
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 01ceab3c5..ab0539fa3 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -170,6 +170,18 @@
         font-weight: bold;
         margin-bottom: 30px;
       }
+
+      .video-details-description-more {
+        cursor: pointer;
+        margin-top: 15px;
+        font-weight: bold;
+        color: #acaeb7;
+
+        .glyphicon {
+          position: relative;
+          top: 2px;
+        }
+      }
     }
 
     .video-details-attributes {
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 199666bdc..5e2486b9c 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -38,6 +38,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   video: VideoDetails = null
   videoPlayerLoaded = false
   videoNotFound = false
+
+  completeDescriptionShown = false
+  completeVideoDescription: string
+  shortVideoDescription: string
   videoHTMLDescription = ''
 
   private paramsSub: Subscription
@@ -154,6 +158,36 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     )
   }
 
+  showMoreDescription () {
+    this.completeDescriptionShown = true
+
+    if (this.completeVideoDescription === undefined) {
+      return this.loadCompleteDescription()
+    }
+
+    this.updateVideoDescription(this.completeVideoDescription)
+  }
+
+  showLessDescription () {
+    this.completeDescriptionShown = false
+
+    this.updateVideoDescription(this.shortVideoDescription)
+  }
+
+  loadCompleteDescription () {
+    this.videoService.loadCompleteDescription(this.video.descriptionPath)
+      .subscribe(
+        description => {
+          this.shortVideoDescription = this.video.description
+          this.completeVideoDescription = description
+
+          this.updateVideoDescription(this.completeVideoDescription)
+        },
+
+        error => this.notificationsService.error('Error', error.text)
+      )
+  }
+
   showReportModal (event: Event) {
     event.preventDefault()
     this.videoReportModal.show()
@@ -184,6 +218,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.video.isBlackistableBy(this.authService.getUser())
   }
 
+  private updateVideoDescription (description: string) {
+    this.video.description = description
+    this.setVideoDescriptionHTML()
+  }
+
+  private setVideoDescriptionHTML () {
+    this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description)
+  }
+
   private handleError (err: any) {
     const errorMessage: string = typeof err === 'string' ? err : err.message
     let message = ''
@@ -264,7 +307,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           })
         })
 
-        this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description)
+        this.setVideoDescriptionHTML()
 
         this.setOpenGraphTags()
         this.checkUserRating()