1 files changed, 87 insertions, 0 deletions

diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
new file mode 100644
index 000000000..2ea3b206f
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
@@ -0,0 +1,87 @@
+import { Component, EventEmitter, Inject, Input, LOCALE_ID, OnChanges, Output } from '@angular/core'
+import { MarkdownService, Notifier } from '@app/core'
+import { VideoDetails, VideoService } from '@app/shared/shared-main'
+
+
+@Component({
+  selector: 'my-video-description',
+  templateUrl: './video-description.component.html',
+  styleUrls: [ './video-description.component.scss' ]
+})
+export class VideoDescriptionComponent implements OnChanges {
+  @Input() video: VideoDetails
+
+  @Output() timestampClicked = new EventEmitter<number>()
+
+  descriptionLoading = false
+  completeDescriptionShown = false
+  completeVideoDescription: string
+  shortVideoDescription: string
+  videoHTMLDescription = ''
+
+  constructor (
+    private videoService: VideoService,
+    private notifier: Notifier,
+    private markdownService: MarkdownService,
+    @Inject(LOCALE_ID) private localeId: string
+  ) { }
+
+  ngOnChanges () {
+    this.descriptionLoading = false
+    this.completeDescriptionShown = false
+    this.completeVideoDescription = undefined
+
+    this.setVideoDescriptionHTML()
+  }
+
+  showMoreDescription () {
+    if (this.completeVideoDescription === undefined) {
+      return this.loadCompleteDescription()
+    }
+
+    this.updateVideoDescription(this.completeVideoDescription)
+    this.completeDescriptionShown = true
+  }
+
+  showLessDescription () {
+    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.descriptionLoading = false
+            this.notifier.error(error.message)
+          }
+        )
+  }
+
+  onTimestampClicked (timestamp: number) {
+    this.timestampClicked.emit(timestamp)
+  }
+
+  private updateVideoDescription (description: string) {
+    this.video.description = description
+    this.setVideoDescriptionHTML()
+      .catch(err => console.error(err))
+  }
+
+  private async setVideoDescriptionHTML () {
+    const html = await this.markdownService.textMarkdownToHTML(this.video.description)
+    this.videoHTMLDescription = this.markdownService.processVideoTimestamps(html)
+  }
+}