Hotlink protection warning on file viewer

svelte/src/file_viewer/AdLeaderboard.svelte

@@ -29,7 +29,7 @@ onMount(() => {
 	}
 })
 
-let set_ad_type = (t) => {
+let set_ad_type = async t => {
 	ad_type = t
 	head.load_ad(t)
 	resize()

svelte/src/file_viewer/AdSkyscraper.svelte

@@ -7,7 +7,7 @@ let container
 let ad_type = ""
 let visible = false
 
-onMount(async () => {
+onMount(() => {
 	let url_ads = new URL(window.location.href).searchParams.get("ads")
 	if (url_ads) {
 		set_ad_type(url_ads)
@@ -44,7 +44,7 @@ onMount(async () => {
 	}
 })
 
-let set_ad_type = async (t) => {
+let set_ad_type = async t => {
 	ad_type = t
 	head.load_ad(t)
 

svelte/src/file_viewer/FileViewer.svelte

@@ -531,11 +531,10 @@ const keyboard_event = evt => {
 	/* background-color: var(--layer_2_color); */
 	background: repeating-linear-gradient(
 		315deg,
-		#0b3100 0px,
+		#034215 0px,
-		#0b3100 18px,
+		#034215 20px,
-		#3d0000 20px,
+		#430303 20px,
-		#3d0000 38px,
+		#430303 40px
-		#0b3100 40px
 	);
 }
 

svelte/src/file_viewer/viewers/FilePreview.svelte

@@ -10,6 +10,7 @@ import Text from "./Text.svelte";
 import File from "./File.svelte";
 import Abuse from "./Abuse.svelte";
 import { file_type } from "../FileUtilities.svelte";
+import RateLimit from "./RateLimit.svelte";
 
 let viewer
 let viewer_type = "loading"
@@ -20,6 +21,8 @@ export const set_file = async file => {
 		return
 	} else if (file.abuse_type !== "") {
 		viewer_type = "abuse"
+	} else if (file.availability === "file_rate_limited_captcha_required") {
+		viewer_type = "rate_limit"
 	} else {
 		viewer_type = file_type(file)
 	}
@@ -45,6 +48,8 @@ const prev = () => { dispatch("prev") }
 		</div>
 	{:else if viewer_type === "abuse"}
 		<Abuse bind:this={viewer}></Abuse>
+	{:else if viewer_type === "rate_limit"}
+		<RateLimit bind:this={viewer} on:download={download}></RateLimit>
 	{:else if viewer_type === "image"}
 		<Image bind:this={viewer}></Image>
 	{:else if viewer_type === "video"}

svelte/src/file_viewer/viewers/RateLimit.svelte

@@ -0,0 +1,84 @@
+<script>
+import { createEventDispatcher } from "svelte";
+let dispatch = createEventDispatcher()
+
+export const set_file = f => file = f
+let file = {
+	name: "",
+	mime_type: "",
+}
+</script>
+
+<div class="container">
+	<h1>
+		<i class="icon">file_download_off</i>
+		Hotlink protection enabled
+	</h1>
+
+	<p>
+		Hotlinking protection has been enabled for this file. This happens when
+		a file is downloaded many times outside of our file viewer page (this
+		page). Usually this means people are using download managers like
+		JDownloader 2, Aria2 or wget. Using a download manager circumvents
+		pixeldrain's advertisements and we lose money because of it. More
+		information about this protection mechanism can be found on <a
+		href="/#hotlinking">the home page</a>.
+	</p>
+	<p>
+		This warning disappears when the you are a
+		<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12" target="_blank">Patreon supporter</a>,
+		or when the uploader of the file enables
+		<a href="/user/subscription">bandwidth sharing</a> on their Pro account
+		(and their data cap has not been used up). Using a download manager with
+		a Pro account is allowed, it will not trigger this warning for other
+		files.
+	</p>
+	<h2>
+		Continue downloading
+	</h2>
+	<p>
+		The file can be downloaded like usual by clicking the download button.
+		You will have to complete a CAPTCHA test to prove that you're not a
+		robot.
+	</p>
+
+	<img src={file.icon_href} alt="File icon" class="file_thumbnail">
+	<div class="file_description">
+		Name: {file.name}<br/>
+		Type: {file.mime_type}<br/>
+		<button class="button_highlight" on:click={() => {dispatch("download")}}>
+			<i class="icon">save</i> Download
+		</button>
+		<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12" target="_blank" class="button button_highlight">
+			<i class="icon">upgrade</i> Support Pixeldrain on Patreon
+		</a>
+	</div>
+</div>
+
+<style>
+.container {
+	position: relative;
+	display: inline-block;
+	width: 800px;
+	max-width: 100%;
+	max-height: 100%;
+	text-align: center;
+	overflow: auto;
+	background-color: rgba(0, 0, 0, 0.2);
+	border-radius: 16px;
+	text-align: left;
+}
+
+.file_thumbnail {
+	display: inline-block;
+	vertical-align: top;
+	height: 6em;
+}
+.file_description {
+	display: inline-block;
+	text-align: left;
+	padding-left: 8px;
+	vertical-align: middle;
+	max-width: 600px;
+}
+</style>