Add f for fullscreen shortcut

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.
-	<br/>
+	Size: {formatDataVolume($nav.base.file_size, 3)}<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>