client/src/app/+videos/+video-edit/shared/video-caption-edit-modal/video-caption-edit-modal.component.ts

   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, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
   6 import { HTMLServerConfig, VideoConstant } from '@shared/models'
   7 import { ServerService } from '../../../../core'
   8
   9 @Component({
  10   selector: 'my-video-caption-edit-modal',
  11   styleUrls: [ './video-caption-edit-modal.component.scss' ],
  12   templateUrl: './video-caption-edit-modal.component.html'
  13 })
  14
  15 export class VideoCaptionEditModalComponent extends FormReactive implements OnInit {
  16   @Input() videoCaption: VideoCaptionWithPathEdit
  17   @Input() serverConfig: HTMLServerConfig
  18
  19   @Output() captionEdited = new EventEmitter<VideoCaptionEdit>()
  20
  21   @ViewChild('modal', { static: true }) modal: ElementRef
  22
  23   videoCaptionLanguages: VideoConstant<string>[] = []
  24   private openedModal: NgbModalRef
  25
  26   constructor (
  27     protected formValidatorService: FormValidatorService,
  28     private modalService: NgbModal,
  29     private videoCaptionService: VideoCaptionService,
  30     private serverService: ServerService
  31   ) {
  32     super()
  33   }
  34
  35   ngOnInit () {
  36     this.serverService.getVideoLanguages().subscribe(languages => this.videoCaptionLanguages = languages)
  37
  38     this.buildForm({ captionFileContent: VIDEO_CAPTION_FILE_CONTENT_VALIDATOR })
  39
  40     this.loadCaptionContent()
  41   }
  42
  43   loadCaptionContent () {
  44     const { captionPath } = this.videoCaption
  45     if (!captionPath) return
  46
  47     this.videoCaptionService.getCaptionContent({ captionPath })
  48       .subscribe(res => {
  49         this.form.patchValue({
  50           captionFileContent: res
  51         })
  52       })
  53   }
  54
  55   show () {
  56     this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
  57   }
  58
  59   hide () {
  60     this.openedModal.close()
  61   }
  62
  63   cancel () {
  64     this.hide()
  65   }
  66
  67   updateCaption () {
  68     const format = 'vtt'
  69     const languageId = this.videoCaption.language.id
  70     const languageObject = this.videoCaptionLanguages.find(l => l.id === languageId)
  71
  72     this.captionEdited.emit({
  73       language: languageObject,
  74       captionfile: new File([ this.form.value['captionFileContent'] ], `${languageId}.${format}`, {
  75         type: 'text/vtt',
  76         lastModified: Date.now()
  77       }),
  78       action: 'UPDATE'
  79     })
  80
  81     this.hide()
  82   }
  83 }