Allow downloading individual files from zip archive

svelte/src/file_viewer/viewers/Abuse.svelte

@@ -2,6 +2,7 @@
 import { createEventDispatcher } from "svelte";
 import IconBlock from "./IconBlock.svelte"
 import TextBlock from "./TextBlock.svelte"
+import FileTitle from "./FileTitle.svelte";
 
 let dispatch = createEventDispatcher()
 
@@ -16,7 +17,7 @@ let file = {
 }
 </script>
 
-<h1>{file.name}</h1>
+<FileTitle title={file.name}/>
 
 <TextBlock>
 	<h2>Unavailable for legal reasons</h2>

svelte/src/file_viewer/viewers/Audio.svelte

@@ -1,6 +1,7 @@
 <script>
 import { createEventDispatcher, tick } from "svelte";
 import BandwidthUsage from "./BandwidthUsage.svelte";
+import FileTitle from "./FileTitle.svelte";
 let dispatch = createEventDispatcher()
 
 export let is_list = false
@@ -52,7 +53,7 @@ const toggle_play = () => playing ? player.pause() : player.play()
 </script>
 
 <div class="container">
-	<h1>{file.name}</h1>
+	<FileTitle title={file.name}/>
 
 	{#if is_list}
 		<button on:click={() => dispatch("prev") }>

svelte/src/file_viewer/viewers/File.svelte

@@ -2,6 +2,7 @@
 import { createEventDispatcher } from "svelte";
 import BandwidthUsage from "./BandwidthUsage.svelte";
 import IconBlock from "./IconBlock.svelte";
+import FileTitle from "./FileTitle.svelte";
 let dispatch = createEventDispatcher()
 
 export const set_file = f => file = f
@@ -16,7 +17,7 @@ let file = {
 }
 </script>
 
-<h1>{file.name}</h1>
+<FileTitle title={file.name}/>
 
 <IconBlock icon_href={file.icon_href}>
 	Type: {file.mime_type}<br/>
@@ -31,14 +32,3 @@ let file = {
 {#if file.show_ads}
 	<BandwidthUsage file={file} on:reload/>
 {/if}
-
-<style>
-h1 {
-	text-shadow: 1px 1px 3px var(--shadow_color);
-	line-break: anywhere;
-}
-.icon {
-	display: inline-block;
-	vertical-align: middle;
-}
-</style>

svelte/src/file_viewer/viewers/FileTitle.svelte

@@ -0,0 +1,12 @@
+<script>
+export let title = ""
+</script>
+
+<h1>{title}</h1>
+
+<style>
+h1 {
+	text-shadow: 1px 1px 2px #000000;
+	line-break: anywhere;
+}
+</style>

svelte/src/file_viewer/viewers/Torrent.svelte

@@ -6,6 +6,7 @@ import { copy_text } from "../../util/Util.svelte";
 import IconBlock from "./IconBlock.svelte";
 import TextBlock from "./TextBlock.svelte";
 import TorrentItem from "./TorrentItem.svelte"
+import FileTitle from "./FileTitle.svelte";
 
 let dispatch = createEventDispatcher()
 
@@ -79,7 +80,7 @@ const copy_magnet = () => {
 }
 </script>
 
-<h1>{file.name}</h1>
+<FileTitle title={file.name}/>
 
 <IconBlock icon_href={file.icon_href}>
 	{#if status === "finished"}
@@ -129,14 +130,3 @@ const copy_magnet = () => {
 		<TorrentItem item={torrent.files} />
 	</TextBlock>
 {/if}
-
-<style>
-h1 {
-	text-shadow: 1px 1px 3px var(--shadow_color);
-	line-break: anywhere;
-}
-.icon {
-	display: inline-block;
-	vertical-align: middle;
-}
-</style>

svelte/src/file_viewer/viewers/Zip.svelte

@@ -5,6 +5,7 @@ import IconBlock from "./IconBlock.svelte";
 import TextBlock from "./TextBlock.svelte";
 import ZipItem from "./ZipItem.svelte";
 import BandwidthUsage from "./BandwidthUsage.svelte";
+import FileTitle from "./FileTitle.svelte";
 
 let dispatch = createEventDispatcher()
 
@@ -18,10 +19,10 @@ let file = {
 	icon_href: ""
 }
 let zip = {
+	download_url: "",
 	size: 0,
 	children: null,
 }
-let uncomp_size = 0
 let comp_ratio = 0
 
 export const set_file = async f => {
@@ -39,8 +40,10 @@ export const set_file = async f => {
 
 		zip = await resp.json()
 
-		uncomp_size = recursive_size(zip)
-		comp_ratio = (uncomp_size / file.size)
+		// Set the download URL for each file in the zip
+		recursive_set_url(f.info_href+"/zip", zip)
+
+		comp_ratio = (zip.size / file.size)
 	} catch (err) {
 		console.error(err)
 	} finally {
@@ -50,27 +53,22 @@ export const set_file = async f => {
 	status = "finished"
 }
 
-const recursive_size = (file) => {
-	let size = file.size
+const recursive_set_url = (parent_path, file) => {
+	file.download_url = parent_path
 
-	// 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)
+	if (file.children) {
+		Object.entries(file.children).forEach(child => {
+			recursive_set_url(file.download_url + "/" +child[0], child[1])
 		});
 	}
-
-	// Return the total size of this file and all its children
-	return size
 }
 </script>
 
-<h1>{file.name}</h1>
+<FileTitle title={file.name}/>
 
 <IconBlock icon_href={file.icon_href}>
 	Compressed size: {formatDataVolume(file.size, 3)}<br/>
-	Uncompressed size: {formatDataVolume(uncomp_size, 3)} (Ratio: {comp_ratio.toFixed(2)}x)<br/>
+	Uncompressed size: {formatDataVolume(zip.size, 3)} (Ratio: {comp_ratio.toFixed(2)}x)<br/>
 	Uploaded on: {formatDate(file.date_upload, true, true, true)}
 	<br/>
 	<button class="button_highlight" on:click={() => {dispatch("download")}}>
@@ -95,10 +93,3 @@ const recursive_size = (file) => {
 		</p>
 	</TextBlock>
 {/if}
-
-<style>
-h1 {
-	text-shadow: 1px 1px 3px var(--shadow_color);
-	line-break: anywhere;
-}
-</style>

svelte/src/file_viewer/viewers/ZipItem.svelte

@@ -2,6 +2,7 @@
 import { formatDataVolume } from "../../util/Formatting.svelte";
 
 export let item = {
+	download_url: "",
 	size: 0,
 	children: null,
 }
@@ -24,7 +25,7 @@ export let item = {
 	{#each Object.entries(item.children) as [name, child]}
 		{#if !child.children}
 			<li>
-				{name} ({formatDataVolume(child.size, 3)})<br/>
+				<a href={child.download_url}>{name}</a> ({formatDataVolume(child.size, 3)})<br/>
 			</li>
 		{/if}
 	{/each}