Make download limits clearer

svelte/src/file_viewer/viewers/Audio.svelte

@@ -91,7 +91,7 @@ const toggle_play = () => playing ? player.pause() : player.play()
 
 	<br/><br/>
 	{#if file.show_ads}
-		<BandwidthUsage file={file}/>
+		<BandwidthUsage file={file} on:reload/>
 	{/if}
 </div>
 

svelte/src/file_viewer/viewers/BandwidthUsage.svelte

@@ -1,9 +1,15 @@
 <script>
-import { onMount } from "svelte";
+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()
+
+export let file = {
+	size: 0,
+}
+
 let loaded = false
 let limits = {
 	download_limit: 0,
@@ -11,6 +17,8 @@ let limits = {
 	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")
@@ -18,13 +26,18 @@ const update = async () => {
 			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(async () => {
+onMount(() => {
 	update()
 	let interval = setInterval(update, 30e3)
 	return () => clearInterval(interval)
@@ -33,18 +46,23 @@ onMount(async () => {
 
 {#if loaded}
 	<TextBlock width="700px" center={true}>
-		<p>
-			<strong>
-				Until the end of April the transfer limit is raised from 5 GB to
-				50 GB, enjoy!
-			</strong>
-		</p>
+		{#if file.size > transfer_left}
+			<div class="highlight_yellow">
+				This file is too large to download completely with your current
+				transfer limit. The first {formatDataVolume(transfer_left, 3)}
+				will download at full speed, but the remaining
+				{formatDataVolume(file.size - transfer_left, 3)} will take
+				longer
+			</div>
+		{/if}
+
 		<p>
 			You have used {formatDataVolume(limits.transfer_limit_used, 3)} of
 			your daily {formatDataVolume(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/checkout?rid=5291427&cadence=12">

svelte/src/file_viewer/viewers/File.svelte

@@ -30,7 +30,7 @@ let file = {
 
 <br/><br/>
 {#if file.show_ads}
-	<BandwidthUsage file={file}/>
+	<BandwidthUsage file={file} on:reload/>
 {/if}
 
 <style>

svelte/src/file_viewer/viewers/FilePreview.svelte

@@ -1,5 +1,5 @@
 <script>
-import { createEventDispatcher, tick } from "svelte";
+import { tick } from "svelte";
 import Spinner from "../../util/Spinner.svelte";
 import Video from "./Video.svelte";
 import Audio from "./Audio.svelte";
@@ -39,13 +39,6 @@ export const set_file = async file => {
 	await tick()
 	viewer.set_file(file)
 }
-
-let dispatch = createEventDispatcher()
-const download = () => { dispatch("download") }
-const next = () => { dispatch("next") }
-const prev = () => { dispatch("prev") }
-const loading = e => {dispatch("loading", e.detail)}
-
 </script>
 
 {#if viewer_type === "loading"}
@@ -55,23 +48,23 @@ const loading = e => {dispatch("loading", e.detail)}
 {:else if viewer_type === "abuse"}
 	<Abuse bind:this={viewer}></Abuse>
 {:else if viewer_type === "rate_limit"}
-	<RateLimit bind:this={viewer} on:download={download}></RateLimit>
+	<RateLimit bind:this={viewer} on:download></RateLimit>
 {:else if viewer_type === "speed_limit"}
-	<SpeedLimit bind:this={viewer} on:download={download}></SpeedLimit>
+	<SpeedLimit bind:this={viewer} on:download></SpeedLimit>
 {:else if viewer_type === "image"}
-	<Image bind:this={viewer} on:loading={loading}></Image>
+	<Image bind:this={viewer} on:loading></Image>
 {:else if viewer_type === "video"}
-	<Video bind:this={viewer} on:loading={loading} on:download={download} on:prev={prev} on:next={next}></Video>
+	<Video bind:this={viewer} on:loading on:download on:prev on:next on:reload></Video>
 {:else if viewer_type === "audio"}
-	<Audio bind:this={viewer} on:loading={loading} on:prev={prev} on:next={next}></Audio>
+	<Audio bind:this={viewer} on:loading on:prev on:next on:reload></Audio>
 {:else if viewer_type === "pdf"}
 	<PDF bind:this={viewer}></PDF>
 {:else if viewer_type === "text"}
 	<Text bind:this={viewer}></Text>
 {:else if viewer_type === "torrent"}
-	<Torrent bind:this={viewer} on:loading={loading} on:download={download}></Torrent>
+	<Torrent bind:this={viewer} on:loading on:download></Torrent>
 {:else if viewer_type === "file"}
-	<File bind:this={viewer} on:download={download}></File>
+	<File bind:this={viewer} on:download on:reload></File>
 {/if}
 
 <style>

svelte/src/file_viewer/viewers/SpeedLimit.svelte

@@ -78,6 +78,7 @@ onMount(async () => {
 	</p>
 </TextBlock>
 <br/>
+<br/>
 
 <style>
 .header_image {

svelte/src/file_viewer/viewers/Video.svelte

@@ -169,7 +169,7 @@ const fullscreen = () => {
 
 	<br/><br/>
 	{#if file.show_ads}
-		<BandwidthUsage file={file}/>
+		<BandwidthUsage file={file} on:reload/>
 	{/if}
 {/if}