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

Compare commits

base: pixeldrain:4b8bd11a4c41cf9691d4309c7163df5175c0fdb3
Branches Tags
pixeldrain:master
...
compare: pixeldrain:master
Branches Tags
pixeldrain:master

15 Commits
4b8bd11a4c ... master

Author SHA1 Message Date
Wim Brand
99ab34c76d Fix error popup when canceling a sharing action 
Fix navigator not reloading when saving an edited file
Remove dead links
Remove references to Patreon
 2026-08-05 22:18:57 +02:00
Wim Brand
4c57a363b2 Fix: 
* Breadcrumbs too wide in deeply nested directories
* Sharedialog copies link and calls navigator.share at the same time
* Link copy feedback is not clear
* Show embed code when public read
* Hide hidden files from audio playlist
 2026-08-05 21:54:49 +02:00
Wim Brand
00b40ab900 Add filesystem indexing metrics 2026-08-05 21:52:28 +02:00
Wim Brand
b02e88eb1b Add button to remove peers 2026-08-04 14:38:36 +02:00
Wim Brand
196845d739 Remove unused Go templates 2026-08-04 13:37:59 +02:00
Wim Brand
a12424ef66 Add configurable columns to directory view 2026-08-04 13:37:44 +02:00
Wim Brand
f3522f370f Overhaul trash page 2026-08-03 23:45:37 +02:00
Wim Brand
912fe06ff6 Add documentation link in menu 2026-08-03 23:31:54 +02:00
Wim Brand
0acc6a91bb Update sharing settings 2026-08-03 23:31:43 +02:00
Wim Brand
5b25f21f72 Update home page a bit 2026-07-30 23:15:00 +02:00
Wim Brand
1536b8bd1b Block sharing if subscription does not support it 2026-07-30 23:13:55 +02:00
Wim Brand
263f959565 Fix uploader not working because window.user was removed 2026-07-30 21:33:45 +02:00
Wim Brand
609dfc906a Redesign image viewer with Claude 2026-07-30 21:33:26 +02:00
Wim Brand
39e0019ce3 Move error handling for filesystem to frontend 2026-07-30 21:31:35 +02:00
Wim Brand
e88b137d2b Rename FilesystemAPI back because apparently that's required 2026-07-30 17:18:46 +02:00
66 changed files with 1124 additions and 1035 deletions
Expand all files Collapse all files

50
res/template/email_confirm.html
View File

@@ -1,50 +0,0 @@
{{define "email_confirm"}}<!DOCTYPE html>
<html lang="en">
<head>
{{template "meta_tags" "E-mail verification"}}
</head>
<body>
{{template "page_top" .}}
{{if eq .Other "success"}}
<header>
<h1>Success!</h1>
</header>
<div id="page_content" class="page_content">
<section>
<p>
Your account's e-mail address has been updated.
</p>
</section>
</div>
{{else if eq .Other "not_found"}}
<header>
<h1>E-mail change failed</h1>
</header>
<div id="page_content" class="page_content">
<section>
<p>
This e-mail change request does not exist or has expired.
Please try again if you still want to change your e-mail
address.
</p>
</section>
</div>
{{else}}
<header>
<h1>Error</h1>
</header>
<div id="page_content" class="page_content">
<section>
<p>
Something went wrong while processing this request. Please
try again later.
</p>
</section>
</div>
{{end}}
{{template "page_bottom" .}}
</body>
</html>
{{end}}

90
res/template/fragments/page_wrap.html
View File

@@ -1,90 +0,0 @@
{{define "menu"}}
<button id="button_toggle_navigation" class="button_toggle_navigation icon" onclick="toggleMenu();">
menu
</button>
<nav id="page_navigation" class="page_navigation">
<a href="/home#">Home</a>
{{if eq .User.Subscription.ID ""}}
<a href="/home#pro">Get Premium</a>
{{end}}
<hr />
{{if .Authenticated}}
<a href="/user">{{.User.Username}}</a>
{{if .User.Subscription.FilesystemAccess}}
<a href="/d/me">Filesystem</a>
{{end}}
{{if .User.IsAdmin}}
<a href="/admin">Admin Panel</a>
{{end}}
<a href="/logout">Log out</a>
{{else}}
<a href="/login">Login</a>
<a href="/register">Register</a>
{{end}}
<hr />
<a href="/about">Questions & Answers</a>
<a href="/apps">Apps</a>
<a href="/appearance">Theme</a>
<a href="/speedtest">Speedtest</a>
<a href="/api">API</a>
<a href="/filesystem">Filesystem Guide</a>
<a href="/acknowledgements">Acknowledgements</a>
<a href="/abuse">DMCA and abuse</a>
<a href="https://stats.uptimerobot.com/p9v2ktzyjm" target="_blank">Server Status</a>
</nav>
<script>
function toggleMenu() {
var nav = document.getElementById("page_navigation");
var body = document.getElementById("page_body");
if (nav.offsetLeft === 0) {
// Menu is visible, hide it
nav.style.left = -nav.offsetWidth + "px";
body.style.marginLeft = "0";
} else {
// Menu is hidden, show it
nav.style.left = "0";
body.style.marginLeft = nav.offsetWidth + "px";
}
}
function resetMenu() {
document.getElementById("page_navigation").style.left = "";
document.getElementById("page_body").style.marginLeft = "";
}
</script>
{{end}}
{{define "footer"}}
<footer>
<div class="footer_content">
<div style="display: inline-block; margin: 0 8px;">
Nova is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
</div>
<br/>
<div style="display: inline-block; margin: 0 8px;">
<a href="https://github.com/Fornaxian" target="_blank">{{template `github.svg` .}} GitHub</a> |
<a href="https://mastodon.social/web/@fornax" target="_blank">{{template `mastodon.svg` .}} Mastodon</a>
</div>
<br/>
<div style="display: inline-block; margin: 0 8px;">
{{$speed := .PixelAPI.GetMiscClusterSpeed}}
Server speed: {{ formatDataBits $speed.ServerTX }}ps |
Cache cluster: {{ formatDataBits $speed.CacheTX }}ps |
Storage cluster: {{ formatDataBits $speed.StorageTX }}ps
</div>
<br/>
<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
page rendered by {{.Hostname}}
</span>
</div>
</footer>
{{end}}
{{define "page_top"}}
{{template "menu" .}}
<div id="page_body" class="page_body">
{{end}}
{{define "page_bottom"}}
{{template "footer" .}}
</div>
{{end}}

40
res/template/user_logout.html
View File

@@ -1,40 +0,0 @@
{{define "logout"}}<!DOCTYPE html>
<html lang="en">
<head>
{{template "meta_tags" "Logging out..."}}
</head>
<body>
{{template "page_top" .}}
<header>
<h1>Logging out of your Nova account</h1>
</header>
<div id="page_content" class="page_content">
<br/>
<form method="POST" action="/logout">
<button role="submit" class="button_highlight">
<i class="icon">logout</i>
Log out of Nova on this computer
</button>
</form>
<br/>
<section>
<h2>Why do I need to confirm my logout?</h2>
<p>
We need you to confirm your action so we can be sure that you
really requested a logout. If we didn't do this, anyone (or any
website) would be able to send you to this page and you would
automatically get logged out of Nova, which would be very
annoying.
</p>
<p>
To prevent this from happening we're verifying that you actually
want to log out by making you click this button. Because this
logout button triggers a different request type than normal
page visit we can confirm that you really want to log out.
</p>
</section>
</div>
{{template "page_bottom" .}}
</body>
</html>
{{end}}

19
svelte/src/admin_panel/HostMetrics.svelte
View File

@@ -26,7 +26,26 @@ const groups: {
{metric: "api_error_400", data_type: "number"},
{metric: "api_error_500", data_type: "number"},
{metric: "api_panic", data_type: "number"},
{metric: "api_user_register", data_type: "number"},
{metric: "api_user_login", data_type: "number"},
{metric: "api_user_delete", data_type: "number"},
],
}, {
title: "Filesystem API", expanded: false,
graphs: [
{metric: "filesystem_write", data_type: "number"},
{metric: "filesystem_write_size", data_type: "bytes"},
{metric: "filesystem_read", data_type: "number"},
{metric: "filesystem_read_size", data_type: "bytes"},
{metric: "filesystem_index_update", data_type: "number"},
{metric: "filesystem_index_update_duration", data_type: "duration"},
{
metric: "filesystem_index_update_duration_avg",
agg_base: "filesystem_index_update_duration",
agg_divisor: "filesystem_index_update",
data_type: "duration",
},
]
}, {
title: "Task scheduler", expanded: false,
graphs: [

34
svelte/src/admin_panel/PeerTable.svelte
View File

@@ -2,6 +2,8 @@
import { flip } from "svelte/animate";
import { formatDataVolume } from "util/Formatting";
import SortButton from "layout/SortButton.svelte";
import { loading_run } from "lib/Loading";
import { admin_decommission_node } from "lib/AdminAPI";
let {
peers = $bindable([])
@@ -33,6 +35,11 @@ let {
}[]
} = $props();
// If not all peers are online we show the decommission button
let all_reachable = $derived(peers.reduce((acc, val) => {
return val.reachable ? acc : false
}, true))
$effect(() => {
for (let peer of peers) {
peer.avg_network_total = peer.avg_network_tx + peer.avg_network_rx
@@ -74,6 +81,16 @@ let sort = (field: string) => {
})
peers = peers
}
const decommission = (id: string) => {
loading_run(async () => {
try {
await admin_decommission_node(id)
} catch (err) {
alert(JSON.stringify(err))
}
})
}
</script>
<div class="table_scroll">
@@ -92,16 +109,17 @@ let sort = (field: string) => {
<td><SortButton field="cache_threshold" active_field={sort_field} asc={asc} sort_func={sort}>CThresh</SortButton></td>
<td><SortButton field="free_space" active_field={sort_field} asc={asc} sort_func={sort}>Free</SortButton></td>
<td><SortButton field="min_free_space" active_field={sort_field} asc={asc} sort_func={sort}>Min free</SortButton></td>
{#if !all_reachable}<td></td>{/if}
</tr>
</thead>
<tbody>
{#each peers as peer (peer.ip)}
{#each peers as peer (peer.id)}
<tr style="border: none;"
class:highlight_red={!peer.reachable}
class:highlight_yellow={peer.free_space < peer.min_free_space / 2}
class:highlight_blue={peer.free_space < peer.min_free_space}
class:highlight_green={peer.reachable}
animate:flip={{duration: 1000}}
animate:flip={{duration: 500}}
>
<td>{peer.hostname}</td>
<td>{peer.unreachable_count}</td>
@@ -115,6 +133,13 @@ let sort = (field: string) => {
<td>{formatDataVolume(peer.cache_threshold, 3)}</td>
<td>{formatDataVolume(peer.free_space, 3)}</td>
<td>{formatDataVolume(peer.min_free_space, 3)}</td>
{#if !all_reachable}
<td>
<button class="button flat delete" onclick={() => decommission(peer.id)}>
<i class="icon small">delete</i>
</button>
</td>
{/if}
</tr>
{/each}
@@ -135,6 +160,7 @@ let sort = (field: string) => {
<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.cache_threshold, 0), 4)}</td>
<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.free_space, 0), 4)}</td>
<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.min_free_space, 0), 3)}</td>
{#if !all_reachable}<td></td>{/if}
</tr>
<tr>
<td>Average</td>
@@ -153,6 +179,7 @@ let sort = (field: string) => {
<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.cache_threshold, 0) / peers.length, 4)}</td>
<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.free_space, 0) / peers.length, 4)}</td>
<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.min_free_space, 0) / peers.length, 3)}</td>
{#if !all_reachable}<td></td>{/if}
</tr>
</tbody>
</table>
@@ -167,4 +194,7 @@ let sort = (field: string) => {
tr {
text-align: initial;
}
.delete {
margin: 0;
}
</style>

7
svelte/src/filesystem/Breadcrumbs.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { fs_encode_path } from "lib/FilesystemAPI";
import { fs_encode_path } from "lib/FilesystemAPI.svelte";
import { path_link, type FSNavigator } from "./FSNavigator";
import FileMenu from "./filemanager/FileMenu.svelte";
import EditWindow from "./edit_window/EditWindow.svelte";
@@ -36,7 +36,7 @@ onMount(() => {
{:else if node.is_shared()}
<i class="icon small">share</i>
{/if}
<div class="node_name" class:base={$nav.base_index === i}>
<div class="node_name" class:base={$nav.base_index === i} class:small={$nav.path.length > 10}>
{node.name}
</div>
</a>
@@ -64,6 +64,9 @@ onMount(() => {
text-overflow: ellipsis;
white-space: nowrap;
}
.small {
max-width: 10vw;
}
.base {
/* The base name uses all available space */
max-width: unset;

41
svelte/src/filesystem/DetailsWindow.svelte
View File

@@ -1,9 +1,8 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import Chart from "util/Chart.svelte";
import { formatDataVolume, formatDate, formatThousands } from "util/Formatting";
import Modal from "util/Modal.svelte";
import { fs_path_url, fs_share_hotlink_url, fs_share_url, fs_timeseries, type FSNode } from "lib/FilesystemAPI";
import { fs_path_url, fs_share_hotlink_url, fs_share_url, fs_timeseries, type FSNode } from "lib/FilesystemAPI.svelte";
import { color_by_name } from "util/Util";
import { tick } from "svelte";
import CopyButton from "layout/CopyButton.svelte";
@@ -19,12 +18,13 @@ let {
export const toggle = () => visible = !visible
const visibility_change = visible => {
$effect(() => {
// Only update the chart if the details modal is open. Else the chart is
// rendered for nothing
if (visible) {
update_chart(nav.base, 0, 0)
update_chart($nav.base, chart_timespan, chart_interval)
}
}
})
let chart: Chart = $state()
let chart_timespan = $state(0)
@@ -134,15 +134,9 @@ let update_chart = async (base: FSNode, timespan: number, interval: number) => {
console.error("Failed to get time series data:", err)
}
}
run(() => {
visibility_change(visible)
});
let direct_url = $derived($nav.base.path ? window.location.origin+fs_path_url($nav.base.path) : "")
let share_url = $derived(fs_share_url($nav.path))
let direct_share_url = $derived(fs_share_hotlink_url($nav.path))
run(() => {
update_chart($nav.base, chart_timespan, chart_interval)
});
</script>
<Modal bind:visible={visible} title="Details" width={($nav.base.type === "file" ? 1000 : 750) + "px"}>
@@ -172,13 +166,6 @@ run(() => {
<td>Mode</td>
<td>{$nav.base.mode_string}</td>
</tr>
<tr>
<td>Node ID</td>
<td>
<CopyButton text={$nav.base.id}>Copy</CopyButton>
<a href="/d/{$nav.base.id}">{$nav.base.id}</a>
</td>
</tr>
{#if $nav.base.type === "file"}
<tr>
<td>File type</td>
@@ -201,7 +188,23 @@ run(() => {
</td>
</tr>
<tr><td>SHA256 sum</td><td>{$nav.base.sha256_sum}</td></tr>
{:else if $nav.base.type === "dir"}
<tr>
<td>Total directory size</td>
<td>{formatDataVolume($nav.base.recursive_size, 4)}</td>
</tr>
<tr>
<td>Total directory children</td>
<td>{formatThousands($nav.base.recursive_children)}</td>
</tr>
{/if}
<tr>
<td>Node ID</td>
<td>
<CopyButton text={$nav.base.id}>Copy</CopyButton>
<a href="/d/{$nav.base.id}">{$nav.base.id}</a>
</td>
</tr>
<tr>
<td>Direct link</td>
<td>

54
svelte/src/filesystem/ErrorPage.svelte Normal file
View File

@@ -0,0 +1,54 @@
<script lang="ts">
import TextBlock from "layout/TextBlock.svelte";
import { type FSNavigator } from "./FSNavigator";
import { onMount } from "svelte";
import { breadcrumbs_store } from "wrap/BreadcrumbStore";
let {
nav
}: {
nav: FSNavigator;
} = $props();
onMount(() => {
return nav.subscribe(nav => {
breadcrumbs_store.set(breadcrumbs)
})
})
</script>
{#snippet breadcrumbs()}
{$nav.navigation_error}
{/snippet}
<TextBlock>
{#if $nav.navigation_error === "not_found" || $nav.navigation_error === "path_not_found"}
<h1>Page not found</h1>
<p>
This page could not be found.
</p>
{:else if $nav.navigation_error === "permission_denied" || $nav.navigation_error === "forbidden"}
<h1>Permission denied</h1>
<p>
You are not allowed to access this resource.
</p>
{:else if $nav.navigation_error === "unavailable_for_legal_reasons"}
<h1>Unavailable for legal reasons</h1>
<p>
This content has been removed for breaking the law.
</p>
{:else if $nav.navigation_error === "out_of_transfer"}
<h1>Traffic limit exceeded</h1>
<p>
The host user has exceeded the traffic limit of their subscription.
They need to upgrade to a higher subscription tier.
</p>
{:else}
<h1>Unknown error code</h1>
<p>
{$nav.navigation_error}
</p>
{/if}
</TextBlock>

25
svelte/src/filesystem/FSNavigator.ts
View File

@@ -1,6 +1,6 @@
import { loading_finish, loading_start } from "lib/Loading";
import { fs_get_node, fs_encode_path, fs_split_path } from "lib/FilesystemAPI";
import type { FSNode, FSPath, FSPermissions, FSContext } from "lib/FilesystemAPI";
import { fs_get_node, fs_encode_path, fs_split_path } from "lib/FilesystemAPI.svelte";
import type { FSNode, FSPath, FSPermissions, FSContext } from "lib/FilesystemAPI.svelte";
export class FSNavigator {
// Parts of the raw API response
@@ -54,6 +54,7 @@ export class FSNavigator {
}
last_requested_path: string = ""
navigation_error: string = ""
navigate = async (path: string, push_history: boolean) => {
if (path === this.last_requested_path) {
console.debug("FSNavigator: Requested path ", path, " is equal to current path. Debouncing")
@@ -72,14 +73,14 @@ export class FSNavigator {
const resp = await fs_get_node(path)
this.open_node(resp, push_history)
} catch (err: any) {
if (err.value && err.value === "path_not_found") {
if (err.value !== undefined && err.value === "path_not_found") {
if (path !== this.path[0].path && path !== "/" && path !== "") {
console.debug("Path", path, "was not found, trying to navigate to parent")
this.navigate(fs_split_path(path).parent, push_history)
}
} else if (err.message) {
console.error(err)
alert("Error: " + err.message)
} else if (err.value !== undefined) {
this.navigation_error = err.value
this.notify_subscribers()
} else {
console.error(err)
alert("Error: " + err)
@@ -133,6 +134,7 @@ export class FSNavigator {
this.children = node.children
this.permissions = node.permissions
this.context = node.context
this.navigation_error = "" // Clear the error value
this.initialized = true
console.debug("Opened node", node)
@@ -268,9 +270,14 @@ const sort_children = (children: FSNode[], field: string, asc: boolean) => {
[a, b] = [b, a]
}
// If the two values are equal then we force sort by name, since names
// are always unique
if (a[field] === b[field]) {
if (field === "size") {
// When doing a size comparison we also take the recursive directory
// size into account
return (a.type === "dir" ? a.recursive_size : a.file_size) -
(b.type === "dir" ? b.recursive_size : b.file_size)
} else if (a[field] === b[field]) {
// If the two values are equal then we force sort by name, since
// names are always unique
return a.name.localeCompare(b.name, undefined, { numeric: true })
} else if (typeof (a[field]) === "number") {
// Sort ints from high to low

2
svelte/src/filesystem/FileStats.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount } from "svelte";
import { formatDataVolume, formatThousands } from "util/Formatting"
import { fs_path_url } from "lib/FilesystemAPI";
import { fs_path_url } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "./FSNavigator";
let {

6
svelte/src/filesystem/Filesystem.svelte
View File

@@ -11,6 +11,7 @@ import { css_from_path } from "filesystem/edit_window/Branding";
import AffiliatePrompt from "user_home/AffiliatePrompt.svelte";
import { current_page_store } from "wrap/RouterStore";
import SearchBar from "./SearchBar.svelte";
import ErrorPage from "./ErrorPage.svelte";
let file_preview: FilePreview = $state()
let toolbar: Toolbar = $state()
@@ -141,6 +142,7 @@ const keydown = (e: KeyboardEvent) => {
<svelte:window onkeydown={keydown} />
{#if $nav.navigation_error === ""}
<div class="filesystem">
<Breadcrumbs nav={nav} edit_window={edit_window}/>
@@ -164,6 +166,10 @@ const keydown = (e: KeyboardEvent) => {
/>
</div>
{:else}
<ErrorPage nav={nav} />
{/if}
<SearchBar bind:this={search_bar} nav={nav}/>
<DetailsWindow nav={nav} bind:this={details_window} bind:visible={details_visible} />

2
svelte/src/filesystem/SearchBar.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount, tick } from "svelte";
import { fs_search, fs_encode_path, fs_thumbnail_url, FSNode } from "lib/FilesystemAPI";
import { fs_search, fs_encode_path, fs_thumbnail_url, FSNode } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import { loading_finish, loading_start } from "lib/Loading";
import Modal from "util/Modal.svelte";

88
svelte/src/filesystem/ShareDialog.svelte
View File

@@ -1,10 +1,11 @@
<script lang="ts">
import type { FSNavigator } from "./FSNavigator";
import { fs_node_icon, fs_share_hotlink_url, fs_share_url, fs_update, type FSNode, type FSPermissions } from "lib/FilesystemAPI";
import { copy_text } from "util/Util";
import { fs_check_is_error, fs_node_icon, fs_share_hotlink_url, fs_share_url, fs_update, type FSNode, type FSPermissions } from "lib/FilesystemAPI.svelte";
import CopyButton from "layout/CopyButton.svelte";
import Dialog from "layout/Dialog.svelte";
import { fade } from "svelte/transition";
import { get_user } from "lib/NovaAPI";
import Button from "layout/Button.svelte";
let { nav }: {
nav: FSNavigator;
@@ -12,20 +13,38 @@ let { nav }: {
let path: FSNode[]
let base: FSNode = $state()
let toast = $state("")
let share_url = $state("")
let direct_share_url = $state("")
let is_parent = $state(false)
let parent_node: FSNode = $state()
let dialog: Dialog = $state()
let dialog_not_allowed: Dialog = $state()
export const open = async (e: MouseEvent, p: FSNode[]) => {
path = p
base = path[path.length-1]
const user = await get_user()
if (user.subscription.file_sharing === false && base.created_by === user.id) {
}
share_url = fs_share_url(path)
if (share_url === "") {
// File is not public, make public
await make_public()
try {
await make_public()
} catch (err) {
if (fs_check_is_error(err, "sharing_not_allowed")) {
if (e.target instanceof HTMLButtonElement) {
dialog_not_allowed.open(e.target.getBoundingClientRect())
} else {
dialog_not_allowed.open((e.target as HTMLElement).parentElement.getBoundingClientRect())
}
return
} else {
alert("Error file making file public: "+err)
}
}
}
await share()
@@ -50,15 +69,19 @@ const make_public = async () => {
}
}
let share_parent = $state(false)
let navigator_share = $state(false)
const share = async () => {
// If the base node does not have a public ID then the file is shared
// through a parent node. In that case we ask the user if it was their
// intention to share the parent directory
is_parent = base.id === undefined
if (is_parent) {
// If the base node is not shared then the file is shared through a parent
// node. In that case we ask the user if it was their intention to share the
// parent directory
share_parent = !base.is_shared()
navigator_share = navigator.share !== undefined
if (!base.is_shared()) {
// Walk path backwards looking for the last public ID
for (let i = path.length - 1; i >= 0; i--) {
if (path[i].id !== undefined && path[i].id !== "me") {
if (path[i].is_shared()) {
parent_node = path[i]
break
}
@@ -67,35 +90,35 @@ const share = async () => {
share_url = fs_share_url(path)
direct_share_url = fs_share_hotlink_url(path)
}
try {
await navigator.share({
title: base.name,
text: "I would like to share '" + base.name + "' with you",
url: share_url,
})
} catch(_) {
if (copy_text(share_url)) {
toast = "Link copied to clipboard"
setTimeout(() => {toast = ""}, 10000)
} else {
alert("Could not copy text")
}
}
const nav_share = async (url: string) => {
await navigator.share({
title: base.name,
text: "I would like to share '" + base.name + "' with you",
url: url,
})
}
</script>
<Dialog bind:this={dialog_not_allowed}>
<div class="dialog_inner">
<div class="highlight_yellow" transition:fade>
Sharing is not allowed on free accounts. Upgrade to premium to
enable this feature
</div>
</div>
</Dialog>
<Dialog bind:this={dialog}>
<div class="dialog_inner">
{#if toast !== ""}
<div class="highlight_green" transition:fade>{toast}</div>
<div class="separator" transition:fade></div>
{/if}
<div>Sharing link</div>
<div class="link_copy">
<div class="button_container">
<CopyButton text={share_url}>Copy</CopyButton>
{#if navigator_share}
<Button icon="share" label="Share" click={() => {nav_share(share_url)}}/>
{/if}
</div>
<a href="{share_url}">{share_url}</a>
</div>
@@ -104,11 +127,14 @@ const share = async () => {
<div class="link_copy">
<div class="button_container">
<CopyButton text={direct_share_url}>Copy</CopyButton>
{#if navigator_share}
<Button icon="share" label="Share" click={() => {nav_share(direct_share_url)}}/>
{/if}
</div>
<a href="{direct_share_url}">{direct_share_url}</a>
</div>
{#if is_parent}
{#if share_parent}
<div class="separator"></div>
<div>
This link also gives access to

9
svelte/src/filesystem/Toolbar.svelte
View File

@@ -3,7 +3,7 @@ import { copy_text } from "util/Util";
import FileStats from "./FileStats.svelte";
import type { FSNavigator } from "./FSNavigator";
import EditWindow from "./edit_window/EditWindow.svelte";
import { fs_share_url, path_is_shared } from "lib/FilesystemAPI";
import { fs_share_url, path_is_shared } from "lib/FilesystemAPI.svelte";
import ShareDialog from "./ShareDialog.svelte";
import { bookmark_add, bookmark_del, bookmarks_store, is_bookmark } from "lib/Bookmarks";
@@ -40,7 +40,6 @@ export const copy_link = () => {
<FileStats nav={nav} bind:expanded={toolbar_expanded}/>
<div class="grid" class:hide={!toolbar_expanded}>
<div class="button_row">
<button onclick={() => {nav.open_sibling(-1)}}>
<i class="icon">skip_previous</i>
@@ -73,7 +72,11 @@ export const copy_link = () => {
{#if path_is_shared($nav.path)}
<button onclick={copy_link} class:button_highlight={link_copied}>
<i class="icon">content_copy</i>
<span><u>C</u>opy link</span>
{#if link_copied}
<span>Link copied!</span>
{:else}
<span><u>C</u>opy link</span>
{/if}
</button>
{/if}

2
svelte/src/filesystem/edit_window/AccessControl.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import Button from "layout/Button.svelte";
import type { FSPermissions, NodeOptions } from "lib/FilesystemAPI";
import type { FSPermissions, NodeOptions } from "lib/FilesystemAPI.svelte";
import PermissionButton from "./PermissionButton.svelte";
let {

2
svelte/src/filesystem/edit_window/Branding.ts
View File

@@ -2,7 +2,7 @@ import parse from "pure-color/parse";
import rgb2hsl from "pure-color/convert/rgb2hsl";
import hsl2rgb from "pure-color/convert/hsl2rgb";
import rgb2hex from "pure-color/convert/rgb2hex";
import type { FSNode, FSNodeProperties } from "lib/FilesystemAPI";
import type { FSNode, FSNodeProperties } from "lib/FilesystemAPI.svelte";
const text_contrast = 85
const body_alpha = 0.9

2
svelte/src/filesystem/edit_window/BrandingOptions.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import ThemePresets from "./ThemePresets.svelte";
import { fs_update, fs_node_type, type FSNode, type NodeOptions, type FSPermissions } from "lib/FilesystemAPI";
import { fs_update, fs_node_type, type FSNode, type NodeOptions, type FSPermissions } from "lib/FilesystemAPI.svelte";
import CustomBanner from "filesystem/viewers/CustomBanner.svelte";
import HelpButton from "layout/HelpButton.svelte";
import FilePicker from "filesystem/filemanager/FilePicker.svelte";

44
svelte/src/filesystem/edit_window/EditWindow.svelte
View File

@@ -1,13 +1,12 @@
<script lang="ts">
import { fs_rename, fs_update, type FSNode, type FSPermissions, type NodeOptions } from "lib/FilesystemAPI";
import { fs_rename, fs_update, type FSNode, type FSPermissions, type NodeOptions } from "lib/FilesystemAPI.svelte";
import Modal from "util/Modal.svelte";
import BrandingOptions from "./BrandingOptions.svelte";
import { branding_from_props } from "./Branding";
import FileOptions from "./FileOptions.svelte";
import SharingOptions from "./SharingOptions.svelte";
import AccessControl from "./AccessControl.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import { loading_finish, loading_start } from "lib/Loading";
import { loading_run } from "lib/Loading";
let file: FSNode = $state({} as FSNode)
let options: NodeOptions = $state({} as NodeOptions)
@@ -73,23 +72,22 @@ const save = async (e: SubmitEvent) => {
e.preventDefault()
console.debug("Saving file", file.path)
let new_file: FSNode
try {
loading_start()
options.branding_enabled = JSON.stringify(branding_enabled)
await loading_run(async () => {
options.branding_enabled = JSON.stringify(branding_enabled)
new_file = await fs_update(file.path, options)
await fs_update(file.path, options)
if (new_name !== file.name) {
let parent = file.path.slice(0, -file.name.length)
console.log("Moving", file.path, "to", parent+new_name)
// If the file name has changed we need to call fs_rename. This is a
// separate operation because a rename also moves the file
if (new_name !== file.name) {
let parent = file.path.slice(0, -file.name.length)
console.log("Moving", file.path, "to", parent+new_name)
await fs_rename(file.path, parent+new_name)
file.path = parent+new_name
new_file.name = new_name
new_file.path = file.path
}
await fs_rename(file.path, parent+new_name)
file.path = parent+new_name
}
})
} catch (err) {
if (err.message) {
alert(err.message)
@@ -98,11 +96,11 @@ const save = async (e: SubmitEvent) => {
alert(err)
}
return
} finally {
loading_finish()
}
if (open_after_edit) {
// The navigate call will be debounced if the new path is equal to the
// current path. So we call reload() instead if that's the case
if (open_after_edit && $nav.base.path !== file.path) {
nav.navigate(file.path, false)
} else {
nav.reload()
@@ -120,12 +118,6 @@ const save = async (e: SubmitEvent) => {
<i class="icon">share</i>
Sharing
</button>
{#if $nav.permissions.owner}
<button class:button_highlight={tab === "access"} onclick={() => tab = "access"}>
<i class="icon">key</i>
Access control
</button>
{/if}
<button class:button_highlight={tab === "branding"} onclick={() => tab = "branding"}>
<i class="icon">palette</i>
Branding
@@ -148,8 +140,6 @@ const save = async (e: SubmitEvent) => {
bind:file
bind:options
/>
{:else if tab === "access"}
<AccessControl bind:options />
{:else if tab === "branding"}
<BrandingOptions
bind:enabled={branding_enabled}

2
svelte/src/filesystem/edit_window/FileOptions.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import Button from "layout/Button.svelte";
import { fs_trash, type FSNode } from "lib/FilesystemAPI";
import { fs_trash, type FSNode } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import { loading_finish, loading_start } from "lib/Loading";

2
svelte/src/filesystem/edit_window/PermissionButton.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import ToggleButton from "layout/ToggleButton.svelte";
import type { FSPermissions } from "lib/FilesystemAPI";
import type { FSPermissions } from "lib/FilesystemAPI.svelte";
let {
permissions = $bindable()

37
svelte/src/filesystem/edit_window/SharingOptions.svelte
View File

@@ -1,10 +1,10 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { domain_url } from "util/Util";
import CopyButton from "layout/CopyButton.svelte";
import { formatDate } from "util/Formatting";
import { type FSNode, type NodeOptions } from "lib/FilesystemAPI";
import { type FSNode, type NodeOptions } from "lib/FilesystemAPI.svelte";
import AccessControl from "./AccessControl.svelte";
import { user } from "lib/UserStore";
let {
file = $bindable(),
@@ -14,27 +14,24 @@ let {
options: NodeOptions;
} = $props();
let embed_html: string = $state()
let preview_area: HTMLDivElement = $state()
const embed_iframe = (file: FSNode, options: NodeOptions) => {
if (!file.is_shared()) {
example = false
embed_html = "File is not shared, can't generate embed code"
return
let is_shared = $derived(file.is_shared() || options.link_permissions?.read)
let embed_html: string = $derived.by(() => {
if (!is_shared) {
return "File is not shared, can't generate embed code"
}
let url = domain_url()+"/d/"+file.id
embed_html = `<iframe ` +
return `<iframe ` +
`src="${url}" ` +
`style="border: none; width: 100%; max-width 90vw; height: 800px; max-height: 75vh; border-radius: 6px;" ` +
`allowfullscreen` +
`></iframe>`
}
})
let preview_area: HTMLDivElement = $state()
let example = $state(false)
const toggle_example = () => {
if (file.is_shared()) {
if (is_shared) {
example = !example
if (example) {
preview_area.innerHTML = embed_html
@@ -45,11 +42,15 @@ const toggle_example = () => {
}
let share_link = $derived(window.location.protocol+"//"+window.location.host+"/d/"+file.id)
run(() => {
embed_iframe(file, options)
});
</script>
{#if $user.subscription.file_sharing === false}
<div class="highlight_yellow">
Your account does not support sharing features. Access controls will not
have any effect until you upgrade to premium.
</div>
{/if}
<fieldset>
<legend>Public link</legend>
@@ -85,8 +86,8 @@ run(() => {
<div class="center">
<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
<br/>
<CopyButton text={embed_html}>Copy HTML</CopyButton>
<button onclick={toggle_example} class:button_highlight={example} disabled={!file.is_shared()}>
<CopyButton text={embed_html} disabled={!is_shared}>Copy HTML</CopyButton>
<button onclick={toggle_example} class:button_highlight={example} disabled={!is_shared}>
<i class="icon">visibility</i> Show example
</button>
</div>

10
svelte/src/filesystem/edit_window/ThemePresets.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import type { FSNodeProperties } from "lib/FilesystemAPI";
import type { FSNodeProperties } from "lib/FilesystemAPI.svelte";
let {
properties = $bindable({} as FSNodeProperties)
@@ -86,6 +86,14 @@ const themes = [
brand_background_color: "#1e1e2e",
brand_body_color: "#181825",
brand_card_color: "#313244",
}, {
name: "Dracula",
brand_input_color: "#424450",
brand_highlight_color: "#50FA7B",
brand_danger_color: "#FF5555",
brand_background_color: "#191A21",
brand_body_color: "#21222C",
brand_card_color: "#343746",
}, {
name: "Nova",
brand_input_color: "#28033f",

2
svelte/src/filesystem/filemanager/CompactView.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { fs_encode_path, fs_node_icon } from "lib/FilesystemAPI"
import { fs_encode_path, fs_node_icon } from "lib/FilesystemAPI.svelte"
import type { FSNavigator } from "filesystem/FSNavigator";
import { FileAction, type FileActionHandler } from "./FileManagerLib";

2
svelte/src/filesystem/filemanager/CreateDirectory.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from "svelte";
import { fs_mkdir } from "lib/FilesystemAPI";
import { fs_mkdir } from "lib/FilesystemAPI.svelte";
import Button from "layout/Button.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import { loading_finish, loading_start } from "lib/Loading";

17
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { fs_rename, fs_trash, FSNode } from "lib/FilesystemAPI"
import { fs_rename, fs_trash, FSNode } from "lib/FilesystemAPI.svelte"
import { onMount } from "svelte"
import CreateDirectory from "./CreateDirectory.svelte"
import ListView from "./ListView.svelte"
@@ -101,21 +101,6 @@ const navigate_back = () => {
// Deletion function
const delete_selected = async () => {
let count = nav.children.reduce((acc, cur) => {
if (cur.fm_selected) {
acc++
}
return acc
}, 0)
let confirmSingle = `Are you sure you want to delete this file? This action is irreversible.`
let confirmMulti = `Are you sure you want to delete these ${count} files? This action is irreversible.`
if (count === 0 ||
(count === 1 && !confirm(confirmSingle)) ||
(count > 1 && !confirm(confirmMulti))) {
return
}
try {
loading_start()

2
svelte/src/filesystem/filemanager/FileMenu.svelte
View File

@@ -4,7 +4,7 @@ import type { FSNavigator } from "filesystem/FSNavigator";
import Button from "layout/Button.svelte";
import Dialog from "layout/Dialog.svelte";
import { bookmark_add, bookmark_del, bookmarks_store, is_bookmark } from "lib/Bookmarks";
import { fs_trash, type FSNode } from "lib/FilesystemAPI";
import { fs_trash, type FSNode } from "lib/FilesystemAPI.svelte";
import { loading_finish, loading_start } from "lib/Loading";
import { tick } from "svelte";

2
svelte/src/filesystem/filemanager/FilePicker.svelte
View File

@@ -5,7 +5,7 @@ import GalleryView from "./GalleryView.svelte"
import CompactView from "./CompactView.svelte"
import Modal from "util/Modal.svelte";
import { FSNavigator, path_link } from "filesystem/FSNavigator";
import { fs_encode_path, type FSNode } from "lib/FilesystemAPI";
import { fs_encode_path, type FSNode } from "lib/FilesystemAPI.svelte";
import { FileAction, type FileActionHandler } from "./FileManagerLib";
let nav = $state(new FSNavigator(false))

2
svelte/src/filesystem/filemanager/GalleryView.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { fs_node_icon, fs_node_type, fs_encode_path } from "lib/FilesystemAPI";
import { fs_node_icon, fs_node_type, fs_encode_path } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import { FileAction, type FileActionHandler } from "./FileManagerLib";

125
svelte/src/filesystem/filemanager/ListView.svelte
View File

@@ -1,9 +1,13 @@
<script lang="ts">
import { formatDataVolume } from "util/Formatting";
import { fs_encode_path, fs_node_icon } from "lib/FilesystemAPI"
import { formatDataVolume, formatDate, formatThousands } from "util/Formatting";
import { fs_encode_path, fs_node_icon } from "lib/FilesystemAPI.svelte"
import type { FSNavigator } from "filesystem/FSNavigator";
import SortButton from "layout/SortButton.svelte";
import { FileAction, type FileActionHandler } from "./FileManagerLib";
import Dialog from "layout/Dialog.svelte";
import Button from "layout/Button.svelte";
import { onMount } from "svelte";
import CopyButton from "layout/CopyButton.svelte";
let {
nav,
@@ -20,23 +24,70 @@ let {
hide_edit?: boolean
hide_branding?: boolean
} = $props();
let dialog: Dialog = $state()
const columns: {field: string, label: string}[] = [
{field: "modified", label: "Modified on"},
{field: "created", label: "Created on"},
{field: "created_by", label: "Created by"},
{field: "mode", label: "Mode"},
{field: "recursive_children", label: "Children"},
{field: "file_type", label: "File type"},
{field: "size", label: "Size"},
{field: "id", label: "Node ID"},
]
let config: {
modified?: boolean
created?: boolean
created_by?: boolean
mode?: boolean
recursive_children?: boolean
file_type?: boolean
size?: boolean
id?: boolean
} = $state({
size: true, // Only size is visible by default
})
const prevent = (e: MouseEvent) => {
e.stopPropagation()
}
const submit_settings = (e: SubmitEvent) => {
e.preventDefault()
dialog.close()
}
const save_settings = () => {
window.localStorage.setItem("list_view_columns", JSON.stringify(config))
}
const load_settings = () => {
let item = window.localStorage.getItem("list_view_columns")
if (item !== null) {
config = JSON.parse(item)
}
}
onMount(load_settings)
</script>
<table class="directory">
<thead>
<tr>
<tr class="header_row">
<td></td>
<td>
<SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field="name">
Name
</SortButton>
</td>
<td class="hide_small">
<SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field="file_size">
Size
</SortButton>
{#each columns as col}
<td class="hide_small" class:hidden={!config[col.field]}>
<SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field={col.field}>
{col.label}
</SortButton>
</td>
{/each}
<td class="node_icons icons_wrap">
<Button flat icon="settings" click={e => dialog.open(e)} />
</td>
<td></td>
</tr>
</thead>
<tbody>
@@ -56,11 +107,35 @@ let {
{child.name}
</a>
</td>
<td class="node_size hide_small">
<td class="node_size hide_small" class:hidden={!config.modified}>
{formatDate(child.modified, true, true, false)}
</td>
<td class="node_size hide_small" class:hidden={!config.created}>
{formatDate(child.created, true, true, false)}
</td>
<td class="node_size hide_small" class:hidden={!config.created_by}>
{child.created_by}
</td>
<td class="node_size hide_small" class:hidden={!config.mode}>
{child.mode_string}
</td>
<td class="node_size hide_small" class:hidden={!config.recursive_children}>
{formatThousands(child.recursive_children)}
</td>
<td class="node_size hide_small" class:hidden={!config.file_type}>
{child.file_type}
</td>
<td class="node_size hide_small" class:hidden={!config.size}>
{#if child.type === "file"}
{formatDataVolume(child.file_size, 3)}
{:else if child.type === "dir"}
{formatDataVolume(child.recursive_size, 3)}
{/if}
</td>
<td class="node_size hide_small" class:hidden={!config.id}>
<CopyButton text={$nav.base.id} onclick={prevent} />
<a href="/d/{child.id}" onclick={prevent}>{child.id}</a>
</td>
<td class="node_icons">
<div class="icons_wrap">
{#if child.abuse_type !== undefined}
@@ -91,15 +166,39 @@ let {
</tbody>
</table>
<Dialog bind:this={dialog} onclose={save_settings}>
<form class="column_config" onsubmit={submit_settings}>
{#each columns as col}
<div>
<input type="checkbox" id="show_{col.field}" name="show_{col.field}" bind:checked={config[col.field]}/>
<label for="show_{col.field}">{col.label}</label>
</div>
{/each}
<button type="submit">
<i class="icon">save</i>
Save
</button>
</form>
</Dialog>
<style>
.directory {
background: var(--body_background);
border-collapse: collapse;
/* backdrop-filter: blur(4px); */
backdrop-filter: blur(4px);
max-width: 1200px;
margin: auto; /* center */
}
td {
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
}
.header_row {
white-space: nowrap;
}
.node_icons {
padding: 0;
}
.node {
@@ -151,6 +250,12 @@ td {
display: none;
}
.column_config {
display: flex;
flex-direction: column;
white-space: nowrap;
}
/* Large icon mode only supported on wide screens */
@media (min-width: 500px) {
.node_icon.large_icons {

251
svelte/src/filesystem/filemanager/TrashBin.svelte
View File

@@ -1,28 +1,31 @@
<script lang="ts">
import { formatDataVolume, formatDate } from "util/Formatting";
import { fs_check_response, fs_encode_path, fs_get_trash, fs_node_icon, fs_path_url, type TrashEntry } from "lib/FilesystemAPI";
import { loading_finish, loading_start } from "lib/Loading";
import { fs_check_response, fs_encode_path, fs_get_trash, fs_node_icon, fs_path_url, type TrashEntry } from "lib/FilesystemAPI.svelte";
import { loading_finish, loading_run, loading_start, loading_store } from "lib/Loading";
import { onMount } from "svelte";
import { breadcrumbs_store } from "wrap/BreadcrumbStore";
import { FSNavigator } from "filesystem/FSNavigator";
let { root_path = "/me" }: { root_path?: string } = $props();
let {
nav,
root_path = "/me",
}: {
nav: FSNavigator
root_path?: string
} = $props();
let entries: TrashEntry[] = $state([]);
let error: string = $state("");
let loaded = $state(false);
const load = async () => {
loaded = false;
entries = [];
try {
loading_start();
entries = await fs_get_trash(root_path)
error = "";
} catch (err: any) {
error = err?.message ?? JSON.stringify(err);
} finally {
loaded = true;
loading_finish();
}
loading_run(async () => {
try {
entries = await fs_get_trash(root_path)
error = "";
} catch (err: any) {
error = err?.message ?? JSON.stringify(err);
}
})
};
const delete_entry = async (entry: TrashEntry) => {
@@ -76,122 +79,112 @@ const empty_trash = async () => {
}
};
onMount(load);
onMount(() => {
breadcrumbs_store.set(breadcrumbs)
load()
});
</script>
<div class="trash_container">
<div class="header">
<h2 class="title"><i class="icon">delete</i> Trash</h2>
<div class="actions">
<button onclick={load}>
<i class="icon">refresh</i>
<span>Refresh</span>
</button>
{#if entries.length > 0}
<button class="danger" onclick={empty_trash}>
<i class="icon">delete_forever</i>
<span>Empty trash</span>
</button>
{#snippet breadcrumbs()}
<i class="icon">delete</i>
<div>
Trash bin
{#if $loading_store === 0 && entries.length === 0}
(empty)
{:else if entries.length !== 0}
({formatDataVolume(entries.reduce(
(acc, entry) => acc + entry.node.file_size, 0
), 3)})
{/if}
</div>
</div>
<div class="separator"></div>
<button onclick={() => window.history.back()} title="Back">
<i class="icon">arrow_back</i>
</button>
<button onclick={() => nav.navigate_up()} disabled={$nav.path.length <= 1} title="Up">
<i class="icon">north</i>
</button>
<button onclick={() => nav.reload()} title="Refresh directory listing">
<i class="icon">refresh</i>
</button>
{#if entries.length !== 0}
<button class="button button_red" onclick={empty_trash}>
<i class="icon">delete_forever</i>
<span>Delete all</span>
</button>
{/if}
{/snippet}
{#if error}
<p class="error">{error}</p>
{:else if loaded && entries.length === 0}
<p class="empty">The trash is empty.</p>
{:else if entries.length > 0}
<table class="trash_table">
<thead>
<tr>
<td></td>
<td>Name</td>
<td class="hide_small">Original location</td>
<td class="hide_small">Deleted</td>
<td class="hide_small">Size</td>
<td></td>
{#if error}
<p class="error">{error}</p>
{:else if entries.length > 0}
<table class="trash_table">
<thead>
<tr>
<td></td>
<td>Name</td>
<td class="hide_small">Original location</td>
<td class="hide_small">Deleted at</td>
<td class="hide_small">Size</td>
<td></td>
</tr>
</thead>
<tbody>
{#each entries as entry (entry.node.id)}
<tr class="entry">
<td class="icon_cell">
<img
src={fs_node_icon(entry.node, 32, 32)}
class="node_icon"
alt="icon"
/>
</td>
<td class="name_cell">
<a class="entry_link" href={"/d" + fs_encode_path(entry.node.path)}>
{entry.node.name}
</a>
</td>
<td class="hide_small">
{entry.original_path ? entry.original_path.slice(0, -entry.node.name.length) : "—"}
</td>
<td class="hide_small">
{entry.deletion_date ? formatDate(entry.deletion_date) : "—"}
</td>
<td class="hide_small">
{#if entry.node.type === "file"}
{formatDataVolume(entry.node.file_size, 3)}
{/if}
</td>
<td>
<div class="row_actions">
<button title="Restore to original location" onclick={() => restore_entry(entry)}>
<i class="icon">restore_from_trash</i>
</button>
<button class="button button_red" title="Delete permanently" onclick={() => delete_entry(entry)}>
<i class="icon">delete_forever</i>
</button>
</div>
</td>
</tr>
</thead>
<tbody>
{#each entries as entry (entry.node.id)}
<tr class="entry">
<td class="icon_cell">
<img
src={fs_node_icon(entry.node, 32, 32)}
class="node_icon"
alt="icon"
/>
</td>
<td class="name_cell">
<a class="entry_link" href={"/d" + fs_encode_path(entry.node.path)}>
{entry.node.name}
</a>
</td>
<td class="hide_small original_path">
{entry.original_path || "—"}
</td>
<td class="hide_small date_cell">
{entry.deletion_date ? formatDate(entry.deletion_date) : "—"}
</td>
<td class="hide_small size_cell">
{#if entry.node.type === "file"}
{formatDataVolume(entry.node.file_size, 3)}
{/if}
</td>
<td class="button_cell">
<div class="row_actions">
<button title="Restore to original location" onclick={() => restore_entry(entry)}>
<i class="icon">restore_from_trash</i>
</button>
<button class="danger" title="Delete permanently" onclick={() => delete_entry(entry)}>
<i class="icon">delete_forever</i>
</button>
</div>
</td>
</tr>
{/each}
</tbody>
</table>
{/if}
</div>
{/each}
</tbody>
</table>
{/if}
<style>
.trash_container {
max-width: 1200px;
margin: auto;
padding: 1em;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5em;
margin-bottom: 1em;
}
.title {
display: flex;
align-items: center;
gap: 0.3em;
margin: 0;
font-size: 1.2em;
border: none;
}
.actions {
display: flex;
gap: 0.5em;
.separator {
flex: 1 1 auto;
}
.error {
color: var(--danger_color, #c0392b);
}
.empty {
color: var(--body_text_color);
opacity: 0.6;
}
.trash_table {
width: 100%;
border-collapse: collapse;
background: var(--body_background);
border-radius: 8px;
}
.trash_table td {
padding: 0;
@@ -205,7 +198,6 @@ onMount(load);
}
.icon_cell {
width: 2.5em;
padding: 0.3em 0.3em 0.3em 0.5em;
}
.node_icon {
display: block;
@@ -214,7 +206,6 @@ onMount(load);
object-fit: contain;
}
.name_cell {
padding: 0.3em 0.5em;
word-break: break-all;
}
.entry_link {
@@ -224,34 +215,10 @@ onMount(load);
.entry_link:hover {
text-decoration: underline;
}
.original_path {
padding: 0.3em 0.5em;
color: var(--body_text_color);
opacity: 0.7;
font-size: 0.85em;
word-break: break-all;
}
.date_cell {
padding: 0.3em 0.5em;
white-space: nowrap;
font-size: 0.85em;
}
.size_cell {
padding: 0.3em 0.5em;
white-space: nowrap;
font-size: 0.85em;
text-align: right;
}
.button_cell {
padding: 0.3em 0.5em;
}
.row_actions {
display: flex;
gap: 0.25em;
}
.danger {
color: var(--danger_color, #c0392b);
}
@media (max-width: 600px) {
.hide_small {
display: none;

12
svelte/src/filesystem/upload_widget/UploadFunc.ts
View File

@@ -9,22 +9,24 @@
//
// on_error is called when the upload has failed. The parameters are the error
import { fs_path_url, type GenericResponse } from "lib/FilesystemAPI"
import { fs_path_url, type GenericResponse } from "lib/FilesystemAPI.svelte"
import { get_user } from "lib/NovaAPI"
// code and an error message
export const upload_file = (
export const upload_file = async (
file: Blob,
path: string,
on_progress: (loaded: number, total: number) => void,
on_success: (id: string) => void,
on_error: (code: string, message: string) => void,
) => {
const user = await get_user()
// Check the file size limit. For free accounts it's 20 GB
if (window["user"].subscription.file_size_limit === 0) {
window["user"].subscription.file_size_limit = 20e9
if (user !== null && user.subscription.file_size_limit === 0) {
user.subscription.file_size_limit = 20e9
}
if (file.size > window["user"].subscription.file_size_limit) {
if (file.size > user.subscription.file_size_limit) {
on_error(
"file_too_large",
"This file is too large. Check out the Pro subscription to increase the file size limit"

9
svelte/src/filesystem/upload_widget/UploadProgress.svelte
View File

@@ -21,7 +21,7 @@ let error_message = $state("")
let xhr: XMLHttpRequest = null
export const start = () => {
xhr = upload_file(
upload_file(
job.file,
job.path,
(prog_loaded, prog_total) => {
@@ -45,9 +45,10 @@ export const start = () => {
// We don't send the finished signal so the user can read the error
// messsage and manually dismiss it through the cancel button
},
)
job.status = "uploading"
).then(result => {
xhr = result
job.status = "uploading"
})
}
const cancel = () => {

24
svelte/src/filesystem/viewers/Audio.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte'
import { fs_path_url, fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI"
import { fs_path_url, fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI.svelte"
import TextBlock from "layout/TextBlock.svelte"
import type { FSNavigator } from 'filesystem/FSNavigator';
@@ -91,16 +91,18 @@ onMount(() => {
</div>
<h2>Tracklist</h2>
{#each siblings as sibling (sibling.path)}
<a href={"/d"+fs_encode_path(sibling.path)} class="node" class:playing={sibling.path === $nav.base.path}>
{#if sibling.path === $nav.base.path}
<i class="play_arrow icon">play_arrow</i>
{:else}
<img src={fs_node_icon(sibling, 64, 64)} class="node_icon" alt="icon"/>
{/if}
<span>{sibling.name}</span>
<br/>
</a>
{#each siblings as sibling (sibling.id)}
{#if !sibling.is_hidden()}
<a href={"/d"+fs_encode_path(sibling.path)} class="node" class:playing={sibling.path === $nav.base.path}>
{#if sibling.path === $nav.base.path}
<i class="play_arrow icon">play_arrow</i>
{:else}
<img src={fs_node_icon(sibling, 64, 64)} class="node_icon" alt="icon"/>
{/if}
<span>{sibling.name}</span>
<br/>
</a>
{/if}
{/each}
</TextBlock>
</div>

2
svelte/src/filesystem/viewers/CustomBanner.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import type { FSNode } from 'lib/FilesystemAPI';
import type { FSNode } from 'lib/FilesystemAPI.svelte';
import { run } from 'svelte/legacy';
let { path = [] }: {path: FSNode[]} = $props();

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

@@ -1,6 +1,6 @@
<script lang="ts">
import IconBlock from "layout/IconBlock.svelte";
import { fs_thumbnail_url, FSNode } from "lib/FilesystemAPI";
import { fs_thumbnail_url, FSNode } from "lib/FilesystemAPI.svelte";
import TextBlock from "layout/TextBlock.svelte"
import { formatDataVolume, formatDate } from "util/Formatting";

4
svelte/src/filesystem/viewers/FilePreview.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount, tick } from "svelte";
import Spinner from "util/Spinner.svelte";
import { fs_node_type } from "lib/FilesystemAPI";
import { fs_node_type } from "lib/FilesystemAPI.svelte";
import FileManager from "filesystem/filemanager/FileManager.svelte";
import TrashBin from "filesystem/filemanager/TrashBin.svelte";
import Audio from "./Audio.svelte";
@@ -90,7 +90,7 @@ export const seek = (delta: number) => {
<Spinner/>
</div>
{:else if viewer_type === "dir" && $nav.base.name === ".Trash"}
<TrashBin root_path={$nav.path[$nav.path.length - 2].path}/>
<TrashBin nav={nav} root_path={$nav.path[$nav.path.length - 2].path}/>
{:else if viewer_type === "dir"}
<FileManager nav={nav} upload_widget={upload_widget} edit_window={edit_window} search_bar={search_bar}>
<CustomBanner path={$nav.path}/>

339
svelte/src/filesystem/viewers/Image.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { swipe_nav } from "lib/SwipeNavigate";
import { fs_path_url } from "lib/FilesystemAPI";
import { fs_path_url } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import { loading_finish, loading_start } from "lib/Loading";
@@ -8,15 +8,46 @@ let { nav }: {
nav: FSNavigator;
} = $props();
let viewport: HTMLDivElement = $state()
let container: HTMLDivElement = $state()
let zoom = $state(false)
let x = 0, y = 0
let dragging = false
let image: HTMLImageElement = $state()
// Position and size of the area between the breadcrumbs bar and the toolbar,
// in viewport coordinates. The image is fitted and centered inside of this
// area, while the container it lives in covers the whole screen. That way a
// zoomed in image can be panned underneath the two bars instead of being cut
// off by them. right and bottom are the distances to the screen edges, because
// that's what the CSS needs
let area = $state({ top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 })
// Zoom level of the image. 1 means the image is scaled to fit the screen.
// translate_x and translate_y are the pan offset in screen pixels, relative to
// the centered position
let scale = $state(1)
let translate_x = $state(0)
let translate_y = $state(0)
// Enables a CSS transition. Only used for animated zoom steps (double click and
// reset), continuous gestures need to follow the cursor exactly
let animate = $state(false)
let animate_timeout: ReturnType<typeof setTimeout>
let zoomed = $derived(scale > 1.001)
// Currently active mouse / touch / pen contacts, by pointer id. This is
// deliberately not reactive. The swipe navigation resets its gesture whenever
// its properties change, so updating a state variable on every pointer event
// would cancel every swipe before it can trigger
let pointers = new Map<number, { x: number, y: number }>()
let pinch_distance = 0
let pinch_x = 0
let pinch_y = 0
let swipe_prev = $state(true)
let swipe_next = $state(true)
export const update = async () => {
loading_start()
reset_zoom(false)
// Figure out if there are previous or next files. If not then we disable
// swiping controls in that direction
@@ -32,92 +63,294 @@ export const update = async () => {
const on_load = () => loading_finish()
const mousedown = (e: MouseEvent) => {
if (!dragging && e.which === 1 && zoom) {
x = e.pageX
y = e.pageY
dragging = true
const clamp = (val: number, min: number, max: number) => Math.min(Math.max(val, min), max)
e.preventDefault()
e.stopPropagation()
return false
// Measures the area the image has to fit in. The container itself covers the
// whole screen, so its size can't be used for this
const measure_area = () => {
if (!viewport) {
return
}
const rect = viewport.getBoundingClientRect()
area = {
top: rect.top,
left: rect.left,
right: Math.max(0, document.documentElement.clientWidth - rect.right),
bottom: Math.max(0, document.documentElement.clientHeight - rect.bottom),
width: rect.width,
height: rect.height,
}
clamp_pan()
}
// The area changes when the window is resized, but also when the toolbar is
// collapsed or the navigation menu is opened
$effect(() => {
const observer = new ResizeObserver(measure_area)
observer.observe(viewport)
return () => observer.disconnect()
})
// The maximum zoom level. Zooming in further than the image's native
// resolution is pointless, but we always allow at least 8x so small images can
// be inspected too
const max_scale = () => {
if (!image || image.offsetWidth === 0) {
return 8
}
return clamp(image.naturalWidth / image.offsetWidth, 8, 40)
}
// Limits how far the image can be panned. Every edge of the image can be
// brought to the matching edge of the area, and no further, so that no part of
// the image can be pushed into a place where it can't be seen. When the scaled
// image is smaller than the area in an axis it stays centered on that axis.
//
// The limits are relative to the area and not to the container, even though
// the container is what clips the image. The container covers the whole
// screen, but the parts of it behind the toolbars and the navigation menu are
// covered up, so an edge parked there would be invisible
const clamp_pan = () => {
if (!image) {
return
}
const max_x = Math.max(0, (image.offsetWidth * scale - area.width) / 2)
const max_y = Math.max(0, (image.offsetHeight * scale - area.height) / 2)
translate_x = clamp(translate_x, -max_x, max_x)
translate_y = clamp(translate_y, -max_y, max_y)
}
// Zooms to new_scale while keeping the image pixel which is under the given
// screen coordinate in place
const zoom_at = (client_x: number, client_y: number, new_scale: number) => {
if (!container) {
return
}
const clamped = clamp(new_scale, 1, max_scale())
const factor = clamped / scale
// Cursor position relative to the center of the fitted image, which is also
// its transform origin
const off_x = client_x - (area.left + area.width / 2)
const off_y = client_y - (area.top + area.height / 2)
translate_x = off_x * (1 - factor) + translate_x * factor
translate_y = off_y * (1 - factor) + translate_y * factor
scale = clamped
clamp_pan()
}
const reset_zoom = (smooth: boolean) => {
if (smooth) {
start_animation()
}
scale = 1
translate_x = 0
translate_y = 0
}
const start_animation = () => {
animate = true
clearTimeout(animate_timeout)
animate_timeout = setTimeout(() => animate = false, 200)
}
const wheel = (e: WheelEvent) => {
e.preventDefault()
let delta = e.deltaY
if (e.deltaMode === 1) {
delta *= 16 // Delta is in lines instead of pixels
} else if (e.deltaMode === 2) {
delta *= container.clientHeight // Delta is in pages
}
// Trackpad pinch gestures are reported as a wheel event with the ctrl key
// held down. Those deltas are much smaller, so they need more amplification
const speed = e.ctrlKey ? 0.01 : 0.001
zoom_at(e.clientX, e.clientY, scale * Math.exp(-delta * speed))
}
const update_pinch = () => {
const [a, b] = [...pointers.values()]
pinch_distance = Math.hypot(a.x - b.x, a.y - b.y)
pinch_x = (a.x + b.x) / 2
pinch_y = (a.y + b.y) / 2
}
const pointerdown = (e: PointerEvent) => {
if (e.pointerType === "mouse" && e.button !== 0) {
return
}
pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
container.setPointerCapture(e.pointerId)
if (pointers.size === 2) {
update_pinch()
}
}
const mousemove = (e: MouseEvent) => {
if (dragging) {
container.scrollLeft = container.scrollLeft - (e.pageX - x)
container.scrollTop = container.scrollTop - (e.pageY - y)
x = e.pageX
y = e.pageY
const pointermove = (e: PointerEvent) => {
const previous = pointers.get(e.pointerId)
if (previous === undefined) {
return
}
e.preventDefault()
e.stopPropagation()
return false
const current = { x: e.clientX, y: e.clientY }
pointers.set(e.pointerId, current)
if (pointers.size === 1) {
// Panning only does something when the image is zoomed in. Otherwise we
// leave the gesture alone so the swipe navigation can pick it up
if (!zoomed) {
return
}
translate_x += current.x - previous.x
translate_y += current.y - previous.y
clamp_pan()
} else if (pointers.size === 2) {
const [a, b] = [...pointers.values()]
const distance = Math.hypot(a.x - b.x, a.y - b.y)
const center_x = (a.x + b.x) / 2
const center_y = (a.y + b.y) / 2
if (pinch_distance > 0) {
// Follow the movement of the fingers, then zoom around their center
translate_x += center_x - pinch_x
translate_y += center_y - pinch_y
zoom_at(center_x, center_y, scale * distance / pinch_distance)
}
pinch_distance = distance
pinch_x = center_x
pinch_y = center_y
}
e.preventDefault()
}
const pointerup = (e: PointerEvent) => {
if (!pointers.delete(e.pointerId)) {
return
}
if (pointers.size === 2) {
update_pinch()
} else {
pinch_distance = 0
}
}
const mouseup = (e: MouseEvent) => {
if (dragging) {
dragging = false
e.preventDefault()
e.stopPropagation()
return false
const dblclick = (e: MouseEvent) => {
start_animation()
if (zoomed) {
reset_zoom(false)
} else {
zoom_at(e.clientX, e.clientY, 3)
}
}
</script>
<svelte:window onmousemove={mousemove} onmouseup={mouseup} />
<svelte:window onresize={measure_area} />
<!-- This element is only here to measure the space between the breadcrumbs bar
and the toolbar. It has no contents of its own, the container is taken out of
the flow -->
<div class="viewport" bind:this={viewport}>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
bind:this={container}
class="container"
class:zoom
class:zoomed
onwheel={wheel}
onpointerdown={pointerdown}
onpointermove={pointermove}
onpointerup={pointerup}
onpointercancel={pointerup}
ondblclick={dblclick}
use:swipe_nav={{
enabled: !zoom,
enabled: !zoomed,
prev: swipe_prev,
next: swipe_next,
on_prev: () => nav.open_sibling(-1),
on_next: () => nav.open_sibling(1),
}}
>
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<img
ondblclick={() => {zoom = !zoom}}
onmousedown={mousedown}
bind:this={image}
onload={on_load}
onerror={on_load}
class="image"
class:zoom
class:animate
style="
top: {area.top}px;
right: {area.right}px;
bottom: {area.bottom}px;
left: {area.left}px;
max-width: {area.width}px;
max-height: {area.height}px;
transform: translate({translate_x}px, {translate_y}px) scale({scale});
"
src={fs_path_url($nav.base.path)}
alt="no description available"
draggable="false"
/>
</div>
</div>
<style>
.container {
display: flex;
justify-content: center;
.viewport {
height: 100%;
width: 100%;
}
.container {
/* Fixed positioning puts the container on top of the whole screen, and
* escapes the overflow of the preview area, so that a zoomed in image can
* slide underneath the breadcrumbs bar and the toolbar. Both of those are
* painted over it: the breadcrumbs bar has a z-index, and the toolbar comes
* after the preview area in the document */
position: fixed;
inset: 0;
overflow: hidden;
/* Disables the browser's own scroll and zoom gestures, we handle those
* ourselves */
touch-action: none;
}
.container.zoom {
overflow: auto;
justify-content: unset;
}
.image {
position: relative;
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
cursor: pointer;
box-shadow: 1px 1px 4px 0px var(--shadow_color);
}
.image.zoom {
max-width: none;
max-height: none;
.container.zoomed {
cursor: move;
}
.image {
/* The image is positioned absolutely so that its size does not affect the
* height of the viewport element. If it did then a tall image would stretch
* the page beyond the bottom of the screen, because a percentage max-height
* cannot be resolved against a parent which is sized by its contents.
*
* The insets and the maximum size are set from the measured area, in
* pixels. They can't be percentages, because those would resolve against
* the container, which covers the entire screen. Padding on the container
* would not work either, absolutely positioned elements ignore it. The
* automatic margins center the image within the insets */
position: absolute;
display: block;
margin: auto;
box-shadow: 1px 1px 4px 0px var(--shadow_color);
transform-origin: center center;
will-change: transform;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
.image.animate {
transition: transform 200ms ease-out;
}
</style>

2
svelte/src/filesystem/viewers/PDF.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { fs_path_url, FSNode } from "lib/FilesystemAPI";
import { fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
let { node }: { node: FSNode } = $props();
</script>

2
svelte/src/filesystem/viewers/Text.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { tick } from "svelte";
import { fs_path_url, type FSNode } from "lib/FilesystemAPI";
import { fs_path_url, type FSNode } from "lib/FilesystemAPI.svelte";
let {
node,

2
svelte/src/filesystem/viewers/Torrent.svelte
View File

@@ -18,7 +18,7 @@ import { formatDate } from "util/Formatting"
import TorrentItem from "./TorrentItem.svelte"
import IconBlock from "layout/IconBlock.svelte";
import TextBlock from "layout/TextBlock.svelte"
import { fs_node_icon, fs_path_url, FSNode } from "lib/FilesystemAPI";
import { fs_node_icon, fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
import CopyButton from "layout/CopyButton.svelte";
import { loading_finish, loading_start } from "lib/Loading";

2
svelte/src/filesystem/viewers/Video.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount, tick } from "svelte";
import { video_position } from "lib/VideoPosition";
import { fs_path_url, FSNode } from "lib/FilesystemAPI";
import { fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
let {
node,

2
svelte/src/filesystem/viewers/Zip.svelte
View File

@@ -12,7 +12,7 @@ import { formatDataVolume, formatDate } from "util/Formatting"
import ZipItem from "filesystem/viewers/ZipItem.svelte";
import IconBlock from "layout/IconBlock.svelte";
import TextBlock from "layout/TextBlock.svelte"
import { fs_node_icon, fs_path_url, FSNode } from "lib/FilesystemAPI";
import { fs_node_icon, fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
import { loading_finish, loading_start } from "lib/Loading";
let {

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

@@ -22,10 +22,9 @@ import Euro from "util/Euro.svelte";
<Checkout/>
{:else}
<p>
You are currently logged in as '{$user.username}'. Use the
form below to activate prepaid on this account.
Pick one of the subscription plans above to upgrade your
account to premium.
</p>
<Checkout/>
{/if}
</section>
</div>

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

@@ -28,49 +28,23 @@ let upload_widget
content delivery. We will store and serve your files at an extremely
competitive rate.
</p>
</section>
</div>
<header>
<h1>Features</h1>
</header>
<div class="page_content">
<section>
<h2>Features</h2>
<ul>
<li>
<span class="bold">Unlimited</span> storage space
Cloud storage with <a href="/filesystem#toc_7">rclone</a> and
FTPS support
</li>
<li>
Cloud storage with <a href="/filesystem#toc_7">rclone</a> and <a
href="/filesystem#toc_10">FTPS</a> support
Customizable download pages (custom branding colours, header and
background images)
</li>
<li>
<span class="bold">Customizable</span> download pages (custom
branding colours, header and background images)
Fault tolerance for up to four storage server failures
</li>
<li>
<span class="bold">Fault tolerance</span> for up to four storage
server failures
</li>
<li>
<span class="bold">1.8 Terabits per second</span> of total bandwidth
capacity
</li>
<li>
Twenty-three high-performance caching servers optimized for data
transfer over long distances
</li>
<li>
File caching in
<span class="bold">Portland</span>,
<span class="bold">Querétaro</span>,
<span class="bold">New York</span>,
<span class="bold">São Paulo</span>,
<span class="bold">Frankfurt</span> and
<span class="bold">Singapore</span>
Caching servers highly optimized for long-distance data transfer
</li>
</ul>
<img class="image" src="/res/img/map.webp" alt="A globe showing datacenter locations"/>
<h3>What you don't get</h3>
<ul>
<li>
@@ -78,10 +52,7 @@ let upload_widget
in case of emergency
</li>
<li>
Commercial support - If you have a question, please check the <a
href="/about">Q&A page</a> first. If that doesn't answer it, try
the <a href="https://discord.gg/UDjaBGwr4p"
target="_blank">support channel</a> on Discord.
Commercial support - I'm busy, please don't bother me
</li>
</ul>
</section>
@@ -142,43 +113,8 @@ header > h1 {
background-size: contain;
background-position: center;
}
.image {
max-width: 100%;
border-radius: 12px;
}
.bold {
font-weight: bold;
color: var(--highlight_color);
}
.prices {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.prices > div {
flex: 1 0 200px;
min-width: 200px;
display: flex;
flex-direction: row;
text-align: center;
border-radius: 6px;
overflow: hidden;
border: 2px solid var(--card_color);
}
.prices > div > div {
flex: 1 1 auto;
padding: 4px;
font-size: 1.3em;
}
.prices > div > div:nth-child(2) {
background: var(--card_color);
}
@media(max-width: 1000px) {
.prices > div {
flex-direction: column;
}
}
</style>

7
svelte/src/home_page/SubscriptionPlans.svelte
View File

@@ -137,8 +137,8 @@ const plans: Plan[] = [
<div class="feat_table">
{#each plans as plan (plan.title)}
<div class="plan">
<div class="title">
<span class="bold">{plan.title}</span>
<div>
<span class="title">{plan.title}</span>
<br/>
<Euro amount={plan.monthly}/> / month
</div>
@@ -212,6 +212,9 @@ const plans: Plan[] = [
word-wrap: break-word;
hyphens: auto;
}
.title {
font-size: 1.5em;
}
.plan > .order {
flex: 1 1 auto;
display: flex;

14
svelte/src/layout/CopyButton.svelte
View File

@@ -6,20 +6,24 @@ let {
style = "",
large_icon = false,
small_icon = false,
children
disabled = false,
children,
onclick,
}: {
text?: string;
style?: string;
large_icon?: boolean;
small_icon?: boolean;
disabled?: boolean;
children?: import('svelte').Snippet;
onclick?: (e: MouseEvent) => void;
} = $props();
let failed = $state(false)
let success = $state(false)
// Exported so it can be called manually
export const copy = () => {
export const copy = (e: MouseEvent) => {
try {
copy_text(text)
success = true
@@ -32,6 +36,10 @@ export const copy = () => {
success = false
failed = false
}, 10000)
if (onclick !== undefined) {
onclick(e)
}
}
</script>
@@ -44,7 +52,7 @@ export const copy = () => {
class:large_icon
class:small_icon
title="Copy text to clipboard"
disabled={text === ""}
disabled={disabled}
>
<i class="icon">content_copy</i>
<span>

14
svelte/src/layout/Dialog.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
let { children }: {
let { children, onclose }: {
children?: import('svelte').Snippet;
onclose?: () => void
} = $props();
let dialog: HTMLDialogElement = $state()
@@ -8,12 +9,12 @@ export const open = (origin: DOMRect|MouseEvent) => {
// Show the window so we can get the location
dialog.showModal()
const edge_offset = 2
const edge_offset = 10
// Get the egdes of the screen, so the window does not spawn off-screen
const dialog_rect = dialog.getBoundingClientRect()
const max_left = window.innerWidth - dialog_rect.width - edge_offset
const max_top = window.innerHeight - dialog_rect.height - edge_offset
const max_left = document.documentElement.clientWidth - dialog_rect.width - edge_offset
const max_top = document.documentElement.clientHeight - dialog_rect.height - edge_offset
let min_left: number, min_top: number
if (origin instanceof DOMRect) {
@@ -35,6 +36,9 @@ export const open = (origin: DOMRect|MouseEvent) => {
export const close = () => {
dialog.close()
if (onclose !== undefined) {
onclose()
}
}
// Attach a click handler so that the dialog is closed when the user clicks
@@ -44,7 +48,7 @@ export const close = () => {
const click = (e: MouseEvent) => {
if (e.target === dialog) {
e.preventDefault()
dialog.close()
close()
}
}
</script>

6
svelte/src/layout/SortButton.svelte
View File

@@ -4,7 +4,7 @@ let {
active_field = "",
asc = true,
sort_func,
children
children,
}: {
field?: string;
active_field?: string;
@@ -14,7 +14,7 @@ let {
} = $props();
</script>
<button onclick={() => sort_func(field)}>
<button onclick={() => sort_func(field)} class="button flat">
{#if active_field === field}
{#if asc}↓{:else}↑{/if}
{/if}
@@ -25,8 +25,6 @@ let {
button {
display: block;
margin: 0;
line-height: 1em;
width: 100%;
text-align: initial;
}
</style>

14
svelte/src/lib/AdminAPI.ts
View File

@@ -1,5 +1,5 @@
import { countries } from "country-data-list"
import { check_response, get_endpoint } from "./NovaAPI"
import { check_response, get_endpoint, type GenericResponse } from "./NovaAPI"
export const country_name = (country: string) => {
if (country !== "" && countries[country] !== undefined) {
@@ -27,3 +27,15 @@ export const get_admin_invoices = async (year: number, month: number) => {
)
) as Invoice[]
};
export const admin_decommission_node = async (peer_id: string) => {
let form = new FormData()
form.set("peer_id", peer_id)
return await check_response(
await fetch(
get_endpoint() + "/admin/decommission_node",
{ method: "POST", body: form }
)
) as GenericResponse
};

2
svelte/src/lib/Bookmarks.ts
View File

@@ -1,5 +1,5 @@
import { writable } from "svelte/store"
import { fs_check_response, fs_path_url, type FSNode } from "./FilesystemAPI"
import { fs_check_response, fs_path_url, type FSNode } from "./FilesystemAPI.svelte"
import { loading_finish, loading_start } from "lib/Loading"
import { get_user } from "lib/NovaAPI"

32
svelte/src/lib/FilesystemAPI.ts → svelte/src/lib/FilesystemAPI.svelte.ts
View File

@@ -1,6 +1,8 @@
// Response types
// ==============
import { get_endpoint } from "./NovaAPI"
export type GenericResponse = {
value: string,
message: string,
@@ -32,6 +34,8 @@ export class FSNode {
mode_string: string
mode_octal: string
created_by: string
recursive_size: number
recursive_children: number
abuse_type?: string
abuse_report_time?: string
@@ -186,7 +190,7 @@ export const fs_get_node = async (path: string) => {
// - shared, boolean. If true the node will receive a public ID
//
// Returns the modified filesystem node object
export const fs_update = async (path: string, opts: NodeOptions) => {
export const fs_update = async (path: string, opts: NodeOptions): Promise<FSNode> => {
const form = new FormData()
form.append("action", "update")
@@ -312,6 +316,26 @@ export const fs_check_response = async (resp: Response) => {
return JSON.parse(text)
}
export const fs_check_is_error = (err: any, target: string) => {
if (typeof err.value !== "string") {
return false
}
if (err.value === target) {
return true
}
if (err.value === "multiple_errors" && Array.isArray(err.errors)) {
for (const embedded_err of err.errors) {
if (embedded_err.value === target) {
return true
}
}
}
return false
}
export const fs_path_url = (path: string) => {
if (!path || path.length === 0) {
return ""
@@ -320,11 +344,7 @@ export const fs_path_url = (path: string) => {
path = "/" + path
}
if (window["api_endpoint"] !== undefined) {
return window["api_endpoint"] + "/filesystem" + fs_encode_path(path)
} else {
throw Error("fs_path_url: api_endpoint is undefined")
}
return get_endpoint() + "/filesystem" + fs_encode_path(path)
}
export const fs_encode_path = (path: string) => {

15
svelte/src/lib/NovaAPI.ts
View File

@@ -11,6 +11,7 @@ export type GenericResponse = {
}
export type User = {
id: string,
username: string,
email: string,
otp_enabled: boolean,
@@ -20,12 +21,10 @@ export type User = {
filesystem_node_count: number,
is_admin: boolean,
balance_micro_eur: number,
hotlinking_enabled: boolean,
monthly_transfer_cap: number,
monthly_transfer_used: number,
file_viewer_branding: Map<string, string>,
file_embed_domains: string,
skip_file_viewer: boolean,
embed_domains: string,
affiliate_user_name: string,
checkout_country: string,
checkout_name: string,
@@ -158,10 +157,12 @@ export const put_user = async (data: Object) => {
))
// Update the user store
for (let key of Object.keys(data)) {
cached_user[key] = data[key]
}
user.set(cached_user)
user.update((user: User) => {
for (let key of Object.keys(data)) {
user[key] = data[key]
}
return user
})
}
export const logout_user = async (redirect_path: string) => {

18
svelte/src/lib/SwipeNavigate.ts
View File

@@ -16,17 +16,31 @@ export const swipe_nav = (
let start_x = 0
let start_y = 0
let render_offset = 0
// Set when a second finger touches the screen. Multi-touch gestures are
// zoom gestures, not swipes, so we ignore the rest of the gesture
let multi_touch = false
let enabled = props.enabled === undefined ? true : props.enabled
let prev = props.prev === undefined ? true : props.prev
let next = props.next === undefined ? true : props.next
const touchstart = (e: TouchEvent) => {
if (e.touches.length > 1) {
multi_touch = true
set_offset(0, true)
return
}
multi_touch = false
start_x = e.touches[0].clientX
start_y = e.touches[0].clientY
render_offset = 0
}
const touchmove = (e: TouchEvent) => {
if (multi_touch) {
return
}
const offset_x = e.touches[0].clientX - start_x
if (!enabled || (offset_x < 0 && !next) || (offset_x > 0 && !prev)) {
return
@@ -45,8 +59,8 @@ export const swipe_nav = (
}
}
const touchend = (e: TouchEvent) => {
if (!enabled) {
const touchend = (_: TouchEvent) => {
if (!enabled || multi_touch) {
return
}

148
svelte/src/user_home/BandwidthSharing.svelte
View File

@@ -1,148 +0,0 @@
<script>
import { preventDefault } from 'svelte/legacy';
import { onMount } from "svelte";
import Pro from "icons/Pro.svelte";
import { formatDataVolume } from "util/Formatting";
import ProgressBar from "util/ProgressBar.svelte";
import SuccessMessage from "util/SuccessMessage.svelte";
import { loading_finish, loading_start } from "lib/Loading";
import { put_user } from 'lib/NovaAPI';
import { user } from 'lib/UserStore';
let success_message = $state()
let hotlinking = $state($user === null ? false : $user.hotlinking_enabled)
let transfer_cap = $state($user === null ? 0 : $user.monthly_transfer_cap / 1e12)
let skip_viewer = $state($user === null ? false : $user.skip_file_viewer)
const update = async () => {
loading_start()
try {
await put_user({
hotlinking_enabled: hotlinking,
transfer_cap: transfer_cap*1e12,
skip_file_viewer: skip_viewer,
})
success_message.set(true, "Sharing settings updated")
} catch (err) {
success_message.set(false, "Failed to update subscription: "+err)
} finally {
loading_finish()
}
}
let toggle_hotlinking = () => {
hotlinking = !hotlinking
update()
}
let transfer_used = $state(0)
let load_transfer_used = () => {
let today = new Date()
let start = new Date()
start.setDate(start.getDate() - 30)
fetch(
window.api_endpoint + "/user/time_series/egress" +
"?start=" + start.toISOString() +
"&end=" + today.toISOString() +
"&interval=60"
).then(resp => {
if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
return resp.json();
}).then(resp => {
transfer_used = resp.amounts.reduce((acc, cur) => { return acc + cur }, 0)
}).catch(e => {
console.error("Error requesting time series: " + e);
})
}
let toggle_skip_viewer = () => {
skip_viewer = !skip_viewer
update()
}
onMount(() => {
load_transfer_used()
})
</script>
<section>
<h2><Pro/>Hotlinking (bandwidth sharing)</h2>
<SuccessMessage bind:this={success_message}></SuccessMessage>
<button onclick={toggle_hotlinking}>
{#if hotlinking}
<i class="icon green">check</i> ON (click to turn off)
{:else}
<i class="icon red">close</i> OFF (click to turn on)
{/if}
</button>
<p>
When hotlinking is enabled all the bandwidth that your files use will be
subtracted from your data cap. Advertisements will be disabled on the
download pages for your files and download speed will be unlimited. The
rate limiting captcha for files is also disabled when hotlinking is on.
You can directly embed your file's download link anywhere, you don't
need to use the file viewer page.
</p>
<h2><Pro/>Bill shock limit</h2>
<p>
Billshock limit in terabytes per month (1 TB = 1000 GB). Set to 0 to
disable.
</p>
<form onsubmit={preventDefault(update)} class="billshock_container">
<input type="number" bind:value={transfer_cap} step="0.1" min="0" style="width: 5em;"/>
<div style="margin: 0.5em;">TB</div>
<button type="submit">
<i class="icon">save</i> Save
</button>
</form>
<p>
Bandwidth used in the last 30 days: {formatDataVolume(transfer_used, 3)},
new limit: {formatDataVolume(transfer_cap*1e12, 3)}
</p>
<ProgressBar used={transfer_used} total={transfer_cap*1e12}></ProgressBar>
<p>
The billshock limit limits how much bandwidth your account can use in a
30 day window. When this limit is reached hotlinking will be disabled
and you will no longer be charged for bandwidth usage. This is mostly
useful for the Prepaid subscription, but it works for Patreon plans too.
Set to 0 to disable the limit.
</p>
<h2><Pro/>Skip download page</h2>
<button onclick={toggle_skip_viewer}>
{#if skip_viewer}
<i class="icon green">check</i> ON (click to turn off)
{:else}
<i class="icon red">close</i> OFF (click to turn on)
{/if}
</button>
<p>
This setting only applies to your account, others will still see the
download page when visiting your files. When this is enabled you will be
redirected to the file download API when clicking a Nova link.
This means that images, videos and PDF files will be opened directly in
your browser, and other files are immediately downloaded to your device.
This only works for single file links, not albums. You will need a Pro
subscription to use this feature.
</p>
</section>
<style>
.green {
color: var(--highlight_color);
}
.red {
color: var(--danger_color);
}
.billshock_container {
display: flex;
flex-direction: row;
align-items: center;
}
</style>

118
svelte/src/user_home/EmbeddingControls.svelte
View File

@@ -1,118 +0,0 @@
<script lang="ts">
import { onMount } from "svelte";
import SuccessMessage from "util/SuccessMessage.svelte";
import { get_endpoint, get_user, type User } from "lib/NovaAPI";
import { loading_run } from "lib/Loading";
let success_message: SuccessMessage
// Embedding settings
let embed_domains: string[] = []
const save_embed = async () => {
await loading_run(async () => {
const domain_list = embed_domains.join(" ")
const form = new FormData()
form.append("embed_domains", domain_list)
try {
const resp = await fetch(
get_endpoint()+"/user",
{ method: "PUT", body: form }
);
if(resp.status >= 400) {
let json = await resp.json()
console.debug(json)
throw json.message
}
success_message.set(true, "Changes saved")
} catch(err) {
success_message.set(false, err)
}
})
}
let new_domain: string = ""
const add = () => {
console.debug("Adding domain", new_domain)
embed_domains.push(new_domain)
embed_domains = embed_domains
new_domain = ""
save_embed()
}
const remove = (index: number) => {
embed_domains.splice(index, 1)
embed_domains = embed_domains
save_embed()
}
let user: User
onMount(async () => {
user = await get_user()
if (user.file_embed_domains !== "") {
embed_domains = user.file_embed_domains.split(" ")
}
})
</script>
<section>
<h2>Embedding controls</h2>
<SuccessMessage bind:this={success_message}></SuccessMessage>
{#if user !== undefined && !user.hotlinking_enabled}
<div class="highlight_yellow">
To use embedding restrictions hotlinking needs to be enabled.
Enable hotlinking on the
<a href="/user/sharing/bandwidth">sharing settings page</a>.
</div>
{/if}
<p>
Here you can control which websites are allowed to embed your files in
their web pages. If a website that is not on this list tries to embed
one of your files the request will be blocked. This applies to both
hotlink and iframe embeds. If the list is empty, all domains are allowed
to embed your files.
</p>
<div class="highlight_border">
<form on:submit|preventDefault={() => add()}>
<div class="form_row">
<span>Add domain name</span>
<input class="grow" bind:value={new_domain} type="text"/>
<button class="shrink" type="submit"><i class="icon">add</i> Add</button>
</div>
</form>
<hr/>
{#if embed_domains.length === 0}
<span>
No domains specified. All websites are allowed to embed your files
</span>
{/if}
{#each embed_domains as domain, index}
<div class="form_row">
<button class="shrink" type="button" on:click={() => remove(index)}>
<i class="icon">delete</i>
</button>
<div>{domain}</div>
</div>
{/each}
</div>
</section>
<style>
.highlight_border {
text-align: initial;
}
.form_row {
display: inline-flex;
flex-direction: row;
width: 100%;
align-items: center;
gap: 0.5em;
}
.grow {
flex: 1 1 auto;
}
.shrink {
flex: 0 0 auto;
}
</style>

4
svelte/src/user_home/HotlinkProgressBar.svelte
View File

@@ -37,7 +37,7 @@ let frac = $derived(used / total)
{#if $user !== null && $user.monthly_transfer_cap > 0}
<p>
You have a billshock limit configured. <a
href="/user/sharing/bandwidth">increase or disable the limit</a> to
href="/user/sharing">increase or disable the limit</a> to
continue sharing files.
</p>
{/if}
@@ -59,7 +59,7 @@ let frac = $derived(used / total)
{#if $user !== null && $user.monthly_transfer_cap > 0}
<p>
You have a billshock limit configured. <a
href="/user/sharing/bandwidth">increase or disable the limit</a> to
href="/user/sharing">increase or disable the limit</a> to
continue sharing files.
</p>
{/if}

19
svelte/src/user_home/Router.svelte
View File

@@ -7,12 +7,11 @@ import ConnectApp from "./ConnectApp.svelte";
import ActivityLog from "./ActivityLog.svelte";
import DepositCredit from "./DepositCredit.svelte";
import TabMenu, { type Tab } from "util/TabMenu.svelte";
import BandwidthSharing from "./BandwidthSharing.svelte";
import EmbeddingControls from "./EmbeddingControls.svelte";
import Dashboard from "./dashboard/Dashboard.svelte";
import AffiliatePrompt from "./AffiliatePrompt.svelte";
import { onMount } from "svelte";
import { get_user, type User } from "lib/NovaAPI";
import SharingSettings from "./SharingSettings.svelte";
let pages: Tab[] = [
{
@@ -50,21 +49,9 @@ let pages: Tab[] = [
],
}, {
path: "/user/sharing",
title: "Sharing",
title: "Sharing settings",
icon: "share",
subpages: [
{
path: "/user/sharing/bandwidth",
title: "Sharing settings",
icon: "share",
component: BandwidthSharing,
}, {
path: "/user/sharing/embedding",
title: "Embedding Controls",
icon: "code",
component: EmbeddingControls,
},
],
component: SharingSettings,
}, {
path: "/user/connect_app",
title: "Apps",

160
svelte/src/user_home/SharingSettings.svelte Normal file
View File

@@ -0,0 +1,160 @@
<script lang="ts">
import { onMount } from "svelte";
import { formatDataVolume } from "util/Formatting";
import ProgressBar from "util/ProgressBar.svelte";
import { loading_run } from "lib/Loading";
import { get_endpoint, put_user } from 'lib/NovaAPI';
import SuccessMessage from 'util/SuccessMessage.svelte';
import { user } from "lib/UserStore";
let success_message: SuccessMessage = $state()
let transfer_cap = $state($user === null ? 0 : $user.monthly_transfer_cap / 1e12)
const update_user = async (e: SubmitEvent) => {
if (e !== null) {
e.preventDefault()
}
loading_run(async () => {
try {
await put_user({
transfer_cap: transfer_cap*1e12,
embed_domains: embed_domains.join(" "),
})
success_message.set(true, "Sharing settings updated")
} catch (err) {
success_message.set(false, "Failed to update user: "+err)
}
})
}
let transfer_used = $state(0)
let load_transfer_used = () => {
let today = new Date()
let start = new Date()
start.setDate(start.getDate() - 30)
fetch(
get_endpoint() + "/user/time_series/egress" +
"?start=" + start.toISOString() +
"&end=" + today.toISOString() +
"&interval=60"
).then(resp => {
if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
return resp.json();
}).then(resp => {
transfer_used = resp.amounts.reduce((acc, cur) => { return acc + cur }, 0)
}).catch(e => {
console.error("Error requesting time series: " + e);
})
}
// Embedding settings
let embed_domains: string[] = $state($user === null ? [] : $user.embed_domains.split(" "))
let new_domain: string = $state("")
const add_domain = (e: SubmitEvent) => {
e.preventDefault()
console.debug("Adding domain", new_domain)
embed_domains.push(new_domain)
embed_domains = embed_domains
new_domain = ""
update_user(e)
}
const del_domain = (index: number) => {
embed_domains.splice(index, 1)
embed_domains = embed_domains
update_user(null)
}
onMount(async () => {
load_transfer_used()
})
</script>
<section>
<SuccessMessage bind:this={success_message}/>
<h2>Bill shock limit</h2>
<p>
Billshock limit in terabytes per month (1 TB = 1000 GB). Set to 0 to
disable.
</p>
<form onsubmit={update_user} class="billshock_container">
<input type="number" bind:value={transfer_cap} step="0.1" min="0" style="width: 5em;"/>
<div style="margin: 0.5em;">TB</div>
<button type="submit">
<i class="icon">save</i> Save
</button>
</form>
<p>
Bandwidth used in the last 30 days: {formatDataVolume(transfer_used, 3)},
new limit: {formatDataVolume(transfer_cap*1e12, 3)}
</p>
<ProgressBar used={transfer_used} total={transfer_cap*1e12}></ProgressBar>
<p>
The billshock limit limits how much bandwidth your account can use in a
30 day window. When this limit is reached hotlinking will be disabled
and you will no longer be charged for bandwidth usage. This is mostly
useful for the Prepaid subscription, but it works for Patreon plans too.
Set to 0 to disable the limit.
</p>
<h2>Embedding controls</h2>
<p>
Here you can control which websites are allowed to embed your files in
their web pages. If a website that is not on this list tries to embed
one of your files the request will be blocked. This applies to both
hotlink and iframe embeds. If the list is empty, all domains are allowed
to embed your files.
</p>
<div class="highlight_border">
<form onsubmit={add_domain}>
<div class="form_row">
<span>Add domain name</span>
<input class="grow" bind:value={new_domain} type="text"/>
<button class="shrink" type="submit"><i class="icon">add</i> Add</button>
</div>
</form>
<hr/>
{#if embed_domains.length === 0}
<span>
No domains specified. All websites are allowed to embed your files
</span>
{/if}
{#each embed_domains as domain, index}
<div class="form_row">
<button class="shrink" type="button" onclick={() => del_domain(index)}>
<i class="icon">delete</i>
</button>
<div>{domain}</div>
</div>
{/each}
</div>
</section>
<style>
.billshock_container {
display: flex;
flex-direction: row;
align-items: center;
}
.highlight_border {
text-align: initial;
}
.form_row {
display: inline-flex;
flex-direction: row;
width: 100%;
align-items: center;
gap: 0.5em;
}
.grow {
flex: 1 1 auto;
}
.shrink {
flex: 0 0 auto;
}
</style>

59
svelte/src/user_home/Subscription.svelte
View File

@@ -7,7 +7,6 @@ import { user } from "lib/UserStore";
import { put_user } from "lib/NovaAPI";
let subscription: string = $state($user === null ? "" : $user.subscription.id)
let subscription_type: string = $state($user === null ? "" : $user.subscription.type)
let success_message: SuccessMessage = $state()
const update = async (plan: string) => {
@@ -71,13 +70,6 @@ const update = async (plan: string) => {
<p>
Here you can switch between different subscription plans.
</p>
<p>
The Patreon subscription is managed by Patreon. Nova cannot modify
or end your subsciption. If you would like to cancel your Patreon plan
you can do that <a
href="https://www.patreon.com/settings/memberships/nova"
target="_blank">on Patreon</a>.
</p>
<p>
The Prepaid subscription is charged daily based on usage. When you reach
negative balance the subscription will automatically end. You need at
@@ -91,41 +83,6 @@ const update = async (plan: string) => {
<SuccessMessage bind:this={success_message}/>
<div class="feat_table">
<div>
<div class="feat_label" class:feat_highlight={subscription_type === "patreon"}>
Patreon<br/>
{#if subscription_type === "patreon"}
Currently active<br/>
<a class="button" href="https://www.patreon.com/settings/memberships/nova" target="_blank">
<i class="icon">settings</i>
Manage
</a>
{:else}
<a class="button" href="/api/patreon_auth/start">
<i class="icon">add_link</i>
Link Patreon
</a>
{/if}
</div>
<div class="feat_normal round_tr" class:feat_highlight={subscription_type === "patreon"}>
<p>
This subscription is managed by Patreon. You will need to <a
href="https://www.patreon.com/nova/membership"
target="_blank">purchase a plan on Patreon</a> before you
can activate this subscription. After your purchase you can
click the "Link Patreon" button and your account will be
upgraded.
</p>
<ul>
<li>€4 per month</li>
<li>No storage limit for file sharing</li>
<li>4 TB transfer limit (higher plans available)</li>
<li>Access to the <a href="/filesystem">filesystem</a></li>
<li>2 TB filesytem storage limit (higher plans available)</li>
</ul>
</div>
</div>
<div>
<div class="feat_label" class:feat_highlight={subscription === "prepaid"}>
Prepaid<br/>
@@ -141,11 +98,7 @@ const update = async (plan: string) => {
<div class="feat_normal round_tr" class:feat_highlight={subscription === "prepaid"}>
<p>
You will need a positive account balance to activate this
plan. If you currently have a Patreon subscription active,
then enabling prepaid will not cancel that subscription. You
can end your subscription <a
href="https://www.patreon.com/settings/memberships/nova"
target="_blank">on Patreon.com</a>.
plan. The plan deactivates when your credit runs out.
</p>
<ul>
<li>
@@ -157,12 +110,12 @@ const update = async (plan: string) => {
</li>
<li>
€1 per TB for data transfer (with <a
href="/user/sharing/bandwidth">hotlinking</a>
href="/user/sharing">hotlinking</a>
enabled)
</li>
<li>
File <a href="/user/sharing/embedding">embedding
control</a> options
File <a href="/user/sharing">embedding control</a>
options
</li>
</ul>
</div>
@@ -177,8 +130,8 @@ const update = async (plan: string) => {
</div>
<div class="feat_normal round_br" class:feat_highlight={subscription === ""}>
<ul>
<li>Standard free plan, files expire after 120 days.</li>
<li>Download limit of 6 GB per day</li>
<li>Storage limit: 50 GB</li>
<li>Download limit: 50 GB per 30 days (sliding window)</li>
</ul>
</div>
</div>

2
svelte/src/user_home/dashboard/CardUsage.svelte
View File

@@ -58,6 +58,6 @@ onMount(async () => {
<br/><br/>
Egress used (30 days):
(<a href="/user/sharing/bandwidth">set custom limit</a>)
(<a href="/user/sharing">set custom limit</a>)
<HotlinkProgressBar used={transfer_used} total={transfer_cap}></HotlinkProgressBar>
{/if}

6
svelte/src/user_home/dashboard/Dashboard.svelte
View File

@@ -32,7 +32,7 @@ const min_card_size = 0
const def_card_size = 1
const max_card_size = 3
const expand = i => {
const expand = (i: number) => {
if (cards[i].size === undefined) {
cards[i].size = def_card_size
}
@@ -41,7 +41,7 @@ const expand = i => {
}
save()
}
const shrink = i => {
const shrink = (i: number) => {
if (cards[i].size === undefined) {
cards[i].size = def_card_size
}
@@ -51,7 +51,7 @@ const shrink = i => {
save()
}
const swap_card = (idx1, idx2) => {
const swap_card = (idx1: number, idx2: number) => {
const card1 = cards[idx1]
cards[idx1] = cards[idx2]
cards[idx2] = card1

2
svelte/src/wrap/Bookmarks.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { bookmarks_save, bookmarks_store } from "lib/Bookmarks";
import { fs_encode_path, fs_thumbnail_url } from "lib/FilesystemAPI";
import { fs_encode_path, fs_thumbnail_url } from "lib/FilesystemAPI.svelte";
import { highlight_current_page } from "lib/HighlightCurrentPage";
import MenuEntry from "./MenuEntry.svelte";
import { flip } from "svelte/animate";

8
svelte/src/wrap/MainMenu.svelte
View File

@@ -9,7 +9,7 @@ import { formatDataVolume } from "util/Formatting";
import Router from "wrap/Router.svelte";
import Bookmarks from "./Bookmarks.svelte";
import { onMount } from "svelte";
import { fs_get_node } from "lib/FilesystemAPI";
import { fs_get_node } from "lib/FilesystemAPI.svelte";
import { css_from_path } from "filesystem/edit_window/Branding";
import { loading_run, loading_store } from "lib/Loading";
import Spinner from "util/Spinner.svelte";
@@ -236,6 +236,10 @@ const set_offset = (off: number) => {
<i class="icon">palette</i>
<span>Themes</span>
</a>
<a class="button" href="https://docs.nova.storage" use:highlight_current_page>
<i class="icon">text_snippet</i>
<span>Documentation</span>
</a>
{/snippet}
</MenuEntry>
@@ -286,7 +290,6 @@ const set_offset = (off: number) => {
}
.nav_container {
flex: 0 0 auto;
backdrop-filter: blur(3px);
z-index: 9;
}
.scroll_container {
@@ -305,6 +308,7 @@ const set_offset = (off: number) => {
width: 15em;
margin: 0;
padding: 4px;
backdrop-filter: blur(3px);
}
.button {
background: none;

8
svelte/src/wrap/Router.svelte
View File

@@ -110,7 +110,7 @@ const load_page = async (pathname: string, history: boolean): Promise<boolean> =
window.document.title = current_page.title+" / Nova"
if(history) {
if (history) {
window.history.pushState({}, window.document.title, pathname)
}
@@ -129,7 +129,7 @@ const load_page = async (pathname: string, history: boolean): Promise<boolean> =
return true
}
const click = (e: MouseEvent) => {
const click = async (e: MouseEvent) => {
const origin = (e.target as Element).closest("a");
if (origin === null) {
@@ -145,7 +145,7 @@ const click = (e: MouseEvent) => {
// Try to load the page, if the page was found we cancel the browser
// navigation event so we can handle it ourselves
if (load_page(url.pathname, true)) {
if (await load_page(url.pathname, true) === true) {
e.preventDefault()
}
}
@@ -165,7 +165,7 @@ const popstate = (e: PopStateEvent) => {
{#if current_page !== null}
<current_page.component />
{#if current_page.footer === undefined || current_page.footer === true}
{#if current_page.footer !== false}
<Footer/>
{/if}
{/if}

2
svelte/src/wrap/Tree.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { global_navigator } from "filesystem/FSNavigator";
import { fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI";
import { fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI.svelte";
import { highlight_current_page } from "lib/HighlightCurrentPage";
import { onMount } from "svelte";
import MenuEntry from "./MenuEntry.svelte";

43
webcontroller/filesystem.go
View File

@@ -25,22 +25,31 @@ func (wc *WebController) serveDirectory(w http.ResponseWriter, r *http.Request,
return
}
pdapi := wc.api.RealIP(util.RemoteAddress(r)).RealAgent(r.UserAgent())
var pdapi = wc.api.RealIP(util.RemoteAddress(r)).RealAgent(r.UserAgent())
if apikey, err := wc.getAPIKey(r); err == nil {
pdapi = pdapi.Login(apikey)
}
node, err := pdapi.GetFilesystemPath(path)
if err != nil {
if apiErr, ok := errors.AsType[pixelapi.Error](err); ok {
// Set the proper response code for the error message
switch apiErr.StatusCode {
case "not_found", "path_not_found":
wc.serveNotFound(w, r)
case "forbidden":
wc.serveForbidden(w, r)
w.WriteHeader(http.StatusNotFound)
case "forbidden", "permission_denied":
w.WriteHeader(http.StatusForbidden)
case "unavailable_for_legal_reasons":
w.WriteHeader(http.StatusUnavailableForLegalReasons)
case "authentication_required":
http.Redirect(w, r, "/login", http.StatusSeeOther)
case "unavailable_for_legal_reasons":
wc.serveUnavailableForLegalReasons(w, r)
case "permission_denied":
wc.serveForbidden(w, r)
return
}
// Let the JS figure it out
if err = wc.templates.Run(w, r, "wrap", td); err != nil {
log.Error("Failed to run template: %s", err)
}
} else {
log.Error("Failed to get path: %s", err)
@@ -57,21 +66,3 @@ func (wc *WebController) serveDirectory(w http.ResponseWriter, r *http.Request,
log.Error("Error executing template filesystem: %s", err)
}
}
func (wc *WebController) serveForbidden(w http.ResponseWriter, r *http.Request) {
log.Debug("Forbidden: %s", r.URL)
w.WriteHeader(http.StatusForbidden)
if err := wc.templates.Run(w, r, "wrap", wc.newTemplateData(r)); err != nil {
log.Error("Failed to run template 403: %s", err)
}
}
func (wc *WebController) serveNotFound(w http.ResponseWriter, r *http.Request) {
log.Debug("Not Found: %s", r.URL)
w.WriteHeader(http.StatusNotFound)
wc.templates.Run(w, r, "404", wc.newTemplateData(r))
}
func (wc *WebController) serveUnavailableForLegalReasons(w http.ResponseWriter, r *http.Request) {
w.WriteHeader(http.StatusUnavailableForLegalReasons)
wc.templates.Run(w, r, "451", wc.newTemplateData(r))
}