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'
4 import { logger } from '@root-helpers/logger'
7 selector: 'my-video-description',
8 templateUrl: './video-description.component.html',
9 styleUrls: [ './video-description.component.scss' ]
11 export class VideoDescriptionComponent implements OnChanges {
12 @Input() video: VideoDetails
14 @Output() timestampClicked = new EventEmitter<number>()
16 descriptionLoading = false
17 completeDescriptionShown = false
18 completeVideoDescription: string
19 shortVideoDescription: string
20 videoHTMLDescription = ''
23 private videoService: VideoService,
24 private notifier: Notifier,
25 private markdownService: MarkdownService
29 this.descriptionLoading = false
30 this.completeDescriptionShown = false
31 this.completeVideoDescription = undefined
33 this.setVideoDescriptionHTML()
36 showMoreDescription () {
37 if (this.completeVideoDescription === undefined) {
38 return this.loadCompleteDescription()
41 this.updateVideoDescription(this.completeVideoDescription)
42 this.completeDescriptionShown = true
45 showLessDescription () {
46 this.updateVideoDescription(this.shortVideoDescription)
47 this.completeDescriptionShown = false
50 loadCompleteDescription () {
51 this.descriptionLoading = true
53 this.videoService.loadCompleteDescription(this.video.descriptionPath)
55 next: description => {
56 this.completeDescriptionShown = true
57 this.descriptionLoading = false
59 this.shortVideoDescription = this.video.description
60 this.completeVideoDescription = description
62 this.updateVideoDescription(this.completeVideoDescription)
66 this.descriptionLoading = false
67 this.notifier.error(err.message)
72 onTimestampClicked (timestamp: number) {
73 this.timestampClicked.emit(timestamp)
76 private updateVideoDescription (description: string) {
77 this.video.description = description
78 this.setVideoDescriptionHTML()
79 .catch(err => logger.error(err))
82 private async setVideoDescriptionHTML () {
83 const html = await this.markdownService.textMarkdownToHTML(this.video.description)
85 this.videoHTMLDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html)