Add server overload detection

svelte/src/file_viewer/BottomBanner.svelte

@@ -1,5 +1,7 @@
 <script>
 import { onMount } from "svelte"
+import { formatDataVolume } from "../util/Formatting.svelte";
+import { stats } from "../lib/StatsSocket.js"
 
 let ad_type = ""
 
@@ -8,18 +10,28 @@ onMount(() => {
 	// 10% reviews
 	// 50% patreon
 
-	let rand = Math.random()
-	if (rand < 0.4) {
-		ad_type = "socials"
-	} else if (rand < 0.5) {
-		ad_type = "reviews"
-	} else {
-		ad_type = "patreon_support"
-	}
+	// let rand = Math.random()
+	// if (rand < 0.4) {
+	// 	ad_type = "socials"
+	// } else if (rand < 0.5) {
+	// 	ad_type = "reviews"
+	// } else {
+	// 	ad_type = "patreon_support"
+	// }
 })
 </script>
 
-{#if ad_type === "patreon_support"}
+{#if $stats.limits_init && $stats.limits.server_overload}
+
+	<div class="highlight_yellow" style="margin: 3px;">
+		Pixeldrain's servers are currently overloaded. In order to ensure
+		stability for our paying customers the free download limit has been
+		temporarily reduced to {formatDataVolume($stats.limits.transfer_limit,
+		3)}. If you want fast downloads, please return later when peak hours are
+		over.
+	</div>
+
+{:else if ad_type === "patreon_support"}
 
 	<div class="banner support_banner">
 		<span style="display: block; margin-bottom: 2px;">
@@ -35,23 +47,18 @@ onMount(() => {
 
 	<div class="banner center">
 		<div class="socials">
-			Pixeldrain is on the fediverse!<br/>
+			Pixeldrain on social media<br/>
 
 			<a href="https://mastodon.social/@fornax" rel="noreferrer" class="button" target="_blank" style="background-color: #595aff; color: #ffffff;">
 				<i class="icon small">people</i>
 				Mastodon
 			</a>
-			<a href="https://lemmy.fornaxian.tech/c/pixeldrain"
-				rel="noreferrer" class="button" target="_blank" style="background-color: #14854f; color: #ffffff;"
+			<a href="https://bsky.app/profile/fornax.bsky.social"
+				rel="noreferrer" class="button" target="_blank" style="background-color: #208bfe; color: #ffffff;"
 			>
 				<i class="icon small">people</i>
-				Lemmy
+				Bluesky
 			</a>
-		</div>
-
-		<div class="socials">
-			And on other media too<br/>
-
 			<a href="https://discord.gg/TWKGvYAFvX" rel="noreferrer" class="button" target="_blank" style="background-color: #5b5eee; color: #ffffff;">
 				<i class="icon small">people</i>
 				Discord
@@ -99,14 +106,6 @@ onMount(() => {
 		</a>
 	</div>
 
-{:else if ad_type === "overload"}
-
-	<div class="highlight_yellow" style="margin: 3px;">
-		Pixeldrain's server host is having network problems. In order to
-		ensure stability for our paying customers the free download limit
-		has been temporarily reduced to 3 GB
-	</div>
-
 {/if}
 
 <style>

svelte/src/file_viewer/TransferLimit.svelte

@@ -39,9 +39,9 @@ $: {
 	width: 100%;
 	/* the font-size is two pixels smaller than the progress bar, this leaves
 	one px margin top and bottom */
-	height: 16px;
-	font-size: 14px;
-	line-height: 15px;
+	height: 18px;
+	font-size: 15px;
+	line-height: 18px;
 	overflow: hidden;
 }
 .progress_bar_inner {

svelte/src/file_viewer/viewers/FilePreview.svelte

@@ -32,6 +32,8 @@ export const set_file = async file => {
 		file.availability === "ip_download_limited_captcha_required"
 	) {
 		viewer_type = "rate_limit"
+	} else if (!premium_download && $stats.limits.transfer_limit_used > $stats.limits.transfer_limit) {
+		viewer_type = "slow_down"
 	} else {
 		viewer_type = file_type(file)
 	}
@@ -65,7 +67,7 @@ export const seek = delta => {
 	</div>
 {:else if viewer_type === "abuse"}
 	<Abuse bind:this={viewer} on:download></Abuse>
-{:else if !premium_download && $stats.limits.transfer_limit_used > $stats.limits.transfer_limit}
+{:else if viewer_type === "slow_down"}
 	<SlowDown
 		on:download
 		file_size={current_file.size}

svelte/src/layout/SlowDown.svelte

@@ -33,8 +33,8 @@ export let icon_href = ""
 			Come back tomorrow when your free transfer limit resets
 		</li>
 		<li>
-			Download the file at a limited rate of 1 MiB/s. This will take at
-			least {formatDuration((file_size/(1<<20))*1000, 0)}
+			Download the file at a limited rate of {formatDataVolume($stats.limits.speed_limit, 3)}/s. This will take at
+			least {formatDuration((file_size/($stats.limits.speed_limit))*1000, 0)}
 		</li>
 		<li>
 			<a href="/#pro" target="_blank" class="button button_highlight">

svelte/src/lib/StatsSocket.js

@@ -11,6 +11,8 @@ let results = {
 	},
 	limits_init: false,
 	limits: {
+		server_overload: false,
+		speed_limit: 0,
 		download_limit: 0,
 		download_limit_used: 0,
 		transfer_limit: 0,