ngx-screen-saver
Version:
Screen saver component for Angular.
55 lines • 8.27 kB
JavaScript
import { Component, Input } from '@angular/core';
import p5 from 'p5';
import { stars, dvd, fireworks } from '../../screen-savers';
import * as i0 from "@angular/core";
import * as i1 from "../../services/idle-detection.service";
export class NgxScreenSaverComponent {
constructor(idleDetectionService) {
this.idleDetectionService = idleDetectionService;
this.idleAfterMs = 10000;
this.variant = 'fireworks';
this.opacity = 1;
this.zIndex = 1;
this.showScreenSaver = false;
this.screenSavers = {
stars,
dvd,
fireworks,
};
}
ngOnInit() {
document.documentElement.style.setProperty('--ngx-screen-saver-opacity', this.opacity.toString());
document.documentElement.style.setProperty('--ngx-screen-saver-z-index', this.zIndex.toString());
this.idleDetectionService.startIdleDetection(this.idleAfterMs);
this.isIdleSubscription = this.idleDetectionService.isIdle$.subscribe((isIdle) => {
if (isIdle === true) {
this.showScreenSaver = true;
this.screenSaver = new p5(this.screenSavers[this.variant], document.querySelector('ngx-screen-saver'));
}
else {
this.showScreenSaver = false;
this.screenSaver?.remove();
this.screenSaver = undefined;
}
});
}
ngOnDestroy() {
this.idleDetectionService.stopIdleDetection();
this.isIdleSubscription.unsubscribe();
}
}
NgxScreenSaverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NgxScreenSaverComponent, deps: [{ token: i1.IdleDetectionService }], target: i0.ɵɵFactoryTarget.Component });
NgxScreenSaverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NgxScreenSaverComponent, selector: "ngx-screen-saver", inputs: { idleAfterMs: "idleAfterMs", variant: "variant", opacity: "opacity", zIndex: "zIndex" }, ngImport: i0, template: '', isInline: true, styles: ["::ng-deep :root{--ngx-screen-saver-opacity: 1;--ngx-screen-saver-z-index: 1}::ng-deep .ngx-screen-saver{position:fixed;top:0;left:0;opacity:var(--ngx-screen-saver-opacity);z-index:var(--ngx-screen-saver-z-index)}::ng-deep #p5_loading{display:none}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NgxScreenSaverComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-screen-saver', template: '', styles: ["::ng-deep :root{--ngx-screen-saver-opacity: 1;--ngx-screen-saver-z-index: 1}::ng-deep .ngx-screen-saver{position:fixed;top:0;left:0;opacity:var(--ngx-screen-saver-opacity);z-index:var(--ngx-screen-saver-z-index)}::ng-deep #p5_loading{display:none}\n"] }]
}], ctorParameters: function () { return [{ type: i1.IdleDetectionService }]; }, propDecorators: { idleAfterMs: [{
type: Input
}], variant: [{
type: Input
}], opacity: [{
type: Input
}], zIndex: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNjcmVlbi1zYXZlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2NyZWVuLXNhdmVyL3NyYy9saWIvY29tcG9uZW50cy9zY3JlZW4tc2F2ZXIvbmd4LXNjcmVlbi1zYXZlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQXFCLE1BQU0sZUFBZSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxNQUFNLElBQUksQ0FBQztBQUdwQixPQUFPLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7O0FBVTVELE1BQU0sT0FBTyx1QkFBdUI7SUFDbEMsWUFBb0Isb0JBQTBDO1FBQTFDLHlCQUFvQixHQUFwQixvQkFBb0IsQ0FBc0I7UUFFckQsZ0JBQVcsR0FBVyxLQUFLLENBQUM7UUFDNUIsWUFBTyxHQUFzQixXQUFXLENBQUM7UUFDekMsWUFBTyxHQUFXLENBQUMsQ0FBQztRQUNwQixXQUFNLEdBQVcsQ0FBQyxDQUFDO1FBSTVCLG9CQUFlLEdBQVksS0FBSyxDQUFDO1FBR2pDLGlCQUFZLEdBQUc7WUFDYixLQUFLO1lBQ0wsR0FBRztZQUNILFNBQVM7U0FDVixDQUFDO0lBaEIrRCxDQUFDO0lBa0JsRSxRQUFRO1FBQ04sUUFBUSxDQUFDLGVBQWUsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUN4Qyw0QkFBNEIsRUFDNUIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLEVBQUUsQ0FDeEIsQ0FBQztRQUVGLFFBQVEsQ0FBQyxlQUFlLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FDeEMsNEJBQTRCLEVBQzVCLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxFQUFFLENBQ3ZCLENBQUM7UUFFRixJQUFJLENBQUMsb0JBQW9CLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBRS9ELElBQUksQ0FBQyxrQkFBa0IsR0FBRyxJQUFJLENBQUMsb0JBQW9CLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FDbkUsQ0FBQyxNQUFNLEVBQUUsRUFBRTtZQUNULElBQUksTUFBTSxLQUFLLElBQUksRUFBRTtnQkFDbkIsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUM7Z0JBRTVCLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxFQUFFLENBQ3ZCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxFQUMvQixRQUFRLENBQUMsYUFBYSxDQUFDLGtCQUFrQixDQUFpQixDQUMzRCxDQUFDO2FBQ0g7aUJBQU07Z0JBQ0wsSUFBSSxDQUFDLGVBQWUsR0FBRyxLQUFLLENBQUM7Z0JBQzdCLElBQUksQ0FBQyxXQUFXLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0JBQzNCLElBQUksQ0FBQyxXQUFXLEdBQUcsU0FBUyxDQUFDO2FBQzlCO1FBQ0gsQ0FBQyxDQUNGLENBQUM7SUFDSixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1FBQzlDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN4QyxDQUFDOztvSEFyRFUsdUJBQXVCO3dHQUF2Qix1QkFBdUIsMEpBSHhCLEVBQUU7MkZBR0QsdUJBQXVCO2tCQUxuQyxTQUFTOytCQUNFLGtCQUFrQixZQUNsQixFQUFFOzJHQU1ILFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgcDUgZnJvbSAncDUnO1xyXG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcclxuXHJcbmltcG9ydCB7IHN0YXJzLCBkdmQsIGZpcmV3b3JrcyB9IGZyb20gJy4uLy4uL3NjcmVlbi1zYXZlcnMnO1xyXG5pbXBvcnQgeyBJZGxlRGV0ZWN0aW9uU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL2lkbGUtZGV0ZWN0aW9uLnNlcnZpY2UnO1xyXG5cclxuZXhwb3J0IHR5cGUgU2NyZWVuU2F2ZXJPcHRpb24gPSAnc3RhcnMnIHwgJ2R2ZCcgfCAnZmlyZXdvcmtzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmd4LXNjcmVlbi1zYXZlcicsXHJcbiAgdGVtcGxhdGU6ICcnLFxyXG4gIHN0eWxlVXJsczogWycuL25neC1zY3JlZW4tc2F2ZXIuY29tcG9uZW50LnNjc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIE5neFNjcmVlblNhdmVyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgaWRsZURldGVjdGlvblNlcnZpY2U6IElkbGVEZXRlY3Rpb25TZXJ2aWNlKSB7fVxyXG5cclxuICBASW5wdXQoKSBpZGxlQWZ0ZXJNczogbnVtYmVyID0gMTAwMDA7XHJcbiAgQElucHV0KCkgdmFyaWFudDogU2NyZWVuU2F2ZXJPcHRpb24gPSAnZmlyZXdvcmtzJztcclxuICBASW5wdXQoKSBvcGFjaXR5OiBudW1iZXIgPSAxO1xyXG4gIEBJbnB1dCgpIHpJbmRleDogbnVtYmVyID0gMTtcclxuXHJcbiAgaXNJZGxlU3Vic2NyaXB0aW9uITogU3Vic2NyaXB0aW9uO1xyXG5cclxuICBzaG93U2NyZWVuU2F2ZXI6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBzY3JlZW5TYXZlcj86IHA1O1xyXG5cclxuICBzY3JlZW5TYXZlcnMgPSB7XHJcbiAgICBzdGFycyxcclxuICAgIGR2ZCxcclxuICAgIGZpcmV3b3JrcyxcclxuICB9O1xyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eShcclxuICAgICAgJy0tbmd4LXNjcmVlbi1zYXZlci1vcGFjaXR5JyxcclxuICAgICAgdGhpcy5vcGFjaXR5LnRvU3RyaW5nKClcclxuICAgICk7XHJcblxyXG4gICAgZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LnN0eWxlLnNldFByb3BlcnR5KFxyXG4gICAgICAnLS1uZ3gtc2NyZWVuLXNhdmVyLXotaW5kZXgnLFxyXG4gICAgICB0aGlzLnpJbmRleC50b1N0cmluZygpXHJcbiAgICApO1xyXG5cclxuICAgIHRoaXMuaWRsZURldGVjdGlvblNlcnZpY2Uuc3RhcnRJZGxlRGV0ZWN0aW9uKHRoaXMuaWRsZUFmdGVyTXMpO1xyXG5cclxuICAgIHRoaXMuaXNJZGxlU3Vic2NyaXB0aW9uID0gdGhpcy5pZGxlRGV0ZWN0aW9uU2VydmljZS5pc0lkbGUkLnN1YnNjcmliZShcclxuICAgICAgKGlzSWRsZSkgPT4ge1xyXG4gICAgICAgIGlmIChpc0lkbGUgPT09IHRydWUpIHtcclxuICAgICAgICAgIHRoaXMuc2hvd1NjcmVlblNhdmVyID0gdHJ1ZTtcclxuXHJcbiAgICAgICAgICB0aGlzLnNjcmVlblNhdmVyID0gbmV3IHA1KFxyXG4gICAgICAgICAgICB0aGlzLnNjcmVlblNhdmVyc1t0aGlzLnZhcmlhbnRdLFxyXG4gICAgICAgICAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCduZ3gtc2NyZWVuLXNhdmVyJykhIGFzIEhUTUxFbGVtZW50XHJcbiAgICAgICAgICApO1xyXG4gICAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgICB0aGlzLnNob3dTY3JlZW5TYXZlciA9IGZhbHNlO1xyXG4gICAgICAgICAgdGhpcy5zY3JlZW5TYXZlcj8ucmVtb3ZlKCk7XHJcbiAgICAgICAgICB0aGlzLnNjcmVlblNhdmVyID0gdW5kZWZpbmVkO1xyXG4gICAgICAgIH1cclxuICAgICAgfVxyXG4gICAgKTtcclxuICB9XHJcblxyXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xyXG4gICAgdGhpcy5pZGxlRGV0ZWN0aW9uU2VydmljZS5zdG9wSWRsZURldGVjdGlvbigpO1xyXG4gICAgdGhpcy5pc0lkbGVTdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcclxuICB9XHJcbn1cclxuIl19