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

---
 .../lib/reader/components/ReaderMenuButton.svelte  |  2 +-
 .../components/ToggleFullscreenButton.svelte       | 34 ++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/lib/reader/components/ToggleFullscreenButton.svelte

(limited to 'frontend/src/lib/reader/components')

diff --git a/frontend/src/lib/reader/components/ReaderMenuButton.svelte b/frontend/src/lib/reader/components/ReaderMenuButton.svelte
index da494e3..924342f 100644
--- a/frontend/src/lib/reader/components/ReaderMenuButton.svelte
+++ b/frontend/src/lib/reader/components/ReaderMenuButton.svelte
@@ -9,7 +9,7 @@
 
 <button
 	type="button"
-	class="btn-transparent invisible xl:visible"
+	class="btn-transparent hidden xl:flex"
 	{title}
 	aria-label={title}
 	onclick={() => (reader.sidebar = !reader.sidebar)}
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