Replace large file warning with bandwidth progress bar

res/include/style/layout.css

@@ -270,6 +270,10 @@ a {
 	color: var(--link_color);
 }
 
+p {
+	margin: 1em 0;
+}
+
 .form{
 	margin-left: auto;
 	margin-right: auto;

svelte/src/file_viewer/viewers/Audio.svelte

@@ -1,6 +1,6 @@
 <script>
 import { createEventDispatcher, tick } from "svelte";
-import LargeFileMessage from "./LargeFileMessage.svelte";
+import BandwidthUsage from "./BandwidthUsage.svelte";
 let dispatch = createEventDispatcher()
 
 export let file = {
@@ -8,6 +8,7 @@ export let file = {
 	name: "",
 	mime_type: "",
 	get_href: "",
+	show_ads: false,
 }
 
 $: loop = file.name.includes(".loop.")
@@ -88,7 +89,9 @@ const toggle_play = () => playing ? player.pause() : player.play()
 	{/if}
 
 	<br/><br/>
-	<LargeFileMessage file={file}></LargeFileMessage>
+	{#if file.show_ads}
+		<BandwidthUsage/>
+	{/if}
 </div>
 
 <style>

svelte/src/file_viewer/viewers/BandwidthUsage.svelte

@@ -0,0 +1,49 @@
+<script>
+import { onMount } from "svelte";
+import { formatDataVolume } from "../../util/Formatting.svelte";
+import TextBlock from "./TextBlock.svelte";
+import ProgressBar from "../../util/ProgressBar.svelte";
+
+let limits = {
+	download_limit: 0,
+	download_limit_used: 0,
+	transfer_limit: 0,
+	transfer_limit_used: 0,
+}
+const update = async () => {
+	try {
+		let resp = await fetch(window.api_endpoint+"/misc/rate_limits")
+		if(resp.status >= 400) {
+			throw new Error(await resp.text())
+		}
+		limits = await resp.json()
+	} catch (err) {
+		console.error("Failed to get rate limits: "+err)
+	}
+}
+
+onMount(async () => {
+	update()
+	let interval = setInterval(update, 30e3)
+	return () => clearInterval(interval)
+})
+</script>
+
+{#if limits.transfer_limit_used > 0}
+	<TextBlock width="700px" center={true}>
+		<p>
+			You have used {formatDataVolume(limits.transfer_limit_used, 3)} of
+			your daily {formatDataVolume(limits.transfer_limit, 3)} download
+			limit. When the limit is exceeded your download speed will be
+			reduced.
+		</p>
+		<p>
+			<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12">
+				Support Pixeldrain on Patreon
+			</a>
+			to disable the download limit.
+		</p>
+
+		<ProgressBar total={limits.transfer_limit} used={limits.transfer_limit_used}></ProgressBar>
+	</TextBlock>
+{/if}

svelte/src/file_viewer/viewers/File.svelte

@@ -1,6 +1,6 @@
 <script>
 import { createEventDispatcher } from "svelte";
-import LargeFileMessage from "./LargeFileMessage.svelte";
+import BandwidthUsage from "./BandwidthUsage.svelte";
 import TextBlock from "./TextBlock.svelte";
 let dispatch = createEventDispatcher()
 
@@ -28,7 +28,9 @@ let file = {
 </TextBlock>
 
 <br/><br/>
-<LargeFileMessage file={file}></LargeFileMessage>
+{#if file.show_ads}
+	<BandwidthUsage/>
+{/if}
 
 <style>
 h1 {

svelte/src/file_viewer/viewers/LargeFileMessage.svelte

@@ -1,29 +0,0 @@
-<script>
-import { formatDuration } from "../../util/Formatting.svelte";
-import TextBlock from "./TextBlock.svelte";
-export let file = {
-	id: "",
-	name: "",
-	show_ads: false,
-	size: 0,
-	download_speed_limit: 0,
-}
-</script>
-
-{#if file.show_ads && file.size > 1e8 && file.download_speed_limit > 0}
-	<!-- If the file is larger than 100 MB we show a warning about the transfer speed -->
-	<TextBlock width="700px" center={true}>
-
-		Your download speed is currently limited to
-		{file.download_speed_limit/(1<<20)} MiB/s. Though your download might be
-		slower if the servers are overloaded. Downloading this file for free
-		will take at least
-		{formatDuration((file.size/file.download_speed_limit)*1000)} (under
-		ideal conditions). You can
-		<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12">
-			support Pixeldrain on Patreon
-		</a>
-		to download at the highest speed available.
-
-	</TextBlock>
-{/if}

svelte/src/file_viewer/viewers/Video.svelte

@@ -1,6 +1,6 @@
 <script>
 import { onMount,  createEventDispatcher, tick } from "svelte";
-import LargeFileMessage from "./LargeFileMessage.svelte";
+import BandwidthUsage from "./BandwidthUsage.svelte";
 import TextBlock from "./TextBlock.svelte";
 let dispatch = createEventDispatcher()
 
@@ -166,7 +166,9 @@ const fullscreen = () => {
 	</TextBlock>
 
 	<br/><br/>
-	<LargeFileMessage file={file}></LargeFileMessage>
+	{#if file.show_ads}
+		<BandwidthUsage/>
+	{/if}
 {/if}
 
 <style>

svelte/src/home_page/FeatureTable.svelte

@@ -59,12 +59,12 @@ onMount(() => {
 			Download speed
 		</div>
 		<div class="feat_normal">
-			Up to 4 MiB/s, may be slower during busy periods
+			Bandwidth is fairly distributed across free users, may be slow
+			during busy periods
 		</div>
 		<div class="feat_pro">
 			<span class="text_highlight">High priority</span>
-			bandwidth for files you download and files on your
-			account
+			bandwidth for files you download and files on your account
 		</div>
 	</div>
 	<div>