client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.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, 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 }