Storage warning on home page

res/static/ads.txt

@@ -1,5 +1,5 @@
 #Ads.Plus
-#Last update on 26/07/2021
+#Last update on 2021-10-30
 
 google.com, pub-7945044863874787, DIRECT, f08c47fec0942fa0
 google.com, pub-7945044863874787, RESELLER, f08c47fec0942fa0
@@ -943,6 +943,44 @@ xandr.com, 12701, RESELLER, f5ab79cb980f11d1
 yahoo.com, 57872, RESELLER
 appnexus.com, 13099, RESELLER
 smartadserver.com, 4111, RESELLER
+themoneytizer.com, 50244, DIRECT
+smartadserver.com, 2491, RESELLER
+advertising.com, 21483, DIRECT, e1a5b5b6e3255540
+improvedigital.com, 1010, RESELLER
+indexexchange.com, 193216, DIRECT
+admanmedia.com, 722, DIRECT
+appnexus.com, 10040, RESELLER
+rubiconproject.com, 19814, RESELLER, 0bfd66d529a55807
+spotxchange.com, 178357, RESELLER, 7842df1d2fe2db34
+spotx.tv, 178357, RESELLER, 7842df1d2fe2db34
+pubmatic.com, 158810, RESELLER, 5d62403b186f2ace
+pubmatic.com, 158481, DIRECT, 5d62403b186f2ace
+spotx.tv, 238936, RESELLER, 7842df1d2fe2db34
+rubiconproject.com, 19668, RESELLER, 0bfd66d529a55807
+indexexchange.com, 190856, RESELLER, 50b1c356f2c5c8fc
+pubmatic.com, 158615, RESELLER, 5d62403b186f2ace
+pubmatic.com, 156674, RESELLER, 5d62403b186f2ace
+rubiconproject.com, 16114, DIRECT
+azeriondigital.com, 43710415, DIRECT
+appnexus.com, 12223, RESELLER, f5ab79cb980f11d1
+improvedigital.com, 1210, RESELLER
+improvedigital.com, 1221, RESELLER
+pubmatic.com, 150561, RESELLER, 5d62403b186f2ace
+emxdgt.com, 1836, DIRECT, 1e1d41537f7cad7f
+emxdgt.com, 1289, DIRECT, 1e1d41537f7cad7f
+advertising.com, 28335, DIRECT, e1a5b5b6e3255540
+adpone.com, 59e252f6de67f6c8d1f8, DIRECT
+smilewanted.com, 1362, DIRECT
+adyoulike.com, b3e21aeb2e950aa59e5e8cc1b6dd6f8e, DIRECT, 4ad745ead2958bf7
+rubiconproject.com, 23404, DIRECT, 0bfd66d529a55807
+33across.com, 0010b00002Mq2FYAAZ, RESELLER, bbea06d9c4d2853c
+admanmedia.com, 812, RESELLER
+amxrtb.com, 105199579, RESELLER
+google.com, pub-1789253751882305, RESELLER, f08c47fec0942fa0
+google.com, pub-1835489473992347, RESELLER, f08c47fec0942fa0
+gumgum.com, 13926, RESELLER, ffdef49475d318a9
+indexexchange.com, 195491, RESELLER, 50b1c356f2c5c8fc
+# End of ads.plus
 
 #pixfuture START updated Aug-23-2021
 pixfuture.com, 4605, DIRECT

res/template/home.html

@@ -86,7 +86,7 @@
 
 		<script>
 			window.api_endpoint = '{{.APIEndpoint}}';
-			window.user_subscription = {{.User.Subscription}};
+			window.user = {{.User}};
 		</script>
 		<link rel='stylesheet' href='/res/svelte/home_page.css?v2'>
 		<script defer src='/res/svelte/home_page.js?v2'></script>

svelte/src/home_page/HomePage.svelte

@@ -7,6 +7,7 @@ import Reddit from "../icons/Reddit.svelte"
 import Twitter from "../icons/Twitter.svelte"
 import Tumblr from "../icons/Tumblr.svelte"
 import { formatDataVolume, formatDuration } from "../util/Formatting.svelte";
+import StorageProgressBar from "../user_home/StorageProgressBar.svelte"
 
 // === UPLOAD LOGIC ===
 
@@ -109,7 +110,6 @@ const finish_upload = (file) => {
 
 let stats_interval = null
 let stats_interval_ms = 500
-let progress_bar_outer
 let progress_bar_inner
 let start_time = 0
 let total_progress = 0
@@ -154,6 +154,16 @@ const stats_finished = () => {
 	total_rate = 0
 }
 
+const leave_confirmation = e => {
+	if (state === "uploading") {
+		e.preventDefault()
+		e.returnValue = "If you close the page your files will stop uploading. Do you want to continue?"
+		return e.returnValue
+	} else {
+		return null
+	}
+}
+
 // === SHARING BUTTONS ===
 
 let navigator_share = !!(window.navigator && window.navigator.share)
@@ -386,9 +396,16 @@ const keydown = (e) => {
 	on:dragleave|preventDefault|stopPropagation={() => { dragging = false }}
 	on:drop={drop}
 	on:paste={paste}
-	on:keydown={keydown} />
+	on:keydown={keydown}
+	on:beforeunload={leave_confirmation} />
 
 <div>
+	{#if window.user.username !== ""}
+		<div class="limit_width">
+			<StorageProgressBar used={window.user.storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
+		</div>
+	{/if}
+
 	<div class="instruction" style="margin-top: 0;">
 		<div class="limit_width">
 			<span class="big_number">1</span>
@@ -428,7 +445,7 @@ const keydown = (e) => {
 			</div>
 		</div>
 	</div>
-	<div bind:this={progress_bar_outer} class="progress_bar_outer" style="margin-bottom: 1.5em;">
+	<div class="progress_bar_outer" style="margin-bottom: 1.5em;">
 		<div bind:this={progress_bar_inner} class="progress_bar_inner"></div>
 	</div>
 
@@ -516,7 +533,7 @@ const keydown = (e) => {
 		</a>
 	{/each}
 
-	{#if window.user_subscription.name === ""}
+	{#if window.user.subscription.name === ""}
 		<div class="instruction">
 			<div class="limit_width">
 				<span class="big_number">4</span>

svelte/src/home_page/UploadProgressBar.svelte

@@ -78,10 +78,10 @@ const on_failure = (status, message) => {
 }
 
 export const start = () => {
-	if (window.user_subscription.file_size_limit === 0) {
+	if (window.user.subscription.file_size_limit === 0) {
-		window.user_subscription.file_size_limit = 5e9
+		window.user.subscription.file_size_limit = 5e9
 	}
-	if (job.total_size > window.user_subscription.file_size_limit) {
+	if (job.total_size > window.user.subscription.file_size_limit) {
 		on_failure(
 			"file_too_large",
 			"This file is too large. Check out the Pro subscription to increase the file size limit"

svelte/src/user_home/Home.svelte

@@ -2,6 +2,8 @@
 import { onDestroy, onMount } from "svelte";
 import { formatDataVolume, formatThousands } from "../util/Formatting.svelte";
 import Chart from "../util/Chart.svelte";
+import StorageProgressBar from "./StorageProgressBar.svelte";
+import HotlinkProgressBar from "./HotlinkProgressBar.svelte";
 
 let graph_view = null
 let graph_download = null
@@ -146,73 +148,8 @@ onDestroy(() => {
 			</li>
 		</ul>
 
-		Storage:
+		<StorageProgressBar used={storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
-		{formatDataVolume(storage_space_used, 3)}
+		<HotlinkProgressBar used={direct_link_bandwidth_used} total={window.user.subscription.direct_linking_bandwidth}></HotlinkProgressBar>
-		out of
-		{formatDataVolume(window.user.subscription.storage_space, 3)}
-		<br/>
-		<div class="progress_bar_outer">
-			<div id="storage_progress" class="progress_bar_inner" style="width: {storage_percent*100}%;"></div>
-		</div>
-
-		{#if storage_percent > 0.99}
-			<div class="highlight_red">
-				You have used all of your storage space. You won't be able to
-				upload new files anymore. Please upgrade to a higher support
-				tier to continue uploading files:
-				<br/>
-				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
-					Upgrade options
-				</a>
-			</div>
-		{:else if storage_percent > 0.8}
-			<div class="highlight_yellow">
-				You have used {(storage_percent*100).toFixed(0)}% of your
-				storage space. If your storage space runs out you won't be able
-				to upload new files anymore. Please upgrade to a higher support
-				tier to continue uploading files:
-				<br/>
-				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
-					Upgrade options
-				</a>
-			</div>
-		{/if}
-
-		Hotlink bandwidth:
-		{formatDataVolume(direct_link_bandwidth_used, 3)}
-		out of
-		{formatDataVolume(window.user.subscription.direct_linking_bandwidth, 3)}
-		(<a href="/#hotlinking">More information about hotlinking</a>)
-		<br/>
-		<div class="progress_bar_outer">
-			<div id="direct_bandwidth_progress" class="progress_bar_inner" style="width: {direct_link_percent*100}%;"></div>
-		</div>
-
-		{#if direct_link_percent > 0.99}
-			<div class="highlight_red">
-				You have used all of your hotlink bandwidth. Other people won't
-				be able to download your files directly from the API anymore.
-				Downloads will have to go through the file viewer page. Please
-				upgrade to a higher support tier to continue hotlinking files:
-				<br/>
-				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
-					Upgrade options
-				</a>
-			</div>
-		{:else if direct_link_percent > 0.8}
-			<div class="highlight_yellow">
-				You have used {(direct_link_percent*100).toFixed(0)}% of your
-				hotlink bandwidth. If your hotlink bandwidth runs out people
-				won't be able to download your files directly from the API
-				anymore. Downloads will have to go through the file viewer page.
-				Please upgrade to a higher support tier to continue hotlinking
-				files:
-				<br/>
-				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
-					Upgrade options
-				</a>
-			</div>
-		{/if}
 
 		<h3>Exports</h3>
 		<div style="text-align: center;">

svelte/src/user_home/HotlinkProgressBar.svelte

@@ -0,0 +1,62 @@
+<script>
+import { formatDataVolume } from "../util/Formatting.svelte"
+
+export let total = 0
+export let used = 0
+
+$: frac = used / total
+</script>
+
+<div>
+	Hotlink bandwidth:
+	{formatDataVolume(used, 3)}
+	out of
+	{formatDataVolume(total, 3)}
+	(<a href="/#hotlinking">More information about hotlinking</a>)
+	<br/>
+	<div class="progress_bar_outer">
+		<div class="progress_bar_inner" style="width: {frac*100}%;"></div>
+	</div>
+
+	{#if frac > 0.99}
+		<div class="highlight_red">
+			You have used all of your hotlink bandwidth. Other people won't
+			be able to download your files directly from the API anymore.
+			Downloads will have to go through the file viewer page. Please
+			upgrade to a higher support tier to continue hotlinking files:
+			<br/>
+			<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
+				Upgrade options
+			</a>
+		</div>
+	{:else if frac > 0.8}
+		<div class="highlight_yellow">
+			You have used {(frac*100).toFixed(0)}% of your
+			hotlink bandwidth. If your hotlink bandwidth runs out people
+			won't be able to download your files directly from the API
+			anymore. Downloads will have to go through the file viewer page.
+			Please upgrade to a higher support tier to continue hotlinking
+			files:
+			<br/>
+			<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
+				Upgrade options
+			</a>
+		</div>
+	{/if}
+</div>
+
+<style>
+.progress_bar_outer {
+	display: block;
+	background-color: var(--layer_1_color);
+	width: 100%;
+	height: 3px;
+	margin: 6px 0 12px 0;
+}
+.progress_bar_inner {
+	background-color: var(--highlight_color);
+	height: 100%;
+	width: 0;
+	transition: width 1s;
+}
+</style>

svelte/src/user_home/StorageProgressBar.svelte

@@ -0,0 +1,81 @@
+<script>
+import { formatDataVolume } from "../util/Formatting.svelte"
+
+export let total = 0
+export let used = 0
+
+$: frac = used / total
+</script>
+
+<div>
+	Storage:
+	{formatDataVolume(used, 3)}
+	out of
+	{formatDataVolume(total, 3)}
+	<br/>
+	<div class="progress_bar_outer">
+		<div class="progress_bar_inner" style="width: {frac*100}%;"></div>
+	</div>
+
+	{#if frac > 2.0}
+		<div class="highlight_red">
+			<span class="warn_text">You are using more than 200% of your allowed storage space!</span>
+			<p>
+				We have started deleting your files to free up space. If you do
+				not want to lose any more files please upgrade to a storage plan
+				which supports the volume of storage which you need:
+				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
+					Upgrade options
+				</a>
+			</p>
+		</div>
+	{:else if frac > 0.99}
+		<div class="highlight_red">
+			<p>
+				You have used all of your storage space. You won't be able to
+				upload new files anymore. Please upgrade to a higher support
+				tier to continue uploading files:
+				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
+					Upgrade options
+				</a>
+			</p>
+			<p>
+				Your files will not be deleted any sooner than normal at this
+				moment. When your storage usage is over 200% we will start
+				deleting your files to free up the space.
+			</p>
+		</div>
+	{:else if frac > 0.8}
+		<div class="highlight_yellow">
+			<p>
+				You have used {(frac*100).toFixed(0)}% of your
+				storage space. If your storage space runs out you won't be able
+				to upload new files anymore. Please upgrade to a higher support
+				tier to continue uploading files:
+				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
+					Upgrade options
+				</a>
+			</p>
+		</div>
+	{/if}
+</div>
+
+<style>
+.warn_text {
+	font-weight: bold;
+	font-size: 1.5em;
+}
+.progress_bar_outer {
+	display: block;
+	background-color: var(--layer_1_color);
+	width: 100%;
+	height: 3px;
+	margin: 6px 0 12px 0;
+}
+.progress_bar_inner {
+	background-color: var(--highlight_color);
+	height: 100%;
+	width: 0;
+	transition: width 1s;
+}
+</style>