]>
Commit | Line | Data |
---|---|---|
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' | |
5 | ||
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 | |
18 | ||
19 | completeVideoDescriptionLoaded = false | |
20 | ||
21 | videoHTMLTruncatedDescription = '' | |
22 | videoHTMLDescription = '' | |
23 | ||
24 | constructor ( | |
25 | private videoService: VideoService, | |
26 | private notifier: Notifier, | |
27 | private markdownService: MarkdownService | |
28 | ) { } | |
29 | ||
30 | ngOnChanges () { | |
31 | this.descriptionLoading = false | |
32 | this.completeDescriptionShown = false | |
33 | ||
34 | this.setVideoDescriptionHTML() | |
35 | } | |
36 | ||
37 | showMoreDescription () { | |
38 | if (!this.completeVideoDescriptionLoaded) { | |
39 | return this.loadCompleteDescription() | |
40 | } | |
41 | ||
42 | this.completeDescriptionShown = true | |
43 | } | |
44 | ||
45 | showLessDescription () { | |
46 | this.completeDescriptionShown = false | |
47 | } | |
48 | ||
49 | loadCompleteDescription () { | |
50 | this.descriptionLoading = true | |
51 | ||
52 | this.videoService.loadCompleteDescription(this.video.descriptionPath) | |
53 | .subscribe({ | |
54 | next: description => { | |
55 | this.completeDescriptionShown = true | |
56 | this.descriptionLoading = false | |
57 | ||
58 | this.video.description = description | |
59 | ||
60 | this.setVideoDescriptionHTML() | |
61 | .catch(err => logger.error(err)) | |
62 | }, | |
63 | ||
64 | error: err => { | |
65 | this.descriptionLoading = false | |
66 | this.notifier.error(err.message) | |
67 | } | |
68 | }) | |
69 | } | |
70 | ||
71 | onTimestampClicked (timestamp: number) { | |
72 | this.timestampClicked.emit(timestamp) | |
73 | } | |
74 | ||
75 | getHTMLDescription () { | |
76 | if (this.completeDescriptionShown) { | |
77 | return this.videoHTMLDescription | |
78 | } | |
79 | ||
80 | return this.videoHTMLTruncatedDescription | |
81 | } | |
82 | ||
83 | private async setVideoDescriptionHTML () { | |
84 | { | |
85 | const html = await this.markdownService.textMarkdownToHTML({ markdown: this.video.description }) | |
86 | ||
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 | } | |
95 | } | |
96 | } |