ng-image-fullscreen-view
Version:
An Angular responsive image full screen viewer. Also support youtube and mp4 video urls, captures swipes from phones and tablets, Compatible with Angular Universal, Captures keyboard next/previous arrow.
76 lines • 11.8 kB
JavaScript
import { Component, Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { NgImageFullscreenViewService } from '../ng-image-fullscreen-view.service';
const youtubeRegExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/, validFileExtensions = ['jpeg', 'jpg', 'gif', 'png'], validVideoExtensions = ['mp4'];
export class SliderCustomImageComponent {
constructor(imageFullscreenViewService, sanitizer) {
this.imageFullscreenViewService = imageFullscreenViewService;
this.sanitizer = sanitizer;
this.YOUTUBE = 'youtube';
this.IMAGE = 'image';
this.VIDEO = 'video';
this.fileUrl = '';
this.fileExtension = '';
this.type = this.IMAGE;
// @inputs
this.videoAutoPlay = false;
this.showVideoControls = 1;
this.isVideo = false;
this.alt = '';
this.title = '';
this.direction = 'ltr';
}
set imageUrl(url) {
if (url && typeof (url) === 'string') {
this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
this.fileExtension = url.split(/[#?]/)[0].split('.').pop().trim();
if (this.imageFullscreenViewService.base64FileExtension(url)
&& (validFileExtensions.indexOf(this.imageFullscreenViewService.base64FileExtension(url).toLowerCase()) > -1
|| validVideoExtensions.indexOf(this.imageFullscreenViewService.base64FileExtension(url).toLowerCase()) > -1)) {
this.fileExtension = this.imageFullscreenViewService.base64FileExtension(url);
}
// verify for youtube url
const match = url.match(youtubeRegExp);
if (match && match[2].length === 11) {
this.type = this.YOUTUBE;
this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`${'//www.youtube.com/embed/'}${match[2]}${this.videoAutoPlay ? '?autoplay=1&enablejsapi=1' : '?autoplay=0&enablejsapi=1'}${'&controls='}${this.showVideoControls}`);
}
else if (this.fileExtension && validFileExtensions.indexOf(this.fileExtension.toLowerCase()) > -1) {
this.type = this.IMAGE;
}
else if (this.fileExtension && validVideoExtensions.indexOf(this.fileExtension.toLowerCase()) > -1) {
this.type = this.VIDEO;
}
}
}
videoClickHandler(event) {
if (event && event.srcElement && !this.showVideoControls) {
if (event.srcElement.paused) {
event.srcElement.play();
}
else {
event.srcElement.pause();
}
}
}
}
SliderCustomImageComponent.decorators = [
{ type: Component, args: [{
selector: 'custom-img',
template: "<div *ngIf=\"fileUrl\" class=\"custom-image-main\">\n <img class=\"image\"\n *ngIf=\"type === IMAGE && fileUrl\"\n [src]=\"fileUrl\"\n [alt]=\"alt\"\n [title]=\"title\">\n <iframe class=\"youtube\"\n *ngIf=\"type === YOUTUBE && fileUrl\"\n [src]=\"fileUrl\"\n frameborder=\"0\"\n allowfullscreen></iframe>\n <video class=\"video\"\n (click)=\"videoClickHandler($event)\"\n [autoplay]=\"videoAutoPlay\"\n *ngIf=\"type === VIDEO\"\n type=\"video/mp4\"\n [attr.controls]=\"showVideoControls ? showVideoControls : null\"\n controlsList=\"nodownload\">\n <source [src]=\"fileUrl\" type=\"video/mp4\">\n Your browser does not support the video tag.\n </video>\n <div [dir]=\"direction\" *ngIf=\"!fileUrl\" class=\"invalid-msg\">Invalid file format</div>\n <span *ngIf=\"type === YOUTUBE || type === VIDEO || isVideo\" class=\"youtube-icon\"></span>\n</div>"
},] }
];
SliderCustomImageComponent.ctorParameters = () => [
{ type: NgImageFullscreenViewService },
{ type: DomSanitizer }
];
SliderCustomImageComponent.propDecorators = {
videoAutoPlay: [{ type: Input }],
showVideoControls: [{ type: Input }],
imageUrl: [{ type: Input }],
isVideo: [{ type: Input }],
alt: [{ type: Input }],
title: [{ type: Input }],
direction: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLWN1c3RvbS1pbWFnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1pbWFnZS1mdWxsc2NyZWVuLXZpZXcvc3JjL2xpYi9zbGlkZXItY3VzdG9tLWltYWdlL3NsaWRlci1jdXN0b20taW1hZ2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCxTQUFTLEVBQ1QsS0FBSyxFQUNSLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxZQUFZLEVBQW1CLE1BQU0sMkJBQTJCLENBQUM7QUFDMUUsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFFbkYsTUFBTSxhQUFhLEdBQUcsc0VBQXNFLEVBQ3hGLG1CQUFtQixHQUFHLENBQUMsTUFBTSxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsS0FBSyxDQUFDLEVBQ25ELG9CQUFvQixHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7QUFNbkMsTUFBTSxPQUFPLDBCQUEwQjtJQXNDbkMsWUFBbUIsMEJBQXdELEVBQVUsU0FBdUI7UUFBekYsK0JBQTBCLEdBQTFCLDBCQUEwQixDQUE4QjtRQUFVLGNBQVMsR0FBVCxTQUFTLENBQWM7UUFyQzVHLFlBQU8sR0FBRyxTQUFTLENBQUM7UUFDcEIsVUFBSyxHQUFHLE9BQU8sQ0FBQztRQUNoQixVQUFLLEdBQUcsT0FBTyxDQUFDO1FBQ2hCLFlBQU8sR0FBb0IsRUFBRSxDQUFDO1FBQzlCLGtCQUFhLEdBQUcsRUFBRSxDQUFDO1FBQ25CLFNBQUksR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBRWxCLFVBQVU7UUFDRCxrQkFBYSxHQUFZLEtBQUssQ0FBQztRQUMvQixzQkFBaUIsR0FBVyxDQUFDLENBQUM7UUF1QjlCLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFDaEIsUUFBRyxHQUFXLEVBQUUsQ0FBQztRQUNqQixVQUFLLEdBQVcs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c0JBc0JMLEtBQUs7a0JBQ0wsS0FBSztvQkFDTCxLQUFLO3dCQUNMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENvbXBvbmVudCxcbiAgICBJbnB1dFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERvbVNhbml0aXplciwgU2FmZVJlc291cmNlVXJsIH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XG5pbXBvcnQgeyBOZ0ltYWdlRnVsbHNjcmVlblZpZXdTZXJ2aWNlIH0gZnJvbSAnLi4vbmctaW1hZ2UtZnVsbHNjcmVlbi12aWV3LnNlcnZpY2UnO1xuXG5jb25zdCB5b3V0dWJlUmVnRXhwID0gL14uKih5b3V0dS5iZVxcL3x2XFwvfHVcXC9cXHdcXC98ZW1iZWRcXC98d2F0Y2hcXD92PXxcXCZ2PXxcXD92PSkoW14jXFwmXFw/XSopLiovLFxuICAgIHZhbGlkRmlsZUV4dGVuc2lvbnMgPSBbJ2pwZWcnLCAnanBnJywgJ2dpZicsICdwbmcnXSxcbiAgICB2YWxpZFZpZGVvRXh0ZW5zaW9ucyA9IFsnbXA0J107XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnY3VzdG9tLWltZycsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3NsaWRlci1jdXN0b20taW1hZ2UuY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIFNsaWRlckN1c3RvbUltYWdlQ29tcG9uZW50IHtcbiAgICBZT1VUVUJFID0gJ3lvdXR1YmUnO1xuICAgIElNQUdFID0gJ2ltYWdlJztcbiAgICBWSURFTyA9ICd2aWRlbyc7XG4gICAgZmlsZVVybDogU2FmZVJlc291cmNlVXJsID0gJyc7XG4gICAgZmlsZUV4dGVuc2lvbiA9ICcnO1xuICAgIHR5cGUgPSB0aGlzLklNQUdFO1xuXG4gICAgLy8gQGlucHV0c1xuICAgIEBJbnB1dCgpIHZpZGVvQXV0b1BsYXk6IGJvb2xlYW4gPSBmYWxzZTtcbiAgICBASW5wdXQoKSBzaG93VmlkZW9Db250cm9sczogbnVtYmVyID0gMTtcbiAgICBASW5wdXQoKVxuICAgIHNldCBpbWFnZVVybCh1cmwpIHtcbiAgICAgICAgaWYgKHVybCAmJiB0eXBlb2YgKHVybCkgPT09ICdzdHJpbmcnKSB7XG4gICAgICAgICAgICB0aGlzLmZpbGVVcmwgPSB0aGlzLnNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0UmVzb3VyY2VVcmwodXJsKTtcbiAgICAgICAgICAgIHRoaXMuZmlsZUV4dGVuc2lvbiA9IHVybC5zcGxpdCgvWyM/XS8pWzBdLnNwbGl0KCcuJykucG9wKCkudHJpbSgpO1xuICAgICAgICAgICAgaWYgKHRoaXMuaW1hZ2VGdWxsc2NyZWVuVmlld1NlcnZpY2UuYmFzZTY0RmlsZUV4dGVuc2lvbih1cmwpXG4gICAgICAgICAgICAmJiAodmFsaWRGaWxlRXh0ZW5zaW9ucy5pbmRleE9mKHRoaXMuaW1hZ2VGdWxsc2NyZWVuVmlld1NlcnZpY2UuYmFzZTY0RmlsZUV4dGVuc2lvbih1cmwpLnRvTG93ZXJDYXNlKCkpID4gLTFcbiAgICAgICAgICAgIHx8IHZhbGlkVmlkZW9FeHRlbnNpb25zLmluZGV4T2YodGhpcy5pbWFnZUZ1bGxzY3JlZW5WaWV3U2VydmljZS5iYXNlNjRGaWxlRXh0ZW5zaW9uKHVybCkudG9Mb3dlckNhc2UoKSkgPiAtMSkpIHtcbiAgICAgICAgICAgICAgICB0aGlzLmZpbGVFeHRlbnNpb24gPSB0aGlzLmltYWdlRnVsbHNjcmVlblZpZXdTZXJ2aWNlLmJhc2U2NEZpbGVFeHRlbnNpb24odXJsKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIC8vIHZlcmlmeSBmb3IgeW91dHViZSB1cmxcbiAgICAgICAgICAgIGNvbnN0IG1hdGNoID0gdXJsLm1hdGNoKHlvdXR1YmVSZWdFeHApO1xuICAgICAgICAgICAgaWYgKG1hdGNoICYmIG1hdGNoWzJdLmxlbmd0aCA9PT0gMTEpIHtcbiAgICAgICAgICAgICAgICB0aGlzLnR5cGUgPSB0aGlzLllPVVRVQkU7XG4gICAgICAgICAgICAgICAgdGhpcy5maWxlVXJsID0gdGhpcy5zYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdFJlc291cmNlVXJsKGAkeycvL3d3dy55b3V0dWJlLmNvbS9lbWJlZC8nfSR7bWF0Y2hbMl19JHt0aGlzLnZpZGVvQXV0b1BsYXkgPyAnP2F1dG9wbGF5PTEmZW5hYmxlanNhcGk9MScgOiAnP2F1dG9wbGF5PTAmZW5hYmxlanNhcGk9MSd9JHsnJmNvbnRyb2xzPSd9JHt0aGlzLnNob3dWaWRlb0NvbnRyb2xzfWApO1xuICAgICAgICAgICAgfSBlbHNlIGlmICh0aGlzLmZpbGVFeHRlbnNpb24gJiYgdmFsaWRGaWxlRXh0ZW5zaW9ucy5pbmRleE9mKHRoaXMuZmlsZUV4dGVuc2lvbi50b0xvd2VyQ2FzZSgpKSA+IC0xKSB7XG4gICAgICAgICAgICAgICAgdGhpcy50eXBlID0gdGhpcy5JTUFHRTtcbiAgICAgICAgICAgIH0gZWxzZSBpZiAodGhpcy5maWxlRXh0ZW5zaW9uICYmIHZhbGlkVmlkZW9FeHRlbnNpb25zLmluZGV4T2YodGhpcy5maWxlRXh0ZW5zaW9uLnRvTG93ZXJDYXNlKCkpID4gLTEpIHtcbiAgICAgICAgICAgICAgICB0aGlzLnR5cGUgPSB0aGlzLlZJREVPO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuICAgIEBJbnB1dCgpIGlzVmlkZW8gPSBmYWxzZTtcbiAgICBASW5wdXQoKSBhbHQ6IFN0cmluZyA9ICcnO1xuICAgIEBJbnB1dCgpIHRpdGxlOiBTdHJpbmcgPSAnJztcbiAgICBASW5wdXQoKSBkaXJlY3Rpb246IHN0cmluZyA9ICdsdHInO1xuXG4gICAgY29uc3RydWN0b3IocHVibGljIGltYWdlRnVsbHNjcmVlblZpZXdTZXJ2aWNlOiBOZ0ltYWdlRnVsbHNjcmVlblZpZXdTZXJ2aWNlLCBwcml2YXRlIHNhbml0aXplcjogRG9tU2FuaXRpemVyKSB7XG4gICAgfVxuXG4gICAgdmlkZW9DbGlja0hhbmRsZXIoZXZlbnQpIHtcbiAgICAgICAgaWYgKGV2ZW50ICYmIGV2ZW50LnNyY0VsZW1lbnQgJiYgIXRoaXMuc2hvd1ZpZGVvQ29udHJvbHMpIHtcbiAgICAgICAgICAgIGlmIChldmVudC5zcmNFbGVtZW50LnBhdXNlZCkge1xuICAgICAgICAgICAgICAgIGV2ZW50LnNyY0VsZW1lbnQucGxheSgpO1xuICAgICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgICAgICBldmVudC5zcmNFbGVtZW50LnBhdXNlKCk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG59XG4iXX0=