Make download limits clearer

res/include/style/layout.css

@@ -84,7 +84,7 @@ footer,
 
 header,
 footer {
-	box-shadow: inset 1px 1px 4px -1px var(--shadow_color);
+	box-shadow: inset 0 0 3px -1px var(--shadow_color);
 	border-radius: 12px;
 	text-align: center;
 	overflow: hidden;
@@ -249,9 +249,9 @@ section {
 .highlight_blue,
 .highlight_yellow,
 .highlight_red {
-	border-top-width: 1px;
+	border-top-width: 2px;
 	border-top-style: solid;
-	border-bottom-width: 1px;
+	border-bottom-width: 2px;
 	border-bottom-style: solid;
 }
 
@@ -474,7 +474,6 @@ select {
 	display: inline-block;
 	border-radius: 6px;
 	margin: 3px;
-	background: none;
 	background: var(--input_background);
 	padding: 5px 5px 5px 5px;
 	overflow: hidden;

svelte/src/file_viewer/AdSkyscraper.svelte

@@ -32,14 +32,7 @@ onMount(() => {
 		return
 	}
 
-	switch (Math.floor(Math.random()*2)) {
-		case 0:
-			set_ad_type("ads.plus")
-			break
-		case 1:
-			set_ad_type("pixfuture")
-			break
-	}
+	set_ad_type("pixfuture")
 })
 
 let set_ad_type = async t => {

svelte/src/file_viewer/FileViewer.svelte

@@ -564,7 +564,8 @@ const keyboard_event = evt => {
 					on:download={downloader.download_file}
 					on:prev={() => { if (list_navigator) { list_navigator.prev() }}}
 					on:next={() => { if (list_navigator) { list_navigator.next() }}}
-					on:loading={e => {loading = e.detail}}>
+					on:loading={e => {loading = e.detail}}
+					on:reload={reload}>
 				</FilePreview>
 			{:else if view === "gallery"}
 				<GalleryView
@@ -701,7 +702,7 @@ const keyboard_event = evt => {
 	transition: left 0.5s, right 0.5s;
 	overflow: auto;
 	text-align: center;
-	box-shadow: inset 1px 1px 4px -1px var(--shadow_color);
+	box-shadow: inset 0 0 3px -1px var(--shadow_color);
 	border-radius: 16px;
 }
 .file_preview.toolbar_visible { left: 8em; }

svelte/src/file_viewer/GalleryView.svelte

@@ -177,7 +177,7 @@ const drop = (e, index) => {
 	padding: 0;
 	overflow: hidden;
 	border-radius: 8px;
-	box-shadow: 1px 1px 4px -1px var(--shadow_color);
+	box-shadow: 0 0 3px -1px var(--shadow_color);
 	background: var(--input_background);
 	word-break: break-all;
 	text-align: center;

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}
 

svelte/src/filesystem/Filesystem.svelte

@@ -494,7 +494,7 @@ const share = () => {
 	vertical-align: middle;
 	transition: left 0.5s;
 	overflow: hidden;
-	box-shadow: inset 1px 1px 4px -1px var(--shadow_color);
+	box-shadow: inset 0 0 3px -1px var(--shadow_color);
 }
 
 /* Toolbar */