From 5f6cc3f90f55deb5f294fe1aa3a801828c6fa097 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Thu, 11 Apr 2024 19:33:26 +0200
Subject: [PATCH] Add fullscreen buttons to file viewer and filesystem

---
 svelte/src/file_viewer/FileViewer.svelte | 31 +++++++++++++++++++++++-
 svelte/src/filesystem/Filesystem.svelte  |  4 ++-
 svelte/src/filesystem/Toolbar.svelte     | 29 ++++++++++++++++++++++
 3 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte
index f753924..12a42ba 100644
--- a/svelte/src/file_viewer/FileViewer.svelte
+++ b/svelte/src/file_viewer/FileViewer.svelte
@@ -31,10 +31,12 @@ let file = file_struct
 let list = list_struct
 let is_list = false
 let list_downloadable = false
+let file_viewer
 let file_preview
 let list_navigator
 let sharebar
 let sharebar_visible = false
+let fullscreen = false
 let toggle_sharebar = () => {
 	if (navigator.share) {
 		let name = file.name
@@ -221,6 +223,20 @@ const toggle_gallery = () => {
 	}
 }
 
+const toggle_fullscreen = () => {
+	if (fullscreen || document.fullscreenElement) {
+		try {
+			document.exitFullscreen()
+		} catch (err) {
+			console.debug("Failed to exit fullscreen", err)
+		}
+		fullscreen = false
+	} else {
+		file_viewer.requestFullscreen()
+		fullscreen = true
+	}
+}
+
 // Premium page customizations. In the gallery view we will use the
 // customizations for the first file in the list, else we simply use the
 // selected file. In most cases they are all the same so the user won't notice
@@ -365,7 +381,7 @@ const keyboard_event = evt => {
 
 <svelte:window on:keydown={keyboard_event} on:hashchange={hash_change}/>
 
-<div class="file_viewer">
+<div class="file_viewer" bind:this={file_viewer}>
 	<div class="headerbar">
 		{#if !disable_menu}
 			<button
@@ -458,6 +474,19 @@ const keyboard_event = evt => {
 				<span>QR code</span>
 			</button>
 
+			<button
+				class="toolbar_button"
+				on:click={toggle_fullscreen}
+				class:button_highlight={fullscreen}
+				title="Open page in full screen mode">
+				{#if fullscreen}
+					<i class="icon">fullscreen_exit</i>
+				{:else}
+					<i class="icon">fullscreen</i>
+				{/if}
+				<span>Fullscreen</span>
+			</button>
+
 			{#if view === "file"}
 				<button
 					class="toolbar_button"
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index c4e93de..e1dbbe5 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -14,6 +14,7 @@ import { branding_from_path } from './edit_window/Branding.js'
 import Menu from './Menu.svelte';
 
 let loading = true
+let file_viewer
 let toolbar
 let upload_widget
 let download_frame
@@ -119,7 +120,7 @@ const update_css = path => document.documentElement.style = branding_from_path(p
 	on:loading={loading_evt}
 />
 
-<div class="file_viewer">
+<div bind:this={file_viewer} class="file_viewer">
 	<div class="headerbar">
 		<Menu/>
 		<Breadcrumbs state={state} fs_navigator={fs_navigator}/>
@@ -130,6 +131,7 @@ const update_css = path => document.documentElement.style = branding_from_path(p
 			bind:this={toolbar}
 			fs_navigator={fs_navigator}
 			state={state}
+			file_viewer={file_viewer}
 			bind:details_visible={details_visible}
 			edit_window={edit_window}
 			bind:edit_visible={edit_visible}
diff --git a/svelte/src/filesystem/Toolbar.svelte b/svelte/src/filesystem/Toolbar.svelte
index 079939c..1e24c2f 100644
--- a/svelte/src/filesystem/Toolbar.svelte
+++ b/svelte/src/filesystem/Toolbar.svelte
@@ -20,6 +20,7 @@ export let view = "file"
 export let details_visible = false
 export let edit_window
 export let edit_visible = false
+export let file_viewer
 
 $: share_url = generate_share_url(state.path)
 let link_copied = false
@@ -50,6 +51,21 @@ let share = async () => {
 	}
 }
 
+let fullscreen = false
+const toggle_fullscreen = () => {
+	if (fullscreen || document.fullscreenElement) {
+		try {
+			document.exitFullscreen()
+		} catch (err) {
+			console.debug("Failed to exit fullscreen", err)
+		}
+		fullscreen = false
+	} else {
+		file_viewer.requestFullscreen()
+		fullscreen = true
+	}
+}
+
 let expanded = false
 let expand = e => {
 	e.preventDefault()
@@ -113,6 +129,19 @@ let expand = e => {
 			</button>
 		{/if}
 
+		<button
+			class="toolbar_button"
+			on:click={toggle_fullscreen}
+			class:button_highlight={fullscreen}
+			title="Open page in full screen mode">
+			{#if fullscreen}
+				<i class="icon">fullscreen_exit</i>
+			{:else}
+				<i class="icon">fullscreen</i>
+			{/if}
+			<span>Fullscreen</span>
+		</button>
+
 		<button on:click={() => details_visible = !details_visible} class:button_highlight={details_visible}>
 			<i class="icon">help</i>
 			<span>Deta<u>i</u>ls</span>