From b0c43e36dbdc2c964f6828a78b146faebfb75b21 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 29 Jun 2021 17:15:05 +0200
Subject: Create a dedicated component for video description

---
 .../+video-watch/video-description.component.ts    | 87 ++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 client/src/app/+videos/+video-watch/video-description.component.ts

(limited to 'client/src/app/+videos/+video-watch/video-description.component.ts')

diff --git a/client/src/app/+videos/+video-watch/video-description.component.ts b/client/src/app/+videos/+video-watch/video-description.component.ts
new file mode 100644
index 000000000..2ea3b206f
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/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)
+  }
+}
-- 
cgit v1.2.3