frontend: Add fullscreen toggle in the reader

1 files changed, 34 insertions, 0 deletions

diff --git a/frontend/src/lib/reader/components/ToggleFullscreenButton.svelte b/frontend/src/lib/reader/components/ToggleFullscreenButton.svelte
new file mode 100644
index 0000000..9ad4ce6
--- /dev/null
+++ b/frontend/src/lib/reader/components/ToggleFullscreenButton.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { accelerator } from '$lib/Shortcuts';
+	import { toastFinally } from '$lib/Toasts';
+
+	let { dialog }: { dialog?: HTMLElement } = $props();
+
+	function onclick() {
+		if (isFullscreen) {
+			document.exitFullscreen().catch(toastFinally);
+		} else if (dialog?.requestFullscreen) {
+			dialog.requestFullscreen().catch(toastFinally);
+		}
+	}
+
+	let fullscreenElement: HTMLElement | null = $state(null);
+	let isFullscreen = $derived(fullscreenElement !== null);
+</script>
+
+<svelte:document bind:fullscreenElement />
+
+<button
+	type="button"
+	class="btn-transparent"
+	title="Toggle fullscreen"
+	aria-label="Toggle fullscreen"
+	{onclick}
+	use:accelerator={'f'}
+>
+	{#if isFullscreen}
+		<span class="icon-lg icon-[material-symbols--fullscreen-exit]"></span>
+	{:else}
+		<span class="icon-lg icon-[material-symbols--fullscreen]"></span>
+	{/if}
+</button>