Add f for fullscreen shortcut

svelte/src/filesystem/Filesystem.svelte

@@ -73,6 +73,11 @@ const keydown = e => {
 		case "r":
 			nav.shuffle = !nav.shuffle
 			break;
+		case "f": // F fullscreen
+			if (toolbar) {
+				toolbar.toggle_fullscreen()
+			}
+			break
 		case "a":
 		case "ArrowLeft":
 			nav.open_sibling(-1)
@@ -84,8 +89,8 @@ const keydown = e => {
 		case " ": // Spacebar pauses / unpauses video and audio playback
 			if (file_preview) {
 				if (file_preview.toggle_playback()) {
-					evt.preventDefault()
+					e.preventDefault()
-					evt.stopPropagation()
+					e.stopPropagation()
 				}
 			}
 			break
@@ -143,6 +148,7 @@ const download = () => {
 			bind:this={toolbar}
 			nav={nav}
 			file_viewer={file_viewer}
+			file_preview={file_preview}
 			bind:details_visible={details_visible}
 			edit_window={edit_window}
 			bind:edit_visible={edit_visible}
@@ -157,6 +163,7 @@ const download = () => {
 				edit_window={edit_window}
 				on:open_sibling={e => nav.open_sibling(e.detail)}
 				on:download={download}
+				on:details={() => details_visible = !details_visible}
 			/>
 		</div>
 	</div>

svelte/src/filesystem/Toolbar.svelte

@@ -11,6 +11,7 @@ export let details_visible = false
 export let edit_window
 export let edit_visible = false
 export let file_viewer
+export let file_preview
 
 $: share_url = generate_share_url($nav.path)
 let link_copied = false
@@ -42,8 +43,8 @@ let share = async () => {
 }
 
 let fullscreen = false
-const toggle_fullscreen = () => {
+export const toggle_fullscreen = () => {
-	if (fullscreen || document.fullscreenElement) {
+	if (document.fullscreenElement !== null) {
 		try {
 			document.exitFullscreen()
 		} catch (err) {
@@ -51,7 +52,9 @@ const toggle_fullscreen = () => {
 		}
 		fullscreen = false
 	} else {
-		file_viewer.requestFullscreen()
+		if (!file_preview.toggle_fullscreen()) {
+			file_viewer.requestFullscreen()
+		}
 		fullscreen = true
 	}
 }

svelte/src/filesystem/viewers/File.svelte

@@ -3,6 +3,8 @@ import { createEventDispatcher } from "svelte";
 import IconBlock from "../../layout/IconBlock.svelte";
 import { fs_thumbnail_url } from "../FilesystemAPI.mjs";
 import TextBlock from "../../layout/TextBlock.svelte"
+import { formatDataVolume, formatDate } from "../../util/Formatting.svelte";
+
 let dispatch = createEventDispatcher()
 
 export let nav
@@ -14,12 +16,17 @@ export let nav
 
 <IconBlock icon_href={fs_thumbnail_url($nav.base.path, 256, 256)}>
 	Type: {$nav.base.file_type}<br/>
-	No preview is available for this file type. Download to view it locally.
+	Size: {formatDataVolume($nav.base.file_size, 3)}<br/>
-	<br/>
+	Upload date: {formatDate($nav.base.created, true, true, false)}
+	<hr/>
 	<button class="button_highlight" on:click={() => {dispatch("download")}}>
 		<i class="icon">download</i>
 		<span>Download</span>
 	</button>
+	<button on:click={() => {dispatch("details")}}>
+		<i class="icon">help</i>
+		<span>Details</span>
+	</button>
 </IconBlock>
 
 {#if $nav.base.name === ".search_index.gz"}

svelte/src/filesystem/viewers/FilePreview.svelte

@@ -57,6 +57,13 @@ export const toggle_mute = () => {
 	}
 	return false
 }
+export const toggle_fullscreen = () => {
+	if (viewer && viewer.toggle_fullscreen) {
+		viewer.toggle_fullscreen()
+		return true
+	}
+	return false
+}
 export const seek = delta => {
 	if (viewer && viewer.seek) {
 		viewer.seek(delta)
@@ -103,7 +110,7 @@ export const seek = delta => {
 		<CustomBanner path={$nav.path}/>
 	</Zip>
 {:else}
-	<File nav={nav} on:download>
+	<File nav={nav} on:download on:details>
 		<CustomBanner path={$nav.path}/>
 	</File>
 {/if}

svelte/src/filesystem/viewers/Video.svelte

@@ -39,6 +39,14 @@ export const update = async () => {
 
 export const toggle_playback = () => playing ? player.pause() : player.play()
 export const toggle_mute = () => player.muted = !player.muted
+export const toggle_fullscreen = () => {
+	if (document.fullscreenElement === null) {
+		player.requestFullscreen()
+	} else {
+		document.exitFullscreen()
+	}
+}
+
 
 export const seek = delta => {
 	// fastseek can be pretty imprecise, so we don't use it for small seeks
@@ -61,14 +69,6 @@ onMount(() => {
 	}
 })
 
-const fullscreen = () => {
-	if (document.fullscreenElement === null) {
-		player.requestFullscreen()
-	} else {
-		document.exitFullscreen()
-	}
-}
-
 const video_keydown = e => {
 	if (e.key === " ") {
 		// Prevent spacebar from pausing playback in Chromium. This conflicts
@@ -142,7 +142,7 @@ const video_keydown = e => {
 					<i class="icon">volume_up</i>
 				{/if}
 			</button>
-			<button on:click={fullscreen}>
+			<button on:click={toggle_fullscreen}>
 				<i class="icon">fullscreen</i>
 			</button>
 			<div class="spacer"></div>