]>
Commit | Line | Data |
---|---|---|
57d74ec8 | 1 | import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' |
57d74ec8 | 2 | import { VIDEO_CAPTION_FILE_CONTENT_VALIDATOR } from '@app/shared/form-validators/video-captions-validators' |
5c5bcea2 | 3 | import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' |
57d74ec8 | 4 | import { VideoCaptionEdit, VideoCaptionService, VideoCaptionWithPathEdit } from '@app/shared/shared-main' |
5c5bcea2 | 5 | import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' |
57d74ec8 | 6 | import { HTMLServerConfig, VideoConstant } from '@shared/models' |
7 | import { ServerService } from '../../../../core' | |
8 | ||
2873a53e | 9 | /** |
10 | * https://github.com/valor-software/ngx-bootstrap/issues/3825 | |
11 | * https://stackblitz.com/edit/angular-t5dfp7 | |
12 | * https://medium.com/@izzatnadiri/how-to-pass-data-to-and-receive-from-ng-bootstrap-modals-916f2ad5d66e | |
13 | */ | |
57d74ec8 | 14 | @Component({ |
2873a53e | 15 | selector: 'my-video-caption-edit-modal-content', |
16 | styleUrls: [ './video-caption-edit-modal-content.component.scss' ], | |
17 | templateUrl: './video-caption-edit-modal-content.component.html' | |
57d74ec8 | 18 | }) |
19 | ||
2873a53e | 20 | export class VideoCaptionEditModalContentComponent extends FormReactive implements OnInit { |
57d74ec8 | 21 | @Input() videoCaption: VideoCaptionWithPathEdit |
22 | @Input() serverConfig: HTMLServerConfig | |
23 | ||
24 | @Output() captionEdited = new EventEmitter<VideoCaptionEdit>() | |
25 | ||
2873a53e | 26 | @ViewChild('textarea', { static: true }) textarea!: ElementRef |
57d74ec8 | 27 | |
28 | videoCaptionLanguages: VideoConstant<string>[] = [] | |
57d74ec8 | 29 | |
30 | constructor ( | |
2873a53e | 31 | protected openedModal: NgbActiveModal, |
5c5bcea2 | 32 | protected formReactiveService: FormReactiveService, |
57d74ec8 | 33 | private videoCaptionService: VideoCaptionService, |
34 | private serverService: ServerService | |
35 | ) { | |
36 | super() | |
37 | } | |
38 | ||
39 | ngOnInit () { | |
40 | this.serverService.getVideoLanguages().subscribe(languages => this.videoCaptionLanguages = languages) | |
41 | ||
42 | this.buildForm({ captionFileContent: VIDEO_CAPTION_FILE_CONTENT_VALIDATOR }) | |
43 | ||
44 | this.loadCaptionContent() | |
45 | } | |
46 | ||
47 | loadCaptionContent () { | |
48 | const { captionPath } = this.videoCaption | |
70a8e50a C |
49 | if (!captionPath) return |
50 | ||
51 | this.videoCaptionService.getCaptionContent({ captionPath }) | |
52 | .subscribe(res => { | |
57d74ec8 | 53 | this.form.patchValue({ |
54 | captionFileContent: res | |
55 | }) | |
2873a53e | 56 | this.resetTextarea() |
57d74ec8 | 57 | }) |
57d74ec8 | 58 | } |
59 | ||
2873a53e | 60 | resetTextarea () { |
61 | this.textarea.nativeElement.scrollTop = 0 | |
62 | this.textarea.nativeElement.selectionStart = 0 | |
63 | this.textarea.nativeElement.selectionEnd = 0 | |
57d74ec8 | 64 | } |
65 | ||
66 | hide () { | |
57d74ec8 | 67 | this.openedModal.close() |
68 | } | |
69 | ||
70 | cancel () { | |
71 | this.hide() | |
72 | } | |
73 | ||
57d74ec8 | 74 | updateCaption () { |
75 | const format = 'vtt' | |
76 | const languageId = this.videoCaption.language.id | |
77 | const languageObject = this.videoCaptionLanguages.find(l => l.id === languageId) | |
70a8e50a | 78 | |
57d74ec8 | 79 | this.captionEdited.emit({ |
80 | language: languageObject, | |
81 | captionfile: new File([ this.form.value['captionFileContent'] ], `${languageId}.${format}`, { | |
82 | type: 'text/vtt', | |
83 | lastModified: Date.now() | |
84 | }), | |
85 | action: 'UPDATE' | |
86 | }) | |
87 | ||
88 | this.hide() | |
89 | } | |
90 | } |