pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New rate limiting page

Browse Source
This commit is contained in:
Fornax
2022-03-05 10:49:12 +01:00
parent a40d9ecfff
commit d118b23bf8
11 changed files with 118 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
svelte/src/file_viewer/AdLeaderboard.svelte
View File

@@ -13,13 +13,16 @@ onMount(() => {
return
}
switch (Math.floor(Math.random()*2)) {
switch (Math.floor(Math.random()*3)) {
case 0:
set_ad_type("ads.plus")
break
case 1:
set_ad_type("pixfuture")
break
case 2:
set_ad_type("nextmillennium")
break
}
})

2
svelte/src/file_viewer/IntroPopup.svelte
View File

@@ -57,7 +57,7 @@ onMount(() => {
height: auto;
padding: 8px;
background-color: var(--layer_4_color);
box-shadow: 1px 1px 10px var(--shadow_color);
box-shadow: 2px 2px 16px var(--shadow_color);
border-radius: 20px;
z-index: 50;
transition: opacity .4s, left .5s, top .5s;

4
svelte/src/file_viewer/viewers/Audio.svelte
View File

@@ -1,6 +1,5 @@
<script>
import { createEventDispatcher, tick } from "svelte";
import LargeFileMessage from "./LargeFileMessage.svelte";
let dispatch = createEventDispatcher()
export let file = {
@@ -86,9 +85,6 @@ const toggle_play = () => playing ? player.pause() : player.play()
<source src={file.get_href} type={file.mime_type} />
</audio>
{/if}
<br/><br/>
<LargeFileMessage file={file}></LargeFileMessage>
</div>
<style>

9
svelte/src/file_viewer/viewers/File.svelte
View File

@@ -1,6 +1,5 @@
<script>
import { createEventDispatcher } from "svelte";
import LargeFileMessage from "./LargeFileMessage.svelte";
import TextBlock from "./TextBlock.svelte";
let dispatch = createEventDispatcher()
@@ -15,10 +14,9 @@ let file = {
}
</script>
<h1>You are viewing a file on pixeldrain</h1>
<h1>{file.name}</h1>
<img src={file.icon_href} alt="File icon" class="icon">
<TextBlock>
Name: {file.name}<br/>
Type: {file.mime_type}<br/>
No preview is available for this file type. Download to view it locally.
<br/>
@@ -27,10 +25,11 @@ let file = {
<span>Download</span>
</button>
</TextBlock>
<br/><br/>
<LargeFileMessage file={file}></LargeFileMessage>
<style>
h1 {
text-shadow: 1px 1px 3px var(--shadow_color);
}
.icon {
display: inline-block;
vertical-align: middle;

8
svelte/src/file_viewer/viewers/FilePreview.svelte
View File

@@ -11,6 +11,7 @@ import Abuse from "./Abuse.svelte";
import { file_type } from "../FileUtilities.svelte";
import RateLimit from "./RateLimit.svelte";
import Torrent from "./Torrent.svelte";
import SpeedLimit from "./SpeedLimit.svelte";
let viewer
let viewer_type = "loading"
@@ -23,10 +24,11 @@ export const set_file = async file => {
viewer_type = "abuse"
} else if (
file.availability === "file_rate_limited_captcha_required" ||
file.availability === "ip_download_limited_captcha_required" ||
file.availability === "ip_transfer_limited_captcha_required"
file.availability === "ip_download_limited_captcha_required"
) {
viewer_type = "rate_limit"
} else if (file.download_speed_limit > 0) {
viewer_type = "speed_limit"
} else {
viewer_type = file_type(file)
}
@@ -54,6 +56,8 @@ const loading = e => {dispatch("loading", e.detail)}
<Abuse bind:this={viewer}></Abuse>
{:else if viewer_type === "rate_limit"}
<RateLimit bind:this={viewer} on:download={download}></RateLimit>
{:else if viewer_type === "speed_limit"}
<SpeedLimit bind:this={viewer} on:download={download}></SpeedLimit>
{:else if viewer_type === "image"}
<Image bind:this={viewer} on:loading={loading}></Image>
{:else if viewer_type === "video"}

25
svelte/src/file_viewer/viewers/LargeFileMessage.svelte
View File

@@ -1,25 +0,0 @@
<script>
import { formatDuration } from "../../util/Formatting.svelte";
import TextBlock from "./TextBlock.svelte";
export let file = {
id: "",
name: "",
show_ads: false,
size: 0,
}
</script>
{#if file.show_ads && file.size > 1e8}
<!-- If the file is larger than 100 MB we show a warning about the transfer speed -->
<TextBlock width="650px" center={true}>
Your download speed is currently limited to 2 MiB/s. Downloading this
file for free will take at least
{formatDuration((file.size/2097152)*1000)} (under ideal conditions).
You can
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12">
upgrade to Pro
</a>
to download at the fastest speed available.
</TextBlock>
{/if}

11
svelte/src/file_viewer/viewers/RateLimit.svelte
View File

@@ -1,7 +1,6 @@
<script>
import { createEventDispatcher, onMount } from "svelte";
import { formatDataVolume } from "../../util/Formatting.svelte";
import LargeFileMessage from "./LargeFileMessage.svelte";
import TextBlock from "./TextBlock.svelte";
let dispatch = createEventDispatcher()
@@ -31,6 +30,7 @@ onMount(async () => {
})
</script>
<br/>
<TextBlock width="800px">
{#if file.availability === "file_rate_limited_captcha_required"}
<h1>
@@ -46,10 +46,7 @@ onMount(async () => {
information about this protection mechanism can be found on <a
href="/#hotlinking">the home page</a>.
</p>
{:else if
file.availability === "ip_download_limited_captcha_required" ||
file.availability === "ip_transfer_limited_captcha_required"
}
{:else if file.availability === "ip_download_limited_captcha_required"}
<h1>
<i class="icon">file_download_off</i>
Download limit reached
@@ -57,7 +54,7 @@ onMount(async () => {
<p>
You have reached your download limit for today. Without a pixeldrain
account you are limited to downloading {limits.download_limit} files
or {formatDataVolume(limits.transfer_limit, 3)} per day. This limit
or {formatDataVolume(limits.transfer_limit, 3)} per 48 hours. This limit
is counted per IP address, so if you're on a shared network it's
possible that others have also contributed to this limit.
</p>
@@ -97,8 +94,6 @@ onMount(async () => {
</a>
</div>
</TextBlock>
<br/><br/>
<LargeFileMessage file={file}></LargeFileMessage>
<style>
.file_thumbnail {

98
svelte/src/file_viewer/viewers/SpeedLimit.svelte Normal file
View File

@@ -0,0 +1,98 @@
<script>
import { createEventDispatcher, onMount } from "svelte";
import { formatDataVolume, formatDuration } from "../../util/Formatting.svelte";
import TextBlock from "./TextBlock.svelte";
let dispatch = createEventDispatcher()
export const set_file = f => file = f
let file = {
name: "",
mime_type: "",
availability: "",
}
let limits = {
download_limit: 1000,
download_limit_used: 0,
transfer_limit: 50e9,
transfer_limit_used: 0,
}
onMount(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) {
alert("Failed to get rate limits: "+err)
}
})
</script>
<br/>
<TextBlock width="800px">
<img src="/res/img/slow_down.webp" class="header_image" alt="Yea, I'm gonna need you to slow down a bit"/>
<p>
Yea, so pixeldrain's free tier is supported by advertisements. And
there's only so much that you can do with the budget those ads provide
(spoiler: it's not a lot). {formatDataVolume(limits.transfer_limit, 3)}
every 48 hours is about the most I can give away for free, according to
our records you have already downloaded
{formatDataVolume(limits.transfer_limit_used, 3)}.
</p>
<p>
It's not that I want to withold this file from you, it's just that I
don't want pixeldrain to fall into bankruptcy like so many of the
websites that came before me. So if you really want these files you have
a few options:
</p>
<ul>
<li>Come back in 48 hours when your free transfer limit resets</li>
<li>
Download the file at a rate of {limits.speed_limit/(1<<20)} MiB/s.
This will take at least {formatDuration((file.size/2097152)*1000)}
</li>
<li>
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12" target="_blank" class="button button_highlight">
<i class="icon">bolt</i> Support Pixeldrain on Patreon
</a>
and earn my eternal gratitude
{#if !window.user_authenticated}
(you will need a <a href="/register">pixeldrain account</a> to
receive the benefits)
{/if}
</li>
</ul>
<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 on:click={() => {dispatch("download")}}>
<i class="icon">download</i> Download
</button>
</div>
<p>
Also, I believe you have my stapler. Please give it back.
</p>
</TextBlock>
<style>
.header_image {
width: 100%;
border-radius: 8px;
}
.file_thumbnail {
display: inline-block;
vertical-align: middle;
height: 6em;
border-radius: 8px;
}
.file_description {
display: inline-block;
text-align: left;
padding-left: 8px;
vertical-align: middle;
max-width: 600px;
}
</style>

3
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -1,6 +1,5 @@
<script>
import { onMount, createEventDispatcher, tick } from "svelte";
import LargeFileMessage from "./LargeFileMessage.svelte";
import TextBlock from "./TextBlock.svelte";
let dispatch = createEventDispatcher()
@@ -164,8 +163,6 @@ const fullscreen = () => {
<i class="icon">bolt</i> Support Pixeldrain on Patreon
</a>
</TextBlock>
<br/><br/>
<LargeFileMessage file={file}></LargeFileMessage>
{/if}
<style>

5
svelte/src/home_page/FeatureTable.svelte
View File

@@ -45,9 +45,8 @@ onMount(() => {
Data transfer limit
</div>
<div class="feat_normal">
Up to 1000 files or 50 GB data transfer per day. Rate limiting mode
will be enabled if a file has 5 times more downloads than views, and
you will be asked to complete a CAPTCHA
10 GB data transfer per 48 hours. When this threshold is reached
your download speed will be limited
</div>
<div class="feat_pro">
Transfer limit of <span class="text_highlight">1 terabyte</span> per