Split filesystem up in components

Also thumbnails work now

svelte/src/filesystem/viewers/Audio.svelte

@@ -1,6 +1,6 @@
 <script>
-import { fs_get_file_url } from "../FilesystemAPI.js";
 import { createEventDispatcher, onMount } from 'svelte'
+import { fs_file_url } from "../FilesystemUtil.js";
 let dispatch = createEventDispatcher()
 
 export let state
@@ -53,7 +53,7 @@ onMount(() => {
 	<audio
 		bind:this={player}
 		class="player"
-		src={fs_get_file_url(state.root.id, state.base.path)}
+		src={fs_file_url(state.root.id, state.base.path)}
 		autoplay="autoplay"
 		controls="controls"
 		on:pause={() => playing = false }

svelte/src/filesystem/viewers/FilePreview.svelte

@@ -0,0 +1,54 @@
+<script>
+import FileManager from "../filemanager/FileManager.svelte";
+import Audio from "./Audio.svelte";
+import Image from "./Image.svelte";
+import Pdf from "./PDF.svelte";
+import Video from "./Video.svelte";
+
+export let navigator
+export let state
+export let toolbar_visible
+export let edit_window
+</script>
+
+<div class="file_preview checkers" class:toolbar_visible>
+	{#if state.viewer_type === "dir"}
+		<FileManager
+			navigator={navigator}
+			state={state}
+			edit_window={edit_window}
+			on:loading
+		/>
+	{:else if state.viewer_type === "audio"}
+		<Audio state={state} on:open_sibling={e => {navigator.open_sibling(e.detail)}}/>
+	{:else if state.viewer_type === "image"}
+		<Image state={state} on:open_sibling={e => {navigator.open_sibling(e.detail)}}/>
+	{:else if state.viewer_type === "video"}
+		<Video state={state} on:open_sibling={e => {navigator.open_sibling(e.detail)}}/>
+	{:else if state.viewer_type === "pdf"}
+		<Pdf state={state}/>
+	{/if}
+</div>
+
+<style>
+.file_preview {
+	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;
+	border-radius: 12px;
+	border: 2px solid var(--separator);
+}
+
+.file_preview.toolbar_visible {
+	left: 8em;
+}
+</style>

svelte/src/filesystem/viewers/Image.svelte

@@ -1,6 +1,5 @@
 <script>
-import { fs_get_file_url } from "../FilesystemAPI.js";
-
+import { fs_file_url } from "../FilesystemUtil.js";
 
 export let state
 let container
@@ -51,7 +50,7 @@ const mouseup = (e) => {
 		on:doubletap={() => {zoom = !zoom}}
 		on:mousedown={mousedown}
 		class="image" class:zoom
-		src={fs_get_file_url(state.root.id, state.base.path)}
+		src={fs_file_url(state.root.id, state.base.path)}
 		alt="no description available" />
 </div>
 

svelte/src/filesystem/viewers/PDF.svelte

@@ -1,11 +1,11 @@
 <script>
-import { fs_get_file_url } from "../FilesystemAPI.js";
+import { fs_file_url } from "../FilesystemUtil.js";
 export let state
 </script>
 
 <iframe
 	class="container"
-	src={"/res/misc/pdf-viewer/web/viewer.html?file="+encodeURIComponent(fs_get_file_url(state.root.id, state.base.path))}
+	src={"/res/misc/pdf-viewer/web/viewer.html?file="+encodeURIComponent(fs_file_url(state.root.id, state.base.path))}
 	title="PDF viewer">
 </iframe>
 

svelte/src/filesystem/viewers/Video.svelte

@@ -1,5 +1,5 @@
 <script>
-import { fs_get_file_url } from "../FilesystemAPI.js";
+import { fs_file_url } from "../FilesystemUtil.js";
 import { createEventDispatcher, onMount } from 'svelte'
 let dispatch = createEventDispatcher()
 
@@ -38,7 +38,7 @@ onMount(() => {
 	<video
 		bind:this={player}
 		class="player"
-		src={fs_get_file_url(state.root.id, state.base.path)}
+		src={fs_file_url(state.root.id, state.base.path)}
 		autoplay="autoplay"
 		controls="controls"
 		on:ended={() => { dispatch("open_sibling", 1) }}>