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

Remove some event dispatchers

Browse Source
This commit is contained in:
Wim Brand
2025-10-14 00:03:48 +02:00
parent 75d9ed3023
commit b409ff009d
23 changed files with 165 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
svelte/src/admin_panel/AbuseReport.svelte
View File

@@ -4,13 +4,16 @@ import Expandable from "util/Expandable.svelte";
import { createEventDispatcher } from "svelte";
let dispatch = createEventDispatcher()
let { report, ip_report_count } = $props();
let {
report,
ip_report_count
} = $props();
let preview = $state(false)
let can_grant = $derived(report.status !== "granted")
let can_reject = $derived(report.status !== "rejected")
let set_status = async (action, report_type) => {
let set_status = async (action: string, report_type: string) => {
dispatch("resolve_report", {action: action, report_type: report_type})
}
</script>

2
svelte/src/admin_panel/Home.svelte
View File

@@ -199,7 +199,7 @@ onDestroy(() => {
</div>
<br/>
<ServerDiagnostics running_since={status.cpu_profile_running_since} on:refresh={() => getStats(lastOrder)}/>
<ServerDiagnostics running_since={status.cpu_profile_running_since} refresh={() => getStats(lastOrder)}/>
<section>
<h3>Process stats</h3>

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

@@ -1,14 +1,15 @@
<script lang="ts">
import { get_endpoint } from "lib/PixeldrainAPI";
import { createEventDispatcher, onMount } from "svelte";
import { onMount } from "svelte";
import { formatDuration } from "util/Formatting";
let dispatch = createEventDispatcher()
interface Props {
running_since?: string;
}
let { running_since = "" }: Props = $props();
let {
running_since = "",
refresh,
}: {
running_since?: string
refresh?: () => void
} = $props();
let profile_running = $derived(running_since != "0001-01-01T00:00:00Z" && running_since != "")
@@ -25,7 +26,9 @@ const start = async () => {
window.open(get_endpoint()+"/admin/cpu_profile")
}
dispatch("refresh")
if (refresh !== undefined) {
refresh()
}
}
let interval: number

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

@@ -6,7 +6,7 @@ import Breadcrumbs from "./Breadcrumbs.svelte";
import DetailsWindow from "./DetailsWindow.svelte";
import FilePreview from "./viewers/FilePreview.svelte";
import FSUploadWidget from "./upload_widget/FSUploadWidget.svelte";
import { fs_download, type FSPath } from "lib/FilesystemAPI.svelte";
import { type FSPath } from "lib/FilesystemAPI.svelte";
import { FSNavigator } from "./FSNavigator"
import { css_from_path } from "filesystem/edit_window/Branding";
import AffiliatePrompt from "user_home/AffiliatePrompt.svelte";
@@ -18,6 +18,7 @@ let upload_widget: FSUploadWidget = $state()
let details_visible = $state(false)
let edit_window: EditWindow = $state()
let edit_visible = $state(false)
let details_window: DetailsWindow = $state()
const nav = $state(new FSNavigator(true))
@@ -75,16 +76,11 @@ const keydown = (e: KeyboardEvent) => {
}
break;
case "s":
fs_download(nav.base)
nav.base.download()
break;
case "r":
nav.shuffle = !nav.shuffle
break;
case "f": // F fullscreen
if (toolbar) {
toolbar.toggle_fullscreen()
}
break
case "a":
case "ArrowLeft":
nav.open_sibling(-1)
@@ -145,9 +141,7 @@ const keydown = (e: KeyboardEvent) => {
nav={nav}
upload_widget={upload_widget}
edit_window={edit_window}
on:open_sibling={e => nav.open_sibling(e.detail)}
on:download={() => fs_download(nav.base)}
on:details={() => details_visible = !details_visible}
details_window={details_window}
/>
</div>
@@ -157,11 +151,10 @@ const keydown = (e: KeyboardEvent) => {
bind:details_visible={details_visible}
edit_window={edit_window}
bind:edit_visible={edit_visible}
on:download={() => fs_download(nav.base)}
/>
</div>
<DetailsWindow nav={nav} bind:visible={details_visible} />
<DetailsWindow nav={nav} bind:this={details_window} bind:visible={details_visible} />
<EditWindow nav={nav} bind:this={edit_window} bind:visible={edit_visible} />

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

@@ -1,5 +1,4 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { copy_text } from "util/Util";
import FileStats from "./FileStats.svelte";
import type { FSNavigator } from "./FSNavigator";
@@ -8,8 +7,6 @@ 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";
let dispatch = createEventDispatcher()
let {
nav = $bindable(),
details_visible = $bindable(false),
@@ -53,7 +50,7 @@ export const copy_link = () => {
</button>
</div>
<button onclick={() => dispatch("download")}>
<button onclick={() => $nav.base.download()}>
<i class="icon">save</i>
<span>Download</span>
</button>

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

@@ -33,12 +33,12 @@ const pick_image = (type: string) => {
picking = type
picker.open(file.path)
}
const handle_picker = async (e: CustomEvent<FSNode[]>) => {
if (e.detail.length !== 1) {
const handle_picker = async (nodes: FSNode[]) => {
if (nodes.length !== 1) {
alert("Please select one file")
return
}
let f = e.detail[0]
let f = nodes[0]
if (fs_node_type(f) !== "image") {
alert("Please select an image file")
@@ -52,7 +52,7 @@ const handle_picker = async (e: CustomEvent<FSNode[]>) => {
if (!f.is_shared()) {
try {
f = await fs_update(
e.detail[0].path,
nodes[0].path,
{link_permissions: {read: true} as FSPermissions},
)
} catch (err) {
@@ -186,7 +186,7 @@ run(() => {
</div>
</fieldset>
<FilePicker bind:this={picker} on:files={handle_picker}/>
<FilePicker bind:this={picker} callback={handle_picker}/>
<style>
input[type="color"] {

4
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_delete, fs_download, type FSNode } from "lib/FilesystemAPI.svelte";
import { fs_delete, type FSNode } from "lib/FilesystemAPI.svelte";
import { loading_finish, loading_start } from "lib/Loading";
import { tick } from "svelte";
@@ -46,7 +46,7 @@ const delete_node = async () => {
<Dialog bind:this={dialog}>
<div class="menu">
<Button click={() => {dialog.close(); fs_download(node)}} icon="save" label="Download"/>
<Button click={() => {dialog.close(); node.download()}} icon="save" label="Download"/>
{#if node !== null && is_bookmark($bookmarks_store, node.id)}
<Button click={() => {dialog.close(); bookmark_del(node.id)}} icon="bookmark_remove" label="Remove bookmark"/>
{:else}

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

@@ -1,5 +1,5 @@
<script lang="ts">
import { createEventDispatcher, onMount } from "svelte"
import { onMount } from "svelte"
import ListView from "./ListView.svelte"
import GalleryView from "./GalleryView.svelte"
import CompactView from "./CompactView.svelte"
@@ -11,13 +11,16 @@ import { FileAction, type FileActionHandler } from "./FileManagerLib";
let nav = $state(new FSNavigator(false))
let modal: Modal = $state()
let dispatch = createEventDispatcher()
let directory_view = $state("")
let large_icons = $state(false)
let show_hidden = $state(false)
let { select_multiple = false }: {
select_multiple?: boolean;
let {
callback,
select_multiple = false
}: {
callback: (files: FSNode[]) => void
select_multiple?: boolean
} = $props();
export const open = (path: string) => {
@@ -113,7 +116,7 @@ let done = () => {
}
if (selected_files.length > 0) {
dispatch("files", selected_files)
callback(selected_files)
}
modal.hide()
}

2
svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
View File

@@ -172,7 +172,7 @@ const leave_confirmation = (e: BeforeUnloadEvent) => {
<div class="body">
{#each upload_queue as job}
{#if job.status !== "finished"}
<UploadProgress bind:this={job.component} job={job} on:finished={finish_upload}/>
<UploadProgress bind:this={job.component} job={job} finish={finish_upload}/>
{/if}
{/each}
</div>

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

@@ -1,20 +1,19 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { upload_file } from "./UploadFunc";
import ProgressBar from "util/ProgressBar.svelte";
import Button from "layout/Button.svelte"
import type { UploadJob } from "./FSUploadWidget.svelte";
let dispatch = createEventDispatcher()
let {
job = $bindable(),
total = $bindable(0),
loaded = $bindable(0)
loaded = $bindable(0),
finish,
}: {
job: UploadJob;
total?: number;
loaded?: number;
job: UploadJob
total?: number
loaded?: number
finish: () => void
} = $props();
let error_code = $state("")
@@ -31,7 +30,7 @@ export const start = () => {
},
async () => {
job.status = "finished"
dispatch("finished")
finish()
},
(code, message) => {
if (job.status === "finished") {
@@ -59,7 +58,7 @@ const cancel = () => {
}
xhr = null
dispatch("finished")
finish()
}
</script>

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

@@ -1,39 +1,40 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import IconBlock from "layout/IconBlock.svelte";
import { fs_thumbnail_url } from "lib/FilesystemAPI.svelte";
import { fs_thumbnail_url, FSNode } from "lib/FilesystemAPI.svelte";
import TextBlock from "layout/TextBlock.svelte"
import { formatDataVolume, formatDate } from "util/Formatting";
import type { FSNavigator } from "filesystem/FSNavigator";
let dispatch = createEventDispatcher()
let { nav, children }: {
nav: FSNavigator;
children?: import('svelte').Snippet;
let {
node,
open_details,
children,
}: {
node: FSNode
open_details: () => void
children?: import('svelte').Snippet
} = $props();
</script>
{@render children?.()}
<h1>{$nav.base.name}</h1>
<h1>{node.name}</h1>
<IconBlock icon_href={fs_thumbnail_url($nav.base.path, 256, 256)}>
Type: {$nav.base.file_type}<br/>
Size: {formatDataVolume($nav.base.file_size, 3)}<br/>
Upload date: {formatDate($nav.base.created, true, true, false)}
<IconBlock icon_href={fs_thumbnail_url(node.path, 256, 256)}>
Type: {node.file_type}<br/>
Size: {formatDataVolume(node.file_size, 3)}<br/>
Upload date: {formatDate(node.created, true, true, false)}
<hr/>
<button class="button_highlight" onclick={() => {dispatch("download")}}>
<button class="button_highlight" onclick={() => node.download()}>
<i class="icon">download</i>
<span>Download</span>
</button>
<button onclick={() => {dispatch("details")}}>
<button onclick={() => open_details()}>
<i class="icon">help</i>
<span>Details</span>
</button>
</IconBlock>
{#if $nav.base.name === ".search_index.gz"}
{#if node.name === ".search_index.gz"}
<TextBlock>
<p>
Congratulations! You have found the search index. One of the

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

@@ -15,11 +15,18 @@ import CustomBanner from "./CustomBanner.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import FsUploadWidget from "filesystem/upload_widget/FSUploadWidget.svelte";
import EditWindow from "filesystem/edit_window/EditWindow.svelte";
import DetailsWindow from "filesystem/DetailsWindow.svelte";
let { nav, upload_widget, edit_window }: {
nav: FSNavigator;
upload_widget: FsUploadWidget;
edit_window: EditWindow;
let {
nav,
upload_widget,
edit_window,
details_window,
}: {
nav: FSNavigator
upload_widget: FsUploadWidget
edit_window: EditWindow
details_window: DetailsWindow
} = $props();
let viewer: any = $state()
@@ -89,23 +96,23 @@ export const seek = (delta: number) => {
{:else if viewer_type === "image"}
<Image nav={nav} bind:this={viewer}/>
{:else if viewer_type === "video"}
<Video nav={nav} bind:this={viewer} on:open_sibling/>
<Video node={$nav.base} bind:this={viewer} open_sibling={(d) => nav.open_sibling(d)}/>
{:else if viewer_type === "pdf"}
<Pdf nav={nav} bind:this={viewer}/>
<Pdf node={$nav.base} bind:this={viewer}/>
{:else if viewer_type === "text"}
<Text nav={nav} bind:this={viewer}>
<Text node={$nav.base} bind:this={viewer}>
<CustomBanner path={$nav.path}/>
</Text>
{:else if viewer_type === "torrent"}
<Torrent nav={nav} bind:this={viewer} on:download>
<Torrent node={$nav.base} bind:this={viewer}>
<CustomBanner path={$nav.path}/>
</Torrent>
{:else if viewer_type === "zip"}
<Zip nav={nav} bind:this={viewer} on:download>
<Zip node={$nav.base} bind:this={viewer}>
<CustomBanner path={$nav.path}/>
</Zip>
{:else}
<File nav={nav} on:download on:details>
<File node={$nav.base} open_details={() => details_window.toggle()}>
<CustomBanner path={$nav.path}/>
</File>
{/if}

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

@@ -1,10 +1,8 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { swipe_nav } from "lib/SwipeNavigate";
import { fs_path_url } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
let dispatch = createEventDispatcher();
import { loading_finish, loading_start } from "lib/Loading";
let { nav }: {
nav: FSNavigator;
@@ -18,7 +16,7 @@ let swipe_prev = $state(true)
let swipe_next = $state(true)
export const update = async () => {
dispatch("loading", true)
loading_start()
// Figure out if there are previous or next files. If not then we disable
// swiping controls in that direction
@@ -32,7 +30,7 @@ export const update = async () => {
}
}
const on_load = () => dispatch("loading", false)
const on_load = () => loading_finish()
const mousedown = (e: MouseEvent) => {
if (!dragging && e.which === 1 && zoom) {

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

@@ -1,15 +1,12 @@
<script lang="ts">
import { fs_path_url } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import { fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
let { nav }: {
nav: FSNavigator;
} = $props();
let { node }: { node: FSNode } = $props();
</script>
<iframe
class="container"
src={"/res/misc/pdf-viewer/web/viewer.html?file="+fs_path_url($nav.base.path)}
src={"/res/misc/pdf-viewer/web/viewer.html?file="+fs_path_url(node.path)}
title="PDF viewer">
</iframe>

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

@@ -1,31 +1,33 @@
<script lang="ts">
import { tick } from "svelte";
import { fs_path_url, type FSNode } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
let { nav, children }: {
nav: FSNavigator;
let {
node,
children
}: {
node: FSNode
children?: import('svelte').Snippet;
} = $props();
let text_type = $state("text")
export const update = () => {
console.debug("Loading text file", nav.base.name)
console.debug("Loading text file", node.name)
if (nav.base.file_size > 1 << 21) { // File larger than 2 MiB
if (node.file_size > 1 << 21) { // File larger than 2 MiB
text_pre.innerText = "File is too large to view online.\nPlease download and view it locally."
return
}
if (
nav.base.file_type.startsWith("text/markdown") ||
nav.base.name.endsWith(".md") ||
nav.base.name.endsWith(".markdown")
node.file_type.startsWith("text/markdown") ||
node.name.endsWith(".md") ||
node.name.endsWith(".markdown")
) {
markdown(nav.base)
markdown(node)
} else {
text(nav.base)
text(node)
}
}

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

@@ -13,21 +13,20 @@ export type TorrentFile = {
};
</script>
<script lang="ts">
import { createEventDispatcher } from "svelte";
import Magnet from "icons/Magnet.svelte";
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 } from "lib/FilesystemAPI.svelte";
import { fs_node_icon, fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
import CopyButton from "layout/CopyButton.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import { loading_finish, loading_start } from "lib/Loading";
let dispatch = createEventDispatcher()
let { nav, children }: {
nav: FSNavigator;
let {
node,
children
}: {
node: FSNode;
children?: import('svelte').Snippet;
} = $props();
@@ -36,7 +35,7 @@ let status = $state("loading")
export const update = async () => {
try {
loading_start()
let resp = await fetch(fs_path_url(nav.base.path)+"?torrent_info")
let resp = await fetch(fs_path_url(node.path)+"?torrent_info")
if (resp.status >= 400) {
let json = await resp.json()
@@ -73,9 +72,9 @@ let magnet = $state("")
{@render children?.()}
<h1>{$nav.base.name}</h1>
<h1>{node.name}</h1>
<IconBlock icon_href={fs_node_icon($nav.base, 256, 256)}>
<IconBlock icon_href={fs_node_icon(node, 256, 256)}>
{#if status === "finished"}
Created by: {torrent.created_by}<br/>
Comment: {torrent.comment}<br/>
@@ -96,7 +95,7 @@ let magnet = $state("")
Torrent file could not be parsed. It may be corrupted.
</p>
{/if}
<button onclick={() => {dispatch("download")}} class="button">
<button onclick={() => node.download()} class="button">
<i class="icon">download</i>
<span>Download torrent file</span>
</button>

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

@@ -1,12 +1,14 @@
<script lang="ts">
import { onMount, createEventDispatcher, tick } from "svelte";
import { onMount, tick } from "svelte";
import { video_position } from "lib/VideoPosition";
import { fs_path_url } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
let dispatch = createEventDispatcher()
import { fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
let { nav }: {
nav: FSNavigator;
let {
node,
open_sibling,
}: {
node: FSNode
open_sibling: (delta: number) => void
} = $props();
// Used to detect when the file path changes
@@ -21,20 +23,20 @@ let loop = $state(false)
export const update = async () => {
if (media_session) {
navigator.mediaSession.metadata = new MediaMetadata({
title: nav.base.name,
title: node.name,
artist: "pixeldrain",
album: "unknown",
});
console.debug("Updating media session")
}
loop = nav.base.name.includes(".loop.")
loop = node.name.includes(".loop.")
// When the component receives a new ID the video track does not
// automatically start playing the new video. So we use this little hack to
// make sure that the video is unloaded and loaded when the ID changes
if (nav.base.path != last_path) {
last_path = nav.base.path
if (node.path != last_path) {
last_path = node.path
loaded = false
await tick()
loaded = true
@@ -51,8 +53,7 @@ export const toggle_fullscreen = () => {
}
}
export const seek = delta => {
export const seek = (delta: number) => {
// fastseek can be pretty imprecise, so we don't use it for small seeks
// below 5 seconds
if (player.fastSeek && delta > 5) {
@@ -68,8 +69,8 @@ onMount(() => {
navigator.mediaSession.setActionHandler('play', () => player.play());
navigator.mediaSession.setActionHandler('pause', () => player.pause());
navigator.mediaSession.setActionHandler('stop', () => player.pause());
navigator.mediaSession.setActionHandler('previoustrack', () => dispatch("open_sibling", -1));
navigator.mediaSession.setActionHandler('nexttrack', () => dispatch("open_sibling", 1));
navigator.mediaSession.setActionHandler('previoustrack', () => open_sibling(-1));
navigator.mediaSession.setActionHandler('nexttrack', () => open_sibling(1));
}
})
@@ -85,9 +86,9 @@ const video_keydown = (e: KeyboardEvent) => {
<div class="container">
{#if
$nav.base.file_type === "video/x-matroska" ||
$nav.base.file_type === "video/quicktime" ||
$nav.base.file_type === "video/x-ms-asf"}
node.file_type === "video/x-matroska" ||
node.file_type === "video/quicktime" ||
node.file_type === "video/x-ms-asf"}
<div class="compatibility_warning">
This video file type is not compatible with every web
browser. If the video fails to play you can try downloading
@@ -108,16 +109,16 @@ const video_keydown = (e: KeyboardEvent) => {
onpause={() => playing = false}
onplay={() => playing = true}
onkeydown={video_keydown}
use:video_position={() => $nav.base.sha256_sum.substring(0, 8)}
use:video_position={() => node.sha256_sum.substring(0, 8)}
>
<source src={fs_path_url($nav.base.path)} type={$nav.base.file_type} />
<source src={fs_path_url(node.path)} type={node.file_type} />
</video>
{/if}
</div>
<div class="controls">
<div class="spacer"></div>
<button onclick={() => dispatch("open_sibling", -1)}>
<button onclick={() => open_sibling(-1)}>
<i class="icon">skip_previous</i>
</button>
<button onclick={() => seek(-10)}>
@@ -133,7 +134,7 @@ const video_keydown = (e: KeyboardEvent) => {
<button onclick={() => seek(10)}>
<i class="icon">forward_10</i>
</button>
<button onclick={() => dispatch("open_sibling", 1)}>
<button onclick={() => open_sibling(1)}>
<i class="icon">skip_next</i>
</button>
<div style="width: 16px; height: 8px;"></div>

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

@@ -8,19 +8,18 @@ export type ZipEntry = {
};
</script>
<script lang="ts">
import { createEventDispatcher } from "svelte";
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 } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import { fs_node_icon, fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
import { loading_finish, loading_start } from "lib/Loading";
let dispatch = createEventDispatcher()
let { nav, children }: {
nav: FSNavigator;
let {
node,
children,
}: {
node: FSNode;
children?: import('svelte').Snippet;
} = $props();
@@ -33,7 +32,7 @@ let archive_type = $state("")
let truncated = $state(false)
export const update = async () => {
if (nav.base.file_type === "application/x-7z-compressed") {
if (node.file_type === "application/x-7z-compressed") {
archive_type = "7z"
} else {
archive_type = ""
@@ -42,7 +41,7 @@ export const update = async () => {
try {
loading_start()
status = "loading"
let resp = await fetch(fs_path_url(nav.base.path)+"?zip_info")
let resp = await fetch(fs_path_url(node.path)+"?zip_info")
if (resp.status >= 400) {
status = "parse_failed"
@@ -56,13 +55,13 @@ export const update = async () => {
if (zip.properties !== undefined) {
if (zip.properties.includes("read_individual_files")) {
// Set the download URL for each file in the zip
recursive_set_url(fs_path_url(nav.base.path)+"?zip_file=", zip)
recursive_set_url(fs_path_url(node.path)+"?zip_file=", zip)
}
truncated = zip.properties.includes("truncated")
}
uncomp_size = recursive_size(zip)
comp_ratio = (uncomp_size / nav.base.file_size)
comp_ratio = (uncomp_size / node.file_size)
status = "finished"
} catch (err) {
console.error(err)
@@ -98,22 +97,22 @@ const recursive_size = (file: ZipEntry) => {
{@render children?.()}
<h1>{$nav.base.name}</h1>
<h1>{node.name}</h1>
<IconBlock icon_href={fs_node_icon($nav.base, 256, 256)}>
<IconBlock icon_href={fs_node_icon(node, 256, 256)}>
{#if archive_type === "7z"}
This is a 7-zip archive. You will need
<a href="https://www.7-zip.org/">7-zip</a> or compatible software to
extract it<br/>
{/if}
Compressed size: {formatDataVolume($nav.base.file_size, 3)}<br/>
Compressed size: {formatDataVolume(node.file_size, 3)}<br/>
{#if !truncated}
Uncompressed size: {formatDataVolume(zip.size, 3)} (Ratio: {comp_ratio.toFixed(2)}x)<br/>
{/if}
Uploaded on: {formatDate($nav.base.created, true, true, true)}
Uploaded on: {formatDate(node.created, true, true, true)}
<br/>
<button class="button_highlight" onclick={() => {dispatch("download")}}>
<button class="button_highlight" onclick={() => node.download()}>
<i class="icon">download</i>
<span>Download</span>
</button>

83
svelte/src/layout/SlowDown.svelte
View File

@@ -1,83 +0,0 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { formatDataVolume, formatDuration } from "util/Formatting";
import { stats } from "lib/StatsSocket"
import TextBlock from "./TextBlock.svelte"
import IconBlock from "./IconBlock.svelte";
import { user } from "lib/UserStore";
let dispatch = createEventDispatcher()
let {
file_size = 0,
file_name = "",
file_type = "",
icon_href = ""
}: {
file_size?: number;
file_name?: string;
file_type?: string;
icon_href?: string;
} = $props();
</script>
<TextBlock>
<img src="/res/img/slow_down.webp" class="header_image" alt="Yea, I'm gonna need you to slow down a bit"/>
<p>
Pixeldrain's free tier is supported by my Patrons. There's only so much
that you can do with the budget they provide.
{formatDataVolume($stats.limits.transfer_limit, 3)} per day is about the
most I can give away for free while keeping it fair for everyone, and
according to our records you have already downloaded
{formatDataVolume($stats.limits.transfer_limit_used, 3)}.
</p>
<p>
It's not that I want to withold this file from you, it's just that I
don't want pixeldrain to fall into bankruptcy like so many of the
websites that came before me. So if you really want this file you have a
few options:
</p>
<ul>
<li>
Come back tomorrow when your free transfer limit resets
</li>
<li>
Download the file at a limited rate of {formatDataVolume($stats.limits.speed_limit, 3)}/s. This will take at
least {formatDuration((file_size/($stats.limits.speed_limit))*1000, 0)}
</li>
<li>
<a href="/user/prepaid/deposit" target="_blank" class="button button_highlight">
<i class="icon">bolt</i> Get Premium
</a>
and earn my eternal gratitude
{#if $user.username === undefined || $user.username === ""}
(you will need a <a href="/register">pixeldrain account</a> to
receive the benefits)
{/if}
</li>
</ul>
</TextBlock>
<IconBlock icon_href={icon_href}>
<table>
<tbody>
<tr><td colspan="2">{file_name}</td></tr>
<tr><td>Type</td><td>{file_type}</td></tr>
<tr><td>Size</td><td>{formatDataVolume(file_size, 3)}</td></tr>
</tbody>
</table>
<button onclick={() => {dispatch("download")}}>
<i class="icon">download</i> Download
</button>
</IconBlock>
<TextBlock>
Also, I believe you have my stapler. Please give it back.
</TextBlock>
<style>
.header_image {
width: 100%;
border-radius: 8px;
}
</style>

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

@@ -58,6 +58,22 @@ export class FSNode {
(this.user_permissions !== undefined && Object.keys(this.user_permissions).length > 0) ||
(this.password_permissions !== undefined && Object.keys(this.password_permissions).length > 0)
}
download = () => {
const a = document.createElement("a")
if (this.type === "file") {
a.href = fs_path_url(this.path) + "?attach"
a.download = this.name
} else if (this.type === "dir") {
a.href = fs_path_url(this.path) + "?bulk_download"
a.download = this.name + ".zip"
}
// You can't call .click() on an element that is not in the DOM. But
// emitting a click event works
a.dispatchEvent(new MouseEvent("click"))
}
}
export type FSNodeProperties = {
@@ -400,19 +416,3 @@ export const fs_share_path = (path: FSNode[]): string => {
return share_url
}
export const fs_download = (node: FSNode) => {
const a = document.createElement("a")
if (node.type === "file") {
a.href = fs_path_url(node.path) + "?attach"
a.download = node.name
} else if (node.type === "dir") {
a.href = fs_path_url(node.path) + "?bulk_download"
a.download = node.name + ".zip"
}
// You can't call .click() on an element that is not in the DOM. But
// emitting a click event works
a.dispatchEvent(new MouseEvent("click"))
}

10
svelte/src/util/Modal.svelte
View File

@@ -6,9 +6,8 @@ let global_index = 10000;
<script lang="ts">
import { createBubbler, stopPropagation } from 'svelte/legacy';
const bubble = createBubbler();
import { createEventDispatcher, type Snippet } from "svelte";
import { type Snippet } from "svelte";
import { fade } from "svelte/transition";
import Button from "layout/Button.svelte";
@@ -42,16 +41,11 @@ const load_bg = background => {
global_index++;
}
const dispatch = createEventDispatcher();
export const show = () => { set_visible(true) }
export const hide = () => { set_visible(false) }
export const toggle = () => { set_visible(!visible) }
export const is_visible = () => { return visible }
export const set_visible = vis => {
visible = vis
dispatch("is_visible", visible)
}
export const set_visible = (vis: boolean) => visible = vis
const keydown = (e: KeyboardEvent) => {
if ((document.activeElement as any).type && (document.activeElement as any).type === "text") {

64
svelte/src/util/ThemePicker.svelte
View File

@@ -1,64 +0,0 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
let dispatch = createEventDispatcher()
let { theme = $bindable("") }: {
theme?: string;
} = $props();
let set = (s: string) => {
theme = s
dispatch("theme_change", theme)
}
</script>
<div class="center">
<button class:button_highlight={theme===""} onclick={() => {set("")}}>
None
</button>
<button class="group_first" class:button_highlight={theme==="nord"} onclick={() => {set("nord")}}>
Nord
</button>
<button class="group_middle" class:button_highlight={theme==="nord_dark"} onclick={() => {set("nord_dark")}}>
dark
</button>
<button class="group_last" class:button_highlight={theme==="nord_light"} onclick={() => {set("nord_light")}}>
light
</button>
<button class="group_first" class:button_highlight={theme==="solarized"} onclick={() => {set("solarized")}}>
Solarized
</button>
<button class="group_middle" class:button_highlight={theme==="solarized_dark"} onclick={() => {set("solarized_dark")}}>
dark
</button>
<button class="group_last" class:button_highlight={theme==="solarized_light"} onclick={() => {set("solarized_light")}}>
light
</button>
<button class:button_highlight={theme==="purple_drain"} onclick={() => {set("purple_drain")}}>
Purple drain
</button>
<button class:button_highlight={theme==="classic"} onclick={() => {set("classic")}}>
Classic
</button>
<button class:button_highlight={theme==="maroon"} onclick={() => {set("maroon")}}>
Maroon
</button>
<button class:button_highlight={theme==="hacker"} onclick={() => {set("hacker")}}>
Hacker
</button>
<button class:button_highlight={theme==="canta"} onclick={() => {set("canta")}}>
Canta
</button>
<button class:button_highlight={theme==="skeuos"} onclick={() => {set("skeuos")}}>
Skeuos
</button>
<button class:button_highlight={theme==="sweet"} onclick={() => {set("sweet")}}>
Sweet
</button>
</div>
<style>
.center {
text-align: center;
}
</style>

2
svelte/tsconfig.json
View File

@@ -9,6 +9,6 @@
"target": "ES2017",
"noUnusedLocals": true,
"module": "preserve",
"moduleResolution": "bundler",
"moduleResolution": "bundler"
}
}