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

Storage warning on home page

Browse Source
This commit is contained in:
Wim Brand
2021-10-31 17:38:05 +01:00
parent 2ae2993adf
commit 478dfeb11b
7 changed files with 211 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
svelte/src/home_page/HomePage.svelte
View File

@@ -7,6 +7,7 @@ import Reddit from "../icons/Reddit.svelte"
import Twitter from "../icons/Twitter.svelte"
import Tumblr from "../icons/Tumblr.svelte"
import { formatDataVolume, formatDuration } from "../util/Formatting.svelte";
import StorageProgressBar from "../user_home/StorageProgressBar.svelte"
// === UPLOAD LOGIC ===
@@ -109,7 +110,6 @@ const finish_upload = (file) => {
let stats_interval = null
let stats_interval_ms = 500
let progress_bar_outer
let progress_bar_inner
let start_time = 0
let total_progress = 0
@@ -154,6 +154,16 @@ const stats_finished = () => {
total_rate = 0
}
const leave_confirmation = e => {
if (state === "uploading") {
e.preventDefault()
e.returnValue = "If you close the page your files will stop uploading. Do you want to continue?"
return e.returnValue
} else {
return null
}
}
// === SHARING BUTTONS ===
let navigator_share = !!(window.navigator && window.navigator.share)
@@ -386,9 +396,16 @@ const keydown = (e) => {
on:dragleave|preventDefault|stopPropagation={() => { dragging = false }}
on:drop={drop}
on:paste={paste}
on:keydown={keydown} />
on:keydown={keydown}
on:beforeunload={leave_confirmation} />
<div>
{#if window.user.username !== ""}
<div class="limit_width">
<StorageProgressBar used={window.user.storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
</div>
{/if}
<div class="instruction" style="margin-top: 0;">
<div class="limit_width">
<span class="big_number">1</span>
@@ -428,7 +445,7 @@ const keydown = (e) => {
</div>
</div>
</div>
<div bind:this={progress_bar_outer} class="progress_bar_outer" style="margin-bottom: 1.5em;">
<div class="progress_bar_outer" style="margin-bottom: 1.5em;">
<div bind:this={progress_bar_inner} class="progress_bar_inner"></div>
</div>
@@ -516,7 +533,7 @@ const keydown = (e) => {
</a>
{/each}
{#if window.user_subscription.name === ""}
{#if window.user.subscription.name === ""}
<div class="instruction">
<div class="limit_width">
<span class="big_number">4</span>

6
svelte/src/home_page/UploadProgressBar.svelte
View File

@@ -78,10 +78,10 @@ const on_failure = (status, message) => {
}
export const start = () => {
if (window.user_subscription.file_size_limit === 0) {
window.user_subscription.file_size_limit = 5e9
if (window.user.subscription.file_size_limit === 0) {
window.user.subscription.file_size_limit = 5e9
}
if (job.total_size > window.user_subscription.file_size_limit) {
if (job.total_size > window.user.subscription.file_size_limit) {
on_failure(
"file_too_large",
"This file is too large. Check out the Pro subscription to increase the file size limit"

71
svelte/src/user_home/Home.svelte
View File

@@ -2,6 +2,8 @@
import { onDestroy, onMount } from "svelte";
import { formatDataVolume, formatThousands } from "../util/Formatting.svelte";
import Chart from "../util/Chart.svelte";
import StorageProgressBar from "./StorageProgressBar.svelte";
import HotlinkProgressBar from "./HotlinkProgressBar.svelte";
let graph_view = null
let graph_download = null
@@ -146,73 +148,8 @@ onDestroy(() => {
</li>
</ul>
Storage:
{formatDataVolume(storage_space_used, 3)}
out of
{formatDataVolume(window.user.subscription.storage_space, 3)}
<br/>
<div class="progress_bar_outer">
<div id="storage_progress" class="progress_bar_inner" style="width: {storage_percent*100}%;"></div>
</div>
{#if storage_percent > 0.99}
<div class="highlight_red">
You have used all of your storage space. You won't be able to
upload new files anymore. Please upgrade to a higher support
tier to continue uploading files:
<br/>
<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
Upgrade options
</a>
</div>
{:else if storage_percent > 0.8}
<div class="highlight_yellow">
You have used {(storage_percent*100).toFixed(0)}% of your
storage space. If your storage space runs out you won't be able
to upload new files anymore. Please upgrade to a higher support
tier to continue uploading files:
<br/>
<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
Upgrade options
</a>
</div>
{/if}
Hotlink bandwidth:
{formatDataVolume(direct_link_bandwidth_used, 3)}
out of
{formatDataVolume(window.user.subscription.direct_linking_bandwidth, 3)}
(<a href="/#hotlinking">More information about hotlinking</a>)
<br/>
<div class="progress_bar_outer">
<div id="direct_bandwidth_progress" class="progress_bar_inner" style="width: {direct_link_percent*100}%;"></div>
</div>
{#if direct_link_percent > 0.99}
<div class="highlight_red">
You have used all of your hotlink bandwidth. Other people won't
be able to download your files directly from the API anymore.
Downloads will have to go through the file viewer page. Please
upgrade to a higher support tier to continue hotlinking files:
<br/>
<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
Upgrade options
</a>
</div>
{:else if direct_link_percent > 0.8}
<div class="highlight_yellow">
You have used {(direct_link_percent*100).toFixed(0)}% of your
hotlink bandwidth. If your hotlink bandwidth runs out people
won't be able to download your files directly from the API
anymore. Downloads will have to go through the file viewer page.
Please upgrade to a higher support tier to continue hotlinking
files:
<br/>
<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
Upgrade options
</a>
</div>
{/if}
<StorageProgressBar used={storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
<HotlinkProgressBar used={direct_link_bandwidth_used} total={window.user.subscription.direct_linking_bandwidth}></HotlinkProgressBar>
<h3>Exports</h3>
<div style="text-align: center;">

62
svelte/src/user_home/HotlinkProgressBar.svelte Normal file
View File

@@ -0,0 +1,62 @@
<script>
import { formatDataVolume } from "../util/Formatting.svelte"
export let total = 0
export let used = 0
$: frac = used / total
</script>
<div>
Hotlink bandwidth:
{formatDataVolume(used, 3)}
out of
{formatDataVolume(total, 3)}
(<a href="/#hotlinking">More information about hotlinking</a>)
<br/>
<div class="progress_bar_outer">
<div class="progress_bar_inner" style="width: {frac*100}%;"></div>
</div>
{#if frac > 0.99}
<div class="highlight_red">
You have used all of your hotlink bandwidth. Other people won't
be able to download your files directly from the API anymore.
Downloads will have to go through the file viewer page. Please
upgrade to a higher support tier to continue hotlinking files:
<br/>
<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
Upgrade options
</a>
</div>
{:else if frac > 0.8}
<div class="highlight_yellow">
You have used {(frac*100).toFixed(0)}% of your
hotlink bandwidth. If your hotlink bandwidth runs out people
won't be able to download your files directly from the API
anymore. Downloads will have to go through the file viewer page.
Please upgrade to a higher support tier to continue hotlinking
files:
<br/>
<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
Upgrade options
</a>
</div>
{/if}
</div>
<style>
.progress_bar_outer {
display: block;
background-color: var(--layer_1_color);
width: 100%;
height: 3px;
margin: 6px 0 12px 0;
}
.progress_bar_inner {
background-color: var(--highlight_color);
height: 100%;
width: 0;
transition: width 1s;
}
</style>

81
svelte/src/user_home/StorageProgressBar.svelte Normal file
View File

@@ -0,0 +1,81 @@
<script>
import { formatDataVolume } from "../util/Formatting.svelte"
export let total = 0
export let used = 0
$: frac = used / total
</script>
<div>
Storage:
{formatDataVolume(used, 3)}
out of
{formatDataVolume(total, 3)}
<br/>
<div class="progress_bar_outer">
<div class="progress_bar_inner" style="width: {frac*100}%;"></div>
</div>
{#if frac > 2.0}
<div class="highlight_red">
<span class="warn_text">You are using more than 200% of your allowed storage space!</span>
<p>
We have started deleting your files to free up space. If you do
not want to lose any more files please upgrade to a storage plan
which supports the volume of storage which you need:
<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
Upgrade options
</a>
</p>
</div>
{:else if frac > 0.99}
<div class="highlight_red">
<p>
You have used all of your storage space. You won't be able to
upload new files anymore. Please upgrade to a higher support
tier to continue uploading files:
<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
Upgrade options
</a>
</p>
<p>
Your files will not be deleted any sooner than normal at this
moment. When your storage usage is over 200% we will start
deleting your files to free up the space.
</p>
</div>
{:else if frac > 0.8}
<div class="highlight_yellow">
<p>
You have used {(frac*100).toFixed(0)}% of your
storage space. If your storage space runs out you won't be able
to upload new files anymore. Please upgrade to a higher support
tier to continue uploading files:
<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
Upgrade options
</a>
</p>
</div>
{/if}
</div>
<style>
.warn_text {
font-weight: bold;
font-size: 1.5em;
}
.progress_bar_outer {
display: block;
background-color: var(--layer_1_color);
width: 100%;
height: 3px;
margin: 6px 0 12px 0;
}
.progress_bar_inner {
background-color: var(--highlight_color);
height: 100%;
width: 0;
transition: width 1s;
}
</style>