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