diff options
Diffstat (limited to 'client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content')
3 files changed, 129 insertions, 0 deletions
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.html b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.html new file mode 100644 index 000000000..e8079c74e --- /dev/null +++ b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.html | |||
@@ -0,0 +1,34 @@ | |||
1 | <ng-container [formGroup]="form"> | ||
2 | <div class="modal-header"> | ||
3 | <h4 i18n class="modal-title">Edit caption</h4> | ||
4 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon> | ||
5 | </div> | ||
6 | |||
7 | <div class="modal-body"> | ||
8 | <label i18n for="captionFileContent">Caption</label> | ||
9 | <textarea | ||
10 | id="captionFileContent" | ||
11 | formControlName="captionFileContent" | ||
12 | class="form-control caption-textarea" | ||
13 | [ngClass]="{ 'input-error': formErrors['captionFileContent'] }" | ||
14 | #textarea | ||
15 | > | ||
16 | </textarea> | ||
17 | |||
18 | <div *ngIf="formErrors.captionFileContent" class="form-error"> | ||
19 | {{ formErrors.captionFileContent }} | ||
20 | </div> | ||
21 | </div> | ||
22 | |||
23 | <div class="modal-footer inputs"> | ||
24 | <input | ||
25 | type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button" | ||
26 | (click)="cancel()" (key.enter)="cancel()" | ||
27 | > | ||
28 | |||
29 | <input | ||
30 | type="submit" i18n-value value="Edit this caption" class="peertube-button orange-button" | ||
31 | [disabled]="!form.valid" (click)="updateCaption()" | ||
32 | > | ||
33 | </div> | ||
34 | </ng-container> | ||
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.scss b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.scss new file mode 100644 index 000000000..bd96f2b7a --- /dev/null +++ b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.scss | |||
@@ -0,0 +1,4 @@ | |||
1 | .caption-textarea { | ||
2 | min-height: 600px; | ||
3 | } | ||
4 | |||
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.ts b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.ts new file mode 100644 index 000000000..f33353d36 --- /dev/null +++ b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.ts | |||
@@ -0,0 +1,91 @@ | |||
1 | import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' | ||
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' | ||
5 | import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' | ||
6 | import { HTMLServerConfig, VideoConstant } from '@shared/models' | ||
7 | import { ServerService } from '../../../../core' | ||
8 | |||
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 | */ | ||
14 | @Component({ | ||
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' | ||
18 | }) | ||
19 | |||
20 | export class VideoCaptionEditModalContentComponent extends FormReactive implements OnInit { | ||
21 | @Input() videoCaption: VideoCaptionWithPathEdit | ||
22 | @Input() serverConfig: HTMLServerConfig | ||
23 | |||
24 | @Output() captionEdited = new EventEmitter<VideoCaptionEdit>() | ||
25 | |||
26 | @ViewChild('textarea', { static: true }) textarea!: ElementRef | ||
27 | |||
28 | videoCaptionLanguages: VideoConstant<string>[] = [] | ||
29 | |||
30 | constructor ( | ||
31 | protected openedModal: NgbActiveModal, | ||
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 | ||
50 | if (!captionPath) return | ||
51 | |||
52 | this.videoCaptionService.getCaptionContent({ captionPath }) | ||
53 | .subscribe(res => { | ||
54 | this.form.patchValue({ | ||
55 | captionFileContent: res | ||
56 | }) | ||
57 | this.resetTextarea() | ||
58 | }) | ||
59 | } | ||
60 | |||
61 | resetTextarea () { | ||
62 | this.textarea.nativeElement.scrollTop = 0 | ||
63 | this.textarea.nativeElement.selectionStart = 0 | ||
64 | this.textarea.nativeElement.selectionEnd = 0 | ||
65 | } | ||
66 | |||
67 | hide () { | ||
68 | this.openedModal.close() | ||
69 | } | ||
70 | |||
71 | cancel () { | ||
72 | this.hide() | ||
73 | } | ||
74 | |||
75 | updateCaption () { | ||
76 | const format = 'vtt' | ||
77 | const languageId = this.videoCaption.language.id | ||
78 | const languageObject = this.videoCaptionLanguages.find(l => l.id === languageId) | ||
79 | |||
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 | } | ||