Add zip previewer

svelte/src/file_viewer/viewers/FilePreview.svelte

@@ -13,6 +13,7 @@ import RateLimit from "./RateLimit.svelte";
 import Torrent from "./Torrent.svelte";
 import SpeedLimit from "./SpeedLimit.svelte";
 import { download_limits } from "../DownloadLimitStore";
+import Zip from "./Zip.svelte";
 
 let viewer
 let viewer_type = "loading"
@@ -68,7 +69,9 @@ export const set_file = async file => {
 {:else if viewer_type === "text"}
 	<Text bind:this={viewer}></Text>
 {:else if viewer_type === "torrent"}
-	<Torrent bind:this={viewer} on:loading on:download></Torrent>
+	<Torrent bind:this={viewer} on:loading on:download />
+{:else if viewer_type === "zip"}
+	<Zip bind:this={viewer} on:loading on:download />
 {:else if viewer_type === "file"}
 	<File bind:this={viewer} on:download on:reload></File>
 {/if}

svelte/src/file_viewer/viewers/Zip.svelte

@@ -0,0 +1,100 @@
+<script>
+import { createEventDispatcher } from "svelte";
+import { formatDataVolume, formatDate } from "../../util/Formatting.svelte"
+import TextBlock from "./TextBlock.svelte";
+import ZipItem from "./ZipItem.svelte";
+
+let dispatch = createEventDispatcher()
+
+let status = "loading"
+
+let file = {
+	name: "",
+	mime_type: "",
+	size: 0,
+	date_upload: "",
+	icon_href: ""
+}
+let zip = {
+	size: 0,
+	children: null,
+}
+let uncomp_size = 0
+
+export const set_file = async f => {
+	file = f
+
+	dispatch("loading", true)
+
+	try {
+		let resp = await fetch(f.info_href+"/zip")
+
+		if (resp.status >= 400) {
+			status = "parse_failed"
+			return
+		}
+
+		zip = await resp.json()
+
+		uncomp_size = recursive_size(zip)
+	} catch (err) {
+		console.error(err)
+	} finally {
+		dispatch("loading", false)
+	}
+
+	status = "finished"
+}
+
+const recursive_size = (file) => {
+	let size = file.size
+
+	// If the file has children (array is iterable) we call this function on all
+	// the children and add the size to our size accumulator
+	if (file.children.forEach) {
+		file.children.forEach(child => {
+			size += recursive_size(child)
+		});
+	}
+
+	// Return the total size of this file and all its children
+	return size
+}
+</script>
+
+<h1>{file.name}</h1>
+
+<img src={file.icon_href} alt="File icon" class="icon">
+<TextBlock width="600px">
+	Compressed size: {formatDataVolume(file.size, 3)}<br/>
+	Uncompressed size: {formatDataVolume(uncomp_size, 3)}<br/>
+	Uploaded on: {formatDate(file.date_upload, true, true, true)}
+	<br/>
+	<button class="button_highlight" on:click={() => {dispatch("download")}}>
+		<i class="icon">download</i>
+		<span>Download</span>
+	</button>
+</TextBlock>
+<br/><br/>
+
+{#if status === "parse_failed"}
+	<TextBlock width="650px">
+		<p>
+			Zip archive could not be parsed. It may be corrupted.
+		</p>
+	</TextBlock>
+{/if}
+
+{#if status === "finished"}
+	<TextBlock width="1000px">
+		<h2>Files in this zip archive</h2>
+		<ZipItem item={zip} />
+	</TextBlock>
+{/if}
+
+<style>
+h1 {
+	text-shadow: 1px 1px 3px var(--shadow_color);
+	line-break: anywhere;
+}
+</style>

svelte/src/file_viewer/viewers/ZipItem.svelte

@@ -0,0 +1,44 @@
+<script>
+import { formatDataVolume } from "../../util/Formatting.svelte";
+
+export let item = {
+	size: 0,
+	children: null,
+}
+</script>
+
+<!-- First get directories and render them as details collapsibles -->
+{#each Object.entries(item.children) as [name, child]}
+	{#if child.children}
+		<details>
+			<summary>
+				{name} ({formatDataVolume(child.size, 3)})
+			</summary>
+			<svelte:self item={child}></svelte:self>
+		</details>
+	{/if}
+{/each}
+
+<!-- Then get files and render them as list items -->
+<ul>
+	{#each Object.entries(item.children) as [name, child]}
+		{#if !child.children}
+			<li>
+				{name} ({formatDataVolume(child.size, 3)})<br/>
+			</li>
+		{/if}
+	{/each}
+</ul>
+
+<style>
+details {
+	padding-left: 12px;
+	border: none;
+	border-left: 2px solid var(--separator);
+}
+ul {
+	margin: 0;
+	padding-left: 30px;
+	border-left: 2px solid var(--separator);
+}
+</style>