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
19 completeVideoDescriptionLoaded = false
21 videoHTMLTruncatedDescription = ''
22 videoHTMLDescription = ''
25 private videoService: VideoService,
26 private notifier: Notifier,
27 private markdownService: MarkdownService
31 this.descriptionLoading = false
32 this.completeDescriptionShown = false
34 this.setVideoDescriptionHTML()
37 showMoreDescription () {
38 if (!this.completeVideoDescriptionLoaded) {
39 return this.loadCompleteDescription()
42 this.completeDescriptionShown = true
45 showLessDescription () {
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.video.description = description
60 this.setVideoDescriptionHTML()
61 .catch(err => logger.error(err))
65 this.descriptionLoading = false
66 this.notifier.error(err.message)
71 onTimestampClicked (timestamp: number) {
72 this.timestampClicked.emit(timestamp)
75 getHTMLDescription () {
76 if (this.completeDescriptionShown) {
77 return this.videoHTMLDescription
80 return this.videoHTMLTruncatedDescription
83 private async setVideoDescriptionHTML () {
85 const html = await this.markdownService.textMarkdownToHTML({ markdown: this.video.description })
87 this.videoHTMLDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html)
91 const html = await this.markdownService.textMarkdownToHTML({ markdown: this.video.truncatedDescription })
93 this.videoHTMLTruncatedDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html)