add file viewers and improve directory viewer

res/static/svelte/filesystem.css

@@ -1,6 +1,8 @@
-.file_viewer.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{position:absolute;display:flex;flex-direction:column;top:0;right:0;bottom:0;left:0;overflow:hidden}.file_viewer.svelte-1vxdz33>.file_viewer_headerbar.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;text-align:left;z-index:10;box-shadow:none}.file_viewer.svelte-1vxdz33>.file_viewer_headerbar.svelte-1vxdz33>.svelte-1vxdz33.svelte-1vxdz33{flex-grow:0;flex-shrink:0;margin-left:6px;margin-right:6px;display:inline}.file_viewer.svelte-1vxdz33>.file_viewer_headerbar.svelte-1vxdz33>.file_viewer_headerbar_title.svelte-1vxdz33.svelte-1vxdz33{flex-grow:1;flex-shrink:1;display:flex;flex-direction:column;overflow:hidden;line-height:1.2em;white-space:nowrap;text-overflow:ellipsis;justify-content:center}.button_home.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33::after{content:"pixeldrain"}@media(max-width: 600px){.button_home.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33::after{content:"pd"}}.file_viewer.svelte-1vxdz33>.list_navigator.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{flex-grow:0;flex-shrink:0;position:relative;display:none;width:100%;background-color:var(--layer_1_color);text-align:center;line-height:1em;overflow-x:auto;overflow-y:hidden;z-index:50;white-space:nowrap}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{flex-grow:1;flex-shrink:1;position:relative;display:inline-block;width:auto;height:auto;margin:0;z-index:9}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33>.file_viewer_file_preview.svelte-1vxdz33.svelte-1vxdz33{position:absolute;left:0;right:0;top:0;bottom:0;display:inline-block;min-height:100px;min-width:100px;text-align:center;vertical-align:middle;transition:left 0.5s;overflow:hidden;box-shadow:inset 2px 2px 8px var(--shadow_color)}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33>.file_viewer_file_preview.svelte-1vxdz33>.center.svelte-1vxdz33{position:relative;display:block;margin:auto;max-width:100%;max-height:100%;top:50%;transform:translateY(-50%)}.toolbar.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{position:absolute;width:8em;z-index:49;overflow:hidden;float:left;background-color:var(--layer_1_color);left:-8em;bottom:0;top:0;padding:0;text-align:left;transition:left 0.5s}.toolbar.toolbar_visible.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{left:0}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33>.file_viewer_file_preview.toolbar_visible.svelte-1vxdz33.svelte-1vxdz33{left:8em}.toolbar.svelte-1vxdz33>div.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{position:absolute;left:0;top:0;bottom:0;right:-30px;overflow-y:scroll;overflow-x:hidden}.toolbar.svelte-1vxdz33>div.svelte-1vxdz33>div.svelte-1vxdz33.svelte-1vxdz33{position:absolute;left:0;top:0;width:8em;height:auto;text-align:center}.toolbar_button.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{text-align:left}.toolbar_label.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{text-align:left;padding-left:10px;font-size:0.8em;line-height:0.7em;margin-top:0.5em}.toolbar_statistic.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{text-align:center}
+.file_viewer.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{position:absolute;display:flex;flex-direction:column;top:0;right:0;bottom:0;left:0;overflow:hidden}.file_viewer.svelte-15t34ei>.file_viewer_headerbar.svelte-15t34ei.svelte-15t34ei{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;text-align:left;z-index:10;box-shadow:none;padding:4px}.file_viewer.svelte-15t34ei>.file_viewer_headerbar.svelte-15t34ei>.svelte-15t34ei{flex-grow:0;flex-shrink:0;margin-left:4px;margin-right:4px;display:inline;align-self:center}.file_viewer.svelte-15t34ei>.file_viewer_headerbar.svelte-15t34ei>.file_viewer_headerbar_title.svelte-15t34ei{flex-grow:1;flex-shrink:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-direction:row}.breadcrumb.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{border-radius:1em;min-width:1em;text-align:center;line-height:1.2em;padding:3px 8px;margin:2px 6px}.breadcrumb_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{cursor:pointer;background-color:var(--layer_2_color);transition:0.2s background-color}.breadcrumb_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei:hover,.breadcrumb_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei:focus,.breadcrumb_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei:active{background-color:var(--input_color)}.breadcrumb_last.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{background-color:var(--highlight_color);color:var(--highlight_text_color)}.button_home.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei::after{content:"pixeldrain"}@media(max-width: 600px){.button_home.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei::after{content:"pd"}}.file_viewer.svelte-15t34ei>.list_navigator.svelte-15t34ei.svelte-15t34ei{flex-grow:0;flex-shrink:0;position:relative;display:none;width:100%;background-color:var(--layer_1_color);text-align:center;line-height:1em;overflow-x:auto;overflow-y:hidden;z-index:50;white-space:nowrap}.file_viewer.svelte-15t34ei>.file_viewer_window.svelte-15t34ei.svelte-15t34ei{flex-grow:1;flex-shrink:1;position:relative;display:inline-block;width:auto;height:auto;margin:0;z-index:9}.file_viewer.svelte-15t34ei>.file_viewer_window.svelte-15t34ei>.file_viewer_file_preview.svelte-15t34ei{position:absolute;left:0;right:0;top:0;bottom:0;display:inline-block;min-height:100px;min-width:100px;text-align:center;vertical-align:middle;transition:left 0.5s;overflow:hidden;box-shadow:inset 2px 2px 8px var(--shadow_color)}.toolbar.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{position:absolute;width:8em;z-index:49;overflow:hidden;float:left;background-color:var(--layer_1_color);left:-8em;bottom:0;top:0;padding:0;text-align:left;transition:left 0.5s}.toolbar.toolbar_visible.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{left:0}.file_viewer.svelte-15t34ei>.file_viewer_window.svelte-15t34ei>.file_viewer_file_preview.toolbar_visible.svelte-15t34ei{left:8em}.toolbar.svelte-15t34ei>div.svelte-15t34ei.svelte-15t34ei{position:absolute;left:0;top:0;bottom:0;right:-30px;overflow-y:scroll;overflow-x:hidden}.toolbar.svelte-15t34ei>div.svelte-15t34ei>div.svelte-15t34ei{position:absolute;left:0;top:0;width:8em;height:auto;text-align:center}.toolbar_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{text-align:left}.toolbar_label.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{text-align:left;padding-left:10px;font-size:0.8em;line-height:0.7em;margin-top:0.5em}.toolbar_statistic.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{text-align:center}
 .sharebar.svelte-gnq1s2{position:absolute;width:7em;left:-8em;bottom:0;top:0;overflow-y:scroll;overflow-x:hidden;float:left;background-color:var(--layer_1_color);box-shadow:inset 1px 1px var(--layer_1_shadow) var(--shadow_color);text-align:center;z-index:48;overflow:hidden;transition:left 0.5s}.visible.svelte-gnq1s2{left:8em}
-.container.svelte-1afjvoj.svelte-1afjvoj{height:100%;width:100%;padding:0;overflow-y:auto;text-align:center}.toolbar.svelte-1afjvoj.svelte-1afjvoj{position:relative;display:inline-block;max-width:800px;width:100%;margin:20px 0 0 0;box-sizing:border-box}.directory.svelte-1afjvoj.svelte-1afjvoj{position:relative;display:inline-block;max-width:800px;width:100%;margin:20px 0 40px 0;text-align:left;background-color:var(--layer_2_color);box-shadow:1px 1px var(--layer_2_shadow) var(--shadow_color);box-sizing:border-box}.node.svelte-1afjvoj.svelte-1afjvoj{position:relative;height:40px;overflow:hidden;margin:4px;padding:4px;box-sizing:border-box;cursor:pointer}.node.svelte-1afjvoj.svelte-1afjvoj:hover:not(.node_selected){background-color:var(--input_color_dark);color:var(--input_text_color);text-decoration:none}.node.svelte-1afjvoj>div.svelte-1afjvoj{height:100%;overflow:hidden;padding:0;line-height:32px;box-sizing:border-box;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.node.svelte-1afjvoj>img.svelte-1afjvoj{max-height:100%;margin-right:6px;width:auto;min-width:auto;float:left;display:block}
+.container.svelte-11r8rw7{height:100%;width:100%;margin:50px 0 0 0;padding:0;overflow-y:auto;text-align:center}.player.svelte-11r8rw7{width:90%}
+.hidden.svelte-6g6w4.svelte-6g6w4{visibility:hidden}.container.svelte-6g6w4.svelte-6g6w4{height:100%;width:100%;padding:0;overflow-y:auto;text-align:center}.width_container.svelte-6g6w4.svelte-6g6w4{position:relative;display:inline-block;max-width:94%;width:1000px;margin:0;padding:0}.toolbar.svelte-6g6w4.svelte-6g6w4{position:relative;display:inline-flex;flex-direction:row;width:100%;margin:16px 0 0 0;padding:0;box-sizing:border-box}.toolbar.svelte-6g6w4>.svelte-6g6w4{flex:0 0 auto}.toolbar_spacer.svelte-6g6w4.svelte-6g6w4{flex:1 1 auto}.directory.svelte-6g6w4.svelte-6g6w4{position:relative;overflow-x:auto;overflow-y:hidden;width:100%;margin:16px 0 16px 0;text-align:left;background-color:var(--layer_2_color);box-shadow:1px 1px var(--layer_2_shadow) var(--shadow_color);box-sizing:border-box}.node.svelte-6g6w4.svelte-6g6w4{display:table-row;text-decoration:none;color:var(--text-color);padding:6px;box-sizing:border-box}.node.svelte-6g6w4.svelte-6g6w4:not(:last-child){border-bottom:1px solid var(--layer_3_color)}.node.svelte-6g6w4.svelte-6g6w4:hover:not(.node_selected){background-color:var(--input_color_dark);color:var(--input_text_color);text-decoration:none}.node.node_selected.svelte-6g6w4.svelte-6g6w4{background-color:var(--highlight_color);color:var(--highlight_text_color)}td.svelte-6g6w4.svelte-6g6w4{padding:4px;vertical-align:middle}.node_icon.svelte-6g6w4.svelte-6g6w4{height:32px;width:auto;vertical-align:middle}.node_name.svelte-6g6w4.svelte-6g6w4{width:100%;overflow:hidden;line-height:1.2em}.node_size.svelte-6g6w4.svelte-6g6w4{min-width:50px;white-space:nowrap}
+.container.svelte-xjzx7h{position:relative;display:block;height:100%;width:100%;text-align:center;overflow:hidden}.container.zoom.svelte-xjzx7h{overflow:auto}.image.svelte-xjzx7h{position:relative;display:block;margin:auto;max-width:100%;max-height:100%;top:50%;cursor:pointer;transform:translateY(-50%);box-shadow:1px 1px var(--layer_3_shadow) var(--shadow_color)}.image.zoom.svelte-xjzx7h{max-width:none;max-height:none;top:0;cursor:move;transform:none}
 .background.svelte-tirhyp{position:fixed;text-align:center;top:0;right:0;bottom:0;left:0;background-color:rgba(0, 0, 0, 0.5)}.window.svelte-tirhyp{position:absolute;z-index:inherit;display:flex;flex-direction:column;background-color:var(--layer_2_color);max-height:100%;max-width:100%;margin:0 auto;top:20%;left:50%;transform:translate(-50%, -20%);padding:0;box-sizing:border-box;text-align:left;box-shadow:var(--shadow_color) 0px 0px 50px}.header.svelte-tirhyp{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;padding:1px}.title.svelte-tirhyp{flex-grow:1;flex-shrink:1;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:1.2em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.button_close.svelte-tirhyp{flex-grow:0;flex-shrink:0}.body.svelte-tirhyp{flex-grow:1;flex-shrink:1;overflow:auto;padding:10px}
 svg.svelte-1pco739{color:var(--highlight_color);fill:currentColor}
 

res/template/filesystem_svelte.html

@@ -22,7 +22,7 @@
 		{{.OGData}}
 		<script>
 			const initialNode = {{.Other}};
-			const apiEndpoint = '{{.APIEndpoint}}';
+			window.apiEndpoint = '{{.APIEndpoint}}';
 		</script>
 
 		<link rel='stylesheet' href='/res/svelte/filesystem.css'>

svelte/src/filesystem/Filesystem.svelte

@@ -5,12 +5,8 @@ import Sharebar from './Sharebar.svelte'
 import Spinner from '../util/Spinner.svelte'
 import Modal from '../util/Modal.svelte'
 import Directory from './viewers/Directory.svelte';
-
-let file = {
-	views: 6,
-	downloads: 12,
-	size: 24,
-}
+import Audio from './viewers/Audio.svelte';
+import Image from './viewers/Image.svelte';
 
 // Elements
 let file_viewer
@@ -32,22 +28,30 @@ let preview
 
 // State
 let currentNode = initialNode
+let path_base = "/d/"+currentNode.bucket.id
 let loading = true
 let viewer_type = ""
 
-const download = () => {
-	file.downloads++
-}
+window.onpopstate = (e) => {
+    if(e.state){
+		let locsplit = document.location.pathname.split(currentNode.bucket.id+"/", 2)
+		navigate(decodeURIComponent(locsplit[1]))
+    }
+};
 
-const navigate = (path) => {
+const navigate = (path, pushHist) => {
+	loading = true
 	fetch(
-		apiEndpoint+"/filesystem/"+currentNode.bucket.id+"/"+encodeURIComponent(path)+"?stat",
-	).then(resp => resp.json()).then(resp => {
+		window.apiEndpoint+"/filesystem/"+currentNode.bucket.id+"/"+encodeURIComponent(path)+"?stat",
+	).then(
+		resp => resp.json()
+	).then(resp => {
+		window.document.title = resp.base.name+" ~ pixeldrain"
+		if (pushHist) {
 			window.history.pushState(
-			"page2",
-			resp.base.name+" in "+resp.bucket.name+" ~ pixeldrain",
-			"/d/"+resp.bucket.id+resp.base.path,
+				{}, window.document.title, "/d/"+resp.bucket.id+resp.base.path,
 			)
+		}
 		currentNode = resp
 		openPath()
 	}).catch(err => {
@@ -60,6 +64,16 @@ const openPath = () => {
 	console.log(currentNode.base.type)
 	if (currentNode.base.type === "bucket" || currentNode.base.type === "dir") {
 		viewer_type = "dir"
+	} else if (
+		currentNode.base.file_type.startsWith("image")
+	) {
+		viewer_type = "image"
+	} else if (
+		currentNode.base.file_type.startsWith("audio") ||
+		currentNode.base.file_type === "application/ogg" ||
+		currentNode.base.name.endsWith(".mp3")
+	) {
+		viewer_type = "audio"
 	}
 	loading = false
 }
@@ -81,31 +95,31 @@ onMount(openPath)
 <svelte:window on:keydown={keydown}/>
 
 <div bind:this={file_viewer} class="file_viewer">
+	{#if loading}
+	<div style="position: absolute; right: 0; top: 0; height: 48px; width: 48px; z-index: 100;">
+		<Spinner></Spinner>
+	</div>
+	{/if}
+
 	<div bind:this={header_bar} class="file_viewer_headerbar highlight_1">
 		<button on:click={toolbar_toggle} class="button_toggle_toolbar" class:button_highlight={toolbar_visible}>
 			<i class="icon">menu</i>
 		</button>
 		<a href="/" id="button_home" class="button button_home"><i class="icon">home</i></a>
 		<div class="file_viewer_headerbar_title">
-			<div>
-				{#if currentNode.parents.length > 0}
-					{currentNode.parents[currentNode.parents.length-1].path}
-				{/if}
-				/{currentNode.base.name}
-			</div>
+			{#each currentNode.parents as parent}
+			<div class="breadcrumb breadcrumb_button" on:click={() => {navigate(parent.path, true)}}>{parent.name}</div> /
+			{/each}
+			<div class="breadcrumb breadcrumb_last">{currentNode.base.name}</div>
 		</div>
 	</div>
 	<div class="list_navigator"></div>
 	<div class="file_viewer_window">
 		<div class="toolbar" class:toolbar_visible><div><div>
-			<div class="toolbar_label">Views</div>
-			<div class="toolbar_statistic">{formatThousands(file.views)}</div>
-			<div class="toolbar_label">Downloads</div>
-			<div class="toolbar_statistic">{formatThousands(file.downloads)}</div>
 			<div class="toolbar_label">Size</div>
-			<div class="toolbar_statistic">{formatDataVolume(file.size)}</div>
+			<div class="toolbar_statistic">{formatDataVolume(currentNode.base.file_size, 3)}</div>
 
-			<button on:click={download} class="toolbar_button button_full_width">
+			<button class="toolbar_button button_full_width">
 				<i class="icon">save</i> Download
 			</button>
 			<button id="btn_download_list" class="toolbar_button button_full_width" style="display: none;">
@@ -127,12 +141,12 @@ onMount(openPath)
 		<Sharebar bind:this={sharebar}></Sharebar>
 
 		<div bind:this={preview} class="file_viewer_file_preview" class:toolbar_visible>
-			{#if loading}
-			<div class="center" style="width: 128px; height: 128px;">
-				<Spinner></Spinner>
-			</div>
-			{:else if viewer_type === "dir"}
-			<Directory bind:this={preview} node={currentNode} on:navigate={e => {navigate(e.detail)}}></Directory>
+			{#if viewer_type === "dir"}
+			<Directory bind:this={preview} node={currentNode} path_base={path_base} on:navigate={e => {navigate(e.detail, true)}}></Directory>
+			{:else if viewer_type === "audio"}
+			<Audio bind:this={preview} node={currentNode}></Audio>
+			{:else if viewer_type === "image"}
+			<Image bind:this={preview} node={currentNode}></Image>
 			{/if}
 		</div>
 	</div>
@@ -183,27 +197,48 @@ onMount(openPath)
 	text-align: left;
 	z-index: 10;
 	box-shadow: none;
+	padding: 4px;
 }
 
 /* Headerbar components */
 .file_viewer > .file_viewer_headerbar > * {
 	flex-grow: 0;
 	flex-shrink: 0;
-	margin-left: 6px;
-	margin-right: 6px;
+	margin-left: 4px;
+	margin-right: 4px;
 	display: inline;
+	align-self: center;
 }
 .file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
 	flex-grow: 1;
 	flex-shrink: 1;
 	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-	line-height: 1.2em; /* When the page is a list there will be two lines. Dont's want to stretch the container*/
-	white-space: nowrap;
-	text-overflow: ellipsis;
+	align-items: center;
 	justify-content: center;
+	flex-wrap: wrap;
+	flex-direction: row;
 }
+.breadcrumb {
+	border-radius: 1em;
+	min-width: 1em;
+	text-align: center;
+	line-height: 1.2em;
+	padding: 3px 8px;
+	margin: 2px 6px;
+}
+.breadcrumb_button {
+	cursor: pointer;
+	background-color: var(--layer_2_color);
+	transition: 0.2s background-color;
+}
+.breadcrumb_button:hover, .breadcrumb_button:focus, .breadcrumb_button:active {
+	background-color: var(--input_color);
+}
+.breadcrumb_last {
+	background-color: var(--highlight_color);
+	color: var(--highlight_text_color);
+}
+
 .button_home::after {
 	content: "pixeldrain";
 }
@@ -259,16 +294,6 @@ onMount(openPath)
 	box-shadow: inset 2px 2px 8px var(--shadow_color);
 }
 
-.file_viewer > .file_viewer_window > .file_viewer_file_preview > .center{
-	position: relative;
-	display: block;
-	margin: auto;
-	max-width: 100%;
-	max-height: 100%;
-	top: 50%;
-	transform: translateY(-50%);
-}
-
 /* Toolbar */
 .toolbar {
 	position: absolute;

svelte/src/filesystem/viewers/Audio.svelte

@@ -0,0 +1,38 @@
+<script>
+import { createEventDispatcher } from 'svelte'
+let dispatch = createEventDispatcher()
+
+export let node;
+
+const ended = () => {
+	dispatch("next")
+}
+
+</script>
+
+<div class="container">
+	{node.base.name}
+	<br/><br/>
+	<audio
+		class="player"
+		src={window.apiEndpoint+"/filesystem/"+node.bucket.id+"/"+node.base.path}
+		autoplay="autoplay"
+		controls="controls"
+		on:ended={ended}>
+		<track kind="captions"/>
+	</audio>
+</div>
+
+<style>
+.container {
+	height: 100%;
+	width: 100%;
+	margin: 50px 0 0 0;
+	padding: 0;
+	overflow-y: auto;
+	text-align: center;
+}
+.player {
+	width: 90%;
+}
+</style>

svelte/src/filesystem/viewers/Directory.svelte

@@ -1,15 +1,29 @@
 <script>
+import { formatDataVolume } from '../../util/Formatting.svelte'
 import { createEventDispatcher } from 'svelte'
 let dispatch = createEventDispatcher()
 
 export let node;
+export let path_base;
+let mode = "viewing"
 
-const navigate_to = (path) => {
-	dispatch("navigate", path)
+$: children = node.base.children.reduce((accum, val) => {
+	val["selected"] = false
+	accum.push(val)
+	return accum
+}, [])
+
+const node_click = (node, index) => {
+	if (mode === "viewing") {
+		dispatch("navigate", node.path)
+	} else if (mode === "selecting") {
+		children[index].selected = !children[index].selected
+	}
 }
 const navigate_up = () => {
+	// Go to the path of the last parent
 	if (node.parents.length !== 0) {
-		navigate_to(node.parents[node.parents.length-1].path)
+		dispatch("navigate", node.parents[node.parents.length-1].path)
 	}
 }
 
@@ -45,23 +59,50 @@ const node_icon = node => {
 </script>
 
 <div class="container">
+	<div class="width_container">
 		<div class="toolbar">
-		<button on:click={navigate_up}><i class="icon">arrow_upward</i> up</button>
+			<!-- {#if node.parents.length !== 0} -->
+			<button on:click={navigate_up} class:hidden={node.parents.length === 0}><i class="icon">arrow_back</i></button>
+			<!-- {/if} -->
+			<div class="toolbar_spacer"></div>
+			<button on:click={navigate_up}><i class="icon">cloud_upload</i></button>
+			<button on:click={navigate_up}><i class="icon">create_new_folder</i></button>
+			<button on:click={navigate_up}><i class="icon">delete</i></button>
 		</div>
 		<br/>
-	<div class="directory">
-		{#if Array.isArray(node.base.children)}
-			{#each node.base.children as child}
-			<div on:click={navigate_to(child.path)} class="node">
-				<img src={node_icon(child)} alt="icon"/>
-				<div>{child.name}</div>
-			</div>
+		<table class="directory">
+			<tr>
+				<!-- <td><input type="checkbox" /></td> -->
+				<td></td>
+				<td>name</td>
+				<td>size</td>
+			</tr>
+			{#each children as child, index}
+				<a
+					href={path_base+child.path}
+					on:click|preventDefault={() => {node_click(child, index)}}
+					class="node"
+					class:node_selected={child.selected}>
+					<!-- <td on:click|preventDefault class="node_checkbox">
+						<input type="checkbox" />
+					</td> -->
+					<td>
+						<img src={node_icon(child)} class="node_icon" alt="icon"/>
+					</td>
+					<td class="node_name">
+						{child.name}
+					</td>
+					<td class="node_size">
+						{formatDataVolume(child.file_size, 3)}
+					</td>
+				</a>
 			{/each}
-		{/if}
+		</table>
 	</div>
 </div>
 
 <style>
+.hidden { visibility: hidden; }
 .container {
 	height: 100%;
 	width: 100%;
@@ -69,59 +110,72 @@ const node_icon = node => {
 	overflow-y: auto;
 	text-align: center;
 }
+.width_container {
+	position: relative;
+	display: inline-block;
+	max-width: 94%;
+	width: 1000px;
+	margin: 0;
+	padding: 0;
+}
 .toolbar {
 	position: relative;
-	display: inline-block;
-	max-width: 800px;
+	display: inline-flex;
+	flex-direction: row;
 	width: 100%;
-	margin: 20px 0 0 0;
+	margin: 16px 0 0 0;
+	padding: 0;
 	box-sizing: border-box;
 }
+.toolbar > * { flex: 0 0 auto; }
+.toolbar_spacer { flex: 1 1 auto; }
+
 .directory {
 	position: relative;
-	display: inline-block;
-	max-width: 800px;
+	overflow-x: auto;
+	overflow-y: hidden;
 	width: 100%;
-	margin: 20px 0 40px 0;
+	margin: 16px 0 16px 0;
 	text-align: left;
 	background-color: var(--layer_2_color);
 	box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color);
 	box-sizing: border-box;
 }
 .node {
-	position: relative;
-	height: 40px;
-	overflow: hidden;
-	margin: 4px;
-	padding: 4px;
+	display: table-row;
+	text-decoration: none;
+	color: var(--text-color);
+	padding: 6px;
 	box-sizing: border-box;
-	cursor: pointer;
+}
+.node:not(:last-child) {
+	border-bottom: 1px solid var(--layer_3_color);
 }
 .node:hover:not(.node_selected) {
 	background-color: var(--input_color_dark);
 	color: var(--input_text_color);
 	text-decoration: none;
 }
-/* .node_selected {
+.node.node_selected {
 	background-color: var(--highlight_color);
 	color: var(--highlight_text_color);
-} */
-.node > div {
-	height: 100%;
+}
+td {
+	padding: 4px;
+	vertical-align: middle;
+}
+.node_icon {
+	height: 32px;
+	width: auto;
+	vertical-align: middle;
+}
+.node_name {
+	width: 100%;
 	overflow: hidden;
-	padding: 0;
-	line-height: 32px;
-	box-sizing: border-box;
-	display: inline-block;
-	text-overflow: ellipsis;
+	line-height: 1.2em;
+}
+.node_size {
+	min-width: 50px;
 	white-space: nowrap;
 }
-.node > img {
-	max-height: 100%;
-	margin-right: 6px;
-	width: auto;
-	min-width: auto;
-	float: left;
-	display: block;
-}
 </style>

svelte/src/filesystem/viewers/Image.svelte

@@ -0,0 +1,85 @@
+<script>
+export let node
+let container
+let zoom = false
+let x, y = 0
+let dragging = false
+
+const mousedown = (e) => {
+	if (!dragging && e.which === 1 && zoom) {
+		x = e.pageX
+		y = e.pageY
+		dragging = true
+
+		e.preventDefault()
+		e.stopPropagation()
+		return false
+	}
+}
+const mousemove = (e) => {
+	if (dragging) {
+		container.scrollLeft = container.scrollLeft - (e.pageX - x)
+		container.scrollTop  = container.scrollTop  - (e.pageY - y)
+
+		x = e.pageX
+		y = e.pageY
+
+		e.preventDefault()
+		e.stopPropagation()
+		return false
+	}
+}
+const mouseup = (e) => {
+	if (dragging) {
+		dragging = false
+
+		e.preventDefault()
+		e.stopPropagation()
+		return false
+	}
+}
+</script>
+
+<svelte:window on:mousemove={mousemove} on:mouseup={mouseup} />
+
+<div bind:this={container} class="container" class:zoom>
+	<img
+		on:dblclick={() => {zoom = !zoom}}
+		on:doubletap={() => {zoom = !zoom}}
+		on:mousedown={mousedown}
+		class="image" class:zoom
+		src={window.apiEndpoint+"/filesystem/"+node.bucket.id+"/"+node.base.path}
+		alt="no description available" />
+</div>
+
+<style>
+.container {
+	position: relative;
+	display: block;
+	height: 100%;
+	width: 100%;
+	text-align: center;
+	overflow: hidden;
+}
+.container.zoom {
+	overflow: auto;
+}
+.image {
+	position: relative;
+	display: block;
+	margin: auto;
+	max-width: 100%;
+	max-height: 100%;
+	top: 50%;
+	cursor: pointer;
+	transform: translateY(-50%);
+	box-shadow: 1px 1px var(--layer_3_shadow) var(--shadow_color);
+}
+.image.zoom {
+	max-width: none;
+	max-height: none;
+	top: 0;
+	cursor: move;
+	transform: none;
+}
+</style>

webcontroller/filesystem.go

@@ -136,11 +136,7 @@ func (wc *WebController) serveDirectory(w http.ResponseWriter, r *http.Request,
 		return
 	}
 
-	if node.Base.Type == "bucket" {
 	td.Title = fmt.Sprintf("%s ~ pixeldrain", node.Base.Name)
-	} else {
-		td.Title = fmt.Sprintf("%s in %s ~ pixeldrain", node.Base.Name, node.Bucket.Name)
-	}
 	td.Other = node
 	err = wc.templates.Get().ExecuteTemplate(w, "filesystem_svelte", td)
 	if err != nil && !strings.Contains(err.Error(), "broken pipe") {