Add statistics to gallery view

svelte/src/file_viewer/FileViewer.svelte

@@ -14,13 +14,13 @@ import ReportWindow from "./ReportWindow.svelte";
 import IntroPopup from "./IntroPopup.svelte";
 import AdHead from "./AdHead.svelte";
 import AdLeaderboard from "./AdLeaderboard.svelte";
-import AdSkyscraper from "./AdSkyscraper.svelte";
 import Sharebar from "./Sharebar.svelte";
 import GalleryView from "./GalleryView.svelte";
 import Downloader from "./Downloader.svelte";
 import CustomBanner from "./CustomBanner.svelte";
 import LoadingIndicator from "../util/LoadingIndicator.svelte";
 import TransferLimit from "./TransferLimit.svelte";
+import ListStats from "./ListStats.svelte";
 
 let loading = true
 let embedded = false
@@ -412,10 +412,13 @@ const keyboard_event = evt => {
 	<div class="file_preview_row">
 		<div class="toolbar" class:toolbar_visible>
 			{#if view === "file"}
-				<FileStats file={file}></FileStats>
+				<FileStats file={file}/>
-				<div class="separator"></div>
+			{:else if view === "gallery"}
+				<ListStats list={list}/>
 			{/if}
 
+			<div class="separator"></div>
+
 			{#if file.abuse_type === "" && view === "file"}
 				<button
 					on:click={downloader.download_file}

svelte/src/file_viewer/ListStats.svelte

@@ -0,0 +1,46 @@
+<script>
+import { formatDataVolume, formatThousands } from "../util/Formatting.svelte"
+
+export let list = {
+	files: [],
+}
+
+$: size = list.files.reduce((acc, file) => acc += file.size, 0)
+$: views = list.files.reduce((acc, file) => acc += file.views, 0)
+$: downloads = list.files.reduce(
+	(acc, file) => {
+		if (file.size === 0) {
+			acc += file.downloads
+		} else {
+			acc += Math.round((file.bandwidth_used + file.bandwidth_used_paid) / file.size)
+		}
+		return acc
+	},
+	0,
+)
+
+</script>
+
+<div>
+	<div class="label">Files</div>
+	<div class="stat">{list.files.length}</div>
+	<div class="label">Size</div>
+	<div class="stat">{formatDataVolume(size, 3)}</div>
+	<div class="label">Views</div>
+	<div class="stat">{formatThousands(views)}</div>
+	<div class="label">Downloads</div>
+	<div class="stat">{formatThousands(downloads)}</div>
+</div>
+
+<style>
+.label {
+	text-align: left;
+	padding-left: 10px;
+	font-size: 0.8em;
+	line-height: 0.7em;
+	margin-top: 0.5em;
+}
+.stat {
+	text-align: center;
+}
+</style>