diff options
author | lutangar <johan.dufour@gmail.com> | 2021-12-22 18:36:56 +0100 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2022-02-28 14:29:01 +0100 |
commit | 57d74ec83d64daaf2efc6a3dad8adbcfe1f59415 (patch) | |
tree | 3d56b8c45e6f7c88149c34e9c93b994c94587107 /client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.ts | |
parent | e66d0892b12c5b3b3e8a6b7a4129103a912486a9 (diff) | |
download | PeerTube-57d74ec83d64daaf2efc6a3dad8adbcfe1f59415.tar.gz PeerTube-57d74ec83d64daaf2efc6a3dad8adbcfe1f59415.tar.zst PeerTube-57d74ec83d64daaf2efc6a3dad8adbcfe1f59415.zip |
Add simple subtitle edition from video captions tab
Introduce a new __Edit__ button on a subtitle.
It opens a modal with simple textarea allowing the user to do quick corrections on a subtitle.
Diffstat (limited to 'client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.ts')
-rw-r--r-- | client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.ts | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.ts b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.ts new file mode 100644 index 000000000..d2232a38e --- /dev/null +++ b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.ts | |||
@@ -0,0 +1,92 @@ | |||
1 | import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' | ||
2 | |||
3 | import { VIDEO_CAPTION_FILE_CONTENT_VALIDATOR } from '@app/shared/form-validators/video-captions-validators' | ||
4 | import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' | ||
5 | import { VideoCaptionEdit, VideoCaptionService, VideoCaptionWithPathEdit } from '@app/shared/shared-main' | ||
6 | import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap' | ||
7 | import { HTMLServerConfig, VideoConstant } from '@shared/models' | ||
8 | import { ServerService } from '../../../../core' | ||
9 | |||
10 | @Component({ | ||
11 | selector: 'my-video-caption-edit-modal', | ||
12 | styleUrls: [ './video-caption-edit-modal.component.scss' ], | ||
13 | templateUrl: './video-caption-edit-modal.component.html' | ||
14 | }) | ||
15 | |||
16 | export class VideoCaptionEditModalComponent extends FormReactive implements OnInit { | ||
17 | @Input() videoCaption: VideoCaptionWithPathEdit | ||
18 | @Input() serverConfig: HTMLServerConfig | ||
19 | |||
20 | @Output() captionEdited = new EventEmitter<VideoCaptionEdit>() | ||
21 | |||
22 | @ViewChild('modal', { static: true }) modal: ElementRef | ||
23 | |||
24 | videoCaptionLanguages: VideoConstant<string>[] = [] | ||
25 | private openedModal: NgbModalRef | ||
26 | private closingModal = false | ||
27 | |||
28 | constructor ( | ||
29 | protected formValidatorService: FormValidatorService, | ||
30 | private modalService: NgbModal, | ||
31 | private videoCaptionService: VideoCaptionService, | ||
32 | private serverService: ServerService | ||
33 | ) { | ||
34 | super() | ||
35 | } | ||
36 | |||
37 | ngOnInit () { | ||
38 | this.serverService.getVideoLanguages().subscribe(languages => this.videoCaptionLanguages = languages) | ||
39 | |||
40 | this.buildForm({ captionFileContent: VIDEO_CAPTION_FILE_CONTENT_VALIDATOR }) | ||
41 | |||
42 | this.loadCaptionContent() | ||
43 | } | ||
44 | |||
45 | loadCaptionContent () { | ||
46 | const { captionPath } = this.videoCaption | ||
47 | if (captionPath) { | ||
48 | this.videoCaptionService.getCaptionContent({ | ||
49 | captionPath | ||
50 | }).subscribe((res) => { | ||
51 | this.form.patchValue({ | ||
52 | captionFileContent: res | ||
53 | }) | ||
54 | }) | ||
55 | } | ||
56 | } | ||
57 | |||
58 | show () { | ||
59 | this.closingModal = false | ||
60 | |||
61 | this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false }) | ||
62 | } | ||
63 | |||
64 | hide () { | ||
65 | this.closingModal = true | ||
66 | this.openedModal.close() | ||
67 | } | ||
68 | |||
69 | cancel () { | ||
70 | this.hide() | ||
71 | } | ||
72 | |||
73 | isReplacingExistingCaption () { | ||
74 | return true | ||
75 | } | ||
76 | |||
77 | updateCaption () { | ||
78 | const format = 'vtt' | ||
79 | const languageId = this.videoCaption.language.id | ||
80 | const languageObject = this.videoCaptionLanguages.find(l => l.id === languageId) | ||
81 | this.captionEdited.emit({ | ||
82 | language: languageObject, | ||
83 | captionfile: new File([ this.form.value['captionFileContent'] ], `${languageId}.${format}`, { | ||
84 | type: 'text/vtt', | ||
85 | lastModified: Date.now() | ||
86 | }), | ||
87 | action: 'UPDATE' | ||
88 | }) | ||
89 | |||
90 | this.hide() | ||
91 | } | ||
92 | } | ||