From 702785a54cb4d60f082ed15fb7f97f534a7ae8ed Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 16 Feb 2018 19:30:58 +0100 Subject: Add video image components --- .../+video-edit/shared/video-image.component.ts | 74 ++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 client/src/app/videos/+video-edit/shared/video-image.component.ts (limited to 'client/src/app/videos/+video-edit/shared/video-image.component.ts') diff --git a/client/src/app/videos/+video-edit/shared/video-image.component.ts b/client/src/app/videos/+video-edit/shared/video-image.component.ts new file mode 100644 index 000000000..3f5705a92 --- /dev/null +++ b/client/src/app/videos/+video-edit/shared/video-image.component.ts @@ -0,0 +1,74 @@ +import { Component, forwardRef, Input } from '@angular/core' +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' +import { ServerService } from '@app/core' +import 'rxjs/add/observable/forkJoin' + +@Component({ + selector: 'my-video-image', + styleUrls: [ './video-image.component.scss' ], + templateUrl: './video-image.component.html', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => VideoImageComponent), + multi: true + } + ] +}) + +export class VideoImageComponent implements ControlValueAccessor { + @Input() inputLabel: string + @Input() inputName: string + @Input() previewWidth: string + @Input() previewHeight: string + + imageSrc: SafeResourceUrl + + private file: Blob + + constructor ( + private sanitizer: DomSanitizer, + private serverService: ServerService + ) {} + + get videoImageExtensions () { + return this.serverService.getConfig().video.image.extensions.join(',') + } + + get maxVideoImageSize () { + return this.serverService.getConfig().video.image.size.max + } + + fileChange (event: any) { + if (event.target.files && event.target.files.length) { + const [ file ] = event.target.files + + this.file = file + this.propagateChange(this.file) + this.updatePreview() + } + } + + propagateChange = (_: any) => { /* empty */ } + + writeValue (file: any) { + this.file = file + this.updatePreview() + } + + registerOnChange (fn: (_: any) => void) { + this.propagateChange = fn + } + + registerOnTouched () { + // Unused + } + + private updatePreview () { + if (this.file) { + const url = URL.createObjectURL(this.file) + this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url) + } + } +} -- cgit v1.2.3