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

don't make requests in sibling navigation

Browse Source
This commit is contained in:
Wim Brand
2020-12-01 23:01:21 +01:00
parent 0f6a11c773
commit 69e3a34d86
17 changed files with 413 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
res/include/style/layout.css
View File

@@ -454,8 +454,11 @@ input[type="submit"]:disabled, input[type="submit"].disabled,
input[type="button"]:disabled, input[type="button"].disabled,
input[type="color"]:disabled, input[type="color"].disabled,
select:disabled , select.disabled {
background: var(--input_color_dark);
background: var(--layer_1_color);
color: var(--input_color);
box-shadow: none;
transition: none;
padding: 4px 5px 4px 5px;
}
/* Dropdown list of the select tag */

21
res/template/account/user_buckets.html Normal file
View File

@@ -0,0 +1,21 @@
{{define "user_buckets"}}<!DOCTYPE html>
<html lang="en">
<head>
{{template "meta_tags" "Buckets"}}
{{template "user_style" .}}
<script>window.api_endpoint = '{{.APIEndpoint}}';</script>
</head>
<body>
{{template "page_top" .}}
<h1>My Buckets</h1>
<div id="page_content" class="page_content"></div>
{{template "page_bottom" .}}
{{template "analytics"}}
<link rel='stylesheet' href='/res/svelte/user_buckets.css'>
<script defer src='/res/svelte/user_buckets.js'></script>
</body>
</html>
{{end}}

4
res/template/admin.html
View File

@@ -17,9 +17,9 @@
<div class="highlight_dark">
<button onclick="loadGraph(720, 1, true);">Live</button>
<button onclick="loadGraph(1440, 10, true);">Day</button>
<button onclick="loadGraph(10080, 60, false);">Week</button>
<button onclick="loadGraph(10080, 10, false);">Week</button>
<button onclick="loadGraph(20160, 60, false);">Two Weeks</button>
<button onclick="loadGraph(43200, 1440, false);">Month</button>
<button onclick="loadGraph(43200, 60, false);">Month</button>
<button onclick="loadGraph(131400, 1440, false);">Quarter</button>
<button onclick="loadGraph(262800, 1440, false);">Half-year</button>
<button onclick="loadGraph(525600, 1440, false);">Year</button>

1
svelte/rollup.config.js
View File

@@ -31,6 +31,7 @@ const builddir = "../res/static/svelte"
export default [
"filesystem",
"modal",
"user_buckets",
].map((name, index) => ({
input: `src/${name}.js`,
output: {

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

@@ -9,6 +9,8 @@ import FileManager from './filemanager/FileManager.svelte';
import Audio from './viewers/Audio.svelte';
import Image from './viewers/Image.svelte';
import Video from './viewers/Video.svelte';
import PDF from './viewers/PDF.svelte';
import PixeldrainLogo from '../util/PixeldrainLogo.svelte';
// Elements
let file_viewer
@@ -18,12 +20,18 @@ let toolbar_visible = (window.innerWidth > 600)
let toolbar_toggle = () => {
toolbar_visible = !toolbar_visible
if (!toolbar_visible) {
sharebar.setVisible(false)
sharebar_visible = false
}
}
let sharebar
let sharebar_visible = false
$: {
if (typeof(sharebar) !== "undefined") {
sharebar.setVisible(sharebar_visible)
}
}
let details
let details_visible = false
let download_frame
@@ -34,16 +42,21 @@ let state = {
parents: initialNode.parents,
base: initialNode.base,
// When navigating into a file or directory the siblings array will be
// populated with the previous base's children
siblings: [],
current_sibling: -1,
// These are used to navigate forward and backward within a directory (using
// the previous and next buttons on the toolbar). The cached siblings will
// be used so that we don't need to make an extra request to the parent
// directory. The siblings_path variable is used to verify that the parent
// directory is still the same. If it's sifferent the siblings array is not
// used
siblings_path: "",
siblings: null,
// Root path of the bucket. Used for navigation by prepending it to a file
// path
path_root: "/d/"+initialNode.bucket.id,
loading: true,
viewer_type: ""
viewer_type: "",
shuffle: false,
}
// Tallys
@@ -51,28 +64,6 @@ $: total_directories = state.base.children.reduce((acc, cur) => cur.type === "di
$: total_files = state.base.children.reduce((acc, cur) => cur.type === "file" ? acc + 1 : acc, 0)
$: total_file_size = state.base.children.reduce((acc, cur) => acc + cur.file_size, 0)
const navigate = (path, pushHist) => {
state.loading = true
fs_get_node(
state.bucket.id, path,
).then(resp => {
window.document.title = resp.base.name+" ~ pixeldrain"
if (pushHist) {
window.history.pushState(
{}, window.document.title, "/d/"+resp.bucket.id+resp.base.path,
)
}
openNode(resp)
}).catch(err => {
console.error(err)
alert(err)
}).finally(() => {
state.loading = false
})
}
const sort_children = children => {
children.sort((a, b) => {
// Sort directories before files
@@ -83,25 +74,37 @@ const sort_children = children => {
})
}
const openNode = (node) => {
// Sort directory children
sort_children(node.base.children)
const navigate = (path, pushHist) => {
state.loading = true
fs_get_node(state.bucket.id, path).then(resp => {
window.document.title = resp.base.name+" ~ pixeldrain"
if (pushHist) {
window.history.pushState(
{}, window.document.title, "/d/"+resp.bucket.id+resp.base.path,
)
}
// Sort directory children
sort_children(resp.base.children)
open_node(resp)
}).catch(err => {
console.error(err)
alert(err)
}).finally(() => {
state.loading = false
})
}
const open_node = (node) => {
// If the new node is a child of the previous node we save the parent's
// children array
if (node.parents.length > 0 && node.parents[node.parents.length-1].path === state.base.path) {
console.debug("Current parent path and new node path match. Saving siblings")
state.siblings = state.base.children
state.current_sibling = -1
// Find which sibling is currently open
for (let i = 0; i < state.siblings.length; i++) {
if (state.siblings[i].name === node.base.name) {
state.current_sibling = i
console.debug("Current sibling ID is", i)
break
}
}
state.siblings_path = node.parents[node.parents.length-1].path
state.siblings = state.base.children
}
// Update shared state
@@ -126,6 +129,11 @@ const openNode = (node) => {
state.base.file_type === "application/x-matroska"
) {
state.viewer_type = "video"
} else if (
state.base.file_type === "application/pdf" ||
state.base.file_type === "application/x-pdf"
) {
state.viewer_type = "pdf"
} else {
state.viewer_type = ""
}
@@ -133,46 +141,77 @@ const openNode = (node) => {
// Remove spinner
state.loading = false
}
onMount(() => openNode(initialNode))
onMount(() => open_node(initialNode))
// Opens a sibling of the currently open file. The offset is relative to the
// file which is currently open. Give a positive number to move forward and a
// negative number to move backward
const open_sibling = offset => {
const open_sibling = async offset => {
if (state.parents.length == 0) {
return
}
state.loading = true
// Get the parent directory
fs_get_node(
state.bucket.id, state.parents[state.parents.length - 1].path,
).then(resp => {
// Sort directory children
sort_children(resp.base.children)
// Check if we already have siblings cached
if (state.siblings != null && state.siblings_path == state.parents[state.parents.length - 1].path) {
console.debug("Using cached siblings")
} else {
console.debug("Cached siblings not available. Fetching new")
try {
let resp = await fs_get_node(state.bucket.id, state.parents[state.parents.length - 1].path)
// Sort directory children to make sure the order is consistent
sort_children(resp.base.children)
// Save new siblings in global state
state.siblings_path = state.parents[state.parents.length - 1].path
state.siblings = resp.base.children
} catch (err) {
console.error(err)
alert(err)
state.loading = false
return
}
}
let next_sibling = null
if (state.shuffle) {
// Shuffle is on, pick a random sibling
for (let i = 0; i < 10; i++) {
next_sibling = state.siblings[Math.floor(Math.random()*state.siblings.length)]
// If we selected the same sibling we already have open we try
// again. Else we break the loop
if (next_sibling.name !== state.base.name) {
break
}
}
} else {
// Loop over the parent node's children to find the one which is
// currently open. Then, if possible, we save the one which comes before
// or after it
let next_sibling = null
for (let i = 0; i < resp.base.children.length; i++) {
for (let i = 0; i < state.siblings.length; i++) {
if (
resp.base.children[i].name === state.base.name &&
state.siblings[i].name === state.base.name &&
i+offset >= 0 && // Prevent underflow
i+offset < resp.base.children.length // Prevent overflow
i+offset < state.siblings.length // Prevent overflow
) {
next_sibling = resp.base.children[i+offset]
console.debug("Next sibling is", next_sibling)
next_sibling = state.siblings[i+offset]
break
}
}
}
// If we found a sibling we open it
if (next_sibling !== null) {
navigate(next_sibling.path, true)
}
}).catch(err => {
console.error(err)
alert(err)
}).finally(() => {
// If we found a sibling we open it
if (next_sibling !== null) {
console.debug("Opening sibling", next_sibling)
navigate(next_sibling.path,true)
} else {
console.debug("No siblings found")
state.loading = false
})
}
}
// Capture browser back and forward navigation buttons
@@ -185,24 +224,42 @@ window.onpopstate = (e) => {
};
const keydown = e => {
if (e.ctrlKey || e.altKey || e.metaKey) {
return // prevent custom shortcuts from interfering with system shortcuts
}
switch (e.key) {
case "Escape":
hide();
return;
break;
case "i":
details_window.toggle()
break;
case "s":
download()
break;
case "r":
state.shuffle = !state.shuffle
break;
case "a", "ArrowLeft":
open_sibling(-1)
break;
case "d", "ArrowRight":
open_sibling(1)
break;
}
};
const download = () => {
download_frame.src = fs_get_file_url(state.bucket.id, state.base.path) + "?attach"
}
const share = () => {
}
</script>
<svelte:window on:keydown={keydown} on:/>
<svelte:window on:keydown={keydown} />
<div bind:this={file_viewer} class="file_viewer">
{#if state.loading}
@@ -215,7 +272,9 @@ const download = () => {
<button on:click={toolbar_toggle} class="button_toggle_toolbar" class:button_highlight={toolbar_visible}>
<i class="icon">menu</i>
</button>
<a href="/" id="button_home" class="button button_home"><i class="icon">home</i></a>
<a href="/" id="button_home" class="button button_home">
<PixeldrainLogo style="hieght: 1.6em; width: 1.6em; margin: 0 0.2em 0 0; color: currentColor;"></PixeldrainLogo>
</a>
<div class="file_viewer_headerbar_title">
{#each state.parents as parent}
<a
@@ -243,6 +302,18 @@ const download = () => {
<div class="toolbar_statistic">{formatDataVolume(total_file_size, 3)}</div>
{/if}
<div class="button_row">
<button on:click={() => {open_sibling(-1)}}>
<i class="icon">skip_previous</i>
</button>
<button on:click={() => {state.shuffle = !state.shuffle}} class:button_highlight={state.shuffle}>
<i class="icon">shuffle</i>
</button>
<button on:click={() => {open_sibling(1)}}>
<i class="icon">skip_next</i>
</button>
</div>
{#if state.base.type === "file"}
<button on:click={download} class="toolbar_button button_full_width">
<i class="icon">save</i> Download
@@ -254,7 +325,7 @@ const download = () => {
<button id="btn_copy" class="toolbar_button button_full_width">
<i class="icon">content_copy</i> <u>C</u>opy Link
</button>
<button on:click={sharebar.toggle} class="toolbar_button button_full_width" class:button_highlight={sharebar_visible}>
<button on:click={() => sharebar_visible = !sharebar_visible} class="toolbar_button button_full_width" class:button_highlight={sharebar_visible}>
<i class="icon">share</i> Share
</button>
<button on:click={details.toggle} class="toolbar_button button_full_width" class:button_highlight={details_visible}>
@@ -275,6 +346,8 @@ const download = () => {
<Image state={state} on:open_sibling={e => {open_sibling(e.detail)}}></Image>
{:else if state.viewer_type === "video"}
<Video state={state} on:open_sibling={e => {open_sibling(e.detail)}}></Video>
{:else if state.viewer_type === "pdf"}
<PDF state={state}></PDF>
{/if}
</div>
</div>
@@ -282,7 +355,7 @@ const download = () => {
<!-- This frame will load the download URL when a download button is pressed -->
<iframe bind:this={download_frame} title="Frame for downloading files" style="display: none; width: 1px; height: 1px;"></iframe>
<Modal bind:this={details} title="Details" width="600px">
<Modal bind:this={details} title="Details" width="600px" role="prompt">
<table style="min-width: 100%;">
<tr><td colspan="2"><h3>Node details</h3></td></tr>
<tr><td>Name</td><td>{state.base.name}</td></tr>
@@ -475,5 +548,12 @@ const download = () => {
.toolbar_statistic {
text-align: center;
}
.button_row {
display: flex;
flex-direction: row;
}
.button_row > * {
flex: 1 1 auto;
}
</style>

26
svelte/src/filesystem/FilesystemAPI.svelte
View File

@@ -1,5 +1,13 @@
<script context="module">
export const fs_get_buckets = async () => {
const resp = await fetch(window.api_endpoint+"/filesystem");
if(resp.status >= 400) {
throw new Error(resp.text());
}
return resp.json();
}
export const fs_create_directory = async (bucket, path, dir_name) => {
if (!path.startsWith("/")) {
path = "/" + path
@@ -38,13 +46,29 @@ export const fs_get_file_url = (bucket, path) => {
return window.api_endpoint + "/filesystem/" + bucket + encodeURIComponent(path)
}
export const fs_rename_node = async (bucket, old_path, new_path) => {
if (!old_path.startsWith("/")) { old_path = "/" + old_path }
if (!new_path.startsWith("/")) { new_path = "/" + new_path }
const form = new FormData()
form.append("move_to", new_path)
const resp=await fetch(
window.api_endpoint+"/filesystem/"+bucket+encodeURIComponent(old_path),
{ method: "PUT", body: form }
);
if(resp.status >= 400) {
throw new Error(resp.text());
}
}
export const fs_delete_node = async (bucket, path) => {
if (!path.startsWith("/")) {
path = "/" + path
}
const resp = await fetch(
window.api_endpoint+"/filesystem/"+bucket+encodeURIComponent(path),
window.api_endpoint+"/filesystem/"+bucket+encodeURIComponent(path)+"?recursive",
{ method: "DELETE" }
);
if(resp.status >= 400) {

57
svelte/src/filesystem/Sharebar.svelte
View File

@@ -1,25 +1,63 @@
<script>
let sharebar
export let visible = false
export const setVisible = (v) => { visible = v }
export const toggle = () => { setVisible(!visible) }
export const setVisible = (v) => visible = v
export const toggle = () => setVisible(!visible)
const share_email = () => {
window.open(
'mailto:please@set.address?subject=File%20on%20pixeldrain&body='+encodeURIComponent(window.location.href)
);
}
const share_reddit = () => {
window.open('https://www.reddit.com/submit?url='+encodeURIComponent(window.location.href));
}
const share_twitter = () => {
window.open('https://twitter.com/share?url='+encodeURIComponent(window.location.href));
}
const share_facebook = () => {
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(window.location.href));
}
const share_tumblr = () => {
window.open('http://www.tumblr.com/share/link?url='+encodeURIComponent(window.location.href));
}
</script>
<div bind:this={sharebar} class="sharebar" class:visible>
Share on:<br/>
<button class="sharebar-button button_full_width" onclick="window.open('mailto:please@set.address?subject=File%20on%20pixeldrain&body=' + window.location.href);">
<button class="button_full_width" on:click={share_email}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M22 4H2v16h20V4zm-2 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
<br/>
E-Mail
</button>
<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
<button class="button_full_width" on:click={share_reddit}>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
<path d="M22,12.14C22,10.92 21,9.96 19.81,9.96C19.22,9.96 18.68,10.19 18.29,10.57C16.79,9.5 14.72,8.79 12.43,8.7L13.43,4L16.7,4.71C16.73,5.53 17.41,6.19 18.25,6.19C19.11,6.19 19.81,5.5 19.81,4.63C19.81,3.77 19.11,3.08 18.25,3.08C17.65,3.08 17.11,3.43 16.86,3.95L13.22,3.18C13.11,3.16 13,3.18 12.93,3.24C12.84,3.29 12.79,3.38 12.77,3.5L11.66,8.72C9.33,8.79 7.23,9.5 5.71,10.58C5.32,10.21 4.78,10 4.19,10C2.97,10 2,10.96 2,12.16C2,13.06 2.54,13.81 3.29,14.15C3.25,14.37 3.24,14.58 3.24,14.81C3.24,18.18 7.16,20.93 12,20.93C16.84,20.93 20.76,18.2 20.76,14.81C20.76,14.6 20.75,14.37 20.71,14.15C21.46,13.81 22,13.04 22,12.14M7,13.7C7,12.84 7.68,12.14 8.54,12.14C9.4,12.14 10.1,12.84 10.1,13.7A1.56,1.56 0 0,1 8.54,15.26C7.68,15.28 7,14.56 7,13.7M15.71,17.84C14.63,18.92 12.59,19 12,19C11.39,19 9.35,18.9 8.29,17.84C8.13,17.68 8.13,17.43 8.29,17.27C8.45,17.11 8.7,17.11 8.86,17.27C9.54,17.95 11,18.18 12,18.18C13,18.18 14.47,17.95 15.14,17.27C15.3,17.11 15.55,17.11 15.71,17.27C15.85,17.43 15.85,17.68 15.71,17.84M15.42,15.28C14.56,15.28 13.86,14.58 13.86,13.72A1.56,1.56 0 0,1 15.42,12.16C16.28,12.16 17,12.86 17,13.72C17,14.56 16.28,15.28 15.42,15.28Z" />
</svg>
<br/>
Reddit
</button>
<button class="sharebar-button button_full_width" onclick="window.open('https://twitter.com/share?url=' + window.location.href);">
<button class="button_full_width" on:click={share_twitter}>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
<path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
</svg>
<br/>
Twitter
</button>
<button class="sharebar-button button_full_width" onclick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
<button class="button_full_width" on:click={share_facebook}>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
<path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" />
</svg>
<br/>
Facebook
</button>
<button class="sharebar-button button_full_width" onclick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
<button class="button_full_width" on:click={share_tumblr}>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
<path d="M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17" />
</svg>
<br/>
Tumblr
</button>
</div>
@@ -42,4 +80,9 @@ export const toggle = () => { setVisible(!visible) }
transition: left 0.5s;
}
.visible { left: 8em; }
.button_full_width > svg {
height: 3em;
width: 3em;
fill: currentColor;
}
</style>

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

@@ -20,8 +20,6 @@ const node_click = (index) => {
dispatch("navigate", state.base.children[index].path)
} else if (mode === "selecting") {
state.base.children[index].fm_selected = !state.base.children[index].fm_selected
} else if (mode === "deleting") {
state.base.children[index].fm_delete = !state.base.children[index].fm_delete
}
}
const navigate_up = () => {
@@ -66,9 +64,23 @@ const node_icon = node => {
return "/res/img/mime/empty.png"
}
const delete_node = () => {
if (mode !== "deleting") {
mode = "deleting"
const delete_selected = () => {
if (mode !== "selecting") {
return
}
let count = state.base.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
}
@@ -77,7 +89,7 @@ const delete_node = () => {
// Save all promises with deletion requests in an array
let promises = []
state.base.children.forEach(child => {
if (!child.fm_delete) { return }
if (!child.fm_selected) { return }
promises.push(fs_delete_node(state.bucket.id, child.path))
})
@@ -89,53 +101,53 @@ const delete_node = () => {
reload()
})
}
const delete_toggle = () => {
// Turn on deletion mode if it's not already
if (mode !== "deleting") {
mode = "deleting"
const toggle_select = () => {
if (mode !== "selecting") {
mode = "selecting"
return
}
// Return to normal and unmark all the marked files
mode = "viewing"
// Unmark all the selected files and return to viewing mode
state.base.children.forEach((child, i) => {
if (child.fm_delete) {
state.base.children[i].fm_delete = false
if (child.fm_selected) {
state.base.children[i].fm_selected = false
}
})
mode = "viewing"
}
</script>
<div class="container">
<div class="width_container">
<div class="toolbar">
<button on:click={navigate_up} class:hidden={state.parents.length === 0}><i class="icon">arrow_back</i></button>
<button on:click={navigate_up} disabled={state.parents.length === 0}><i class="icon">arrow_back</i></button>
<button on:click={reload}><i class="icon">refresh</i></button>
<div class="toolbar_spacer"></div>
{#if state.bucket.permissions.update}
<button on:click={uploader.picker}><i class="icon">cloud_upload</i></button>
<button on:click={() => {creating_dir = true}}><i class="icon">create_new_folder</i></button>
<button
on:click={delete_toggle}
class:button_red={mode === "deleting"}>
<i class="icon">delete</i>
on:click={toggle_select}
class:button_highlight={mode === "selecting"}>
<i class="icon">edit</i>
</button>
{/if}
</div>
<br/>
{#if mode === "deleting"}
<div class="toolbar toolbar_delete highlight_red">
{#if mode === "selecting"}
<div class="toolbar toolbar_edit highlight_green">
<div style="flex: 1 1 auto; justify-self: center;">
Deleting files. Click a file or directory to select it for deletion.
Click confirm to delete the files.
Select files or directories by clicking on them. Then you
can choose which action to perform
</div>
<div style="display: flex; flex-direction: row; justify-content: center;">
<button on:click={delete_toggle}>
<button on:click={toggle_select}>
<i class="icon">undo</i>
Cancel
</button>
<button on:click={delete_node} class="button_red">
<button on:click={delete_selected} class="button_red">
<i class="icon">delete</i>
Delete selected
</button>
@@ -162,8 +174,7 @@ const delete_toggle = () => {
href={state.path_root+child.path}
on:click|preventDefault={() => {node_click(index)}}
class="node"
class:node_selected={child.fm_selected}
class:node_delete={child.fm_delete}>
class:node_selected={child.fm_selected}>
<td>
<img src={node_icon(child)} class="node_icon" alt="icon"/>
</td>
@@ -180,7 +191,6 @@ const delete_toggle = () => {
</div>
<style>
.hidden { visibility: hidden; }
.container {
height: 100%;
width: 100%;
@@ -210,7 +220,7 @@ const delete_toggle = () => {
.toolbar_spacer { flex: 1 1 auto; }
@media(max-width: 800px) {
.toolbar_delete {
.toolbar_edit {
flex-direction: column;
}
}

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

@@ -27,7 +27,7 @@ export const upload = (file_list) => {
// This updates the UI
upload_jobs = upload_jobs
while (upload_threads <= max_upload_threads) {
while (upload_threads < max_upload_threads) {
upload_threads++
setTimeout(upload_file, 1)
}

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

@@ -17,7 +17,7 @@ const update_session_meta = name => {
if (media_session) {
navigator.mediaSession.metadata = new MediaMetadata({
title: name,
artist: "unknown",
artist: "pixeldrain",
album: "unknown",
});
}
@@ -38,7 +38,7 @@ onMount(() => {
</script>
<div class="container">
<button on:click={() => dispatch("open_sibling", -1) }><i class="icon">skip_previous</i></button>
<button on:click={() => dispatch("open_sibling", -1) }><i class="icon">skip_previous</i></button>
<button on:click={() => player.currentTime -= 10 }><i class="icon">replay_10</i></button>
<button on:click={toggle_play}>
{#if playing}

22
svelte/src/filesystem/viewers/PDF.svelte Normal file
View File

@@ -0,0 +1,22 @@
<script>
import { fs_get_file_url } from "../FilesystemAPI.svelte";
export let state
</script>
<iframe
class="container"
src={"/res/misc/pdf-viewer/web/viewer.html?file="+encodeURIComponent(fs_get_file_url(state.bucket.id, state.base.path))}
title="PDF viewer">
</iframe>
<style>
.container {
position: relative;
display: block;
height: 100%;
width: 100%;
text-align: center;
overflow: hidden;
border: none;
}
</style>

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

@@ -1,13 +1,42 @@
<script>
import { fs_get_file_url } from "../FilesystemAPI.svelte";
import { createEventDispatcher } from 'svelte'
import { createEventDispatcher, onMount } from 'svelte'
let dispatch = createEventDispatcher()
export let state;
let player
let media_session = false
// Detect when the song changes
$: update_session_meta(state.base.name)
const update_session_meta = name => {
if (media_session) {
navigator.mediaSession.metadata = new MediaMetadata({
title: name,
artist: "pixeldrain",
album: "unknown",
});
}
}
onMount(() => {
if ('mediaSession' in navigator) {
media_session = true
update_session_meta(state.base.name)
navigator.mediaSession.setActionHandler('play', () => player.play());
navigator.mediaSession.setActionHandler('pause', () => player.pause());
navigator.mediaSession.setActionHandler('stop', () => player.stop());
navigator.mediaSession.setActionHandler('previoustrack', () => dispatch("open_sibling", -1));
navigator.mediaSession.setActionHandler('nexttrack', () => dispatch("open_sibling", 1));
}
})
</script>
<div class="container">
<video
bind:this={player}
class="player"
src={fs_get_file_url(state.bucket.id, state.base.path)}
autoplay="autoplay"

8
svelte/src/user_buckets.js Normal file
View File

@@ -0,0 +1,8 @@
import App from './user_buckets/UserBuckets.svelte';
const app = new App({
target: document.getElementById("page_content"),
props: {}
});
export default app;

39
svelte/src/user_buckets/UserBuckets.svelte Normal file
View File

@@ -0,0 +1,39 @@
<script>
import { onMount } from "svelte";
import Spinner from "../util/Spinner.svelte";
import { fs_get_buckets } from "../filesystem/FilesystemAPI.svelte";
let loading = true
let buckets = []
const get_buckets = async () => {
try {
let resp = await fs_get_buckets()
buckets = resp.buckets
} catch (err) {
alert(err)
} finally {
loading = false
}
}
onMount(get_buckets)
</script>
<div>
{#if loading}
<div class="spinner_container"><Spinner></Spinner></div>
{/if}
{#each buckets as bucket}
<a href={"/d/"+bucket.id}>{bucket.name}</a>
{/each}
</div>
<style>
.spinner_container {
display: inline-block;
height: 100px;
width: 100px;
}
</style>

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

@@ -46,10 +46,12 @@ const keydown = e => {
<div class="background" use:load_bg on:click={hide} transition:fade={{duration: 200}}>
<div class="window" use:load_modal on:click|stopPropagation role="dialog" aria-modal="true">
<div class="header highlight_1">
<div class="title">{title}</div>
<button class="button_close button_red" on:click={hide}>
<i class="icon">close</i>
</button>
<slot name="title">
<div class="title">{title}</div>
<button class="button button_red" on:click={hide}>
<i class="icon">close</i>
</button>
</slot>
</div>
<div class="body">
<slot></slot>
@@ -104,7 +106,7 @@ const keydown = e => {
text-overflow: ellipsis;
overflow: hidden;
}
.button_close {
.button {
flex-grow: 0;
flex-shrink: 0;
}

13
svelte/src/util/PixeldrainLogo.svelte Normal file
View File

@@ -0,0 +1,13 @@
<script>
export let style;
</script>
<svg style={style} enable-background="new 0 0 283.46 283.46" version="1.1" viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg">
<path d="m142 2.23c-77 0-139 62.5-139 140 0 77 62.5 139 139 139 77 0 139-62.5 139-139 1e-3 -77-62.5-140-139-140zm0 258c-65.7 0-119-53.2-119-119s53.2-119 119-119c65.7 0 119 53.2 119 119 0 65.7-53.2 119-119 119zm0-219c-55.1 0-99.8 44.7-99.8 99.8 0 55.1 44.7 99.8 99.8 99.8s99.8-44.7 99.8-99.8c0-55.1-44.7-99.8-99.8-99.8zm49.3 36c8.69 0 15.7 7.04 15.7 15.7 0 8.69-7.04 15.7-15.7 15.7s-15.7-7.04-15.7-15.7c0-8.69 7.04-15.7 15.7-15.7zm-49.3-20c8.69 0 15.7 7.04 15.7 15.7 0 8.69-7.04 15.7-15.7 15.7s-15.7-7.04-15.7-15.7c0-8.69 7.04-15.7 15.7-15.7zm-48.7 20c8.69 0 15.7 7.04 15.7 15.7 0 8.69-7.04 15.7-15.7 15.7s-15.7-7.04-15.7-15.7c-1e-3 -8.69 7.04-15.7 15.7-15.7zm-35 63.8c0-8.69 7.04-15.7 15.7-15.7s15.7 7.04 15.7 15.7c0 8.69-7.04 15.7-15.7 15.7-8.69 0-15.7-7.04-15.7-15.7zm35 65.6c-8.69 0-15.7-7.04-15.7-15.7s7.04-15.7 15.7-15.7 15.7 7.04 15.7 15.7-7.04 15.7-15.7 15.7zm48.7 20.7c-8.69 0-15.7-7.04-15.7-15.7 0-8.69 7.04-15.7 15.7-15.7 8.69 0 15.7 7.04 15.7 15.7 1e-3 8.68-7.04 15.7-15.7 15.7zm2e-3 -47c-21.2 0-38.5-17.2-38.5-38.5 0-21.2 17.2-38.5 38.5-38.5 21.2 0 38.5 17.2 38.5 38.5 0 21.2-17.2 38.5-38.5 38.5zm49.3 26.3c-8.69 0-15.7-7.04-15.7-15.7s7.04-15.7 15.7-15.7 15.7 7.04 15.7 15.7-7.04 15.7-15.7 15.7zm18.6-49.9c-8.69 0-15.7-7.04-15.7-15.7 0-8.69 7.04-15.7 15.7-15.7s15.7 7.04 15.7 15.7c0 8.69-7.04 15.7-15.7 15.7z"/>
</svg>
<style>
svg {
color: var(--highlight_color);
fill: currentColor;
}
</style>

1
webcontroller/web_controller.go
View File

@@ -132,6 +132,7 @@ func New(
{GET, "user" /* */, wc.serveTemplate("user_home", true)},
{GET, "user/files" /* */, wc.serveTemplate("user_files", true)},
{GET, "user/lists" /* */, wc.serveTemplate("user_lists", true)},
{GET, "user/buckets" /* */, wc.serveTemplate("user_buckets", true)},
{GET, "user/filemanager" /**/, wc.serveTemplate("file_manager", true)},
// User account settings