From 277637511c13450c39929a8963b693b26e231cde Mon Sep 17 00:00:00 2001 From: Fornax Date: Wed, 17 May 2023 15:34:56 +0200 Subject: [PATCH] Split filesystem up in components Also thumbnails work now --- svelte/src/filesystem/Breadcrumbs.svelte | 24 + svelte/src/filesystem/DetailsWindow.svelte | 50 ++ .../{filemanager => }/EditWindow.svelte | 18 +- svelte/src/filesystem/Filesystem.svelte | 520 +++--------------- svelte/src/filesystem/FilesystemAPI.js | 25 +- svelte/src/filesystem/FilesystemUtil.js | 62 +++ svelte/src/filesystem/Navigator.svelte | 220 ++++++++ svelte/src/filesystem/Sharebar.svelte | 13 +- svelte/src/filesystem/Toolbar.svelte | 133 +++++ .../filesystem/filemanager/FileManager.svelte | 48 +- .../filesystem/filemanager/GalleryView.svelte | 46 +- .../filesystem/filemanager/ListView.svelte | 41 +- svelte/src/filesystem/viewers/Audio.svelte | 4 +- .../src/filesystem/viewers/FilePreview.svelte | 54 ++ svelte/src/filesystem/viewers/Image.svelte | 5 +- svelte/src/filesystem/viewers/PDF.svelte | 4 +- svelte/src/filesystem/viewers/Video.svelte | 4 +- svelte/src/util/Modal.svelte | 35 +- 18 files changed, 711 insertions(+), 595 deletions(-) create mode 100644 svelte/src/filesystem/Breadcrumbs.svelte create mode 100644 svelte/src/filesystem/DetailsWindow.svelte rename svelte/src/filesystem/{filemanager => }/EditWindow.svelte (86%) create mode 100644 svelte/src/filesystem/FilesystemUtil.js create mode 100644 svelte/src/filesystem/Navigator.svelte create mode 100644 svelte/src/filesystem/Toolbar.svelte create mode 100644 svelte/src/filesystem/viewers/FilePreview.svelte diff --git a/svelte/src/filesystem/Breadcrumbs.svelte b/svelte/src/filesystem/Breadcrumbs.svelte new file mode 100644 index 0000000..09fc64f --- /dev/null +++ b/svelte/src/filesystem/Breadcrumbs.svelte @@ -0,0 +1,24 @@ + + +{#each state.path as node, i (node.path)} + {navigator.navigate(node.path, true)}}> + {node.name} + +{/each} + + diff --git a/svelte/src/filesystem/DetailsWindow.svelte b/svelte/src/filesystem/DetailsWindow.svelte new file mode 100644 index 0000000..2ef9f56 --- /dev/null +++ b/svelte/src/filesystem/DetailsWindow.svelte @@ -0,0 +1,50 @@ + + + + + + + + + + + + {#if state.base.id} + + + + + {/if} + {#if state.base.type === "file"} + + + + {/if} + + + + + + + + + + + + + + +

Node details

Name{state.base.name}
Path{state.base.path}
Type{state.base.type}
Date created{formatDate(state.base.date_created, true, true, true)}
Date modified{formatDate(state.base.date_modified, true, true, true)}
Mode{state.base.mode_string}
Public ID{state.base.id}
File type{state.base.file_type}
File size{formatDataVolume(state.base.file_size)}
SHA256 sum{state.base.sha256_sum}
Stat + Open stat API +
Direct link + Open direct link +

Bucket details

ID{state.root.id}
Name{state.root.name}
Date created{formatDate(state.root.date_created, true, true, true)}
Date modified{formatDate(state.root.date_modified, true, true, true)}
+ diff --git a/svelte/src/filesystem/filemanager/EditWindow.svelte b/svelte/src/filesystem/EditWindow.svelte similarity index 86% rename from svelte/src/filesystem/filemanager/EditWindow.svelte rename to svelte/src/filesystem/EditWindow.svelte index 64434df..cabe493 100644 --- a/svelte/src/filesystem/filemanager/EditWindow.svelte +++ b/svelte/src/filesystem/EditWindow.svelte @@ -1,6 +1,6 @@ - - +
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte index 55f72a2..23884dc 100644 --- a/svelte/src/filesystem/Filesystem.svelte +++ b/svelte/src/filesystem/Filesystem.svelte @@ -1,52 +1,31 @@ + +
-
- - + -
- {#each state.path as node, i} - {navigate(node.path, true)}}> - {node.name} - - {/each} +
+
-
-
-
- {#if state.base.type === "file"} -
Size
-
{formatDataVolume(state.base.file_size, 3)}
- {:else if state.base.type === "dir" || state.base.type === "bucket"} -
Directories
-
{formatThousands(total_directories, 3)}
-
Files
-
{formatThousands(total_files, 3)}
-
Total size
-
{formatDataVolume(total_file_size, 3)}
- {/if} -
+
+ -
- - - -
- - {#if state.base.type === "file"} - - {/if} - - - - - {#if state.base.path !== "/"} - - {/if} -
- - -
- {#if state.viewer_type === "dir"} - {navigate(e.detail, true)}} on:loading={e => {state.loading = e.detail}}> - {:else if state.viewer_type === "audio"} - - {:else if state.viewer_type === "image"} - {open_sibling(e.detail)}}> - {:else if state.viewer_type === "video"} - - {:else if state.viewer_type === "pdf"} - - {/if} -
+ {state.loading = e.detail}} + />
- + - - - - - - - - - - {#if state.base.id} - - - - - {/if} - {#if state.base.type === "file"} - - - - {/if} + - - - - - -

Node details

Name{state.base.name}
Path{state.base.path}
Type{state.base.type}
Date created{formatDate(state.base.date_created, true, true, true)}
Date modified{formatDate(state.base.date_modified, true, true, true)}
Mode{state.base.mode_string}
Public ID{state.base.id}
File type{state.base.file_type}
File size{formatDataVolume(state.base.file_size)}
SHA256 sum{state.base.sha256_sum}

Bucket details

ID{state.root.id}
Name{state.root.name}
Date created{formatDate(state.root.date_created, true, true, true)}
Date modified{formatDate(state.root.date_modified, true, true, true)}
- - - reload()}/> + navigator.navigate(e.path, e.push_history)} + />
diff --git a/svelte/src/filesystem/FilesystemAPI.js b/svelte/src/filesystem/FilesystemAPI.js index 9cb8dab..20098bb 100644 --- a/svelte/src/filesystem/FilesystemAPI.js +++ b/svelte/src/filesystem/FilesystemAPI.js @@ -1,15 +1,4 @@ -const path_url = (bucket, path) => { - return window.api_endpoint + "/filesystem/" + bucket + encodeURIComponent(path) -} - -export const fs_get_file_url = (bucket, path) => { - return path_url(bucket, path) -} - -export const fs_split_path = (path) => { - let patharr = path.split("/") - return { base: patharr.pop(), parent: patharr.join("/") } -} +import { fs_path_url } from './FilesystemUtil.js' export const fs_mkdir = async (bucket, path, opts = null) => { const form = new FormData() @@ -19,14 +8,14 @@ export const fs_mkdir = async (bucket, path, opts = null) => { form.append("mode", opts.mode) } - const resp = await fetch(path_url(bucket, path), { method: "POST", body: form }); + const resp = await fetch(fs_path_url(bucket, path), { method: "POST", body: form }); if (resp.status >= 400) { throw new Error(await resp.text()) } } export const fs_get_node = async (bucket, path) => { - const resp = await fetch(path_url(bucket, path) + "?stat"); + const resp = await fetch(fs_path_url(bucket, path) + "?stat"); if (resp.status >= 400) { throw await resp.text() } @@ -63,7 +52,7 @@ export const fs_update = async (bucket, path, opts) => { form.append("write_password", opts.write_password) } - const resp = await fetch(path_url(bucket, path), { method: "POST", body: form }) + const resp = await fetch(fs_path_url(bucket, path), { method: "POST", body: form }) if (resp.status >= 400) { throw new Error(await resp.text()) } @@ -75,20 +64,20 @@ export const fs_rename = async (bucket, old_path, new_path) => { form.append("action", "rename") form.append("target", new_path) - const resp = await fetch(path_url(bucket, old_path), { method: "POST", body: form }) + const resp = await fetch(fs_path_url(bucket, old_path), { method: "POST", body: form }) if (resp.status >= 400) { throw new Error(await resp.text()) } } export const fs_delete = async (bucket, path) => { - const resp = await fetch(path_url(bucket, path), { method: "DELETE" }); + const resp = await fetch(fs_path_url(bucket, path), { method: "DELETE" }); if (resp.status >= 400) { throw new Error(await resp.text()) } } export const fs_delete_all = async (bucket, path) => { - const resp = await fetch(path_url(bucket, path) + "?recursive", { method: "DELETE" }); + const resp = await fetch(fs_path_url(bucket, path) + "?recursive", { method: "DELETE" }); if (resp.status >= 400) { throw new Error(await resp.text()) } diff --git a/svelte/src/filesystem/FilesystemUtil.js b/svelte/src/filesystem/FilesystemUtil.js new file mode 100644 index 0000000..356175d --- /dev/null +++ b/svelte/src/filesystem/FilesystemUtil.js @@ -0,0 +1,62 @@ +export const fs_split_path = (path) => { + let patharr = path.split("/") + return { base: patharr.pop(), parent: patharr.join("/") } +} + +export const fs_path_url = (bucket, path) => { + return window.api_endpoint + "/filesystem/" + bucket + encodeURIComponent(path) +} + +export const fs_file_url = (bucket, path) => { + return fs_path_url(bucket, path) +} + +export const fs_thumbnail_url = (bucket, path, width = 128, height = 128) => { + return fs_path_url(bucket, path) + "?thumbnail&width=" + width + "&height=" + height +} + +export const fs_node_type = node => { + if (node.file_type === "application/bittorrent" || node.file_type === "application/x-bittorrent") { + return "torrent" + } else if (node.file_type === "application/zip") { + return "zip" + } else if (node.file_type.startsWith("image")) { + return "image" + } else if ( + node.file_type.startsWith("video") || + node.file_type === "application/matroska" || + node.file_type === "application/x-matroska" + ) { + return "video" + } else if ( + node.file_type.startsWith("audio") || + node.file_type === "application/ogg" || + node.name.endsWith(".mp3") + ) { + return "audio" + } else if ( + node.file_type === "application/pdf" || + node.file_type === "application/x-pdf" + ) { + return "pdf" + } else if ( + node.file_type.startsWith("text") + ) { + return "text" + } else { + return "file" + } +} + +export const fs_node_icon = (bucket, node) => { + if (node.type === "dir") { + // Folders with an ID are publically shared, use the shared folder icon + if (node.id) { + return "/res/img/mime/folder-remote.png" + } else { + return "/res/img/mime/folder.png" + } + } + + return fs_thumbnail_url(bucket, node.path) +} diff --git a/svelte/src/filesystem/Navigator.svelte b/svelte/src/filesystem/Navigator.svelte new file mode 100644 index 0000000..470e377 --- /dev/null +++ b/svelte/src/filesystem/Navigator.svelte @@ -0,0 +1,220 @@ + diff --git a/svelte/src/filesystem/Sharebar.svelte b/svelte/src/filesystem/Sharebar.svelte index 99eb705..3b3985a 100644 --- a/svelte/src/filesystem/Sharebar.svelte +++ b/svelte/src/filesystem/Sharebar.svelte @@ -1,8 +1,5 @@ -
+
Share on:
+ + +
+ + {#if state.base.type === "file"} + + {/if} + + + + + {#if state.base.path !== "/"} + + {/if} +
+ + + + diff --git a/svelte/src/filesystem/filemanager/FileManager.svelte b/svelte/src/filesystem/filemanager/FileManager.svelte index e158465..247aa4b 100644 --- a/svelte/src/filesystem/filemanager/FileManager.svelte +++ b/svelte/src/filesystem/filemanager/FileManager.svelte @@ -1,15 +1,16 @@
@@ -109,15 +127,13 @@ const toggle_select = () => { - {#if directory_view === "list"} - - {:else if directory_view === "gallery"} - - {/if}
- reload()}/> - diff --git a/svelte/src/filesystem/viewers/Image.svelte b/svelte/src/filesystem/viewers/Image.svelte index f8c1d33..b95b91e 100644 --- a/svelte/src/filesystem/viewers/Image.svelte +++ b/svelte/src/filesystem/viewers/Image.svelte @@ -1,6 +1,5 @@ diff --git a/svelte/src/filesystem/viewers/Video.svelte b/svelte/src/filesystem/viewers/Video.svelte index 9e5daba..1b2f9a9 100644 --- a/svelte/src/filesystem/viewers/Video.svelte +++ b/svelte/src/filesystem/viewers/Video.svelte @@ -1,5 +1,5 @@