]>
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' |
3 | import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' | |
4 | import { VideoCaptionEdit, VideoCaptionService, VideoCaptionWithPathEdit } from '@app/shared/shared-main' | |
2873a53e | 5 | import { NgbModal, 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, |
57d74ec8 | 32 | protected formValidatorService: FormValidatorService, |
33 | private modalService: NgbModal, | |
34 | private videoCaptionService: VideoCaptionService, | |
35 | private serverService: ServerService | |
36 | ) { | |
37 | super() | |
38 | } | |
39 | ||
40 | ngOnInit () { | |
41 | this.serverService.getVideoLanguages().subscribe(languages => this.videoCaptionLanguages = languages) | |
42 | ||
43 | this.buildForm({ captionFileContent: VIDEO_CAPTION_FILE_CONTENT_VALIDATOR }) | |
44 | ||
45 | this.loadCaptionContent() | |
46 | } | |
47 | ||
48 | loadCaptionContent () { | |
49 | const { captionPath } = this.videoCaption | |
70a8e50a C |
50 | if (!captionPath) return |
51 | ||
52 | this.videoCaptionService.getCaptionContent({ captionPath }) | |
53 | .subscribe(res => { | |
57d74ec8 | 54 | this.form.patchValue({ |
55 | captionFileContent: res | |
56 | }) | |
2873a53e | 57 | this.resetTextarea() |
57d74ec8 | 58 | }) |
57d74ec8 | 59 | } |
60 | ||
2873a53e | 61 | resetTextarea () { |
62 | this.textarea.nativeElement.scrollTop = 0 | |
63 | this.textarea.nativeElement.selectionStart = 0 | |
64 | this.textarea.nativeElement.selectionEnd = 0 | |
57d74ec8 | 65 | } |
66 | ||
67 | hide () { | |
57d74ec8 | 68 | this.openedModal.close() |
69 | } | |
70 | ||
71 | cancel () { | |
72 | this.hide() | |
73 | } | |
74 | ||
57d74ec8 | 75 | updateCaption () { |
76 | const format = 'vtt' | |
77 | const languageId = this.videoCaption.language.id | |
78 | const languageObject = this.videoCaptionLanguages.find(l => l.id === languageId) | |
70a8e50a | 79 | |
57d74ec8 | 80 | this.captionEdited.emit({ |
81 | language: languageObject, | |
82 | captionfile: new File([ this.form.value['captionFileContent'] ], `${languageId}.${format}`, { | |
83 | type: 'text/vtt', | |
84 | lastModified: Date.now() | |
85 | }), | |
86 | action: 'UPDATE' | |
87 | }) | |
88 | ||
89 | this.hide() | |
90 | } | |
91 | } |