1 import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'
2 import { MarkdownService, Notifier } from '@app/core'
3 import { VideoDetails, VideoService } from '@app/shared/shared-main'
6 selector: 'my-video-description',
7 templateUrl: './video-description.component.html',
8 styleUrls: [ './video-description.component.scss' ]
10 export class VideoDescriptionComponent implements OnChanges {
11 @Input() video: VideoDetails
13 @Output() timestampClicked = new EventEmitter<number>()
15 descriptionLoading = false
16 completeDescriptionShown = false
17 completeVideoDescription: string
18 shortVideoDescription: string
19 videoHTMLDescription = ''
22 private videoService: VideoService,
23 private notifier: Notifier,
24 private markdownService: MarkdownService
28 this.descriptionLoading = false
29 this.completeDescriptionShown = false
30 this.completeVideoDescription = undefined
32 this.setVideoDescriptionHTML()
35 showMoreDescription () {
36 if (this.completeVideoDescription === undefined) {
37 return this.loadCompleteDescription()
40 this.updateVideoDescription(this.completeVideoDescription)
41 this.completeDescriptionShown = true
44 showLessDescription () {
45 this.updateVideoDescription(this.shortVideoDescription)
46 this.completeDescriptionShown = false
49 loadCompleteDescription () {
50 this.descriptionLoading = true
52 this.videoService.loadCompleteDescription(this.video.descriptionPath)
54 next: description => {
55 this.completeDescriptionShown = true
56 this.descriptionLoading = false
58 this.shortVideoDescription = this.video.description
59 this.completeVideoDescription = description
61 this.updateVideoDescription(this.completeVideoDescription)
65 this.descriptionLoading = false
66 this.notifier.error(err.message)
71 onTimestampClicked (timestamp: number) {
72 this.timestampClicked.emit(timestamp)
75 private updateVideoDescription (description: string) {
76 this.video.description = description
77 this.setVideoDescriptionHTML()
78 .catch(err => console.error(err))
81 private async setVideoDescriptionHTML () {
82 const html = await this.markdownService.textMarkdownToHTML(this.video.description)
84 this.videoHTMLDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html)