Graphite/frontend/src/state-providers/fullscreen.ts

import { writable } from "svelte/store";

import type { Editor } from "@graphite/editor";

export function createFullscreenState(editor: Editor) {
	// Experimental Keyboard API: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/keyboard
	const keyboardLockApiSupported: Readonly<boolean> = navigator.keyboard !== undefined && "lock" in navigator.keyboard;

	const { subscribe, update } = writable({
		windowFullscreen: false,
		keyboardLocked: false,
		keyboardLockApiSupported,
	});

	function fullscreenModeChanged() {
		update((state) => {
			state.windowFullscreen = Boolean(document.fullscreenElement);
			if (!state.windowFullscreen) state.keyboardLocked = false;
			return state;
		});
	}

	async function enterFullscreen() {
		await document.documentElement.requestFullscreen();

		if (keyboardLockApiSupported && navigator.keyboard) {
			await navigator.keyboard.lock(["ControlLeft", "ControlRight"]);

			update((state) => {
				state.keyboardLocked = true;
				return state;
			});
		}
	}

	async function exitFullscreen() {
		await document.exitFullscreen();
	}

	async function toggleFullscreen() {
		return new Promise((resolve, reject) => {
			update((state) => {
				if (state.windowFullscreen) exitFullscreen().then(resolve).catch(reject);
				else enterFullscreen().then(resolve).catch(reject);

				return state;
			});
		});
	}

	editor.subscriptions.subscribeFrontendMessage("WindowFullscreen", () => {
		toggleFullscreen();
	});

	return {
		subscribe,
		fullscreenModeChanged,
		enterFullscreen,
		exitFullscreen,
		toggleFullscreen,
	};
}
export type FullscreenState = ReturnType<typeof createFullscreenState>;