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

   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'
   7
   8 @Component({
   9   selector: 'my-video-image',
  10   styleUrls: [ './video-image.component.scss' ],
  11   templateUrl: './video-image.component.html',
  12   providers: [
  13     {
  14       provide: NG_VALUE_ACCESSOR,
  15       useExisting: forwardRef(() => VideoImageComponent),
  16       multi: true
  17     }
  18   ]
  19 })
  20 export class VideoImageComponent implements ControlValueAccessor {
  21   @Input() inputLabel: string
  22   @Input() inputName: string
  23   @Input() previewWidth: string
  24   @Input() previewHeight: string
  25
  26   imageSrc: SafeResourceUrl
  27
  28   private file: Blob
  29
  30   constructor (
  31     private sanitizer: DomSanitizer,
  32     private serverService: ServerService,
  33     private notificationsService: NotificationsService,
  34     private i18n: I18n
  35   ) {}
  36
  37   get videoImageExtensions () {
  38     return this.serverService.getConfig().video.image.extensions.join(',')
  39   }
  40
  41   get maxVideoImageSize () {
  42     return this.serverService.getConfig().video.image.size.max
  43   }
  44
  45   fileChange (event: any) {
  46     if (event.target.files && event.target.files.length) {
  47       const [ file ] = event.target.files
  48
  49       if (file.size > this.maxVideoImageSize) {
  50         this.notificationsService.error(this.i18n('Error'), this.i18n('This image is too large.'))
  51         return
  52       }
  53
  54       this.file = file
  55       this.propagateChange(this.file)
  56       this.updatePreview()
  57     }
  58   }
  59
  60   propagateChange = (_: any) => { /* empty */ }
  61
  62   writeValue (file: any) {
  63     this.file = file
  64     this.updatePreview()
  65   }
  66
  67   registerOnChange (fn: (_: any) => void) {
  68     this.propagateChange = fn
  69   }
  70
  71   registerOnTouched () {
  72     // Unused
  73   }
  74
  75   private updatePreview () {
  76     if (this.file) {
  77       const url = URL.createObjectURL(this.file)
  78       this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url)
  79     }
  80   }
  81 }