From f90f3604cf161a82336ed1f81967933adedfeb96 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Wed, 19 Feb 2025 16:50:43 +0100
Subject: frontend: Add fullscreen toggle in the reader

---
 .../components/ToggleFullscreenButton.svelte       | 34 ++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 frontend/src/lib/reader/components/ToggleFullscreenButton.svelte

(limited to 'frontend/src/lib/reader/components/ToggleFullscreenButton.svelte')

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>
-- 
cgit v1.2.3-2-gb3c3