add screensaver (#17)

Author: FreekBes

client/idler.ts

@@ -1,17 +1,20 @@
+import { ScreensaverUI } from "./uis/screensaver";
+
 export class Idler {
 	private _idle: boolean = false;
 	private _lastActivity: number = Date.now();
 	private _idleAfter: number = 300000; // 5 minutes
-	private _takeActionAfter: number = 2520000; // 42 minutes
 	private _isLockScreen: boolean;
+	private _screensaverUI: ScreensaverUI;
 
 	public constructor(isLockScreen: boolean = false) {
 		this._isLockScreen = isLockScreen;
+		this._screensaverUI = new ScreensaverUI(isLockScreen);
 
 		// Listen for keyboard and mouse events
-		window.addEventListener("keydown", this._unidle.bind(this));
-		window.addEventListener("mousemove", this._unidle.bind(this));
-		window.addEventListener("mousedown", this._unidle.bind(this));
+		window.addEventListener("keydown", this._stopIdling.bind(this));
+		window.addEventListener("mousemove", this._stopIdling.bind(this));
+		window.addEventListener("mousedown", this._stopIdling.bind(this));
 
 		// Check for idle at a regular interval
 		setInterval(this._checkIdle.bind(this), 1000);
@@ -25,38 +28,41 @@ export class Idler {
 		return this._idle;
 	}
 
-	private _unidle(): void {
-		this._lastActivity = Date.now();
-		this._idle = false;
-	}
-
-	private _action(): void {
-		// TODO: start screensaver?
-		// Warning: this function is called from a setInterval, so it should return if the action is already running
+	/**
+	 * Start idling and show the screensaver.
+	 */
+	private _startIdling(): void {
+		this._idle = true;
+		this._screensaverUI.start();
 	}
 
-	private _checkIfActionNeeded(): boolean {
+	/**
+	 * Stop the screensaver and reset the idle timer.
+	 * @param ev The event that triggered this function.
+	 */
+	private _stopIdling(ev: Event | null = null): void {
+		this._lastActivity = Date.now();
 		if (this._idle) {
-			// Check if we should take action
-			if (Date.now() - this._lastActivity >= this._takeActionAfter) {
-				this._action();
-				return true;
+			if (ev) {
+				ev.preventDefault(); // Prevent the event from bubbling up and causing unwanted UI interactions
 			}
+			this._screensaverUI.stop();
+			this._idle = false;
 		}
-		return false;
 	}
 
+	/**
+	 * Check if the computer is idling (e.g. no keyboard or mouse interactions for a certain amount of time).
+	 * @returns True if the computer is idling, false otherwise.
+	 */
 	private _checkIdle(): boolean {
 		if (this._idle) {
-			this._checkIfActionNeeded();
 			return true;
 		}
 
 		// Check if we're idle
 		if (Date.now() - this._lastActivity >= this._idleAfter) {
-			this._idle = true;
-			console.log("Now idling...");
-			this._checkIfActionNeeded(); // Needed if idleAfter and takeActionAfter share the same value
+			this._startIdling();
 			return true;
 		}
 		return false;

client/uis/screensaver.ts

@@ -0,0 +1,54 @@
+import { BlankScreensaver } from "./screensavers/blank";
+
+export class ScreensaverUI {
+	private _canvasWrapper: HTMLElement;
+	private _canvas: HTMLCanvasElement;
+	private _isRunning: boolean = false;
+	private _screensaver = new BlankScreensaver();
+	private _isLockScreen: boolean;
+
+	public constructor(isLockScreen: boolean = false) {
+		this._isLockScreen = isLockScreen;
+		this._canvasWrapper = document.getElementById('screensaver-wrapper') as HTMLElement;
+		this._canvas = document.getElementById('screensaver-canvas') as HTMLCanvasElement;
+	}
+
+	/**
+	 * Draw 1 frame of the currently selected screensaver.
+	 */
+	private _draw(): void {
+		if (!this._isRunning) {
+			return;
+		}
+
+		const ctx = this._canvas.getContext('2d');
+		if (!ctx) {
+			return;
+		}
+
+		this._screensaver.draw(ctx, this._canvas.width, this._canvas.height);
+
+		if (this._isRunning && this._screensaver.getName() !== 'Blank') {
+			requestAnimationFrame(this._draw.bind(this));
+		}
+	};
+
+	/**
+	 * Start running the screensaver.
+	 */
+	public start(): void {
+		this._isRunning = true;
+		this._canvasWrapper.classList.add('active');
+		this._canvas.width = window.innerWidth;
+		this._canvas.height = window.innerHeight;
+		this._draw();
+	};
+
+	/**
+	 * Stop running the screensaver.
+	 */
+	public stop(): void {
+		this._isRunning = false;
+		this._canvasWrapper.classList.remove('active');
+	};
+}

client/uis/screensavers/base.ts

@@ -0,0 +1,14 @@
+export abstract class ScreensaverBase {
+	/**
+	 * Get the name of the screensaver (should return a static string).
+	 */
+	public abstract getName(): string;
+
+	/**
+	 * Draw 1 frame of the screensaver. Warning: do not request the next animation frame here, it will be done automatically.
+	 * @param ctx The rendering context of the canvas elemnt, in 2D mode.
+	 * @param canvasWidth The width of the canvas in pixels.
+	 * @param canvasHeight The height of the canvas in pixels.
+	 */
+	public abstract draw(ctx: CanvasRenderingContext2D, canvasWidth: number, canvasHeight: number): void;
+}

client/uis/screensavers/blank.ts

@@ -0,0 +1,13 @@
+import { ScreensaverBase } from "./base";
+
+export class BlankScreensaver extends ScreensaverBase {
+	public getName(): string {
+		return "Blank";
+	}
+
+	public draw(ctx: CanvasRenderingContext2D, canvasWidth: number, canvasHeight: number): void {
+		// Draw a black rectangle that covers the entire canvas
+		ctx.fillStyle = 'black';
+		ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+	}
+}

package.json

@@ -7,7 +7,7 @@
     "build": "tsc",
     "bundle": "webpack --mode=production",
     "bundle-dev": "webpack --mode=development",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "open dist/index.html"
   },
   "repository": {
     "type": "git",

static/index.html

@@ -94,6 +94,11 @@ <h3>This computer is reserved for an exam between <span id="exam-mode-start">...
 			</div>
 		</footer>
 
+		<!-- Screensaver -->
+		<div id="screensaver-wrapper">
+			<canvas id="screensaver-canvas" width="1920" height="1080"></canvas>
+		</div>
+
 		<!-- Scripts (paths are relative to the dist folder) -->
 		<script src="bundle.js"></script>
 	</body>

static/styles.css

@@ -610,3 +610,54 @@ dialog.calendar-event-dialog .dialog-close-button {
 dialog.calendar-event-dialog .dialog-close-button:hover {
 	color: var(--color-text-primary);
 }
+
+/* ***************************************** */
+/* Screensaver                               */
+/* ***************************************** */
+
+#screensaver-wrapper {
+	display: block;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: var(--color-bg);
+	z-index: 999;
+	opacity: 0;
+	pointer-events: none;
+	/* play fade-out animation once */
+	animation: fade-out 0.15s ease-in-out 0s 1 normal;
+}
+
+#screensaver-wrapper.active {
+	opacity: 1;
+	pointer-events: all; /* take over the screen */
+	/* play fade-in animation once */
+	animation: fade-in 0.5s ease-in-out 0s 1 normal;
+	cursor: none !important; /* hide cursor */
+}
+
+@keyframes fade-in {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes fade-out {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+
+#screensaver-canvas {
+	width: 100%;
+	height: 100%;
+	object-fit: cover; /* in case the screen isn't perfectly 16:9 */
+}