1 import { Component, forwardRef, Input } from '@angular/core'
2 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
3 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
4 import { ServerService } from '@app/core'
5 import 'rxjs/add/observable/forkJoin'
8 selector: 'my-video-image',
9 styleUrls: [ './video-image.component.scss' ],
10 templateUrl: './video-image.component.html',
13 provide: NG_VALUE_ACCESSOR,
14 useExisting: forwardRef(() => VideoImageComponent),
20 export class VideoImageComponent implements ControlValueAccessor {
21 @Input() inputLabel: string
22 @Input() inputName: string
23 @Input() previewWidth: string
24 @Input() previewHeight: string
26 imageSrc: SafeResourceUrl
31 private sanitizer: DomSanitizer,
32 private serverService: ServerService
35 get videoImageExtensions () {
36 return this.serverService.getConfig().video.image.extensions.join(',')
39 get maxVideoImageSize () {
40 return this.serverService.getConfig().video.image.size.max
43 fileChange (event: any) {
44 if (event.target.files && event.target.files.length) {
45 const [ file ] = event.target.files
48 this.propagateChange(this.file)
53 propagateChange = (_: any) => { /* empty */ }
55 writeValue (file: any) {
60 registerOnChange (fn: (_: any) => void) {
61 this.propagateChange = fn
64 registerOnTouched () {
68 private updatePreview () {
70 const url = URL.createObjectURL(this.file)
71 this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url)