From 464a238f91fcdc8a53ffd8353311cc938f229721 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Tue, 26 Apr 2022 15:23:57 +0200
Subject: [PATCH] Use centralized loading indicator

---
 svelte/src/admin_panel/AbuseReporters.svelte |  17 +-
 svelte/src/admin_panel/AbuseReports.svelte   |  16 +-
 svelte/src/admin_panel/IPBans.svelte         |  16 +-
 svelte/src/admin_panel/Subscriptions.svelte  |  20 +-
 svelte/src/file_viewer/FileViewer.svelte     |  17 +-
 svelte/src/filesystem/Filesystem.svelte      |  10 +-
 svelte/src/user_buckets/UserBuckets.svelte   |  18 +-
 svelte/src/user_home/APIKeys.svelte          |  16 +-
 svelte/src/user_home/AccountSettings.svelte  | 190 ------------------
 svelte/src/user_home/ActivityLog.svelte      |  16 +-
 svelte/src/user_home/ConnectApp.svelte       |  17 +-
 svelte/src/user_home/Router.svelte           |  10 +
 svelte/src/user_home/SharingSettings.svelte  | 197 +++++++++++++++++++
 svelte/src/user_home/Subscription.svelte     |  27 +--
 svelte/src/user_home/Transactions.svelte     |  17 +-
 svelte/src/util/LoadingIndicator.svelte      |  22 +++
 webcontroller/web_controller.go              |   1 +
 17 files changed, 258 insertions(+), 369 deletions(-)
 create mode 100644 svelte/src/user_home/SharingSettings.svelte
 create mode 100644 svelte/src/util/LoadingIndicator.svelte

diff --git a/svelte/src/admin_panel/AbuseReporters.svelte b/svelte/src/admin_panel/AbuseReporters.svelte
index 9731226..a0faea0 100644
--- a/svelte/src/admin_panel/AbuseReporters.svelte
+++ b/svelte/src/admin_panel/AbuseReporters.svelte
@@ -1,7 +1,6 @@
 <script>
 import { onMount, tick } from "svelte";
-import { formatDate, formatDuration } from "../util/Formatting.svelte";
-import Spinner from "../util/Spinner.svelte";
+import LoadingIndicator from "../util/LoadingIndicator.svelte";
 import AbuseReporterTable from "./AbuseReporterTable.svelte";
 
 let loading = true
@@ -122,11 +121,7 @@ const delete_reporter = async reporter => {
 onMount(get_reporters);
 </script>
 
-{#if loading}
-	<div class="spinner_container">
-		<Spinner />
-	</div>
-{/if}
+<LoadingIndicator loading={loading}/>
 
 <section>
 	<div class="toolbar" style="text-align: left;">
@@ -201,14 +196,6 @@ onMount(get_reporters);
 </div>
 
 <style>
-.spinner_container {
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	height: 100px;
-	width: 100px;
-	z-index: 1000;
-}
 .toolbar {
 	display: flex;
 	flex-direction: row;
diff --git a/svelte/src/admin_panel/AbuseReports.svelte b/svelte/src/admin_panel/AbuseReports.svelte
index e6de6a6..4e173a9 100644
--- a/svelte/src/admin_panel/AbuseReports.svelte
+++ b/svelte/src/admin_panel/AbuseReports.svelte
@@ -1,6 +1,6 @@
 <script>
 import { onMount } from "svelte";
-import Spinner from "../util/Spinner.svelte";
+import LoadingIndicator from "../util/LoadingIndicator.svelte";
 import AbuseReport from "./AbuseReport.svelte";
 
 let loading = true
@@ -91,11 +91,7 @@ onMount(() => {
 });
 </script>
 
-{#if loading}
-	<div class="spinner_container">
-		<Spinner />
-	</div>
-{/if}
+<LoadingIndicator loading={loading}/>
 
 <section>
 	<div class="toolbar" style="text-align: left;">
@@ -123,14 +119,6 @@ onMount(() => {
 </section>
 
 <style>
-.spinner_container {
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	height: 100px;
-	width: 100px;
-	z-index: 1000;
-}
 .toolbar {
 	display: flex;
 	flex-direction: row;
diff --git a/svelte/src/admin_panel/IPBans.svelte b/svelte/src/admin_panel/IPBans.svelte
index 5dac6c1..c5d42e3 100644
--- a/svelte/src/admin_panel/IPBans.svelte
+++ b/svelte/src/admin_panel/IPBans.svelte
@@ -1,8 +1,8 @@
 <script>
 import { onMount } from "svelte";
 import { formatDate } from "../util/Formatting.svelte";
-import Spinner from "../util/Spinner.svelte";
 import Expandable from "../util/Expandable.svelte";
+import LoadingIndicator from "../util/LoadingIndicator.svelte";
 
 let loading = true
 let rows = []
@@ -79,11 +79,7 @@ const delete_ban = async (addr) => {
 onMount(get_bans);
 </script>
 
-{#if loading}
-	<div class="spinner_container">
-		<Spinner />
-	</div>
-{/if}
+<LoadingIndicator loading={loading}/>
 
 <section>
 	<div class="toolbar">
@@ -188,14 +184,6 @@ onMount(get_bans);
 </section>
 
 <style>
-.spinner_container {
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	height: 100px;
-	width: 100px;
-	z-index: 1000;
-}
 .toolbar {
 	display: flex;
 	flex-direction: row;
diff --git a/svelte/src/admin_panel/Subscriptions.svelte b/svelte/src/admin_panel/Subscriptions.svelte
index 2479f31..f1e5ac5 100644
--- a/svelte/src/admin_panel/Subscriptions.svelte
+++ b/svelte/src/admin_panel/Subscriptions.svelte
@@ -2,7 +2,7 @@
 import { onMount } from "svelte";
 import Euro from "../util/Euro.svelte";
 import Form from "./../util/Form.svelte";
-import Spinner from "../util/Spinner.svelte";
+import LoadingIndicator from "../util/LoadingIndicator.svelte";
 
 let loading = true
 
@@ -173,12 +173,9 @@ onMount(get_coupons)
 
 </script>
 
+<LoadingIndicator loading={loading}/>
+
 <section>
-	{#if loading}
-		<div class="spinner_container">
-			<Spinner />
-		</div>
-	{/if}
 	<h2>Give user credit</h2>
 	<p>
 		This adds credit to a user's account. You only need to enter one of
@@ -222,14 +219,3 @@ onMount(get_coupons)
 		</table>
 	</div>
 </section>
-
-<style>
-.spinner_container {
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	height: 100px;
-	width: 100px;
-	z-index: 1000;
-}
-</style>
diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte
index 6543eff..78d3f3f 100644
--- a/svelte/src/file_viewer/FileViewer.svelte
+++ b/svelte/src/file_viewer/FileViewer.svelte
@@ -17,10 +17,10 @@ import AdLeaderboard from "./AdLeaderboard.svelte";
 import AdSkyscraper from "./AdSkyscraper.svelte";
 import Sharebar from "./Sharebar.svelte";
 import GalleryView from "./GalleryView.svelte";
-import Spinner from "../util/Spinner.svelte";
 import Downloader from "./Downloader.svelte";
 import CustomBanner from "./CustomBanner.svelte";
 import UkraineModal from "./UkraineModal.svelte";
+import LoadingIndicator from "../util/LoadingIndicator.svelte";
 
 let loading = true
 let embedded = false
@@ -366,11 +366,7 @@ const keyboard_event = evt => {
 	<!-- Head elements for the ads -->
 	<AdHead></AdHead>
 
-	{#if loading}
-		<div class="spinner_container">
-			<Spinner></Spinner>
-		</div>
-	{/if}
+	<LoadingIndicator loading={loading}/>
 
 	<div id="headerbar" class="headerbar">
 		<button
@@ -618,15 +614,6 @@ const keyboard_event = evt => {
 </div>
 
 <style>
-.spinner_container {
-	position: absolute;
-	top: 10px;
-	right: 10px;
-	height: 100px;
-	width: 100px;
-	z-index: 10000;
-}
-
 .file_viewer {
 	position: absolute;
 	display: flex;
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index bbbbad7..8d514f4 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -3,7 +3,6 @@ import { onMount } from 'svelte';
 import { formatDate, formatDataVolume, formatThousands } from '../util/Formatting.svelte'
 import { fs_get_file_url, fs_get_node } from './FilesystemAPI.svelte'
 import Sharebar from './Sharebar.svelte'
-import Spinner from '../util/Spinner.svelte'
 import Modal from '../util/Modal.svelte'
 import FileManager from './filemanager/FileManager.svelte';
 import Audio from './viewers/Audio.svelte';
@@ -11,6 +10,7 @@ import Image from './viewers/Image.svelte';
 import Video from './viewers/Video.svelte';
 import PDF from './viewers/PDF.svelte';
 import PixeldrainLogo from '../util/PixeldrainLogo.svelte';
+import LoadingIndicator from '../util/LoadingIndicator.svelte';
 
 // Elements
 let file_viewer
@@ -271,13 +271,9 @@ const share = () => {
 
 <svelte:window on:keydown={keydown} />
 
-<div bind:this={file_viewer} class="file_viewer">
-	{#if state.loading}
-	<div style="position: absolute; right: 0; top: 0; height: 48px; width: 48px; z-index: 100;">
-		<Spinner></Spinner>
-	</div>
-	{/if}
+<LoadingIndicator loading={state.loading}/>
 
+<div bind:this={file_viewer} class="file_viewer">
 	<div bind:this={header_bar} class="file_viewer_headerbar">
 		<button on:click={toolbar_toggle} class="button_toggle_toolbar round" class:button_highlight={toolbar_visible}>
 			<i class="icon">menu</i>
diff --git a/svelte/src/user_buckets/UserBuckets.svelte b/svelte/src/user_buckets/UserBuckets.svelte
index 6bacd7c..a4b88ef 100644
--- a/svelte/src/user_buckets/UserBuckets.svelte
+++ b/svelte/src/user_buckets/UserBuckets.svelte
@@ -1,8 +1,8 @@
 <script>
 import { onMount } from "svelte";
 import UserBucket from "./UserBucket.svelte";
-import Spinner from "../util/Spinner.svelte";
 import { fs_get_buckets, fs_create_bucket } from "../filesystem/FilesystemAPI.svelte";
+import LoadingIndicator from "../util/LoadingIndicator.svelte";
 
 let loading = true
 let buckets = []
@@ -41,11 +41,7 @@ const create_bucket = async () => {
 onMount(get_buckets);
 </script>
 
-{#if loading}
-	<div class="spinner_container">
-		<Spinner />
-	</div>
-{/if}
+<LoadingIndicator loading={loading}/>
 
 <section>
 	<div class="toolbar" style="text-align: right;">
@@ -84,13 +80,3 @@ onMount(get_buckets);
 		<UserBucket bucket={bucket} on:refresh={get_buckets}></UserBucket>
 	{/each}
 </section>
-
-<style>
-.spinner_container {
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	height: 100px;
-	width: 100px;
-}
-</style>
diff --git a/svelte/src/user_home/APIKeys.svelte b/svelte/src/user_home/APIKeys.svelte
index 6f3e86b..c68fb20 100644
--- a/svelte/src/user_home/APIKeys.svelte
+++ b/svelte/src/user_home/APIKeys.svelte
@@ -1,6 +1,6 @@
 <script>
 import { formatDate } from "../util/Formatting.svelte";
-import Spinner from "../util/Spinner.svelte";
+import LoadingIndicator from "../util/LoadingIndicator.svelte";
 
 let loading = false
 let loaded = false
@@ -82,11 +82,7 @@ const logout = async (key) => {
 }
 </script>
 
-{#if loading}
-	<div class="spinner_container">
-		<Spinner />
-	</div>
-{/if}
+<LoadingIndicator loading={loading}/>
 
 <section>
 	{#if !loaded}
@@ -164,14 +160,6 @@ const logout = async (key) => {
 </div>
 
 <style>
-.spinner_container {
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	height: 100px;
-	width: 100px;
-	z-index: 1000;
-}
 .toolbar {
 	display: flex;
 	flex-direction: row;
diff --git a/svelte/src/user_home/AccountSettings.svelte b/svelte/src/user_home/AccountSettings.svelte
index 3cfe438..7028fc4 100644
--- a/svelte/src/user_home/AccountSettings.svelte
+++ b/svelte/src/user_home/AccountSettings.svelte
@@ -139,75 +139,6 @@ let delete_account = {
 		return {success: true, message: "Success! Your account has been scheduled for deletion in 7 days"}
 	},
 }
-
-let success_message
-let changes_made = false
-
-let file_picker
-let currently_selecting = "" // header, background or footer
-
-let theme = ""
-let header_image = ""
-let background_image = ""
-let footer_image = ""
-
-let select_file = t => {
-	currently_selecting = t
-	file_picker.open()
-}
-let add_file = files => {
-	let type = files[0].type
-	if (type != "image/png" && type != "image/jpeg" && type != "image/gif" && type != "image/webp") {
-		success_message.set(false, "File must be an image type")
-		return
-	}
-	if (files[0].size > 10e6) {
-		success_message.set(false, "Files larger than 10 MB are not allowed. Recommended size is below 1 MB")
-		return
-	}
-
-	if (currently_selecting === "header") {
-		header_image = files[0].id
-	} else if (currently_selecting === "background") {
-		background_image = files[0].id
-	} else if (currently_selecting === "footer") {
-		footer_image = files[0].id
-	}
-
-	changes_made = true
-}
-let save = async () => {
-	const form = new FormData()
-	form.append("theme", theme)
-	form.append("header_image", header_image)
-	form.append("background_image", background_image)
-	form.append("footer_image", footer_image)
-
-	const resp = await fetch(
-		window.api_endpoint+"/user/file_customization",
-		{ method: "PUT", body: form }
-	);
-	if(resp.status >= 400) {
-		let json = await resp.json()
-		console.debug(json)
-		success_message.set(false, json.message)
-		return
-	}
-
-	success_message.set(true, "Changes saved")
-	changes_made = false
-}
-
-onMount(() => {
-	if (window.user.file_viewer_branding) {
-		let b = window.user.file_viewer_branding
-		theme = b.theme ? b.theme : ""
-		header_image = b.header_image ? b.header_image : ""
-		background_image = b.background_image ? b.background_image : ""
-		footer_image = b.footer_image ? b.footer_image : ""
-	}
-})
-
 </script>
 
 <section>
@@ -223,125 +154,4 @@ onMount(() => {
 
 	<h3>Delete account</h3>
 	<Form config={delete_account}></Form>
-
-	<h2>File viewer branding</h2>
-	{#if !window.user.subscription.file_viewer_branding}
-		<div class="highlight_red">
-			File viewer branding is not available for your account. Subscribe to
-			the Persistence plan or higher to enable this feature.
-		</div>
-	{:else if !window.user.hotlinking_enabled}
-		<div class="highlight_red">
-			To use the branding feature bandwidth sharing needs to be enabled.
-			Without this the custom images will not be able to load. Enable
-			bandwidth sharing on the
-			<a href="/user/subscription">subscription page</a>.
-		</div>
-	{/if}
-	<SuccessMessage bind:this={success_message}></SuccessMessage>
-	<p>
-		You can change the appearance of your file viewer pages. The images you
-		choose here will be loaded each time someone visits one of your files.
-		The data usage will also be subtracted from your account's data cap.
-		Keep in mind that large images can take a very long time to load over
-		cellular connections. I recommend keeping the header and footer images
-		below 100 kB, and the background image below 1 MB. Allowed image types
-		are PNG, JPEG, GIF and WebP. If you want to use an animated banner you
-		should use APNG or WebP. Avoid using animated GIFs as they are very slow
-		to load.
-	</p>
-	<h3>Theme</h3>
-	<p>
-		Choose a theme for your download pages. This theme will override the
-		theme preference of the person viewing the file. Set to 'None' to let
-		the viewer choose their own theme.
-	</p>
-	<ThemePicker
-		theme={theme}
-		on:theme_change={e => {theme = e.detail; changes_made = true}}>
-	</ThemePicker>
-
-	<h3>Header image</h3>
-	<p>
-		Will be shown above the file. Maximum height is 90px. Will be shrunk if
-		larger.
-	</p>
-	<button on:click={() => {select_file("header")}}>
-		<i class="icon">add_photo_alternate</i>
-		Select header image
-	</button>
-	<button on:click={() => {header_image = ""}}>
-		<i class="icon">close</i>
-		Remove
-	</button>
-	{#if header_image}
-		<div class="highlight_shaded">
-			<img class="banner_preview" src="/api/file/{header_image}" alt="Custom file viewer header"/>
-		</div>
-	{/if}
-
-	<h3>Background image</h3>
-	<p>
-		This image will be shown behind the file which is being viewed. I
-		recommend choosing something dark and not too distracting. Try to keep
-		the file below 1 MB to not harm page loading times. Using a JPEG image
-		with a quality value of 60 is usually good enough.
-	</p>
-	<button on:click={() => {select_file("background")}}>
-		<i class="icon">add_photo_alternate</i>
-		Select background image
-	</button>
-	<button on:click={() => {background_image = ""}}>
-		<i class="icon">close</i>
-		Remove
-	</button>
-	{#if background_image}
-		<div class="highlight_shaded">
-			<img class="background_preview" src="/api/file/{background_image}" alt="Custom file viewer background"/>
-		</div>
-	{/if}
-
-	<h3>Footer image</h3>
-	<p>
-		Will be shown below the file. Maximum height is 90px. Will be shrunk if
-		larger.
-	</p>
-	<button on:click={() => {select_file("footer")}}>
-		<i class="icon">add_photo_alternate</i>
-		Select footer image
-	</button>
-	<button on:click={() => {footer_image = ""}}>
-		<i class="icon">close</i>
-		Remove
-	</button>
-	{#if footer_image}
-		<div class="highlight_shaded">
-			<img class="banner_preview" src="/api/file/{footer_image}" alt="Custom file viewer footer"/>
-		</div>
-	{/if}
-
-	<hr/>
-
-	<button on:click={save} class:button_highlight={changes_made}>
-		<i class="icon">save</i> Save
-	</button>
-	<br/>
-	<br/>
 </section>
-
-<FilePicker bind:this={file_picker} on:files={e => {add_file(e.detail)}} multi_select={false} title="Select image file"></FilePicker>
-
-<style>
-.banner_preview {
-	max-height: 90px;
-	max-width: 100%;
-	display: block;
-	margin: auto;
-}
-.background_preview {
-	max-height: 200px;
-	max-width: 100%;
-	display: block;
-	margin: auto;
-}
-</style>
diff --git a/svelte/src/user_home/ActivityLog.svelte b/svelte/src/user_home/ActivityLog.svelte
index 3ab4d57..1e661fe 100644
--- a/svelte/src/user_home/ActivityLog.svelte
+++ b/svelte/src/user_home/ActivityLog.svelte
@@ -1,7 +1,7 @@
 <script>
 import { onMount } from "svelte";
 import { formatDate } from "../util/Formatting.svelte";
-import Spinner from "../util/Spinner.svelte";
+import LoadingIndicator from "../util/LoadingIndicator.svelte";
 
 let loading = false
 
@@ -59,11 +59,7 @@ onMount(() => {
 })
 </script>
 
-{#if loading}
-	<div class="spinner_container">
-		<Spinner />
-	</div>
-{/if}
+<LoadingIndicator loading={loading}/>
 
 <section>
 	<h2>Account activity log</h2>
@@ -134,14 +130,6 @@ onMount(() => {
 </section>
 
 <style>
-.spinner_container {
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	height: 100px;
-	width: 100px;
-	z-index: 1000;
-}
 .toolbar {
 	display: flex;
 	flex-direction: row;
diff --git a/svelte/src/user_home/ConnectApp.svelte b/svelte/src/user_home/ConnectApp.svelte
index 0c4844c..309b93b 100644
--- a/svelte/src/user_home/ConnectApp.svelte
+++ b/svelte/src/user_home/ConnectApp.svelte
@@ -1,6 +1,6 @@
 <script>
 import { onMount } from "svelte";
-import Spinner from "../util/Spinner.svelte";
+import LoadingIndicator from "../util/LoadingIndicator.svelte";
 import { copy_text } from "../util/Util.svelte";
 
 let loading = false
@@ -55,11 +55,7 @@ onMount(() => {
 })
 </script>
 
-{#if loading}
-	<div class="spinner_container">
-		<Spinner />
-	</div>
-{/if}
+<LoadingIndicator loading={loading}/>
 
 <section>
 	<!-- Show a back button if an app is selected -->
@@ -200,15 +196,6 @@ onMount(() => {
 </section>
 
 <style>
-.spinner_container {
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	height: 100px;
-	width: 100px;
-	z-index: 1000;
-}
-
 .app_icon {
 	height: 1.6em;
 	vertical-align: middle;
diff --git a/svelte/src/user_home/Router.svelte b/svelte/src/user_home/Router.svelte
index 85656b5..7ff37af 100644
--- a/svelte/src/user_home/Router.svelte
+++ b/svelte/src/user_home/Router.svelte
@@ -7,6 +7,7 @@ import Transactions from "./Transactions.svelte";
 import Subscription from "./Subscription.svelte";
 import ConnectApp from "./ConnectApp.svelte";
 import ActivityLog from "./ActivityLog.svelte";
+import SharingSettings from "./SharingSettings.svelte";
 
 let page = ""
 
@@ -52,6 +53,13 @@ onMount(() => {
 			<i class="icon">settings</i><br/>
 			Settings
 		</a>
+		<a class="button"
+			href="/user/sharing"
+			class:button_highlight={page === "sharing"}
+			on:click|preventDefault={() => {navigate("sharing", "Sharing")}}>
+			<i class="icon">share</i><br/>
+			Sharing
+		</a>
 		<a class="button"
 			href="/user/connect_app"
 			class:button_highlight={page === "connect_app"}
@@ -97,6 +105,8 @@ onMount(() => {
 	<Home/>
 {:else if page === "settings"}
 	<AccountSettings/>
+{:else if page === "sharing"}
+	<SharingSettings/>
 {:else if page === "api_keys"}
 	<APIKeys/>
 {:else if page === "activity"}
diff --git a/svelte/src/user_home/SharingSettings.svelte b/svelte/src/user_home/SharingSettings.svelte
new file mode 100644
index 0000000..c277049
--- /dev/null
+++ b/svelte/src/user_home/SharingSettings.svelte
@@ -0,0 +1,197 @@
+<script>
+import { onMount } from "svelte";
+import FilePicker from "../file_viewer/FilePicker.svelte";
+import LoadingIndicator from "../util/LoadingIndicator.svelte";
+import SuccessMessage from "../util/SuccessMessage.svelte";
+import ThemePicker from "../util/ThemePicker.svelte";
+
+let loading = false
+let success_message
+
+let file_picker
+let currently_selecting = "" // header, background or footer
+
+let theme = ""
+let header_image = ""
+let background_image = ""
+let footer_image = ""
+
+let select_file = t => {
+	currently_selecting = t
+	file_picker.open()
+}
+let add_file = files => {
+	let type = files[0].type
+	if (type != "image/png" && type != "image/jpeg" && type != "image/gif" && type != "image/webp") {
+		success_message.set(false, "File must be an image type")
+		return
+	}
+	if (files[0].size > 10e6) {
+		success_message.set(false, "Files larger than 10 MB are not allowed. Recommended size is below 1 MB")
+		return
+	}
+
+	if (currently_selecting === "header") {
+		header_image = files[0].id
+	} else if (currently_selecting === "background") {
+		background_image = files[0].id
+	} else if (currently_selecting === "footer") {
+		footer_image = files[0].id
+	}
+
+	save()
+}
+
+let save = async () => {
+	loading = true
+	const form = new FormData()
+	form.append("theme", theme)
+	form.append("header_image", header_image)
+	form.append("background_image", background_image)
+	form.append("footer_image", footer_image)
+
+	const resp = await fetch(
+		window.api_endpoint+"/user/file_customization",
+		{ method: "PUT", body: form }
+	);
+	if(resp.status >= 400) {
+		let json = await resp.json()
+		console.debug(json)
+		success_message.set(false, json.message)
+		return
+	}
+
+	success_message.set(true, "Changes saved")
+	loading = false
+}
+
+onMount(() => {
+	if (window.user.file_viewer_branding) {
+		let b = window.user.file_viewer_branding
+		theme = b.theme ? b.theme : ""
+		header_image = b.header_image ? b.header_image : ""
+		background_image = b.background_image ? b.background_image : ""
+		footer_image = b.footer_image ? b.footer_image : ""
+	}
+})
+
+</script>
+
+<LoadingIndicator loading={loading}/>
+
+<section>
+	<h2>File viewer branding</h2>
+	{#if !window.user.subscription.file_viewer_branding}
+		<div class="highlight_red">
+			File viewer branding is not available for your account. Subscribe to
+			the Persistence plan or higher to enable this feature.
+		</div>
+	{:else if !window.user.hotlinking_enabled}
+		<div class="highlight_red">
+			To use the branding feature bandwidth sharing needs to be enabled.
+			Without this the custom images will not be able to load. Enable
+			bandwidth sharing on the
+			<a href="/user/subscription">subscription page</a>.
+		</div>
+	{/if}
+	<SuccessMessage bind:this={success_message}></SuccessMessage>
+	<p>
+		You can change the appearance of your file viewer pages. The images you
+		choose here will be loaded each time someone visits one of your files.
+		The data usage will also be subtracted from your account's data cap.
+		Keep in mind that large images can take a very long time to load over
+		cellular connections. I recommend keeping the header and footer images
+		below 100 kB, and the background image below 1 MB. Allowed image types
+		are PNG, JPEG, GIF and WebP. If you want to use an animated banner you
+		should use APNG or WebP. Avoid using animated GIFs as they are very slow
+		to load.
+	</p>
+	<h3>Theme</h3>
+	<p>
+		Choose a theme for your download pages. This theme will override the
+		theme preference of the person viewing the file. Set to 'None' to let
+		the viewer choose their own theme.
+	</p>
+	<ThemePicker
+		theme={theme}
+		on:theme_change={e => {theme = e.detail; save()}}>
+	</ThemePicker>
+
+	<h3>Header image</h3>
+	<p>
+		Will be shown above the file. Maximum height is 90px. Will be shrunk if
+		larger.
+	</p>
+	<button on:click={() => {select_file("header")}}>
+		<i class="icon">add_photo_alternate</i>
+		Select header image
+	</button>
+	<button on:click={() => {header_image = ""; save()}}>
+		<i class="icon">close</i>
+		Remove
+	</button>
+	{#if header_image}
+		<div class="highlight_shaded">
+			<img class="banner_preview" src="/api/file/{header_image}" alt="Custom file viewer header"/>
+		</div>
+	{/if}
+
+	<h3>Background image</h3>
+	<p>
+		This image will be shown behind the file which is being viewed. I
+		recommend choosing something dark and not too distracting. Try to keep
+		the file below 1 MB to not harm page loading times. Using a JPEG image
+		with a quality value of 60 is usually good enough.
+	</p>
+	<button on:click={() => {select_file("background")}}>
+		<i class="icon">add_photo_alternate</i>
+		Select background image
+	</button>
+	<button on:click={() => {background_image = ""; save()}}>
+		<i class="icon">close</i>
+		Remove
+	</button>
+	{#if background_image}
+		<div class="highlight_shaded">
+			<img class="background_preview" src="/api/file/{background_image}" alt="Custom file viewer background"/>
+		</div>
+	{/if}
+
+	<h3>Footer image</h3>
+	<p>
+		Will be shown below the file. Maximum height is 90px. Will be shrunk if
+		larger.
+	</p>
+	<button on:click={() => {select_file("footer")}}>
+		<i class="icon">add_photo_alternate</i>
+		Select footer image
+	</button>
+	<button on:click={() => {footer_image = ""; save()}}>
+		<i class="icon">close</i>
+		Remove
+	</button>
+	{#if footer_image}
+		<div class="highlight_shaded">
+			<img class="banner_preview" src="/api/file/{footer_image}" alt="Custom file viewer footer"/>
+		</div>
+	{/if}
+	<br/>
+	<br/>
+</section>
+
+<FilePicker bind:this={file_picker} on:files={e => {add_file(e.detail)}} multi_select={false} title="Select image file"></FilePicker>
+
+<style>
+.banner_preview {
+	max-height: 90px;
+	max-width: 100%;
+	display: block;
+	margin: auto;
+}
+.background_preview {
+	max-height: 200px;
+	max-width: 100%;
+	display: block;
+	margin: auto;
+}
+</style>
diff --git a/svelte/src/user_home/Subscription.svelte b/svelte/src/user_home/Subscription.svelte
index 611199e..c1714ba 100644
--- a/svelte/src/user_home/Subscription.svelte
+++ b/svelte/src/user_home/Subscription.svelte
@@ -1,9 +1,9 @@
 <script>
-import Spinner from "../util/Spinner.svelte";
 import Euro from "../util/Euro.svelte"
 import ProgressBar from "../util/ProgressBar.svelte";
 import { onMount } from "svelte";
 import { formatDataVolume } from "../util/Formatting.svelte";
+import LoadingIndicator from "../util/LoadingIndicator.svelte";
 
 let loading = false
 let subscription = window.user.subscription.id
@@ -73,11 +73,8 @@ onMount(load_tranfer_used)
 
 </script>
 
-{#if loading}
-	<div class="spinner_container">
-		<Spinner />
-	</div>
-{/if}
+<LoadingIndicator loading={loading}/>
+
 <section>
 	<h2>Manage subscription</h2>
 	{#if window.user.subscription.type !== "patreon"}
@@ -237,15 +234,6 @@ onMount(load_tranfer_used)
 </section>
 
 <style>
-.spinner_container {
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	height: 100px;
-	width: 100px;
-	z-index: 1000;
-}
-
 .green {
 	color: var(--highlight_color);
 }
@@ -257,15 +245,6 @@ onMount(load_tranfer_used)
 	flex-direction: row;
 	align-items: center;
 }
-
-.spinner_container {
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	height: 100px;
-	width: 100px;
-	z-index: 1000;
-}
 .feat_table {
 	display: flex;
 	flex-direction: column;
diff --git a/svelte/src/user_home/Transactions.svelte b/svelte/src/user_home/Transactions.svelte
index d7eb8cd..b7628d9 100644
--- a/svelte/src/user_home/Transactions.svelte
+++ b/svelte/src/user_home/Transactions.svelte
@@ -1,8 +1,8 @@
 <script>
 import { onMount } from "svelte";
 import { formatDataVolume, formatDate } from "../util/Formatting.svelte";
-import Spinner from "../util/Spinner.svelte";
 import Euro from "../util/Euro.svelte"
+import LoadingIndicator from "../util/LoadingIndicator.svelte";
 
 let loading = false
 
@@ -135,12 +135,9 @@ onMount(() => {
 })
 </script>
 
+<LoadingIndicator loading={loading}/>
+
 <section>
-	{#if loading}
-		<div class="spinner_container">
-			<Spinner />
-		</div>
-	{/if}
 	<h2>Deposit credits</h2>
 	<p>
 		You can deposit credit on your pixeldrain account with Bitcoin,
@@ -301,14 +298,6 @@ onMount(() => {
 </section>
 
 <style>
-.spinner_container {
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	height: 100px;
-	width: 100px;
-	z-index: 1000;
-}
 .toolbar {
 	display: flex;
 	flex-direction: row;
diff --git a/svelte/src/util/LoadingIndicator.svelte b/svelte/src/util/LoadingIndicator.svelte
new file mode 100644
index 0000000..4612caf
--- /dev/null
+++ b/svelte/src/util/LoadingIndicator.svelte
@@ -0,0 +1,22 @@
+<script>
+import Spinner from "./Spinner.svelte";
+
+export let loading = false
+</script>
+
+{#if loading}
+	<div class="container">
+		<Spinner/>
+	</div>
+{/if}
+
+<style>
+.container {
+	position: fixed;
+	top: 10px;
+	right: 10px;
+	height: 120px;
+	width: 120px;
+	z-index: 1000;
+}
+</style>
diff --git a/webcontroller/web_controller.go b/webcontroller/web_controller.go
index 20dd057..9291e5e 100644
--- a/webcontroller/web_controller.go
+++ b/webcontroller/web_controller.go
@@ -181,6 +181,7 @@ func New(
 		{GET, "user" /*                       */, wc.serveTemplate("user_home", handlerOpts{Auth: true})},
 		{GET, "user/home" /*                  */, wc.serveTemplate("user_home", handlerOpts{Auth: true})},
 		{GET, "user/settings" /*              */, wc.serveTemplate("user_home", handlerOpts{Auth: true})},
+		{GET, "user/sharing" /*               */, wc.serveTemplate("user_home", handlerOpts{Auth: true})},
 		{GET, "user/api_keys" /*              */, wc.serveTemplate("user_home", handlerOpts{Auth: true})},
 		{GET, "user/activity" /*              */, wc.serveTemplate("user_home", handlerOpts{Auth: true})},
 		{GET, "user/connect_app" /*           */, wc.serveTemplate("user_home", handlerOpts{Auth: true})},