]>
Commit | Line | Data |
---|---|---|
702785a5 C |
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' | |
0c237b19 C |
5 | import { NotificationsService } from 'angular2-notifications' |
6 | import { I18n } from '@ngx-translate/i18n-polyfill' | |
702785a5 C |
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 | }) | |
702785a5 C |
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, | |
0c237b19 C |
32 | private serverService: ServerService, |
33 | private notificationsService: NotificationsService, | |
34 | private i18n: I18n | |
702785a5 C |
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 | ||
0c237b19 C |
49 | if (file.size > this.maxVideoImageSize) { |
50 | this.notificationsService.error(this.i18n('Error'), this.i18n('This image is too large.')) | |
51 | return | |
52 | } | |
53 | ||
702785a5 C |
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 | } |