ngx-dropzone-ivy
Version:
A highly configurable dropzone component for Angular.
58 lines • 7.73 kB
JavaScript
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==