Update files with exported function instead of a reactive function

svelte/src/file_viewer/viewers/FilePreview.svelte

@@ -0,0 +1,77 @@
+<script>
+import { createEventDispatcher, tick } from "svelte";
+
+import Spinner from "../../util/Spinner.svelte";
+import Video from "./Video.svelte";
+import Audio from "./Audio.svelte";
+import Image from "./Image.svelte";
+import PDF from "./PDF.svelte";
+import Text from "./Text.svelte";
+import File from "./File.svelte";
+import Abuse from "./Abuse.svelte";
+import { file_type } from "../FileUtilities.svelte";
+
+let viewer
+let viewer_type = "loading"
+
+export const set_file = async file => {
+	if (file.id === "") {
+		viewer_type = "loading"
+		return
+	} else if (file.abuse_type !== "") {
+		viewer_type = "abuse"
+	} else {
+		viewer_type = file_type(file)
+	}
+
+	console.log("opening file", file)
+
+	// Render the viewer component and set the file type
+	await tick()
+	viewer.set_file(file)
+}
+
+let dispatch = createEventDispatcher()
+const download = () => { dispatch("download") }
+const next = () => { dispatch("next") }
+const prev = () => { dispatch("prev") }
+
+</script>
+
+<div class="file_container">
+	{#if viewer_type === "loading"}
+		<div class="center" style="width: 100px; height: 100px;">
+			<Spinner></Spinner>
+		</div>
+	{:else if viewer_type === "abuse"}
+		<Abuse bind:this={viewer}></Abuse>
+	{:else if viewer_type === "image"}
+		<Image bind:this={viewer}></Image>
+	{:else if viewer_type === "video"}
+		<Video bind:this={viewer} on:download={download} on:prev={prev} on:next={next}></Video>
+	{:else if viewer_type === "audio"}
+		<Audio bind:this={viewer} on:prev={prev} on:next={next}></Audio>
+	{:else if viewer_type === "pdf"}
+		<PDF bind:this={viewer}></PDF>
+	{:else if viewer_type === "text"}
+		<Text bind:this={viewer}></Text>
+	{:else if viewer_type === "file"}
+		<File bind:this={viewer} on:download={download}></File>
+	{/if}
+</div>
+
+<style>
+.file_container {
+	width: 100%;
+	height: 100%;
+}
+.center{
+	position: relative;
+	display: block;
+	margin: auto;
+	max-width: 100%;
+	max-height: 100%;
+	top: 50%;
+	transform: translateY(-50%);
+}
+</style>