]>
Commit | Line | Data |
---|---|---|
06a55579 | 1 | import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core' |
b0c43e36 C |
2 | import { MarkdownService, Notifier } from '@app/core' |
3 | import { VideoDetails, VideoService } from '@app/shared/shared-main' | |
42b40636 | 4 | import { logger } from '@root-helpers/logger' |
b0c43e36 | 5 | |
b0c43e36 C |
6 | @Component({ |
7 | selector: 'my-video-description', | |
8 | templateUrl: './video-description.component.html', | |
9 | styleUrls: [ './video-description.component.scss' ] | |
10 | }) | |
11 | export class VideoDescriptionComponent implements OnChanges { | |
12 | @Input() video: VideoDetails | |
13 | ||
14 | @Output() timestampClicked = new EventEmitter<number>() | |
15 | ||
16 | descriptionLoading = false | |
17 | completeDescriptionShown = false | |
f713f36b C |
18 | |
19 | completeVideoDescriptionLoaded = false | |
20 | ||
21 | videoHTMLTruncatedDescription = '' | |
b0c43e36 C |
22 | videoHTMLDescription = '' |
23 | ||
24 | constructor ( | |
25 | private videoService: VideoService, | |
26 | private notifier: Notifier, | |
06a55579 | 27 | private markdownService: MarkdownService |
b0c43e36 C |
28 | ) { } |
29 | ||
30 | ngOnChanges () { | |
31 | this.descriptionLoading = false | |
32 | this.completeDescriptionShown = false | |
b0c43e36 C |
33 | |
34 | this.setVideoDescriptionHTML() | |
35 | } | |
36 | ||
37 | showMoreDescription () { | |
f713f36b | 38 | if (!this.completeVideoDescriptionLoaded) { |
b0c43e36 C |
39 | return this.loadCompleteDescription() |
40 | } | |
41 | ||
b0c43e36 C |
42 | this.completeDescriptionShown = true |
43 | } | |
44 | ||
45 | showLessDescription () { | |
b0c43e36 C |
46 | this.completeDescriptionShown = false |
47 | } | |
48 | ||
49 | loadCompleteDescription () { | |
50 | this.descriptionLoading = true | |
51 | ||
52 | this.videoService.loadCompleteDescription(this.video.descriptionPath) | |
1378c0d3 C |
53 | .subscribe({ |
54 | next: description => { | |
b0c43e36 C |
55 | this.completeDescriptionShown = true |
56 | this.descriptionLoading = false | |
57 | ||
f713f36b | 58 | this.video.description = description |
b0c43e36 | 59 | |
f713f36b C |
60 | this.setVideoDescriptionHTML() |
61 | .catch(err => logger.error(err)) | |
b0c43e36 C |
62 | }, |
63 | ||
1378c0d3 | 64 | error: err => { |
b0c43e36 | 65 | this.descriptionLoading = false |
1378c0d3 | 66 | this.notifier.error(err.message) |
b0c43e36 | 67 | } |
1378c0d3 | 68 | }) |
b0c43e36 C |
69 | } |
70 | ||
71 | onTimestampClicked (timestamp: number) { | |
72 | this.timestampClicked.emit(timestamp) | |
73 | } | |
74 | ||
f713f36b C |
75 | getHTMLDescription () { |
76 | if (this.completeDescriptionShown) { | |
77 | return this.videoHTMLDescription | |
78 | } | |
79 | ||
80 | return this.videoHTMLTruncatedDescription | |
b0c43e36 C |
81 | } |
82 | ||
83 | private async setVideoDescriptionHTML () { | |
f713f36b C |
84 | { |
85 | const html = await this.markdownService.textMarkdownToHTML({ markdown: this.video.description }) | |
9162fdd3 | 86 | |
f713f36b C |
87 | this.videoHTMLDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html) |
88 | } | |
89 | ||
90 | { | |
91 | const html = await this.markdownService.textMarkdownToHTML({ markdown: this.video.truncatedDescription }) | |
92 | ||
93 | this.videoHTMLTruncatedDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html) | |
94 | } | |
b0c43e36 C |
95 | } |
96 | } |