From 40e87e9ecc54e3513fb586928330a7855eb192c6 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 12 Jul 2018 19:02:00 +0200 Subject: Implement captions/subtitles --- .../shared/video-caption-add-modal.component.ts | 80 ++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts (limited to 'client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts') diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts new file mode 100644 index 000000000..45b8c71f8 --- /dev/null +++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts @@ -0,0 +1,80 @@ +import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' +import { ModalDirective } from 'ngx-bootstrap/modal' +import { FormReactive } from '@app/shared' +import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' +import { VideoCaptionsValidatorsService } from '@app/shared/forms/form-validators/video-captions-validators.service' +import { ServerService } from '@app/core' +import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model' + +@Component({ + selector: 'my-video-caption-add-modal', + styleUrls: [ './video-caption-add-modal.component.scss' ], + templateUrl: './video-caption-add-modal.component.html' +}) + +export class VideoCaptionAddModalComponent extends FormReactive implements OnInit { + @Input() existingCaptions: string[] + + @Output() captionAdded = new EventEmitter() + + @ViewChild('modal') modal: ModalDirective + + videoCaptionLanguages = [] + + private closingModal = false + + constructor ( + protected formValidatorService: FormValidatorService, + private serverService: ServerService, + private videoCaptionsValidatorsService: VideoCaptionsValidatorsService + ) { + super() + } + + get videoCaptionExtensions () { + return this.serverService.getConfig().videoCaption.file.extensions + } + + get videoCaptionMaxSize () { + return this.serverService.getConfig().videoCaption.file.size.max + } + + ngOnInit () { + this.videoCaptionLanguages = this.serverService.getVideoLanguages() + + this.buildForm({ + language: this.videoCaptionsValidatorsService.VIDEO_CAPTION_LANGUAGE, + captionfile: this.videoCaptionsValidatorsService.VIDEO_CAPTION_FILE + }) + } + + show () { + this.modal.show() + } + + hide () { + this.modal.hide() + } + + isReplacingExistingCaption () { + if (this.closingModal === true) return false + + const languageId = this.form.value[ 'language' ] + + return languageId && this.existingCaptions.indexOf(languageId) !== -1 + } + + async addCaption () { + this.closingModal = true + + const languageId = this.form.value[ 'language' ] + const languageObject = this.videoCaptionLanguages.find(l => l.id === languageId) + + this.captionAdded.emit({ + language: languageObject, + captionfile: this.form.value['captionfile'] + }) + + this.hide() + } +} -- cgit v1.2.3