Lazy description and previews to video form

1 files changed, 44 insertions, 1 deletions

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()