diff options
author | Chocobozzz <me@florianbigard.com> | 2018-07-12 19:02:00 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-07-16 11:50:08 +0200 |
commit | 40e87e9ecc54e3513fb586928330a7855eb192c6 (patch) | |
tree | af1111ecba85f9cd8286811ff332a67cf21be2f6 /client/src/app/videos/+video-edit/shared/video-edit.component.ts | |
parent | d4557fd3ecc8d4ed4fb0e5c868929bc36c959ed2 (diff) | |
download | PeerTube-40e87e9ecc54e3513fb586928330a7855eb192c6.tar.gz PeerTube-40e87e9ecc54e3513fb586928330a7855eb192c6.tar.zst PeerTube-40e87e9ecc54e3513fb586928330a7855eb192c6.zip |
Implement captions/subtitles
Diffstat (limited to 'client/src/app/videos/+video-edit/shared/video-edit.component.ts')
-rw-r--r-- | client/src/app/videos/+video-edit/shared/video-edit.component.ts | 53 |
1 files changed, 49 insertions, 4 deletions
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.ts b/client/src/app/videos/+video-edit/shared/video-edit.component.ts index 66eb6611a..9394d7dab 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.ts +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | import { Component, Input, OnInit } from '@angular/core' | 1 | import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core' |
2 | import { FormGroup, ValidatorFn, Validators } from '@angular/forms' | 2 | import { FormArray, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms' |
3 | import { ActivatedRoute, Router } from '@angular/router' | 3 | import { ActivatedRoute, Router } from '@angular/router' |
4 | import { FormReactiveValidationMessages, VideoValidatorsService } from '@app/shared' | 4 | import { FormReactiveValidationMessages, VideoValidatorsService } from '@app/shared' |
5 | import { NotificationsService } from 'angular2-notifications' | 5 | import { NotificationsService } from 'angular2-notifications' |
@@ -8,6 +8,10 @@ import { VideoEdit } from '../../../shared/video/video-edit.model' | |||
8 | import { map } from 'rxjs/operators' | 8 | import { map } from 'rxjs/operators' |
9 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' | 9 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' |
10 | import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar' | 10 | import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar' |
11 | import { VideoCaptionService } from '@app/shared/video-caption' | ||
12 | import { VideoCaptionAddModalComponent } from '@app/videos/+video-edit/shared/video-caption-add-modal.component' | ||
13 | import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model' | ||
14 | import { removeElementFromArray } from '@app/shared/misc/utils' | ||
11 | 15 | ||
12 | @Component({ | 16 | @Component({ |
13 | selector: 'my-video-edit', | 17 | selector: 'my-video-edit', |
@@ -15,13 +19,16 @@ import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calend | |||
15 | templateUrl: './video-edit.component.html' | 19 | templateUrl: './video-edit.component.html' |
16 | }) | 20 | }) |
17 | 21 | ||
18 | export class VideoEditComponent implements OnInit { | 22 | export class VideoEditComponent implements OnInit, OnDestroy { |
19 | @Input() form: FormGroup | 23 | @Input() form: FormGroup |
20 | @Input() formErrors: { [ id: string ]: string } = {} | 24 | @Input() formErrors: { [ id: string ]: string } = {} |
21 | @Input() validationMessages: FormReactiveValidationMessages = {} | 25 | @Input() validationMessages: FormReactiveValidationMessages = {} |
22 | @Input() videoPrivacies = [] | 26 | @Input() videoPrivacies = [] |
23 | @Input() userVideoChannels: { id: number, label: string, support: string }[] = [] | 27 | @Input() userVideoChannels: { id: number, label: string, support: string }[] = [] |
24 | @Input() schedulePublicationPossible = true | 28 | @Input() schedulePublicationPossible = true |
29 | @Input() videoCaptions: VideoCaptionEdit[] = [] | ||
30 | |||
31 | @ViewChild('videoCaptionAddModal') videoCaptionAddModal: VideoCaptionAddModalComponent | ||
25 | 32 | ||
26 | // So that it can be accessed in the template | 33 | // So that it can be accessed in the template |
27 | readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY | 34 | readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY |
@@ -41,9 +48,12 @@ export class VideoEditComponent implements OnInit { | |||
41 | calendarTimezone: string | 48 | calendarTimezone: string |
42 | calendarDateFormat: string | 49 | calendarDateFormat: string |
43 | 50 | ||
51 | private schedulerInterval | ||
52 | |||
44 | constructor ( | 53 | constructor ( |
45 | private formValidatorService: FormValidatorService, | 54 | private formValidatorService: FormValidatorService, |
46 | private videoValidatorsService: VideoValidatorsService, | 55 | private videoValidatorsService: VideoValidatorsService, |
56 | private videoCaptionService: VideoCaptionService, | ||
47 | private route: ActivatedRoute, | 57 | private route: ActivatedRoute, |
48 | private router: Router, | 58 | private router: Router, |
49 | private notificationsService: NotificationsService, | 59 | private notificationsService: NotificationsService, |
@@ -91,6 +101,13 @@ export class VideoEditComponent implements OnInit { | |||
91 | defaultValues | 101 | defaultValues |
92 | ) | 102 | ) |
93 | 103 | ||
104 | this.form.addControl('captions', new FormArray([ | ||
105 | new FormGroup({ | ||
106 | language: new FormControl(), | ||
107 | captionfile: new FormControl() | ||
108 | }) | ||
109 | ])) | ||
110 | |||
94 | this.trackChannelChange() | 111 | this.trackChannelChange() |
95 | this.trackPrivacyChange() | 112 | this.trackPrivacyChange() |
96 | } | 113 | } |
@@ -102,7 +119,35 @@ export class VideoEditComponent implements OnInit { | |||
102 | this.videoLicences = this.serverService.getVideoLicences() | 119 | this.videoLicences = this.serverService.getVideoLicences() |
103 | this.videoLanguages = this.serverService.getVideoLanguages() | 120 | this.videoLanguages = this.serverService.getVideoLanguages() |
104 | 121 | ||
105 | setTimeout(() => this.minScheduledDate = new Date(), 1000 * 60) // Update every minute | 122 | this.schedulerInterval = setInterval(() => this.minScheduledDate = new Date(), 1000 * 60) // Update every minute |
123 | } | ||
124 | |||
125 | ngOnDestroy () { | ||
126 | if (this.schedulerInterval) clearInterval(this.schedulerInterval) | ||
127 | } | ||
128 | |||
129 | getExistingCaptions () { | ||
130 | return this.videoCaptions.map(c => c.language.id) | ||
131 | } | ||
132 | |||
133 | onCaptionAdded (caption: VideoCaptionEdit) { | ||
134 | this.videoCaptions.push( | ||
135 | Object.assign(caption, { action: 'CREATE' as 'CREATE' }) | ||
136 | ) | ||
137 | } | ||
138 | |||
139 | deleteCaption (caption: VideoCaptionEdit) { | ||
140 | // This caption is not on the server, just remove it from our array | ||
141 | if (caption.action === 'CREATE') { | ||
142 | removeElementFromArray(this.videoCaptions, caption) | ||
143 | return | ||
144 | } | ||
145 | |||
146 | caption.action = 'REMOVE' as 'REMOVE' | ||
147 | } | ||
148 | |||
149 | openAddCaptionModal () { | ||
150 | this.videoCaptionAddModal.show() | ||
106 | } | 151 | } |
107 | 152 | ||
108 | private trackPrivacyChange () { | 153 | private trackPrivacyChange () { |