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

chore(control): add sync functionality [untested]

Browse Source
This commit is contained in:
E44
2026-01-08 19:36:37 +01:00
parent bfcc109c80
commit e308d6a42a
1 changed files with 137 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/lib/ts/file_transfer_handler.ts
+137 -55
View File
@@ -10,12 +10,13 @@ import { notifications } from './stores/notification';
import { generate_thumbnail } from './stores/thumbnails'; import { generate_thumbnail } from './stores/thumbnails';
import { import {
get_file_primary_key, get_file_primary_key,
type FileLoadingData,
type FileOnDisplay, type FileOnDisplay,
type FileTransferTask, type FileTransferTask,
type Inode, type Inode,
type ShortDisplay type ShortDisplay
} from './types'; } from './types';
import { get_sanitized_file_url, make_valid_name } from './utils'; import { get_sanitized_file_url, get_uuid, make_valid_name } from './utils';
let is_processing: boolean = false; let is_processing: boolean = false;
const tasks: FileTransferTask[] = []; const tasks: FileTransferTask[] = [];
@@ -104,6 +105,27 @@ export async function add_sync(selected_file_id: string, selected_display_ids: s
bytes_total: file_data.file.size bytes_total: file_data.file.size
}); });
await db.files_on_display.update([file_data.short_display_with_file.id, selected_file_id], {
loading_data: {
type: 'sync_download',
percentage: 0,
bytes_per_second: 0,
seconds_until_finish: -1
}
});
const display_ids_without_file = file_data.short_displays_without_file.map((d) => d.id);
await db.files_on_display
.where('file_primary_key')
.equals(selected_file_id)
.filter((e) => display_ids_without_file.includes(e.display_id))
.modify({
loading_data: {
type: 'sync_upload',
percentage: 0,
bytes_per_second: 0,
seconds_until_finish: -1
}
});
await start_task_processing(); await start_task_processing();
} }
@@ -179,65 +201,69 @@ async function upload(task: FileTransferTask): Promise<void> {
const task_data = task.data; const task_data = task.data;
if (task_data.type !== 'upload' || !task_data.file) return; if (task_data.type !== 'upload' || !task_data.file) return;
const start_time = new Date(); await upload_file_via_xhr(task, task.display, task_data.file);
return new Promise<void>((resolve) => { // Generate Thumbnail if not done already
const xhr = new XMLHttpRequest(); setTimeout(async () => {
xhr.open( const inode_element: Inode | undefined = await db.files.get(
'POST', JSON.parse(task.file_primary_key) as [string, string, number, string]
`http://${task.display.ip}:1323/api${get_sanitized_file_url(task.path + task.file_name)}`,
true
); );
xhr.setRequestHeader('content-type', 'application/octet-stream'); if (!!inode_element && inode_element.thumbnail === null) {
await generate_thumbnail(task.display.ip, task.path, inode_element);
}
}, 10);
}
xhr.upload.onprogress = (e) => { export async function sync(task: FileTransferTask) {
const total = e.lengthComputable ? e.total : task.bytes_total; if (task.data.type !== 'sync') return;
const current_percentage = total > 0 ? Math.round((e.loaded / total) * 100) : 1;
const apply = async () => {
const prognosed_data = get_prognosed_data(start_time, e.loaded, total);
await db.files_on_display.update([task.display.id, task.file_primary_key], { const hasOPFS =
loading_data: { typeof navigator !== 'undefined' &&
type: 'upload', 'storage' in navigator &&
percentage: current_percentage, 'getDirectory' in navigator.storage;
bytes_per_second: prognosed_data.bytes_per_second, if (!hasOPFS) {
seconds_until_finish: prognosed_data.seconds_until_finish return show_error(
} task,
}); 'OPFS (navigator.storage.getDirectory) nicht verfügbar – bitte Chromium/Edge/Chrome nutzen.'
}; );
apply(); }
};
xhr.onerror = async (e: ProgressEvent) => { const temp_name = `sync-${get_uuid()}.tmp`;
await show_error(task, e);
resolve();
};
xhr.onreadystatechange = async () => { try {
if (xhr.readyState === 4) { // 01 - download file to disk (in browser, not for user)
if (xhr.status == 200) { const url = `http://${task.display.ip}:1323/api${get_sanitized_file_url(task.path + task.file_name)}`;
await db.files_on_display.update([task.display.id, task.file_primary_key], { const fetch_source = await fetch(url, { method: 'GET' });
loading_data: null if (!fetch_source.ok || !fetch_source.body)
}); // TODO: Stattdessen update machen und gucken, ob die Datei wirklich da ist return show_error(task, `HTTP ${fetch_source.status}`);
} else {
await show_error(task, `HTTP ${xhr.status}`);
}
resolve();
}
};
xhr.send(task_data.file); const dir = await navigator.storage.getDirectory();
}).then(() => { const file_handle = await dir.getFileHandle(temp_name, { create: true });
// Generate Thumbnail if not done already const writable = await file_handle.createWritable();
setTimeout(async () => { const reader = fetch_source.body.getReader();
const inode_element: Inode | undefined = await db.files.get(
JSON.parse(task.file_primary_key) as [string, string, number, string] const start_time = new Date();
); while (true) {
if (!!inode_element && inode_element.thumbnail === null) { const { value, done } = await reader.read();
await generate_thumbnail(task.display.ip, task.path, inode_element); if (done) break;
} if (!value) continue;
}, 10);
}); await update_current_loading_data('sync_download', task, value.byteLength, start_time);
await writable.write(value);
}
await writable.close();
// 02 - send downloaded file to every destination_display
const temp_file = await file_handle.getFile();
for (const current_short_display of task.data.destination_displays) {
await upload_file_via_xhr(task, current_short_display, temp_file);
}
await dir.removeEntry(temp_name);
} catch (e) {
show_error(task, String(e));
}
} }
export async function download_file(selected_file_id: string, selected_display_ids: string[]) { export async function download_file(selected_file_id: string, selected_display_ids: string[]) {
@@ -280,13 +306,69 @@ async function start_task_loop() {
if (current_task.data.type === 'upload') { if (current_task.data.type === 'upload') {
await upload(current_task); await upload(current_task);
} }
// else if (current_task.data.type === 'sync') { else if (current_task.data.type === 'sync') {
// } await sync(current_task);
}
tasks.shift(); // Remove current_task from tasks tasks.shift(); // Remove current_task from tasks
} }
is_processing = false; is_processing = false;
} }
async function upload_file_via_xhr(task: FileTransferTask, current_short_display: ShortDisplay, current_file: File) {
const start_time = new Date();
return new Promise<void>((resolve) => {
const xhr = new XMLHttpRequest();
xhr.open(
'POST',
`http://${current_short_display.ip}:1323/api${get_sanitized_file_url(task.path + task.file_name)}`,
true
);
xhr.setRequestHeader('content-type', 'application/octet-stream');
xhr.upload.onprogress = (e) => {
const apply = async () => {
await update_current_loading_data(task.data.type === 'upload' ? 'upload' : 'sync_upload', task, e.loaded, start_time, current_short_display.id);
};
apply();
};
xhr.onerror = async (e: ProgressEvent) => {
await show_error(task, e);
resolve();
};
xhr.onreadystatechange = async () => {
if (xhr.readyState === 4) {
if (xhr.status == 200) {
await db.files_on_display.update([current_short_display.ip, task.file_primary_key], {
loading_data: null
}); // TODO: Stattdessen update machen und gucken, ob die Datei wirklich da ist
} else {
await show_error(task, `HTTP ${xhr.status}`);
}
resolve();
}
};
xhr.send(current_file);
})
}
async function update_current_loading_data(type: FileLoadingData['type'], task: FileTransferTask, current_bytes: number, start_time: Date, other_display_id: string | null = null) {
const current_percentage = task.bytes_total > 0 ? Math.round((current_bytes / task.bytes_total) * 100) : 1;
const prognosed_data = get_prognosed_data(start_time, current_bytes, task.bytes_total);
await db.files_on_display.update([other_display_id ? other_display_id : task.display.id, task.file_primary_key], {
loading_data: {
type,
percentage: current_percentage,
bytes_per_second: prognosed_data.bytes_per_second,
seconds_until_finish: prognosed_data.seconds_until_finish
}
});
}
function get_prognosed_data( function get_prognosed_data(
start_time: Date, start_time: Date,
bytes_done: number, bytes_done: number,