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 { NotificationsService } from 'angular2-notifications'
6 import { I18n } from '@ngx-translate/i18n-polyfill'
9 selector: 'my-video-image',
10 styleUrls: [ './video-image.component.scss' ],
11 templateUrl: './video-image.component.html',
14 provide: NG_VALUE_ACCESSOR,
15 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,
33 private notificationsService: NotificationsService,
37 get videoImageExtensions () {
38 return this.serverService.getConfig().video.image.extensions.join(',')
41 get maxVideoImageSize () {
42 return this.serverService.getConfig().video.image.size.max
45 fileChange (event: any) {
46 if (event.target.files && event.target.files.length) {
47 const [ file ] = event.target.files
49 if (file.size > this.maxVideoImageSize) {
50 this.notificationsService.error(this.i18n('Error'), this.i18n('This image is too large.'))
55 this.propagateChange(this.file)
60 propagateChange = (_: any) => { /* empty */ }
62 writeValue (file: any) {
67 registerOnChange (fn: (_: any) => void) {
68 this.propagateChange = fn
71 registerOnTouched () {
75 private updatePreview () {
77 const url = URL.createObjectURL(this.file)
78 this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url)