PLG_Development/PLG-MuDiCS
3
0
Fork 0
mirror of https://codeberg.org/PLG-Development/PLG-MuDiCS synced 2026-07-05 16:37:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(control): uploading file(s) to multiple displays

Browse Source 
closes #41
This commit is contained in:
E44
2026-06-10 21:57:36 +02:00
parent b6c637649f
commit b6150fdab0
2 changed files with 97 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/lib/components/InodeElement.svelte
+19 -10
View File
@@ -60,7 +60,7 @@
file_size = liveQuery(() => get_size_recursively(f)); file_size = liveQuery(() => get_size_recursively(f));
}); });
let file_transfer_task: FileTransferTask | null = $derived( let file_transfer_task_list: FileTransferTask[] | null = $derived(
Object.hasOwn($file_transfer_tasks, file_primary_key) Object.hasOwn($file_transfer_tasks, file_primary_key)
? $file_transfer_tasks[file_primary_key] ? $file_transfer_tasks[file_primary_key]
: null : null
@@ -69,7 +69,7 @@
let loading_finished = $state(false); let loading_finished = $state(false);
let previous_loading_state = $state(false); let previous_loading_state = $state(false);
$effect(() => { $effect(() => {
const ftt = file_transfer_task; const ftt = file_transfer_task_list;
if (previous_loading_state && !ftt) { if (previous_loading_state && !ftt) {
loading_finished = true; loading_finished = true;
setTimeout(() => (loading_finished = false), 200); setTimeout(() => (loading_finished = false), 200);
@@ -141,7 +141,7 @@
function get_grayed_out_text_color_strings(is_selected: boolean): string { function get_grayed_out_text_color_strings(is_selected: boolean): string {
if (not_interactable) return 'text-stone-400'; if (not_interactable) return 'text-stone-400';
if (file_transfer_task) return 'text-white/20'; if (file_transfer_task_list) return 'text-white/20';
const color = is_selected ? 'text-stone-600' : 'text-stone-400'; const color = is_selected ? 'text-stone-600' : 'text-stone-400';
const factor = is_selected ? -1 : 1; const factor = is_selected ? -1 : 1;
return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`; return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
@@ -149,14 +149,14 @@
function get_grayed_out_border_color_strings(is_selected: boolean): string { function get_grayed_out_border_color_strings(is_selected: boolean): string {
if (not_interactable) return 'border-stone-550'; if (not_interactable) return 'border-stone-550';
if (file_transfer_task) return 'border-white/10'; if (file_transfer_task_list) return 'border-white/10';
const color = is_selected ? 'border-stone-450' : 'border-stone-550'; const color = is_selected ? 'border-stone-450' : 'border-stone-550';
const factor = is_selected ? 1 : 1; const factor = is_selected ? 1 : 1;
return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`; return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
} }
function onclick(e: Event) { function onclick(e: Event) {
if (not_interactable || file_transfer_task) return; if (not_interactable || file_transfer_task_list) return;
select(selected_file_ids, file_primary_key, 'toggle'); select(selected_file_ids, file_primary_key, 'toggle');
e.stopPropagation(); e.stopPropagation();
} }
@@ -180,7 +180,7 @@
if (loading_finished) { if (loading_finished) {
out += 'bg-stone-500 text-white/30'; out += 'bg-stone-500 text-white/30';
} else if (file_transfer_task) { } else if (file_transfer_task_list) {
out += 'bg-stone-700 text-white/30'; out += 'bg-stone-700 text-white/30';
} else { } else {
out += get_selectable_color_classes( out += get_selectable_color_classes(
@@ -196,7 +196,7 @@
if (not_interactable) { if (not_interactable) {
out += ' rounded-lg'; out += ' rounded-lg';
} else if (file_transfer_task) { } else if (file_transfer_task_list) {
out += ' rounded-r-lg'; out += ' rounded-r-lg';
} else { } else {
out += ' rounded-r-lg cursor-pointer'; out += ' rounded-r-lg cursor-pointer';
@@ -205,7 +205,16 @@
return out; return out;
} }
function get_total_percentage(ftt: FileTransferTask): number { function get_total_percentage(ftt_list: FileTransferTask[]): number {
let percentage_sum = 0;
for (const ftt of ftt_list) {
percentage_sum += get_percentage(ftt);
}
return Math.round(percentage_sum / ftt_list.length);
}
function get_percentage(ftt: FileTransferTask): number {
let total_percentage: number; let total_percentage: number;
if (ftt.data.type === 'upload') { if (ftt.data.type === 'upload') {
total_percentage = ftt.loading_data.percentage; total_percentage = ftt.loading_data.percentage;
@@ -312,10 +321,10 @@
{onclick} {onclick}
class="{get_main_classes()} relative transition-colors duration-200 gap-4 flex flex-row justify-between group w-full min-w-0" class="{get_main_classes()} relative transition-colors duration-200 gap-4 flex flex-row justify-between group w-full min-w-0"
> >
{#if !!file_transfer_task} {#if !!file_transfer_task_list}
<div <div
class="absolute pointer-events-none inset-y-0 left-0 transition-[width] duration-400 bg-stone-600 rounded-r-lg" class="absolute pointer-events-none inset-y-0 left-0 transition-[width] duration-400 bg-stone-600 rounded-r-lg"
style={`width: ${get_total_percentage(file_transfer_task)}%;`} style={`width: ${get_total_percentage(file_transfer_task_list)}%;`}
></div> ></div>
{/if} {/if}
<div class="flex flex-row gap-2 min-w-0 w-full z-10"> <div class="flex flex-row gap-2 min-w-0 w-full z-10">
control/frontend/src/lib/ts/file_transfer_handler.ts
+78 -33
View File
@@ -28,12 +28,23 @@ const START_LOADING_DATA = {
seconds_until_finish: -1 seconds_until_finish: -1
}; };
export const file_transfer_tasks: Writable<Record<string, FileTransferTask>> = writable< export const file_transfer_tasks: Writable<Record<string, FileTransferTask[]>> = writable<
Record<string, FileTransferTask> Record<string, FileTransferTask[]>
>({}); >({});
let is_processing: boolean = false; let is_processing: boolean = false;
function add_file_transfer_task(file_primary_key: string, new_task: FileTransferTask) {
file_transfer_tasks.update((tasks) => {
if (Object.hasOwn(tasks, file_primary_key)) {
tasks[file_primary_key].push(new_task);
return tasks;
} else {
return { ...tasks, [file_primary_key]: [new_task] };
}
});
}
export async function add_upload( export async function add_upload(
file_list: FileList, file_list: FileList,
selected_display_ids: string[], selected_display_ids: string[],
@@ -89,10 +100,7 @@ export async function add_upload(
loading_data: START_LOADING_DATA, loading_data: START_LOADING_DATA,
bytes_total: file.size bytes_total: file.size
}; };
file_transfer_tasks.update((tasks) => ({ add_file_transfer_task(file_primary_key, new_task);
...tasks,
[file_primary_key]: new_task
}));
}); });
await Promise.all(upload_task_promises); await Promise.all(upload_task_promises);
@@ -146,10 +154,7 @@ export async function add_sync_recursively(
bytes_total: file_data.file.size bytes_total: file_data.file.size
}; };
file_transfer_tasks.update((tasks) => ({ add_file_transfer_task(selected_file_id, new_task);
...tasks,
[selected_file_id]: new_task
}));
const display_ids_without_file = file_data.short_displays_without_file.map((d) => d.id); const display_ids_without_file = file_data.short_displays_without_file.map((d) => d.id);
const new_fods: FileOnDisplay[] = display_ids_without_file.map((display_id) => ({ const new_fods: FileOnDisplay[] = display_ids_without_file.map((display_id) => ({
@@ -230,15 +235,19 @@ function generate_valid_file_name(original_file_name: string, used_file_names: s
return name; return name;
} }
async function upload(file_primary_key: string, task: FileTransferTask): Promise<void> { async function upload(
file_primary_key: string,
task: FileTransferTask,
list_index: number
): Promise<void> {
const task_data = task.data; const task_data = task.data;
if (task_data.type !== 'upload' || !task_data.file) if (task_data.type !== 'upload' || !task_data.file)
return console.warn('Task cancelled: wrong task type:', task); return console.warn('Task cancelled: wrong task type:', task);
await upload_file_via_xhr(file_primary_key, task, task_data.file); await upload_file_via_xhr(file_primary_key, list_index, task, task_data.file);
} }
export async function sync(file_primary_key: string, task: FileTransferTask) { export async function sync(file_primary_key: string, task: FileTransferTask, list_index: number) {
if (task.data.type !== 'sync') return console.warn('Task cancelled: wrong task type:', task); if (task.data.type !== 'sync') return console.warn('Task cancelled: wrong task type:', task);
const hasOPFS = const hasOPFS =
@@ -273,18 +282,24 @@ export async function sync(file_primary_key: string, task: FileTransferTask) {
if (done) break; if (done) break;
if (!value) continue; if (!value) continue;
update_current_loading_data(file_primary_key, value.byteLength, start_time); update_current_loading_data(file_primary_key, list_index, value.byteLength, start_time);
await writable.write(value); await writable.write(value);
} }
await writable.close(); await writable.close();
finish_loading_data(file_primary_key); finish_loading_data(file_primary_key, list_index);
// 02 - send downloaded file to every destination_display // 02 - send downloaded file to every destination_display
const temp_file = await file_handle.getFile(); const temp_file = await file_handle.getFile();
for (const current_short_display of task.data.destination_display_data) { for (const current_short_display of task.data.destination_display_data) {
await upload_file_via_xhr(file_primary_key, task, temp_file, current_short_display.display); await upload_file_via_xhr(
file_primary_key,
list_index,
task,
temp_file,
current_short_display.display
);
} }
await dir.removeEntry(temp_name); await dir.removeEntry(temp_name);
@@ -292,7 +307,11 @@ export async function sync(file_primary_key: string, task: FileTransferTask) {
// open file, if required // open file, if required
if (task.data.open_file_afterwards_on_display_ids.length !== 0) { if (task.data.open_file_afterwards_on_display_ids.length !== 0) {
const path_to_file = task.path + task.file_name; const path_to_file = task.path + task.file_name;
await run_on_all_selected_displays((d) => open_file(d.ip, path_to_file), true, task.data.open_file_afterwards_on_display_ids); await run_on_all_selected_displays(
(d) => open_file(d.ip, path_to_file),
true,
task.data.open_file_afterwards_on_display_ids
);
} }
} catch (e) { } catch (e) {
show_general_error(file_primary_key, task, String(e)); show_general_error(file_primary_key, task, String(e));
@@ -336,24 +355,37 @@ async function start_task_loop() {
while (Object.keys(get(file_transfer_tasks)).length > 0) { while (Object.keys(get(file_transfer_tasks)).length > 0) {
const tasks = get(file_transfer_tasks); const tasks = get(file_transfer_tasks);
const current_file_id = Object.keys(tasks)[0]; const current_file_id = Object.keys(tasks)[0];
const current_task = tasks[current_file_id]; const current_task_list = tasks[current_file_id];
if (current_task.data.type === 'upload') {
await upload(current_file_id, current_task);
} else if (current_task.data.type === 'sync') {
await sync(current_file_id, current_task);
}
file_transfer_tasks.update((all_tasks) => { for (const [list_index, current_task] of current_task_list.entries()) {
const next = { ...all_tasks }; if (current_task.data.type === 'upload') {
delete next[current_file_id]; await upload(current_file_id, current_task, list_index);
return next; } else if (current_task.data.type === 'sync') {
}); await sync(current_file_id, current_task, list_index);
}
delete_current_task_if_needed(current_file_id);
}
} }
is_processing = false; is_processing = false;
} }
function delete_current_task_if_needed(current_file_id: string) {
file_transfer_tasks.update((all_tasks) => {
const next = { ...all_tasks };
const current_tasks = next[current_file_id];
if (current_tasks.length !== 1) {
if (current_tasks.find((t) => t.loading_data.percentage !== 100)) {
return next; // not all tasks are finished -> do nothing
}
}
delete next[current_file_id];
return next;
});
}
async function upload_file_via_xhr( async function upload_file_via_xhr(
file_primary_key: string, file_primary_key: string,
list_index: number,
task: FileTransferTask, task: FileTransferTask,
current_file: File, current_file: File,
destination_short_display: ShortDisplay | null = null destination_short_display: ShortDisplay | null = null
@@ -373,6 +405,7 @@ async function upload_file_via_xhr(
const apply = async () => { const apply = async () => {
update_current_loading_data( update_current_loading_data(
file_primary_key, file_primary_key,
list_index,
e.loaded, e.loaded,
start_time, start_time,
destination_short_display ? destination_short_display.id : null destination_short_display ? destination_short_display.id : null
@@ -392,6 +425,7 @@ async function upload_file_via_xhr(
// set loading_data to 100% // set loading_data to 100%
finish_loading_data( finish_loading_data(
file_primary_key, file_primary_key,
list_index,
destination_short_display ? destination_short_display.id : null destination_short_display ? destination_short_display.id : null
); );
// Generate Thumbnail if not done already // Generate Thumbnail if not done already
@@ -416,38 +450,43 @@ async function upload_file_via_xhr(
function finish_loading_data( function finish_loading_data(
file_primary_key: string, file_primary_key: string,
list_index: number,
destination_display_id: string | null = null destination_display_id: string | null = null
) { ) {
file_transfer_tasks.update((tasks) => { file_transfer_tasks.update((tasks) => {
const task = tasks[file_primary_key];
const current_loading_data = { const current_loading_data = {
percentage: 100, percentage: 100,
bytes_per_second: 0, bytes_per_second: 0,
seconds_until_finish: 0 seconds_until_finish: 0
}; };
const new_task_list = tasks[file_primary_key].map((task, index) =>
index === list_index
? get_updated_task(current_loading_data, destination_display_id, task)
: task
);
return { return {
...tasks, ...tasks,
[file_primary_key]: get_updated_task(current_loading_data, destination_display_id, task) [file_primary_key]: new_task_list
}; };
}); });
} }
function update_current_loading_data( function update_current_loading_data(
file_primary_key: string, file_primary_key: string,
list_index: number,
current_bytes: number, current_bytes: number,
start_time: Date, start_time: Date,
destination_display_id: string | null = null destination_display_id: string | null = null
) { ) {
file_transfer_tasks.update((tasks) => { file_transfer_tasks.update((tasks) => {
const task = tasks[file_primary_key]; const task = tasks[file_primary_key][list_index];
if (!task) return tasks; if (!task) return tasks;
const current_percentage = Math.min( const current_percentage = Math.min(
task.bytes_total > 0 ? Math.round((current_bytes / task.bytes_total) * 100) : 1, task.bytes_total > 0 ? Math.round((current_bytes / task.bytes_total) * 100) : 1,
99 99
); );
const prognosed_data = get_prognosed_data(start_time, current_bytes, task.bytes_total); const prognosed_data = get_prognosed_data(start_time, current_bytes, task.bytes_total);
const current_loading_data: FileLoadingData = { const current_loading_data: FileLoadingData = {
@@ -456,9 +495,15 @@ function update_current_loading_data(
seconds_until_finish: prognosed_data.seconds_until_finish seconds_until_finish: prognosed_data.seconds_until_finish
}; };
const new_task_list = tasks[file_primary_key].map((task, index) =>
index === list_index
? get_updated_task(current_loading_data, destination_display_id, task)
: task
);
return { return {
...tasks, ...tasks,
[file_primary_key]: get_updated_task(current_loading_data, destination_display_id, task) [file_primary_key]: new_task_list
}; };
}); });
} }