Add download limit bar on file viewer

svelte/src/file_viewer/viewers/BandwidthUsage.svelte

@@ -1,50 +1,17 @@
 <script>
-import { createEventDispatcher, onMount } from "svelte";
 import { formatDataVolume } from "../../util/Formatting.svelte";
 import TextBlock from "./TextBlock.svelte";
 import ProgressBar from "../../util/ProgressBar.svelte";
-
-let dispatch = createEventDispatcher()
+import { download_limits } from "../DownloadLimitStore";
 
 export let file = {
 	size: 0,
 }
 
-let loaded = false
-let limits = {
-	download_limit: 0,
-	download_limit_used: 0,
-	transfer_limit: 0,
-	transfer_limit_used: 0,
-}
-let transfer_left = 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()
-		transfer_left = limits.transfer_limit - limits.transfer_limit_used
-		loaded = true
-
-		if (limits.transfer_limit_used > limits.transfer_limit) {
-			dispatch("reload")
-		}
-	} catch (err) {
-		console.error("Failed to get rate limits: "+err)
-	}
-}
-
-onMount(() => {
-	update()
-	let interval = setInterval(update, 30e3)
-	return () => clearInterval(interval)
-})
+$: transfer_left = download_limits.transfer_limit = download_limits.transfer_limit_used
 </script>
 
-{#if loaded}
+{#if $download_limits.loaded}
 	<TextBlock width="700px" center={true}>
 		{#if file.size > transfer_left}
 			<div class="highlight_yellow">
@@ -57,21 +24,21 @@ onMount(() => {
 		{/if}
 
 		<p>
-			You have used {formatDataVolume(limits.transfer_limit_used, 3)} of
-			your weekly {formatDataVolume(limits.transfer_limit, 3)} transfer
+			You have used {formatDataVolume($download_limits.transfer_limit_used, 3)} of
+			your weekly {formatDataVolume($download_limits.transfer_limit, 3)} transfer
 			limit. When the transfer limit is exceeded your download speed will
 			be reduced.
 		</p>
 
 		<p>
 			<strong>
-				<a href="https://www.patreon.com/join/pixeldrain" target="_blank" class="button button_highlight">
+				<a href="https://www.patreon.com/join/pixeldrain" target="_blank" class="button button_highlight" rel="noreferrer">
 					<i class="icon">bolt</i> Support Pixeldrain on Patreon
 				</a>
 				to disable the transfer limit
 			</strong>
 		</p>
 
-		<ProgressBar total={limits.transfer_limit} used={limits.transfer_limit_used}></ProgressBar>
+		<ProgressBar total={$download_limits.transfer_limit} used={$download_limits.transfer_limit_used}></ProgressBar>
 	</TextBlock>
 {/if}