UNPKG

ngx-dropzone-ivy

Version:

A highly configurable dropzone component for Angular.

58 lines 7.73 kB
import { Component } from '@angular/core'; import { NgxDropzonePreviewComponent } from '../ngx-dropzone-preview.component'; import { DomSanitizer } from '@angular/platform-browser'; import * as i0 from "@angular/core"; import * as i1 from "@angular/platform-browser"; import * as i2 from "@angular/common"; import * as i3 from "../ngx-dropzone-remove-badge/ngx-dropzone-remove-badge.component"; export class NgxDropzoneVideoPreviewComponent extends NgxDropzonePreviewComponent { constructor(sanitizer) { super(sanitizer); } ngOnInit() { if (!this.file) { console.error('No file to read. Please provide a file using the [file] Input property.'); return; } /** * We sanitize the URL here to enable the preview. * Please note that this could cause security issues! **/ this.videoSrc = URL.createObjectURL(this.file); this.sanitizedVideoSrc = this.sanitizer.bypassSecurityTrustUrl(this.videoSrc); } ngOnDestroy() { URL.revokeObjectURL(this.videoSrc); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxDropzoneVideoPreviewComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgxDropzoneVideoPreviewComponent, selector: "ngx-dropzone-video-preview", providers: [ { provide: NgxDropzonePreviewComponent, useExisting: NgxDropzoneVideoPreviewComponent } ], usesInheritance: true, ngImport: i0, template: ` <video *ngIf="sanitizedVideoSrc" controls (click)="$event.stopPropagation()"> <source [src]="sanitizedVideoSrc" /> </video> <ng-content select="ngx-dropzone-label"></ng-content> <ngx-dropzone-remove-badge *ngIf="removable" (click)="_remove($event)"> </ngx-dropzone-remove-badge> `, isInline: true, styles: [":host{min-width:unset!important;max-width:unset!important;padding:0!important}:host:hover video,:host:focus video{opacity:.7}:host:hover ngx-dropzone-remove-badge,:host:focus ngx-dropzone-remove-badge{opacity:1}:host ngx-dropzone-remove-badge{opacity:0}:host video{max-height:100%;border-radius:5px}:host ::ng-deep ngx-dropzone-label{position:absolute;overflow-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.NgxDropzoneRemoveBadgeComponent, selector: "ngx-dropzone-remove-badge" }] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxDropzoneVideoPreviewComponent, decorators: [{ type: Component, args: [{ selector: 'ngx-dropzone-video-preview', template: ` <video *ngIf="sanitizedVideoSrc" controls (click)="$event.stopPropagation()"> <source [src]="sanitizedVideoSrc" /> </video> <ng-content select="ngx-dropzone-label"></ng-content> <ngx-dropzone-remove-badge *ngIf="removable" (click)="_remove($event)"> </ngx-dropzone-remove-badge> `, providers: [ { provide: NgxDropzonePreviewComponent, useExisting: NgxDropzoneVideoPreviewComponent } ], styles: [":host{min-width:unset!important;max-width:unset!important;padding:0!important}:host:hover video,:host:focus video{opacity:.7}:host:hover ngx-dropzone-remove-badge,:host:focus ngx-dropzone-remove-badge{opacity:1}:host ngx-dropzone-remove-badge{opacity:0}:host video{max-height:100%;border-radius:5px}:host ::ng-deep ngx-dropzone-label{position:absolute;overflow-wrap:break-word}\n"] }] }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWRyb3B6b25lLXZpZGVvLXByZXZpZXcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRyb3B6b25lL3NyYy9saWIvbmd4LWRyb3B6b25lLXByZXZpZXcvbmd4LWRyb3B6b25lLXZpZGVvLXByZXZpZXcvbmd4LWRyb3B6b25lLXZpZGVvLXByZXZpZXcuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQXFCLE1BQU0sZUFBZSxDQUFDO0FBQzdELE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ2hGLE9BQU8sRUFBRSxZQUFZLEVBQVcsTUFBTSwyQkFBMkIsQ0FBQzs7Ozs7QUFvQmxFLE1BQU0sT0FBTyxnQ0FBaUMsU0FBUSwyQkFBMkI7SUFFL0UsWUFDRSxTQUF1QjtRQUV2QixLQUFLLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDbkIsQ0FBQztJQU9ELFFBQVE7UUFDTixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRTtZQUNkLE9BQU8sQ0FBQyxLQUFLLENBQUMseUVBQXlFLENBQUMsQ0FBQztZQUN6RixPQUFPO1NBQ1I7UUFFRDs7O1lBR0k7UUFDSixJQUFJLENBQUMsUUFBUSxHQUFHLEdBQUcsQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQy9DLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLHNCQUFzQixDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUNoRixDQUFDO0lBRUQsV0FBVztRQUNULEdBQUcsQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ3JDLENBQUM7K0dBN0JVLGdDQUFnQzttR0FBaEMsZ0NBQWdDLHFEQVBoQztZQUNUO2dCQUNFLE9BQU8sRUFBRSwyQkFBMkI7Z0JBQ3BDLFdBQVcsRUFBRSxnQ0FBZ0M7YUFDOUM7U0FDRixpREFkUzs7Ozs7OztFQU9WOzs0RkFTVyxnQ0FBZ0M7a0JBbEI1QyxTQUFTOytCQUNFLDRCQUE0QixZQUM1Qjs7Ozs7OztFQU9WLGFBRVc7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLDJCQUEyQjs0QkFDcEMsV0FBVyxrQ0FBa0M7eUJBQzlDO3FCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIE9uRGVzdHJveSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBOZ3hEcm9wem9uZVByZXZpZXdDb21wb25lbnQgfSBmcm9tICcuLi9uZ3gtZHJvcHpvbmUtcHJldmlldy5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBEb21TYW5pdGl6ZXIsIFNhZmVVcmwgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmd4LWRyb3B6b25lLXZpZGVvLXByZXZpZXcnLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8dmlkZW8gKm5nSWY9XCJzYW5pdGl6ZWRWaWRlb1NyY1wiIGNvbnRyb2xzIChjbGljayk9XCIkZXZlbnQuc3RvcFByb3BhZ2F0aW9uKClcIj5cclxuICAgICAgPHNvdXJjZSBbc3JjXT1cInNhbml0aXplZFZpZGVvU3JjXCIgLz5cclxuICAgIDwvdmlkZW8+XHJcbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJuZ3gtZHJvcHpvbmUtbGFiZWxcIj48L25nLWNvbnRlbnQ+XHJcbiAgICA8bmd4LWRyb3B6b25lLXJlbW92ZS1iYWRnZSAqbmdJZj1cInJlbW92YWJsZVwiIChjbGljayk9XCJfcmVtb3ZlKCRldmVudClcIj5cclxuICAgIDwvbmd4LWRyb3B6b25lLXJlbW92ZS1iYWRnZT5cclxuXHRgLFxyXG4gIHN0eWxlVXJsczogWycuL25neC1kcm9wem9uZS12aWRlby1wcmV2aWV3LmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgcHJvdmlkZXJzOiBbXHJcbiAgICB7XHJcbiAgICAgIHByb3ZpZGU6IE5neERyb3B6b25lUHJldmlld0NvbXBvbmVudCxcclxuICAgICAgdXNlRXhpc3Rpbmc6IE5neERyb3B6b25lVmlkZW9QcmV2aWV3Q29tcG9uZW50XHJcbiAgICB9XHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmd4RHJvcHpvbmVWaWRlb1ByZXZpZXdDb21wb25lbnQgZXh0ZW5kcyBOZ3hEcm9wem9uZVByZXZpZXdDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgc2FuaXRpemVyOiBEb21TYW5pdGl6ZXJcclxuICApIHtcclxuICAgIHN1cGVyKHNhbml0aXplcik7XHJcbiAgfVxyXG5cclxuICAvKiogVGhlIHZpZGVvIGRhdGEgc291cmNlLiAqL1xyXG4gIHNhbml0aXplZFZpZGVvU3JjOiBTYWZlVXJsO1xyXG5cclxuICBwcml2YXRlIHZpZGVvU3JjOiBzdHJpbmc7XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgaWYgKCF0aGlzLmZpbGUpIHtcclxuICAgICAgY29uc29sZS5lcnJvcignTm8gZmlsZSB0byByZWFkLiBQbGVhc2UgcHJvdmlkZSBhIGZpbGUgdXNpbmcgdGhlIFtmaWxlXSBJbnB1dCBwcm9wZXJ0eS4nKTtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogV2Ugc2FuaXRpemUgdGhlIFVSTCBoZXJlIHRvIGVuYWJsZSB0aGUgcHJldmlldy5cclxuICAgICAqIFBsZWFzZSBub3RlIHRoYXQgdGhpcyBjb3VsZCBjYXVzZSBzZWN1cml0eSBpc3N1ZXMhXHJcbiAgICAgKiovXHJcbiAgICB0aGlzLnZpZGVvU3JjID0gVVJMLmNyZWF0ZU9iamVjdFVSTCh0aGlzLmZpbGUpO1xyXG4gICAgdGhpcy5zYW5pdGl6ZWRWaWRlb1NyYyA9IHRoaXMuc2FuaXRpemVyLmJ5cGFzc1NlY3VyaXR5VHJ1c3RVcmwodGhpcy52aWRlb1NyYyk7XHJcbiAgfVxyXG5cclxuICBuZ09uRGVzdHJveSgpIHtcclxuICAgIFVSTC5yZXZva2VPYmplY3RVUkwodGhpcy52aWRlb1NyYyk7XHJcbiAgfVxyXG59XHJcbiJdfQ==