82 lines
1.9 KiB
Svelte
82 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import ProgressBar from "util/ProgressBar.svelte";
|
|
import { formatDataVolume } from "util/Formatting"
|
|
import { user } from "lib/UserStore";
|
|
|
|
let { total = 0, used = 0 }: {
|
|
total?: number;
|
|
used?: number;
|
|
} = $props();
|
|
|
|
let frac = $derived(used / total)
|
|
</script>
|
|
|
|
<ProgressBar total={total} used={used}></ProgressBar>
|
|
<div class="gauge_labels">
|
|
<div>
|
|
{formatDataVolume(used, 3)}
|
|
</div>
|
|
<div>
|
|
{#if total <= 0}
|
|
No limit
|
|
{:else}
|
|
{formatDataVolume(total, 3)}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
{#if frac > 1}
|
|
<div class="highlight_yellow">
|
|
<p>
|
|
You have used all of your data cap. People can still download your
|
|
files, but premium features are disabled. This means that the
|
|
download page shows Nova branding, people who download your
|
|
files have a daily download limit and hotlinking is disabled.
|
|
</p>
|
|
|
|
{#if $user.monthly_transfer_cap > 0}
|
|
<p>
|
|
You have a billshock limit configured. <a
|
|
href="/user/sharing/bandwidth">increase or disable the limit</a> to
|
|
continue sharing files.
|
|
</p>
|
|
{/if}
|
|
|
|
<a class="button button_highlight" href="/#pro">
|
|
<i class="icon">bolt</i> Upgrade options
|
|
</a>
|
|
</div>
|
|
{:else if frac > 0.8}
|
|
<div class="highlight_blue">
|
|
<p>
|
|
You have used {(frac*100).toFixed(0)}% of your data cap. If your
|
|
data runs out the premium features related to downloading will be
|
|
disabled. This means that the download page shows Nova
|
|
branding, people who download your files have a daily download limit
|
|
and hotlinking is disabled.
|
|
</p>
|
|
|
|
{#if $user.monthly_transfer_cap > 0}
|
|
<p>
|
|
You have a billshock limit configured. <a
|
|
href="/user/sharing/bandwidth">increase or disable the limit</a> to
|
|
continue sharing files.
|
|
</p>
|
|
{/if}
|
|
|
|
<a class="button button_highlight" href="/#pro">
|
|
<i class="icon">bolt</i> Upgrade options
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.gauge_labels {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.gauge_labels > div {
|
|
flex: 0 0 auto;
|
|
}
|
|
</style>
|