ngx-ratio-image
Version:
An Angular lib to show an image with variable ratio in container with a fixed ratio.
77 lines • 13.5 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class RatioImageComponent {
constructor() {
this.src = '';
this.width = 0;
this.height = 0;
this.debug = false;
this.imageWidth = 0;
this.imageHeight = 0;
this.naturalWidth = 0;
this.naturalHeight = 0;
this.imageLeft = 0;
this.imageTop = 0;
this.ratioImage = 1;
this.ratioBox = 1;
this.scale = 1;
if (this.debug)
console.log('constructor', this.src);
}
ngAfterViewInit() {
if (this.debug)
console.log('ngAfterViewInit', this.src, this.width, this.height);
}
onImageLoad(img) {
if (this.debug)
console.log('onImageLoad ', img);
if (img) {
this.naturalWidth = img.naturalWidth;
this.naturalHeight = img.naturalHeight;
if (this.width > 0 && this.height > 0) {
this.calculate();
}
}
}
ngOnChanges() {
this.calculate();
}
calculate() {
this.ratioImage = this.naturalWidth / this.naturalHeight;
this.ratioBox = this.width / this.height;
if (this.ratioBox > this.ratioImage) {
this.scale = this.height / this.naturalHeight;
this.imageLeft = (this.width - this.naturalWidth * this.scale) / 2;
}
else if (this.ratioBox < this.ratioImage) {
this.scale = this.width / this.naturalWidth;
this.imageTop = (this.height - this.naturalHeight * this.scale) / 2;
}
else {
this.scale = this.width / this.naturalWidth;
this.imageLeft = 0;
this.imageTop = 0;
}
if (this.debug)
console.log('calculate', this.src, this.naturalWidth + ' x ' + this.naturalHeight);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RatioImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: RatioImageComponent, selector: "ngx-ratio-image", inputs: { src: "src", width: "width", height: "height", debug: "debug" }, usesOnChanges: true, ngImport: i0, template: "<div\n\t[style.position]=\"'relative'\"\n\t[style.z-index]=\"2\"\n\t[style.border]=\"debug ? '1px solid red' : ''\"\n\t[style.width]=\"width + 'px'\"\n\t[style.height]=\"height + 'px'\"\n>\n\t<img\n\t\tclass=\"img-background\"\n\t\t#img\n\t\t[src]=\"src\"\n\t\t[style.position]=\"'absolute'\"\n\t\t[style.z-index]=\"1\"\n\t\t[style.filter]=\"'blur(5px)'\"\n\t\t[style.opacity]=\"0.5\"\n\t\t[width]=\"width\"\n\t\t[height]=\"height\"\n\t\t[style.overflow]=\"'hidden'\"\n\t\t(load)=\"onImageLoad(img)\"\n\t\talt=\"\"\n\t/>\n\t<img\n\t\tclass=\"img-main\"\n\t\t[src]=\"src\"\n\t\t[width]=\"naturalWidth * scale\"\n\t\t[height]=\"naturalHeight * scale\"\n\t\t[style.position]=\"'absolute'\"\n\t\t[style.z-index]=\"2\"\n\t\t[style.left]=\"imageLeft + 'px'\"\n\t\t[style.top]=\"imageTop + 'px'\"\n\t\talt=\"\"\n\t/>\n</div>\n<div *ngIf=\"debug\" style=\"margin-top: 10px\">\n\t<div>Container: {{ width }} x {{ height }}</div>\n\t<div>Natural: {{ naturalWidth }} x {{ naturalHeight }}</div>\n\t<div>Pos: {{ imageLeft }} , {{ imageTop }}</div>\n\t<div>Scale: {{ scale | number: '0.0-2' }}</div>\n\t<div>\n\t\tRatio Box , Image: {{ this.ratioBox | number: '0.0-2' }} : 1 , {{ this.ratioImage | number: '0.0-2' }} : 1\n\t</div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RatioImageComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-ratio-image', template: "<div\n\t[style.position]=\"'relative'\"\n\t[style.z-index]=\"2\"\n\t[style.border]=\"debug ? '1px solid red' : ''\"\n\t[style.width]=\"width + 'px'\"\n\t[style.height]=\"height + 'px'\"\n>\n\t<img\n\t\tclass=\"img-background\"\n\t\t#img\n\t\t[src]=\"src\"\n\t\t[style.position]=\"'absolute'\"\n\t\t[style.z-index]=\"1\"\n\t\t[style.filter]=\"'blur(5px)'\"\n\t\t[style.opacity]=\"0.5\"\n\t\t[width]=\"width\"\n\t\t[height]=\"height\"\n\t\t[style.overflow]=\"'hidden'\"\n\t\t(load)=\"onImageLoad(img)\"\n\t\talt=\"\"\n\t/>\n\t<img\n\t\tclass=\"img-main\"\n\t\t[src]=\"src\"\n\t\t[width]=\"naturalWidth * scale\"\n\t\t[height]=\"naturalHeight * scale\"\n\t\t[style.position]=\"'absolute'\"\n\t\t[style.z-index]=\"2\"\n\t\t[style.left]=\"imageLeft + 'px'\"\n\t\t[style.top]=\"imageTop + 'px'\"\n\t\talt=\"\"\n\t/>\n</div>\n<div *ngIf=\"debug\" style=\"margin-top: 10px\">\n\t<div>Container: {{ width }} x {{ height }}</div>\n\t<div>Natural: {{ naturalWidth }} x {{ naturalHeight }}</div>\n\t<div>Pos: {{ imageLeft }} , {{ imageTop }}</div>\n\t<div>Scale: {{ scale | number: '0.0-2' }}</div>\n\t<div>\n\t\tRatio Box , Image: {{ this.ratioBox | number: '0.0-2' }} : 1 , {{ this.ratioImage | number: '0.0-2' }} : 1\n\t</div>\n</div>\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { src: [{
type: Input,
args: [{ required: true }]
}], width: [{
type: Input,
args: [{ required: true }]
}], height: [{
type: Input,
args: [{ required: true }]
}], debug: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmF0aW8taW1hZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJhdGlvLWltYWdlL3NyYy9saWIvcmF0aW8taW1hZ2UvcmF0aW8taW1hZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJhdGlvLWltYWdlL3NyYy9saWIvcmF0aW8taW1hZ2UvcmF0aW8taW1hZ2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsS0FBSyxFQUFhLE1BQU0sZUFBZSxDQUFDOzs7QUFjM0UsTUFBTSxPQUFPLG1CQUFtQjtJQW1CL0I7UUFsQmtDLFFBQUcsR0FBRyxFQUFFLENBQUM7UUFDVCxVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ1YsV0FBTSxHQUFHLENBQUMsQ0FBQztRQUM3QixVQUFLLEdBQUcsS0FBSyxDQUFDO1FBRXZCLGVBQVUsR0FBRyxDQUFDLENBQUM7UUFDZixnQkFBVyxHQUFHLENBQUMsQ0FBQztRQUVoQixpQkFBWSxHQUFHLENBQUMsQ0FBQztRQUNqQixrQkFBYSxHQUFHLENBQUMsQ0FBQztRQUVsQixjQUFTLEdBQUcsQ0FBQyxDQUFDO1FBQ2QsYUFBUSxHQUFHLENBQUMsQ0FBQztRQUNiLGVBQVUsR0FBRyxDQUFDLENBQUM7UUFDZixhQUFRLEdBQUcsQ0FBQyxDQUFDO1FBRWIsVUFBSyxHQUFHLENBQUMsQ0FBQztRQUdoQixJQUFJLElBQUksQ0FBQyxLQUFLO1lBQUUsT0FBTyxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ3RELENBQUM7SUFFRCxlQUFlO1FBQ2QsSUFBSSxJQUFJLENBQUMsS0FBSztZQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsaUJBQWlCLEVBQUUsSUFBSSxDQUFDLEdBQUcsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNuRixDQUFDO0lBRUQsV0FBVyxDQUFDLEdBQVU7UUFDckIsSUFBSSxJQUFJLENBQUMsS0FBSztZQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsY0FBYyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQ2pELElBQUksR0FBRyxFQUFFO1lBQ1IsSUFBSSxDQUFDLFlBQVksR0FBRyxHQUFHLENBQUMsWUFBWSxDQUFDO1lBQ3JDLElBQUksQ0FBQyxhQUFhLEdBQUcsR0FBRyxDQUFDLGFBQWEsQ0FBQztZQUN2QyxJQUFJLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxJQUFJLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO2dCQUN0QyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7YUFDakI7U0FDRDtJQUNGLENBQUM7SUFFRCxXQUFXO1FBQ1YsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ2xCLENBQUM7SUFFTyxTQUFTO1FBQ2hCLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO1FBQ3pELElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBRXpDLElBQUksSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ3BDLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO1lBQzlDLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztTQUNuRTthQUFNLElBQUksSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQzNDLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDO1lBQzVDLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztTQUNwRTthQUFNO1lBQ04sSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUM7WUFDNUMsSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLENBQUM7WUFDbkIsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLENBQUM7U0FDbEI7UUFFRCxJQUFJLElBQUksQ0FBQyxLQUFLO1lBQUUsT0FBTyxDQUFDLEdBQUcsQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLEdBQUcsRUFBRSxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDcEcsQ0FBQzs4R0EzRFcsbUJBQW1CO2tHQUFuQixtQkFBbUIsc0pDZGhDLDZzQ0EwQ0E7OzJGRDVCYSxtQkFBbUI7a0JBTC9CLFNBQVM7K0JBQ0MsaUJBQWlCOzBFQUtPLEdBQUc7c0JBQXBDLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUNTLEtBQUs7c0JBQXRDLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUNTLE1BQU07c0JBQXZDLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUNULEtBQUs7c0JBQXBCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW50ZXJmYWNlIEltYWdlIHtcblx0Y2xpZW50V2lkdGg6IG51bWJlcjtcblx0Y2xpZW50SGVpZ2h0OiBudW1iZXI7XG5cdG5hdHVyYWxXaWR0aDogbnVtYmVyO1xuXHRuYXR1cmFsSGVpZ2h0OiBudW1iZXI7XG59XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogJ25neC1yYXRpby1pbWFnZScsXG5cdHRlbXBsYXRlVXJsOiAncmF0aW8taW1hZ2UuY29tcG9uZW50Lmh0bWwnLFxuXHRzdHlsZXM6IFtdXG59KVxuZXhwb3J0IGNsYXNzIFJhdGlvSW1hZ2VDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkNoYW5nZXMge1xuXHRASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBwdWJsaWMgc3JjID0gJyc7XG5cdEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHB1YmxpYyB3aWR0aCA9IDA7XG5cdEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHB1YmxpYyBoZWlnaHQgPSAwO1xuXHRASW5wdXQoKSBwdWJsaWMgZGVidWcgPSBmYWxzZTtcblxuXHRwdWJsaWMgaW1hZ2VXaWR0aCA9IDA7XG5cdHB1YmxpYyBpbWFnZUhlaWdodCA9IDA7XG5cblx0cHVibGljIG5hdHVyYWxXaWR0aCA9IDA7XG5cdHB1YmxpYyBuYXR1cmFsSGVpZ2h0ID0gMDtcblxuXHRwdWJsaWMgaW1hZ2VMZWZ0ID0gMDtcblx0cHVibGljIGltYWdlVG9wID0gMDtcblx0cHVibGljIHJhdGlvSW1hZ2UgPSAxO1xuXHRwdWJsaWMgcmF0aW9Cb3ggPSAxO1xuXG5cdHB1YmxpYyBzY2FsZSA9IDE7XG5cblx0Y29uc3RydWN0b3IoKSB7XG5cdFx0aWYgKHRoaXMuZGVidWcpIGNvbnNvbGUubG9nKCdjb25zdHJ1Y3RvcicsIHRoaXMuc3JjKTtcblx0fVxuXG5cdG5nQWZ0ZXJWaWV3SW5pdCgpIHtcblx0XHRpZiAodGhpcy5kZWJ1ZykgY29uc29sZS5sb2coJ25nQWZ0ZXJWaWV3SW5pdCcsIHRoaXMuc3JjLCB0aGlzLndpZHRoLCB0aGlzLmhlaWdodCk7XG5cdH1cblxuXHRvbkltYWdlTG9hZChpbWc6IEltYWdlKSB7XG5cdFx0aWYgKHRoaXMuZGVidWcpIGNvbnNvbGUubG9nKCdvbkltYWdlTG9hZCAnLCBpbWcpO1xuXHRcdGlmIChpbWcpIHtcblx0XHRcdHRoaXMubmF0dXJhbFdpZHRoID0gaW1nLm5hdHVyYWxXaWR0aDtcblx0XHRcdHRoaXMubmF0dXJhbEhlaWdodCA9IGltZy5uYXR1cmFsSGVpZ2h0O1xuXHRcdFx0aWYgKHRoaXMud2lkdGggPiAwICYmIHRoaXMuaGVpZ2h0ID4gMCkge1xuXHRcdFx0XHR0aGlzLmNhbGN1bGF0ZSgpO1xuXHRcdFx0fVxuXHRcdH1cblx0fVxuXG5cdG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuXHRcdHRoaXMuY2FsY3VsYXRlKCk7XG5cdH1cblxuXHRwcml2YXRlIGNhbGN1bGF0ZSgpIHtcblx0XHR0aGlzLnJhdGlvSW1hZ2UgPSB0aGlzLm5hdHVyYWxXaWR0aCAvIHRoaXMubmF0dXJhbEhlaWdodDtcblx0XHR0aGlzLnJhdGlvQm94ID0gdGhpcy53aWR0aCAvIHRoaXMuaGVpZ2h0O1xuXG5cdFx0aWYgKHRoaXMucmF0aW9Cb3ggPiB0aGlzLnJhdGlvSW1hZ2UpIHtcblx0XHRcdHRoaXMuc2NhbGUgPSB0aGlzLmhlaWdodCAvIHRoaXMubmF0dXJhbEhlaWdodDtcblx0XHRcdHRoaXMuaW1hZ2VMZWZ0ID0gKHRoaXMud2lkdGggLSB0aGlzLm5hdHVyYWxXaWR0aCAqIHRoaXMuc2NhbGUpIC8gMjtcblx0XHR9IGVsc2UgaWYgKHRoaXMucmF0aW9Cb3ggPCB0aGlzLnJhdGlvSW1hZ2UpIHtcblx0XHRcdHRoaXMuc2NhbGUgPSB0aGlzLndpZHRoIC8gdGhpcy5uYXR1cmFsV2lkdGg7XG5cdFx0XHR0aGlzLmltYWdlVG9wID0gKHRoaXMuaGVpZ2h0IC0gdGhpcy5uYXR1cmFsSGVpZ2h0ICogdGhpcy5zY2FsZSkgLyAyO1xuXHRcdH0gZWxzZSB7XG5cdFx0XHR0aGlzLnNjYWxlID0gdGhpcy53aWR0aCAvIHRoaXMubmF0dXJhbFdpZHRoO1xuXHRcdFx0dGhpcy5pbWFnZUxlZnQgPSAwO1xuXHRcdFx0dGhpcy5pbWFnZVRvcCA9IDA7XG5cdFx0fVxuXG5cdFx0aWYgKHRoaXMuZGVidWcpIGNvbnNvbGUubG9nKCdjYWxjdWxhdGUnLCB0aGlzLnNyYywgdGhpcy5uYXR1cmFsV2lkdGggKyAnIHggJyArIHRoaXMubmF0dXJhbEhlaWdodCk7XG5cdH1cbn1cbiIsIjxkaXZcblx0W3N0eWxlLnBvc2l0aW9uXT1cIidyZWxhdGl2ZSdcIlxuXHRbc3R5bGUuei1pbmRleF09XCIyXCJcblx0W3N0eWxlLmJvcmRlcl09XCJkZWJ1ZyA/ICcxcHggc29saWQgcmVkJyA6ICcnXCJcblx0W3N0eWxlLndpZHRoXT1cIndpZHRoICsgJ3B4J1wiXG5cdFtzdHlsZS5oZWlnaHRdPVwiaGVpZ2h0ICsgJ3B4J1wiXG4+XG5cdDxpbWdcblx0XHRjbGFzcz1cImltZy1iYWNrZ3JvdW5kXCJcblx0XHQjaW1nXG5cdFx0W3NyY109XCJzcmNcIlxuXHRcdFtzdHlsZS5wb3NpdGlvbl09XCInYWJzb2x1dGUnXCJcblx0XHRbc3R5bGUuei1pbmRleF09XCIxXCJcblx0XHRbc3R5bGUuZmlsdGVyXT1cIidibHVyKDVweCknXCJcblx0XHRbc3R5bGUub3BhY2l0eV09XCIwLjVcIlxuXHRcdFt3aWR0aF09XCJ3aWR0aFwiXG5cdFx0W2hlaWdodF09XCJoZWlnaHRcIlxuXHRcdFtzdHlsZS5vdmVyZmxvd109XCInaGlkZGVuJ1wiXG5cdFx0KGxvYWQpPVwib25JbWFnZUxvYWQoaW1nKVwiXG5cdFx0YWx0PVwiXCJcblx0Lz5cblx0PGltZ1xuXHRcdGNsYXNzPVwiaW1nLW1haW5cIlxuXHRcdFtzcmNdPVwic3JjXCJcblx0XHRbd2lkdGhdPVwibmF0dXJhbFdpZHRoICogc2NhbGVcIlxuXHRcdFtoZWlnaHRdPVwibmF0dXJhbEhlaWdodCAqIHNjYWxlXCJcblx0XHRbc3R5bGUucG9zaXRpb25dPVwiJ2Fic29sdXRlJ1wiXG5cdFx0W3N0eWxlLnotaW5kZXhdPVwiMlwiXG5cdFx0W3N0eWxlLmxlZnRdPVwiaW1hZ2VMZWZ0ICsgJ3B4J1wiXG5cdFx0W3N0eWxlLnRvcF09XCJpbWFnZVRvcCArICdweCdcIlxuXHRcdGFsdD1cIlwiXG5cdC8+XG48L2Rpdj5cbjxkaXYgKm5nSWY9XCJkZWJ1Z1wiIHN0eWxlPVwibWFyZ2luLXRvcDogMTBweFwiPlxuXHQ8ZGl2PkNvbnRhaW5lcjoge3sgd2lkdGggfX0geCB7eyBoZWlnaHQgfX08L2Rpdj5cblx0PGRpdj5OYXR1cmFsOiB7eyBuYXR1cmFsV2lkdGggfX0geCB7eyBuYXR1cmFsSGVpZ2h0IH19PC9kaXY+XG5cdDxkaXY+UG9zOiB7eyBpbWFnZUxlZnQgfX0gLCB7eyBpbWFnZVRvcCB9fTwvZGl2PlxuXHQ8ZGl2PlNjYWxlOiB7eyBzY2FsZSB8IG51bWJlcjogJzAuMC0yJyB9fTwvZGl2PlxuXHQ8ZGl2PlxuXHRcdFJhdGlvIEJveCAsIEltYWdlOiB7eyB0aGlzLnJhdGlvQm94IHwgbnVtYmVyOiAnMC4wLTInIH19IDogMSAsIHt7IHRoaXMucmF0aW9JbWFnZSB8IG51bWJlcjogJzAuMC0yJyB9fSA6IDFcblx0PC9kaXY+XG48L2Rpdj5cbiJdfQ==