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

Add download limit bar on file viewer

Browse Source
This commit is contained in:
Fornax
2022-12-24 11:37:02 +01:00
parent 5729bb81f6
commit 34ede38889
13 changed files with 196 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
svelte/src/file_viewer/viewers/BandwidthUsage.svelte
View File

@@ -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}

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

@@ -18,7 +18,7 @@ let file = {
<h1>{file.name}</h1>
<img src={file.icon_href} alt="File icon" class="icon">
<TextBlock>
<TextBlock width="600px">
Type: {file.mime_type}<br/>
No preview is available for this file type. Download to view it locally.
<br/>

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

@@ -12,10 +12,12 @@ import { file_type } from "../FileUtilities.svelte";
import RateLimit from "./RateLimit.svelte";
import Torrent from "./Torrent.svelte";
import SpeedLimit from "./SpeedLimit.svelte";
import { download_limits } from "../DownloadLimitStore";
let viewer
let viewer_type = "loading"
export let is_list = false
let current_file
export const set_file = async file => {
if (file.id === "") {
@@ -35,14 +37,19 @@ export const set_file = async file => {
}
console.log("opening file", file)
current_file = file
// Render the viewer component and set the file type
await tick()
viewer.set_file(file)
if (viewer) {
viewer.set_file(file)
}
}
</script>
{#if viewer_type === "loading"}
{#if $download_limits.transfer_limit_used > $download_limits.transfer_limit}
<SpeedLimit file={current_file} on:download></SpeedLimit>
{:else if viewer_type === "loading"}
<div class="center">
<Spinner></Spinner>
</div>
@@ -50,8 +57,6 @@ export const set_file = async file => {
<Abuse bind:this={viewer}></Abuse>
{:else if viewer_type === "rate_limit"}
<RateLimit bind:this={viewer} on:download></RateLimit>
{:else if viewer_type === "speed_limit"}
<SpeedLimit bind:this={viewer} on:download></SpeedLimit>
{:else if viewer_type === "image"}
<Image bind:this={viewer} on:loading></Image>
{:else if viewer_type === "video"}

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

@@ -1,6 +1,7 @@
<script>
import { createEventDispatcher, onMount } from "svelte";
import { formatDataVolume } from "../../util/Formatting.svelte";
import { download_limits } from "../DownloadLimitStore";
import TextBlock from "./TextBlock.svelte";
let dispatch = createEventDispatcher()
@@ -10,24 +11,6 @@ let file = {
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/>
@@ -53,15 +36,15 @@ onMount(async () => {
</h1>
<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 48 hours. This limit
account you are limited to downloading {$download_limits.download_limit} files
or {formatDataVolume($download_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>
<p>
In the last 24 hours you have downloaded
{limits.download_limit_used} files and used
{formatDataVolume(limits.transfer_limit_used, 3)} bandwidth.
{$download_limits.download_limit_used} files and used
{formatDataVolume($download_limits.transfer_limit_used, 3)} bandwidth.
</p>
{/if}
<p>
@@ -89,7 +72,7 @@ onMount(async () => {
<button on:click={() => {dispatch("download")}}>
<i class="icon">download</i> Download
</button>
<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>
</div>

30
svelte/src/file_viewer/viewers/SpeedLimit.svelte
View File

@@ -1,33 +1,17 @@
<script>
import { createEventDispatcher, onMount } from "svelte";
import { formatDataVolume, formatDuration } from "../../util/Formatting.svelte";
import { download_limits } from "../DownloadLimitStore";
import TextBlock from "./TextBlock.svelte";
let dispatch = createEventDispatcher()
export const set_file = f => file = f
let file = {
export let file = {
name: "",
mime_type: "",
availability: "",
size: 0,
download_speed_limit: 0,
}
let limits = {
download_limit: 1000,
download_limit_used: 0,
transfer_limit: 10e9,
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/>
@@ -36,10 +20,10 @@ onMount(async () => {
<p>
Pixeldrain's free tier is supported by advertisements. 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)} per week is
not a lot). {formatDataVolume($download_limits.transfer_limit, 3)} per week is
about the most I can give away for free, and according to our records
you have already downloaded
{formatDataVolume(limits.transfer_limit_used, 3)}.
{formatDataVolume($download_limits.transfer_limit_used, 3)}.
</p>
<p>
It's not that I want to withold this file from you, it's just that I
@@ -57,7 +41,7 @@ onMount(async () => {
{formatDuration((file.size/file.download_speed_limit)*1000)}
</li>
<li>
<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>
and earn my eternal gratitude

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

@@ -155,7 +155,7 @@ const fullscreen = () => {
{:else}
<h1>{file.name}</h1>
<img src={file.icon_href} class="video_icon" alt="Video icon">
<TextBlock width="650px">
<TextBlock width="600px">
The online video player on pixeldrain is only available for registered
users, or when the uploader of the video has a Pro account. You can
still download the video and watch it locally on your computer without
@@ -167,7 +167,7 @@ const fullscreen = () => {
<a href="/register" class="button">
<i class="icon">how_to_reg</i> Sign up
</a>
<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> Get Pixeldrain Pro
</a>
</TextBlock>