diff options
Diffstat (limited to 'client/src/app/+videos/+video-watch/video-description.component.ts')
-rw-r--r-- | client/src/app/+videos/+video-watch/video-description.component.ts | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/client/src/app/+videos/+video-watch/video-description.component.ts b/client/src/app/+videos/+video-watch/video-description.component.ts new file mode 100644 index 000000000..2ea3b206f --- /dev/null +++ b/client/src/app/+videos/+video-watch/video-description.component.ts | |||
@@ -0,0 +1,87 @@ | |||
1 | import { Component, EventEmitter, Inject, Input, LOCALE_ID, OnChanges, Output } from '@angular/core' | ||
2 | import { MarkdownService, Notifier } from '@app/core' | ||
3 | import { VideoDetails, VideoService } from '@app/shared/shared-main' | ||
4 | |||
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 | completeVideoDescription: string | ||
19 | shortVideoDescription: string | ||
20 | videoHTMLDescription = '' | ||
21 | |||
22 | constructor ( | ||
23 | private videoService: VideoService, | ||
24 | private notifier: Notifier, | ||
25 | private markdownService: MarkdownService, | ||
26 | @Inject(LOCALE_ID) private localeId: string | ||
27 | ) { } | ||
28 | |||
29 | ngOnChanges () { | ||
30 | this.descriptionLoading = false | ||
31 | this.completeDescriptionShown = false | ||
32 | this.completeVideoDescription = undefined | ||
33 | |||
34 | this.setVideoDescriptionHTML() | ||
35 | } | ||
36 | |||
37 | showMoreDescription () { | ||
38 | if (this.completeVideoDescription === undefined) { | ||
39 | return this.loadCompleteDescription() | ||
40 | } | ||
41 | |||
42 | this.updateVideoDescription(this.completeVideoDescription) | ||
43 | this.completeDescriptionShown = true | ||
44 | } | ||
45 | |||
46 | showLessDescription () { | ||
47 | this.updateVideoDescription(this.shortVideoDescription) | ||
48 | this.completeDescriptionShown = false | ||
49 | } | ||
50 | |||
51 | loadCompleteDescription () { | ||
52 | this.descriptionLoading = true | ||
53 | |||
54 | this.videoService.loadCompleteDescription(this.video.descriptionPath) | ||
55 | .subscribe( | ||
56 | description => { | ||
57 | this.completeDescriptionShown = true | ||
58 | this.descriptionLoading = false | ||
59 | |||
60 | this.shortVideoDescription = this.video.description | ||
61 | this.completeVideoDescription = description | ||
62 | |||
63 | this.updateVideoDescription(this.completeVideoDescription) | ||
64 | }, | ||
65 | |||
66 | error => { | ||
67 | this.descriptionLoading = false | ||
68 | this.notifier.error(error.message) | ||
69 | } | ||
70 | ) | ||
71 | } | ||
72 | |||
73 | onTimestampClicked (timestamp: number) { | ||
74 | this.timestampClicked.emit(timestamp) | ||
75 | } | ||
76 | |||
77 | private updateVideoDescription (description: string) { | ||
78 | this.video.description = description | ||
79 | this.setVideoDescriptionHTML() | ||
80 | .catch(err => console.error(err)) | ||
81 | } | ||
82 | |||
83 | private async setVideoDescriptionHTML () { | ||
84 | const html = await this.markdownService.textMarkdownToHTML(this.video.description) | ||
85 | this.videoHTMLDescription = this.markdownService.processVideoTimestamps(html) | ||
86 | } | ||
87 | } | ||