bump to v0.1.2

Co-authored-by: 2mal3 <56305732+2mal3@users.noreply.github.com>

control/frontend/src/lib/components/InodeElement.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ArrowRight, Ban, FileIcon, Folder, Play } from 'lucide-svelte';
+	import { ArrowRight, Ban, FileIcon, Folder, Play, Triangle, TriangleAlert } from 'lucide-svelte';
 	import {
 		current_height,
 		get_selectable_color_classes,
@@ -11,7 +11,8 @@
 		type Inode,
 		get_file_primary_key,
 		type FileOnDisplay,
-		type CompleteFileLoadingData
+		type FileTransferTask,
+		is_folder
 	} from '$lib/ts/types';
 
 	import {
@@ -24,54 +25,68 @@
 		change_file_path,
 		current_file_path,
 		get_date_mapping,
+		get_folder_elements,
 		get_missing_colliding_display_ids
 	} from '$lib/ts/stores/files';
 	import RefreshPlay from '../svgs/RefreshPlay.svelte';
 	import { get_file_size_display_string, get_file_type } from '$lib/ts/utils';
 	import { open_file } from '$lib/ts/api_handler';
-	import { get_display_by_id, run_on_all_selected_displays } from '$lib/ts/stores/displays';
+	import {
+		get_display_by_id,
+		run_on_all_selected_displays,
+		selected_online_display_ids
+	} from '$lib/ts/stores/displays';
 	import { get_thumbnail_url } from '$lib/ts/stores/thumbnails';
 	import { liveQuery, type Observable } from 'dexie';
 	import { db } from '$lib/ts/database';
+	import { add_sync_recursively, file_transfer_tasks } from '$lib/ts/file_transfer_handler';
 
 	let { file, not_interactable = false }: { file: Inode; not_interactable?: boolean } = $props();
 
+	let file_primary_key = $derived(get_file_primary_key(file));
+
 	let missing_colliding_displays_ids:
 		| Observable<{ missing: string[]; colliding: string[] }>
 		| undefined = $state();
 	$effect(() => {
-		const s = $selected_file_ids;
-		missing_colliding_displays_ids = liveQuery(() => get_missing_colliding_display_ids(file, s));
+		const f = file;
+		const s = $selected_online_display_ids;
+		missing_colliding_displays_ids = liveQuery(() => get_missing_colliding_display_ids(f, s));
 	});
 
-	let loading_data:
-		| Observable<CompleteFileLoadingData>
-		| undefined = $state();
-	$effect(() => {
-		const d = $selected_display_ids;
-		loading_data = liveQuery(() => get_loading_data(get_file_primary_key(file), d));
-	});
-
-	let loading_finished = $state(false);
-	$effect(() => {
-		if (!loading_data) return;
-		let prev: boolean | undefined;
-		const sub = loading_data.subscribe((v) => {
-			if (prev === true && v.is_loading === false) {
-				loading_finished = true;
-				setTimeout(() => (loading_finished = false), 200);
-			}
-			prev = v.is_loading;
-		});
-		return () => sub.unsubscribe();
-	});
-
-	let thumbnail_url = liveQuery(() => get_thumbnail_url(get_file_primary_key(file)));
-	let date_mapping: Observable<Record<string, Date>> = liveQuery(() =>
-		get_date_mapping(get_file_primary_key(file))
+	let colliding_warning: boolean = $derived(
+		!!$missing_colliding_displays_ids && $missing_colliding_displays_ids.colliding.length !== 0
 	);
 
-	const is_folder = file.type === 'inode/directory';
+	let file_size: Observable<number> | undefined = $state();
+	$effect(() => {
+		const f = file;
+		file_size = liveQuery(() => get_size_recursively(f));
+	});
+
+	let file_transfer_task: FileTransferTask | null = $derived(
+		$file_transfer_tasks.hasOwnProperty(file_primary_key)
+			? $file_transfer_tasks[file_primary_key]
+			: null
+	);
+
+	let loading_finished = $state(false);
+	let previous_loading_state = $state(false);
+	$effect(() => {
+		const ftt = file_transfer_task;
+		if (previous_loading_state && !ftt) {
+			loading_finished = true;
+			setTimeout(() => (loading_finished = false), 200);
+		}
+		previous_loading_state = !!ftt;
+	});
+
+	let thumbnail_url = liveQuery(() => get_thumbnail_url(file_primary_key));
+	let date_mapping: Observable<Record<string, Date>> = liveQuery(() =>
+		get_date_mapping(file_primary_key)
+	);
+
+	const file_is_folder = $derived(is_folder(file));
 
 	function get_created_info(date_mapping: Record<string, Date> | undefined, full_string = false) {
 		if (!date_mapping) return '';
@@ -130,7 +145,7 @@
 
 	function get_grayed_out_text_color_strings(is_selected: boolean): string {
 		if (not_interactable) return 'text-stone-400';
-		if ($loading_data?.is_loading) return 'text-white/20';
+		if (!!file_transfer_task) return 'text-white/20';
 		const color = is_selected ? 'text-stone-600' : 'text-stone-400';
 		const factor = is_selected ? -1 : 1;
 		return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
@@ -138,21 +153,26 @@
 
 	function get_grayed_out_border_color_strings(is_selected: boolean): string {
 		if (not_interactable) return 'border-stone-550';
-		if ($loading_data?.is_loading) return 'border-white/10';
+		if (!!file_transfer_task) return 'border-white/10';
 		const color = is_selected ? 'border-stone-450' : 'border-stone-550';
 		const factor = is_selected ? 1 : 1;
 		return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
 	}
 
 	function onclick(e: Event) {
-		if (not_interactable || $loading_data?.is_loading) return;
-		select(selected_file_ids, get_file_primary_key(file), 'toggle');
+		if (not_interactable || !!file_transfer_task) return;
+		select(selected_file_ids, file_primary_key, 'toggle');
 		e.stopPropagation();
 	}
 
 	async function open() {
-		if (is_folder) {
+		if (file_is_folder) {
 			await change_file_path($current_file_path + file.name + '/');
+		} else if (
+			!!$missing_colliding_displays_ids &&
+			$missing_colliding_displays_ids.missing.length !== 0
+		) {
+			await add_sync_recursively(get_file_primary_key(file), $selected_online_display_ids, true);
 		} else {
 			const path_to_file = $current_file_path + file.name;
 			await run_on_all_selected_displays((d) => open_file(d.ip, path_to_file));
@@ -164,11 +184,11 @@
 
 		if (loading_finished) {
 			out += 'bg-stone-500 text-white/30';
-		} else if ($loading_data?.is_loading) {
+		} else if (!!file_transfer_task) {
 			out += 'bg-stone-700 text-white/30';
 		} else {
 			out += get_selectable_color_classes(
-				!not_interactable && is_selected(get_file_primary_key(file), $selected_file_ids),
+				!not_interactable && is_selected(file_primary_key, $selected_file_ids),
 				{
 					bg: true,
 					hover: !not_interactable,
@@ -180,7 +200,7 @@
 
 		if (not_interactable) {
 			out += ' rounded-lg';
-		} else if ($loading_data?.is_loading) {
+		} else if (!!file_transfer_task) {
 			out += ' rounded-r-lg';
 		} else {
 			out += ' rounded-r-lg cursor-pointer';
@@ -189,54 +209,36 @@
 		return out;
 	}
 
-	async function get_loading_data(
-		file_primary_key: string,
-		selected_display_ids: string[]
-	): Promise<CompleteFileLoadingData> {
-		const file_on_display_data: FileOnDisplay[] = await db.files_on_display
-			.where('file_primary_key')
-			.equals(file_primary_key)
-			.filter((e) => selected_display_ids.includes(e.display_id))
-			.toArray();
-		if (file_on_display_data.length === 0) {
-			return {
-				is_loading: true,
-				total_percentage: 0,
-				total_seconds_until_finish: -1,
-				display_data: []
-			};
+	function get_total_percentage(ftt: FileTransferTask): number {
+		let total_percentage: number;
+		if (ftt.data.type === 'upload') {
+			total_percentage = ftt.loading_data.percentage;
+		} else {
+			const percentage_array = ftt.data.destination_display_data.map(
+				(dd) => dd.loading_data.percentage
+			);
+			total_percentage =
+				(ftt.loading_data.percentage + percentage_array.reduce((total, n) => total + n, 0)) /
+				(1 + percentage_array.length);
 		}
-		const display_data = [];
-		let is_loading = false;
-		let percentage_sum = 0;
-		let total_seconds_until_finish = 0;
-		for (const fod of file_on_display_data) {
-			if (!!fod.loading_data) {
-				if (!is_loading) is_loading = true;
-				percentage_sum += fod.loading_data.percentage;
-				total_seconds_until_finish += fod.loading_data.seconds_until_finish;
-				const display = await get_display_by_id(fod.display_id);
-				if (!display) continue;
-				const display_data_element = {
-					loading_data: fod.loading_data,
-					display_name: display.name
-				};
-				if (fod.loading_data.type === 'sync_download') {
-					display_data.unshift(display_data_element); // insert sync_download element at beginning
-				} else {
-					display_data.push(display_data_element);
-				}
-			} else {
-				percentage_sum += 100;
+
+		return Math.min(total_percentage, 100);
+	}
+
+	async function get_size_recursively(file: Inode): Promise<number> {
+		if (is_folder(file)) {
+			const folder_elements = await get_folder_elements(
+				file.path + file.name + '/',
+				$selected_online_display_ids
+			);
+			let out: number = 0;
+			for (const el of folder_elements) {
+				out += await get_size_recursively(el);
 			}
+			return out;
+		} else {
+			return file.size;
 		}
-		let total_percentage = percentage_sum / display_data.length;
-		return {
-			is_loading,
-			total_percentage,
-			total_seconds_until_finish,
-			display_data
-		};
 	}
 </script>
 
@@ -249,46 +251,58 @@
 	{#if !not_interactable}
 		<div class="h-{$current_height.file} aspect-square max-w-15 flex">
 			<Button
-				disabled={!is_folder && get_file_type(file) === null}
-				title={!is_folder && get_file_type(file) === null ? 'Dateityp nicht unterstützt' : ''}
-				className="flex rounded-l-lg rounded-r-none {is_folder
+				disabled={(!file_is_folder && get_file_type(file) === null) || colliding_warning}
+				title={!file_is_folder && get_file_type(file) === null
+					? 'Dateityp nicht unterstützt'
+					: colliding_warning
+						? 'Dateien kollidieren auf verschiedenen Bildschirmen'
+						: ''}
+				className="flex rounded-l-lg rounded-r-none {file_is_folder
 					? 'text-stone-450'
 					: 'text-stone-800'} w-full"
 				div_class="w-full"
-				bg={get_selectable_color_classes(
-					!is_folder && get_file_type(file) !== null,
-					{
-						bg: true
-					},
-					-50
-				)}
-				hover_bg={get_selectable_color_classes(
-					!is_folder,
-					{
-						bg: true
-					},
-					50
-				)}
-				active_bg={get_selectable_color_classes(
-					!is_folder,
-					{
-						bg: true
-					},
-					100
-				)}
+				bg={colliding_warning
+					? 'bg-red-400'
+					: get_selectable_color_classes(
+							!file_is_folder && get_file_type(file) !== null,
+							{
+								bg: true
+							},
+							-50
+						)}
+				hover_bg={colliding_warning
+					? 'bg-red-500'
+					: get_selectable_color_classes(
+							!file_is_folder,
+							{
+								bg: true
+							},
+							50
+						)}
+				active_bg={colliding_warning
+					? 'bg-red-500'
+					: get_selectable_color_classes(
+							!file_is_folder,
+							{
+								bg: true
+							},
+							100
+						)}
 				click_function={(e) => {
 					open();
 					e.stopPropagation();
 				}}
 			>
-				{#if is_folder}
+				{#if file_is_folder}
 					<ArrowRight class="size-full" strokeWidth="3" />
-				{:else if $missing_colliding_displays_ids && $missing_colliding_displays_ids.missing.length !== 0}
-					<RefreshPlay className="size-full" />
-				{:else if get_file_type(file) !== null}
-					<Play class="size-full" strokeWidth="3" />
-				{:else}
+				{:else if get_file_type(file) === null}
 					<Ban class="size-full" strokeWidth="3" />
+				{:else if colliding_warning}
+					<TriangleAlert class="size-full" strokeWidth="3" />
+				{:else if !!$missing_colliding_displays_ids && $missing_colliding_displays_ids.missing.length !== 0}
+					<RefreshPlay className="size-full" />
+				{:else}
+					<Play class="size-full" strokeWidth="3" />
 				{/if}
 			</Button>
 		</div>
@@ -302,15 +316,15 @@
 		{onclick}
 		class="{get_main_classes()} relative transition-colors duration-200 gap-4 flex flex-row justify-between group w-full min-w-0"
 	>
-		{#if $loading_data?.is_loading}
+		{#if !!file_transfer_task}
 			<div
-				class="absolute pointer-events-none inset-y-0 left-0 transition-[width] duration-200 bg-stone-600 rounded-r-lg"
-				style={`width: ${Math.min($loading_data.total_percentage, 100)}%;`}
+				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)}%;`}
 			></div>
 		{/if}
 		<div class="flex flex-row gap-2 min-w-0 w-full z-10">
 			<div class="aspect-square rounded-md flex justify-center items-center">
-				{#if is_folder}
+				{#if file_is_folder}
 					<Folder class="size-full p-2" />
 				{:else if $thumbnail_url || null}
 					<img
@@ -327,43 +341,16 @@
 				{/if}
 			</div>
 			<div class="content-center truncate select-none w-full" title={file.name}>
-				{file.name.includes('.') && !is_folder && get_file_type(file)
+				{file.name.includes('.') && !file_is_folder && get_file_type(file)
 					? file.name.slice(0, file.name.lastIndexOf('.'))
 					: file.name}
 			</div>
 		</div>
 		<div
 			class=" p-1 flex flex-row items-center gap-1 pr-1 z-10 {get_grayed_out_text_color_strings(
-				is_selected(get_file_primary_key(file), $selected_file_ids)
+				is_selected(file_primary_key, $selected_file_ids)
 			)} duration-200 transition-colors"
 		>
-			<!-- {#if get_display_ids_where_file_is_missing($current_file_path, file, $selected_display_ids, $all_files)[1].length !== 0}
-				<Button
-					className="h-8 aspect-square transition-colors duration-200 !p-1.5 text-stone-100"
-					bg="bg-red-500"
-					click_function={(e) => {
-						e.stopPropagation();
-					}}
-				>
-					<TriangleAlert class="size-full" />
-				</Button>
-			{:else if get_display_ids_where_file_is_missing($current_file_path, file, $selected_display_ids, $all_files)[0].length !== 0}
-				<Button
-					className="h-8 aspect-square transition-colors duration-200 !p-1.5"
-					bg="bg-transparent"
-					hover_bg={get_selectable_color_classes(false, {
-						bg: true
-					})}
-					active_bg={get_selectable_color_classes(false, {
-						bg: true
-					})}
-					click_function={(e) => {
-						e.stopPropagation();
-					}}
-				>
-					<RefreshCcwDot class="size-full" />
-				</Button>
-			{/if} -->
 			<div
 				class="w-14 content-center text-center select-none text-xs whitespace-nowrap"
 				title={get_created_info($date_mapping, true)}
@@ -372,25 +359,25 @@
 			</div>
 			<div
 				class="h-[70%] border {get_grayed_out_border_color_strings(
-					is_selected(get_file_primary_key(file), $selected_file_ids)
+					is_selected(file_primary_key, $selected_file_ids)
 				)} duration-200 transition-colors my-1"
 			></div>
 			<div
 				class="w-12 content-center text-center select-none text-xs whitespace-nowrap truncate"
 				title={file.type}
 			>
-				{is_folder ? 'Ordner' : (get_file_type(file)?.display_name ?? '?')}
+				{file_is_folder ? 'Ordner' : (get_file_type(file)?.display_name ?? '?')}
 			</div>
 			<div
 				class="h-[70%] border {get_grayed_out_border_color_strings(
-					is_selected(get_file_primary_key(file), $selected_file_ids)
+					is_selected(file_primary_key, $selected_file_ids)
 				)} duration-200 transition-colors"
 			></div>
 			<div
 				class="w-12 content-center text-center select-none text-xs whitespace-nowrap"
-				title={get_file_size_display_string(file.size, 3)}
+				title={get_file_size_display_string($file_size ?? -1, 3)}
 			>
-				{get_file_size_display_string(file.size)}
+				{get_file_size_display_string($file_size ?? -1)}
 			</div>
 		</div>
 	</div>

control/frontend/src/lib/components/PopUp.svelte

@@ -18,7 +18,7 @@
 	} = $props();
 
 	function try_to_close() {
-		if (!content.closable || !content.open) return;
+		if (!content.open) return;
 		close_function();
 	}
 
@@ -35,19 +35,13 @@
 </script>
 
 {#if content.open}
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<div
 		class="absolute inset-0 backdrop-blur flex justify-center items-center z-50 {className}"
-		onclick={try_to_close}
 		transition:fade={{ duration: 100 }}
 	>
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<div
 			class="bg-stone-800 rounded-2xl min-w-[30%] max-w-[90%] max-h-[85%] flex flex-col shadow-2xl/60 overflow-hidden {content.window_class ??
 				''}"
-			onclick={(e) => e.stopPropagation()}
 		>
 			{#if content.title}
 				<div class="font-bold bg-stone-700 p-1.5 flex flex-row justify-between gap-8 w-full">
@@ -64,16 +58,16 @@
 						</div>
 					</div>
 					<div class="flex aspect-square shrink-0">
-						{#if content.closable}
-							<Button className="aspect-square p-1.5!" click_function={try_to_close}>
-								<X />
-							</Button>
-						{/if}
+						<Button className="aspect-square p-1.5!" click_function={try_to_close}>
+							<X />
+						</Button>
 					</div>
 				</div>
 			{/if}
 			<div class="p-2 min-h-0 overflow-auto flex flex-col gap-2 {snippet_container_class}">
-				{@render content.snippet(content.snippet_arg)}
+				{#if content.snippet}
+					{@render content.snippet(content.snippet_arg ?? '')}
+				{/if}
 			</div>
 		</div>
 	</div>

control/frontend/src/lib/components/TextInput.svelte

@@ -30,7 +30,7 @@
 		enter_function?: (() => void) | null;
 	} = $props();
 
-	let focus_bg = get_shifted_color(bg, 100);
+	let focus_bg = $derived(get_shifted_color(bg, 100));
 	let focused: boolean = $state(false);
 	let current_info = $state('');
 	let input_element: HTMLInputElement;

control/frontend/src/lib/ts/api_handler.ts

@@ -1,5 +1,6 @@
 import { notifications } from './stores/notification';
 import {
+	is_folder,
 	to_display_status,
 	type DisplayStatus,
 	type Inode,
@@ -95,6 +96,7 @@ export async function get_file_data(
 			size: Number(response_element.size),
 			thumbnail: null
 		};
+		if (is_folder(folder_element)) folder_element.size = 0;
 		folder_element_list.push({ folder_element, date_created: new Date(response_element.created) });
 	}
 	return folder_element_list;
@@ -202,8 +204,8 @@ async function request_display(
 		for (const display of possible_displays) {
 			const current_status = await update_display_status(display);
 			if (current_status === 'app_online') {
-				console.error(`No response from ${url}`)
-				notifications.push('error', "Netzwerk-Fehler bei API-Anfrage", `${url}`);
+				console.error(`No response from ${url}`);
+				notifications.push('error', 'Netzwerk-Fehler bei API-Anfrage', `${url}`);
 			}
 		}
 	}
@@ -225,9 +227,6 @@ async function request(
 ): Promise<RequestResponse> {
 	try {
 		const cache_buster = `${url.includes('?') ? '&' : '?'}=${Date.now()}`;
-		if (dev) {
-			console.debug('Sending request: ', url + cache_buster, 'with', options.body ?? 'none');
-		}
 		const response = await fetch(url + cache_buster, options);
 		if (response.ok || supress_error_handling_http_codes.includes(response.status)) {
 			const contentType = response.headers.get('content-type') || '';
@@ -238,9 +237,6 @@ async function request(
 			} else {
 				const json: Record<string, unknown> = await response.json();
 				request_response = { ok: response.ok, http_code: response.status, json: json };
-				if (dev) {
-					console.debug(request_response);
-				}
 			}
 			return request_response;
 		}

control/frontend/src/lib/ts/database.ts

@@ -23,8 +23,7 @@ export class FileDatabase extends Dexie {
         [display_id+file_primary_key],
         display_id,
         file_primary_key,
-        date_created,
-        loading_data
+        date_created
       `,
 			displays: `
         id,

control/frontend/src/lib/ts/file_transfer_handler.ts

@@ -1,5 +1,6 @@
+import { get, writable, type Writable } from 'svelte/store';
 import { db } from './database';
-import { get_display_by_id } from './stores/displays';
+import { get_display_by_id, run_on_all_selected_displays } from './stores/displays';
 import {
 	create_path_on_all_selected_displays,
 	get_folder_elements,
@@ -11,6 +12,7 @@ import { notifications } from './stores/notification';
 import { generate_thumbnail } from './stores/thumbnails';
 import {
 	get_file_primary_key,
+	is_folder,
 	type FileLoadingData,
 	type FileOnDisplay,
 	type FileTransferTask,
@@ -18,9 +20,19 @@ import {
 	type ShortDisplay
 } from './types';
 import { get_sanitized_file_url, get_uuid, make_valid_name } from './utils';
+import { open_file } from './api_handler';
+
+const START_LOADING_DATA = {
+	percentage: 0,
+	bytes_per_second: 0,
+	seconds_until_finish: -1
+};
+
+export const file_transfer_tasks: Writable<Record<string, FileTransferTask>> = writable<
+	Record<string, FileTransferTask>
+>({});
 
 let is_processing: boolean = false;
-const tasks: FileTransferTask[] = [];
 
 export async function add_upload(
 	file_list: FileList,
@@ -28,7 +40,6 @@ export async function add_upload(
 	current_file_path: string
 ) {
 	if (file_list.length === 0) return console.warn('Upload canceled: no selected files');
-
 	await create_path_on_all_selected_displays(current_file_path, selected_display_ids);
 
 	const used_file_names: string[] = await (
@@ -47,6 +58,10 @@ export async function add_upload(
 			thumbnail: null
 		};
 		const file_primary_key = get_file_primary_key(db_file);
+
+		if (Object.prototype.hasOwnProperty.call(file_transfer_tasks, file_primary_key))
+			return show_already_in_tasks_error(db_file, 'upload'); // file is already in task
+
 		await db.files.put(db_file);
 
 		const upload_task_promises = selected_display_ids.map(async (display_id) => {
@@ -56,17 +71,11 @@ export async function add_upload(
 			const db_file_on_display: FileOnDisplay = {
 				display_id,
 				file_primary_key,
-				date_created: new Date(),
-				loading_data: {
-					type: 'upload',
-					percentage: 0,
-					bytes_per_second: 0,
-					seconds_until_finish: -1
-				}
+				date_created: new Date()
 			};
 			await db.files_on_display.put(db_file_on_display);
 
-			return {
+			const new_task = {
 				data: {
 					type: 'upload' as const,
 					file
@@ -77,13 +86,16 @@ export async function add_upload(
 				},
 				path: current_file_path,
 				file_name: file_name,
-				file_primary_key,
+				loading_data: START_LOADING_DATA,
 				bytes_total: file.size
 			};
+			file_transfer_tasks.update((tasks) => ({
+				...tasks,
+				[file_primary_key]: new_task
+			}));
 		});
 
-		const upload_tasks = (await Promise.all(upload_task_promises)).filter((e) => !!e);
-		tasks.push(...upload_tasks);
+		await Promise.all(upload_task_promises);
 	}
 
 	await start_task_processing();
@@ -91,7 +103,8 @@ export async function add_upload(
 
 export async function add_sync_recursively(
 	selected_file_id: string,
-	selected_display_ids: string[]
+	selected_display_ids: string[],
+	open_file_afterwards: boolean = false
 ) {
 	const file_data = await find_file_data_on_active_selected_display(
 		selected_file_id,
@@ -99,7 +112,7 @@ export async function add_sync_recursively(
 	);
 	if (!file_data) return console.warn('Sync canceled: no file_data');
 
-	if (file_data.file.type === 'inode/directory') {
+	if (is_folder(file_data.file)) {
 		const new_path = file_data.file.path + file_data.file.name + '/';
 		const elements_in_folder = await get_folder_elements(new_path, selected_display_ids);
 		if (elements_in_folder.length === 0) {
@@ -113,42 +126,37 @@ export async function add_sync_recursively(
 	}
 
 	if (file_data.short_displays_without_file.length === 0) return; // file is present on all selected displays
+	if (Object.prototype.hasOwnProperty.call(file_transfer_tasks, selected_file_id))
+		return show_already_in_tasks_error(file_data.file, 'sync'); // file is already in task
 	await create_path_on_all_selected_displays(file_data.file.path, selected_display_ids);
 
-	tasks.push({
+	const new_task: FileTransferTask = {
 		data: {
 			type: 'sync',
-			destination_displays: file_data.short_displays_without_file
+			destination_display_data: file_data.short_displays_without_file.map((display) => ({
+				display,
+				loading_data: START_LOADING_DATA
+			})),
+			open_file_afterwards_on_display_ids: open_file_afterwards ? selected_display_ids : []
 		},
 		display: file_data.short_display_with_file,
 		path: file_data.file.path,
 		file_name: file_data.file.name,
-		file_primary_key: selected_file_id,
+		loading_data: START_LOADING_DATA,
 		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);
-	const new_file_loading_data: FileLoadingData = {
-		type: 'sync_upload',
-		percentage: 0,
-		bytes_per_second: 0,
-		seconds_until_finish: -1
 	};
+
+	file_transfer_tasks.update((tasks) => ({
+		...tasks,
+		[selected_file_id]: new_task
+	}));
+
+	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) => ({
 		display_id,
 		file_primary_key: selected_file_id,
-		date_created: new Date(),
-		loading_data: new_file_loading_data
+		date_created: new Date()
 	}));
-	console.log("TEST", new_fods)
 	await db.files_on_display.bulkPut(new_fods);
 
 	await start_task_processing();
@@ -222,15 +230,15 @@ function generate_valid_file_name(original_file_name: string, used_file_names: s
 	return name;
 }
 
-async function upload(task: FileTransferTask): Promise<void> {
+async function upload(file_primary_key: string, task: FileTransferTask): Promise<void> {
 	const task_data = task.data;
 	if (task_data.type !== 'upload' || !task_data.file)
 		return console.warn('Task cancelled: wrong task type:', task);
 
-	await upload_file_via_xhr(task, task.display, task_data.file);
+	await upload_file_via_xhr(file_primary_key, task, task_data.file);
 }
 
-export async function sync(task: FileTransferTask) {
+export async function sync(file_primary_key: string, task: FileTransferTask) {
 	if (task.data.type !== 'sync') return console.warn('Task cancelled: wrong task type:', task);
 
 	const hasOPFS =
@@ -238,7 +246,8 @@ export async function sync(task: FileTransferTask) {
 		'storage' in navigator &&
 		'getDirectory' in navigator.storage;
 	if (!hasOPFS) {
-		return show_error(
+		return show_general_error(
+			file_primary_key,
 			task,
 			'OPFS (navigator.storage.getDirectory) nicht verfügbar – bitte Chromium/Edge/Chrome nutzen.'
 		);
@@ -251,7 +260,7 @@ export async function sync(task: FileTransferTask) {
 		const url = `http://${task.display.ip}:1323/api${get_sanitized_file_url(task.path + task.file_name)}`;
 		const fetch_source = await fetch(url, { method: 'GET' });
 		if (!fetch_source.ok || !fetch_source.body)
-			return show_error(task, `HTTP ${fetch_source.status}`);
+			return show_general_error(file_primary_key, task, `HTTP ${fetch_source.status}`);
 
 		const dir = await navigator.storage.getDirectory();
 		const file_handle = await dir.getFileHandle(temp_name, { create: true });
@@ -264,25 +273,29 @@ export async function sync(task: FileTransferTask) {
 			if (done) break;
 			if (!value) continue;
 
-			await update_current_loading_data('sync_download', task, value.byteLength, start_time);
+			update_current_loading_data(file_primary_key, value.byteLength, start_time);
 			await writable.write(value);
 		}
 		await writable.close();
 
-		await db.files_on_display.update([task.display.id, task.file_primary_key], {
-			loading_data: null
-		});
+		finish_loading_data(file_primary_key);
 
 		// 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);
+		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 dir.removeEntry(temp_name);
+
+		// open file, if required
+		if (task.data.open_file_afterwards_on_display_ids.length !== 0) {
+			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);
+		}
 	} catch (e) {
-		show_error(task, String(e));
+		show_general_error(file_primary_key, task, String(e));
 	}
 }
 
@@ -291,8 +304,7 @@ export async function download_file(selected_file_id: string, selected_display_i
 		selected_file_id,
 		selected_display_ids
 	);
-	if (!file_data || file_data.file.type === 'inode/directory')
-		return console.warn('Download cancelled: is folder');
+	if (!file_data || is_folder(file_data.file)) return console.warn('Download cancelled: is folder');
 
 	try {
 		const url = `http://${file_data.short_display_with_file.ip}:1323/api${get_sanitized_file_url(file_data.file.path + file_data.file.name)}`;
@@ -315,56 +327,62 @@ export async function download_file(selected_file_id: string, selected_display_i
 
 async function start_task_processing() {
 	if (!is_processing) {
-		is_processing = tasks.length !== 0;
+		is_processing = Object.keys(get(file_transfer_tasks)).length !== 0;
 		await start_task_loop();
 	}
 }
 
 async function start_task_loop() {
-	while (tasks.length > 0) {
-		const current_task = tasks[0];
+	while (Object.keys(get(file_transfer_tasks)).length > 0) {
+		const tasks = get(file_transfer_tasks);
+		const current_file_id = Object.keys(tasks)[0];
+		const current_task = tasks[current_file_id];
 		if (current_task.data.type === 'upload') {
-			await upload(current_task);
+			await upload(current_file_id, current_task);
 		} else if (current_task.data.type === 'sync') {
-			await sync(current_task);
+			await sync(current_file_id, current_task);
 		}
-		tasks.shift(); // Remove current_task from tasks
+
+		file_transfer_tasks.update((all_tasks) => {
+			const next = { ...all_tasks };
+			delete next[current_file_id];
+			return next;
+		});
 	}
 	is_processing = false;
 }
 
 async function upload_file_via_xhr(
+	file_primary_key: string,
 	task: FileTransferTask,
-	current_short_display: ShortDisplay,
-	current_file: File
+	current_file: File,
+	destination_short_display: ShortDisplay | null = null
 ) {
 	const start_time = new Date();
-	const loading_type = task.data.type === 'upload' ? 'upload' : 'sync_upload';
 
 	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)}`,
+			`http://${destination_short_display ? destination_short_display.ip : task.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(
-					loading_type,
-					task,
+				update_current_loading_data(
+					file_primary_key,
 					e.loaded,
 					start_time,
-					current_short_display.id
+					destination_short_display ? destination_short_display.id : null
 				);
 			};
 			apply();
 		};
 
 		xhr.onerror = async (e: ProgressEvent) => {
-			await show_error(task, e);
+			await show_general_error(file_primary_key, task, e);
 			resolve();
 		};
 
@@ -372,21 +390,21 @@ async function upload_file_via_xhr(
 			if (xhr.readyState === 4) {
 				if (xhr.status == 200) {
 					// set loading_data to 100%
-					await db.files_on_display.update([current_short_display.id, task.file_primary_key], {
-						date_created: new Date(),
-						loading_data: null
-					});
+					finish_loading_data(
+						file_primary_key,
+						destination_short_display ? destination_short_display.id : null
+					);
 					// Generate Thumbnail if not done already
 					setTimeout(async () => {
 						const inode_element: Inode | undefined = await db.files.get(
-							JSON.parse(task.file_primary_key) as [string, string, number, string]
+							JSON.parse(file_primary_key) as [string, string, number, string]
 						);
 						if (!!inode_element && inode_element.thumbnail === null) {
 							await generate_thumbnail(task.display.ip, task.path, inode_element);
 						}
 					}, 10);
 				} else {
-					await show_error(task, `HTTP ${xhr.status}`);
+					await show_general_error(file_primary_key, task, `HTTP ${xhr.status}`);
 				}
 				resolve();
 			}
@@ -396,30 +414,78 @@ async function upload_file_via_xhr(
 	});
 }
 
-async function update_current_loading_data(
-	type: FileLoadingData['type'],
-	task: FileTransferTask,
+function finish_loading_data(
+	file_primary_key: string,
+	destination_display_id: string | null = null
+) {
+	file_transfer_tasks.update((tasks) => {
+		const task = tasks[file_primary_key];
+		const current_loading_data = {
+			percentage: 100,
+			bytes_per_second: 0,
+			seconds_until_finish: 0
+		};
+
+		return {
+			...tasks,
+			[file_primary_key]: get_updated_task(current_loading_data, destination_display_id, task)
+		};
+	});
+}
+
+function update_current_loading_data(
+	file_primary_key: string,
 	current_bytes: number,
 	start_time: Date,
-	other_display_id: string | null = null
+	destination_display_id: string | null = null
 ) {
-	const current_percentage = Math.min(
-		task.bytes_total > 0 ? Math.round((current_bytes / task.bytes_total) * 100) : 1,
-		99
-	); // calculate percantage, but maximum value is 99%
-	const prognosed_data = get_prognosed_data(start_time, current_bytes, task.bytes_total);
+	file_transfer_tasks.update((tasks) => {
+		const task = tasks[file_primary_key];
+		if (!task) return tasks;
 
-	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
+		const current_percentage = Math.min(
+			task.bytes_total > 0 ? Math.round((current_bytes / task.bytes_total) * 100) : 1,
+			99
+		);
+
+		const prognosed_data = get_prognosed_data(start_time, current_bytes, task.bytes_total);
+
+		const current_loading_data: FileLoadingData = {
+			percentage: current_percentage,
+			bytes_per_second: prognosed_data.bytes_per_second,
+			seconds_until_finish: prognosed_data.seconds_until_finish
+		};
+
+		return {
+			...tasks,
+			[file_primary_key]: get_updated_task(current_loading_data, destination_display_id, task)
+		};
+	});
+}
+
+function get_updated_task(
+	current_loading_data: FileLoadingData,
+	destination_display_id: string | null,
+	task: FileTransferTask
+): FileTransferTask {
+	if (destination_display_id && task.data.type === 'sync') {
+		const updatedDestinations = task.data.destination_display_data.map((dd) =>
+			dd.display.id === destination_display_id ? { ...dd, loading_data: current_loading_data } : dd
+		);
+
+		return {
+			...task,
+			data: {
+				...task.data,
+				destination_display_data: updatedDestinations
 			}
-		}
-	);
+		};
+	} else {
+		return {
+			...task,
+			loading_data: current_loading_data
+		};
+	}
 }
 
 function get_prognosed_data(
@@ -434,7 +500,11 @@ function get_prognosed_data(
 	return { bytes_per_second, seconds_until_finish };
 }
 
-async function show_error(task: FileTransferTask, error: ProgressEvent | string) {
+async function show_general_error(
+	file_primary_key: string,
+	task: FileTransferTask,
+	error: ProgressEvent | string
+) {
 	const task_data = task.data;
 	console.error('Error in File-Transfer-Handler:', error, task);
 	notifications.push(
@@ -443,12 +513,20 @@ async function show_error(task: FileTransferTask, error: ProgressEvent | string)
 		`Datei: "${task.file_name}", Display-IP: ${task.display.ip}\nFehler: ${error}`
 	);
 	if (task_data.type === 'upload') {
-		await remove_file_from_display_recusively(task.display.id, task.file_primary_key);
+		await remove_file_from_display_recusively(task.display.id, file_primary_key);
 		await remove_all_files_without_display();
 	} else if (task_data.type === 'sync') {
-		for (const display_id of task_data.destination_displays.map((e) => e.id)) {
-			await remove_file_from_display_recusively(display_id, task.file_primary_key);
+		for (const display_id of task_data.destination_display_data.map((e) => e.display.id)) {
+			await remove_file_from_display_recusively(display_id, file_primary_key);
 		}
 		await remove_all_files_without_display();
 	}
 }
+
+function show_already_in_tasks_error(file: Inode, process: 'upload' | 'sync') {
+	notifications.push(
+		'error',
+		`Datei '${file.name}' konnte nicht ${process === 'upload' ? 'hochgeladen' : 'synchronisiert'} werden`,
+		`Eine Datei kann nicht in mehreren file_transfer_tasks enthalten sein. Bitte erneut versuchen, wenn die aktuellen Aktionen fertiggestellt wurden`
+	);
+}

control/frontend/src/lib/ts/stores/displays.ts

@@ -22,8 +22,12 @@ export const online_displays_sub = liveQuery(() =>
 	db.displays.where('status').equals('app_online').toArray()
 ).subscribe((value) => {
 	online_displays.set(value);
+	const current_online_display_ids = value.map((d) => d.id);
+	selected_online_display_ids.set(get(selected_display_ids).filter((id) => current_online_display_ids.includes(id)));
 });
 
+export const selected_online_display_ids: Writable<string[]> = writable<string[]>([]);
+
 export const local_displays: Writable<DisplayIdGroup[]> = writable<DisplayIdGroup[]>([]);
 
 export async function is_display_name_taken(name: string): Promise<boolean> {
@@ -193,17 +197,18 @@ export function screenshot_loop(display_id: string) {
 export async function run_on_all_selected_displays(
 	run_function: (display: Display) => void | Promise<void>,
 	update_screenshot_afterwards: boolean = true,
-	ignore_offline: boolean = true
+	display_ids: string[] | null = null
 ) {
+	if (!display_ids) display_ids = get(selected_online_display_ids);
 	const maybe_displays: (Display | null)[] = await Promise.all(
 		// fails when only a single promis fails
-		get(selected_display_ids).map(async (id) => await get_display_by_id(id))
+		display_ids.map(async (id) => await get_display_by_id(id))
 	);
 	const displays: Display[] = maybe_displays.filter((d): d is Display => d !== null);
 
-	Promise.all(
+	await Promise.all(
 		displays.map(async (display) => {
-			if (!display || (ignore_offline && display.status === 'host_offline')) return;
+			if (!display) return;
 			await run_function(display);
 			if (update_screenshot_afterwards) {
 				screenshot_loop(display.id);
@@ -269,15 +274,6 @@ export function set_new_display_order(display_id_group_id: string, new_data: Dis
 	});
 }
 
-export function no_active_display_selected(
-	selected_display_ids: string[],
-	online_displays: Display[]
-) {
-	const online_and_selected_displays = online_displays.filter((d) =>
-		selected_display_ids.includes(d.id)
-	);
-	return online_and_selected_displays.length === 0;
-}
 
 if (dev) {
 	setTimeout(add_testing_displays, 0);

control/frontend/src/lib/ts/stores/files.ts

@@ -1,16 +1,18 @@
 import { get, writable, type Writable } from 'svelte/store';
 import {
 	get_file_primary_key,
+	is_folder,
 	type Display,
 	type FileOnDisplay,
 	type Inode,
 	type TreeElement
 } from '../types';
-import { get_display_by_id } from './displays';
+import { get_display_by_id, selected_online_display_ids } from './displays';
 import { is_selected, select, selected_display_ids, selected_file_ids } from './select';
 import { create_path, get_file_data, get_file_tree_data } from '../api_handler';
 import { deactivate_old_thumbnail_urls, generate_thumbnail } from './thumbnails';
 import { db } from '../database';
+import { file_transfer_tasks } from '../file_transfer_handler';
 
 export const current_file_path: Writable<string> = writable<string>('/');
 
@@ -27,12 +29,16 @@ export async function change_file_path(new_path: string) {
 	const displays = await db.displays.toArray();
 
 	for (const display of displays) {
-		const changed_paths = await get_changed_directory_paths(display, new_path);
-		if (!changed_paths) continue;
-		console.debug('Update file system from', display.name, ':', changed_paths);
-		for (const path of changed_paths) {
-			await update_folder_elements_recursively(display, path);
-		}
+		await update_changed_directories(display, new_path);
+	}
+}
+
+async function update_changed_directories(display: Display, path: string = '/') {
+	const changed_paths = await get_changed_directory_paths(display, path);
+	if (!changed_paths) return;
+	console.debug('Update file system from', display.name, ':', changed_paths);
+	for (const path of changed_paths) {
+		await update_folder_elements_recursively(display, path);
 	}
 }
 
@@ -58,7 +64,7 @@ export async function remove_file_from_display_recusively(
 
 	const inode_element = await get_file_by_id(found.file_primary_key);
 	if (!inode_element) return;
-	if (inode_element.type === 'inode/directory') {
+	if (is_folder(inode_element)) {
 		const path_inside_folder = inode_element.path + inode_element.name + `/`;
 		const primary_file_keys_in_folder = (
 			await db.files.where('path').equals(path_inside_folder).toArray()
@@ -92,7 +98,10 @@ export async function update_current_folder_on_selected_displays() {
 	});
 	const current_path = get(current_file_path);
 
-	for (const display of await db.displays.where('id').anyOf(get(selected_display_ids)).toArray()) {
+	for (const display of await db.displays
+		.where('id')
+		.anyOf(get(selected_online_display_ids))
+		.toArray()) {
 		await update_folder_elements_recursively(display, current_path);
 	}
 }
@@ -105,13 +114,19 @@ export async function get_missing_colliding_display_ids(
 
 	const colliding: string[] = [];
 	const colliding_files = await db.files
-		.where('[path+name]')
-		.equals([file.path, file.name])
-		.filter((e) => e.size !== file.size || e.type !== file.type)
+		.where('name')
+		.equals(file.name)
+		.filter((e) => e.path === file.path && e.size !== file.size)
 		.toArray();
 	for (const colliding_file of colliding_files) {
 		colliding.push(
-			...(await get_display_ids_where_file_is_missing(colliding_file, selected_display_ids))
+			...(
+				await db.files_on_display
+					.where('file_primary_key')
+					.equals(get_file_primary_key(colliding_file))
+					.filter((fod) => selected_display_ids.includes(fod.display_id))
+					.toArray()
+			).map((fod) => fod.display_id)
 		);
 	}
 
@@ -148,7 +163,7 @@ export async function get_displays_where_path_not_exists(
 	const folders_of_current_path = await db.files
 		.where('name')
 		.equals(last_path_part)
-		.filter((inode) => inode.path === path_without_last_part && inode.type === 'inode/directory')
+		.filter((inode) => inode.path === path_without_last_part && is_folder(inode))
 		.first();
 	if (!folders_of_current_path) return [];
 	const folder_primary_key = get_file_primary_key(folders_of_current_path);
@@ -231,9 +246,20 @@ export async function update_folder_elements_recursively(
 	const new_folder_elements = await get_file_data(display.ip, file_path);
 	if (!new_folder_elements) return;
 
+	const loading_file_ids = Object.keys(get(file_transfer_tasks));
+	const loading_file_keys_without_size = (
+		await db.files.bulkGet(
+			loading_file_ids.map((string_id) => JSON.parse(string_id) as [string, string, number, string])
+		)
+	)
+		.filter((f) => !!f)
+		.map((f) => JSON.stringify([f.path, f.name, f.type]));
+
+	// Filter new files, which aren't currently uploading
 	const existing_files_on_display_in_path: FileOnDisplay[] = await db.files_on_display
 		.where('display_id')
 		.equals(display.id)
+		.filter((f) => !loading_file_ids.includes(f.file_primary_key))
 		.toArray();
 	const existing_file_keys_on_display_in_path: [string, string, number, string][] =
 		existing_files_on_display_in_path.map(
@@ -245,17 +271,14 @@ export async function update_folder_elements_recursively(
 		.filter((e) => e.path === file_path)
 		.toArray();
 
-	const existing_files_with_loading_state: { folder_element: Inode; is_loading: boolean }[] =
-		existing_files.map((folder_element) => ({
-			folder_element,
-			is_loading: !!existing_files_on_display_in_path.find(
-				(e) => e.file_primary_key === get_file_primary_key(folder_element)
-			)?.loading_data
-		}));
+	const diff = get_folder_elements_difference(existing_files, new_folder_elements);
 
-	const diff = get_folder_elements_difference(
-		existing_files_with_loading_state,
-		new_folder_elements
+	// Filter new files, which aren't currently uploading -> don't compare size
+	diff.new = diff.new.filter(
+		(e) =>
+			!loading_file_keys_without_size.includes(
+				JSON.stringify([e.folder_element.path, e.folder_element.name, e.folder_element.type])
+			)
 	);
 
 	if (diff.new.length > 0) {
@@ -265,12 +288,11 @@ export async function update_folder_elements_recursively(
 			const file_on_display: FileOnDisplay = {
 				display_id: display.id,
 				file_primary_key: get_file_primary_key(new_element.folder_element),
-				loading_data: null,
 				date_created: new_element.date_created
 			};
 			await db.files_on_display.put(file_on_display);
 
-			if (new_element.folder_element.type === 'inode/directory') {
+			if (is_folder(new_element.folder_element)) {
 				await update_folder_elements_recursively(
 					display,
 					file_path + new_element.folder_element.name + '/'
@@ -295,15 +317,13 @@ export async function update_folder_elements_recursively(
 }
 
 function get_folder_elements_difference(
-	old_elements: { folder_element: Inode; is_loading: boolean }[],
+	old_elements: Inode[],
 	new_elements: { folder_element: Inode; date_created: Date }[]
 ): { deleted: Inode[]; new: { folder_element: Inode; date_created: Date }[] } {
-	const old_keys = new Set(old_elements.map((e) => get_file_primary_key(e.folder_element)));
+	const old_keys = new Set(old_elements.map((e) => get_file_primary_key(e)));
 	const new_keys = new Set(new_elements.map((e) => get_file_primary_key(e.folder_element)));
 
-	const only_in_old = old_elements
-		.filter((e) => !new_keys.has(get_file_primary_key(e.folder_element)) && !e.is_loading)
-		.map((e) => e.folder_element);
+	const only_in_old = old_elements.filter((e) => !new_keys.has(get_file_primary_key(e)));
 	const only_in_new = new_elements.filter(
 		(e) => !old_keys.has(get_file_primary_key(e.folder_element))
 	);
@@ -328,8 +348,8 @@ export async function get_folder_elements(
 
 function sort_files(files: Inode[]) {
 	files.sort((a, b) => {
-		const isDirA = a.type === 'inode/directory';
-		const isDirB = b.type === 'inode/directory';
+		const isDirA = is_folder(a);
+		const isDirB = is_folder(b);
 
 		// Ordner zuerst
 		if (isDirA && !isDirB) return -1;
@@ -364,7 +384,7 @@ export async function get_file_by_id(
 export async function run_for_selected_files_on_selected_displays(
 	action: (ip: string, file_names: string[]) => Promise<void>
 ): Promise<void> {
-	for (const display_id of get(selected_display_ids)) {
+	for (const display_id of get(selected_online_display_ids)) {
 		const file_key_strings_on_display: string[] = (
 			await db.files_on_display.where('display_id').equals(display_id).toArray()
 		).map((e) => e.file_primary_key);
@@ -388,15 +408,6 @@ export async function run_for_selected_files_on_selected_displays(
 	}
 }
 
-export async function create_folder_on_all_selected_displays(
-	folder_name: string,
-	path: string,
-	selected_display_ids: string[]
-): Promise<void> {
-	const path_with_folder_name = (path += folder_name + '/');
-	await create_path_on_all_selected_displays(path_with_folder_name, selected_display_ids);
-}
-
 export async function create_path_on_all_selected_displays(
 	path: string,
 	selected_display_ids: string[]
@@ -411,12 +422,7 @@ export async function create_path_on_all_selected_displays(
 	}
 	setTimeout(async () => {
 		for (const display of displays_without_path) {
-			const changed_paths = await get_changed_directory_paths(display, '/');
-			if (!changed_paths) continue;
-			console.debug('Update file system from', display.name, ':', changed_paths);
-			for (const path of changed_paths) {
-				await update_folder_elements_recursively(display, path);
-			}
+			await update_changed_directories(display);
 		}
 	}, 0);
 }

control/frontend/src/lib/ts/stores/select.ts

@@ -1,4 +1,5 @@
-import { writable, type Writable } from 'svelte/store';
+import { get, writable, type Writable } from 'svelte/store';
+import { online_displays, selected_online_display_ids } from './displays';
 
 export const selected_file_ids: Writable<string[]> = writable<string[]>([]); // JSON.stringify([string, string, number, string])
 export const selected_display_ids: Writable<string[]> = writable<string[]>([]);
@@ -19,6 +20,11 @@ export function select(
 		}
 		return all_ids;
 	});
+	
+	if (selected_ids === selected_display_ids) {
+		const current_online_display_ids = get(online_displays).map((d) => d.id);
+		selected_online_display_ids.set(get(selected_display_ids).filter((id) => current_online_display_ids.includes(id)));
+	}
 }
 
 export function is_selected(id: string, selected_ids: string[]): boolean {

control/frontend/src/lib/ts/stores/ui_behavior.ts

@@ -1,5 +1,6 @@
 import { writable, type Writable } from 'svelte/store';
 import type { NumberSetting } from '../types';
+import { dev } from '$app/environment';
 
 export const dnd_flip_duration_ms = 300;
 
@@ -33,7 +34,7 @@ export const preview_settings: Writable<{
 	retry_seconds: NumberSetting;
 	retry_count: NumberSetting;
 }>({
-	mode: 'normal',
+	mode: dev ? 'never' : 'normal',
 	retry_seconds: {
 		max: 10,
 		min: 0.5,

control/frontend/src/lib/ts/types.ts

@@ -33,7 +33,7 @@ export type FileTransferTask = {
 	display: ShortDisplay;
 	path: string;
 	file_name: string;
-	file_primary_key: string;
+	loading_data: FileLoadingData;
 	bytes_total: number; // if type === 'sync' -> bytes_total = file_size * 2 (1x download + 1x upload)
 };
 
@@ -44,9 +44,19 @@ export type FileTransferTaskData =
 	  }
 	| {
 			type: 'sync';
-			destination_displays: ShortDisplay[];
+			destination_display_data: {
+				display: ShortDisplay;
+				loading_data: FileLoadingData;
+			}[];
+			open_file_afterwards_on_display_ids: string[];
 	  };
 
+export type FileLoadingData = {
+	percentage: number;
+	bytes_per_second: number;
+	seconds_until_finish: number;
+};
+
 export type ShortDisplay = {
 	id: string;
 	ip: string;
@@ -56,21 +66,6 @@ export type FileOnDisplay = {
 	display_id: string;
 	file_primary_key: string; // JSON.stringify([string, string, number, string])
 	date_created: Date;
-	loading_data: FileLoadingData | null; // null if not loading
-};
-
-export type FileLoadingData = {
-	type: 'upload' | 'download' | 'sync_download' | 'sync_upload';
-	percentage: number;
-	bytes_per_second: number;
-	seconds_until_finish: number;
-};
-
-export type CompleteFileLoadingData = {
-	is_loading: boolean;
-	total_percentage: number;
-	total_seconds_until_finish: number;
-	display_data: { loading_data: FileLoadingData; display_name: string }[];
 };
 
 export type Inode = {
@@ -132,21 +127,20 @@ export type MenuOption = {
 
 export type PopupContent = {
 	open: boolean;
-	snippet: Snippet<[string]> | null;
-	snippet_arg?: string;
+	snippet: Snippet<[any]> | Snippet<[]> | Snippet | null | any;
+	snippet_arg?: any;
 	title?: string;
 	title_class?: string;
 	title_icon?: typeof X | null;
 	window_class?: string;
-	closable?: boolean;
 };
 
 export type NumberSetting = {
-	max: number,
-	min: number,
-	now: number,
-	step: number
-}
+	max: number;
+	min: number;
+	now: number;
+	step: number;
+};
 
 export type DisplayStatus = 'host_offline' | 'app_offline' | 'app_online' | null;
 
@@ -155,3 +149,7 @@ export function to_display_status(value: string): DisplayStatus {
 		? (value as DisplayStatus)
 		: null;
 }
+
+export function is_folder(inode: Inode) {
+	return inode.type === 'inode/directory';
+}

control/frontend/src/lib/ts/utils.ts

@@ -55,7 +55,7 @@ export function get_uuid(): string {
 
 export function get_file_size_display_string(size: number, toFixed: number | null = null): string {
 	if (size < 0)
-		return toFixed === null ? 'versch.' : 'Verschiedene Größen auf verschiedenen Bildschirmen';
+		return toFixed === null ? '...' : 'Größe wird aktuell berechnet';
 	if (size === 0) return '0 B';
 
 	const k = 1024;
@@ -113,3 +113,12 @@ export function get_sanitized_file_url(file_path: string, is_preview = false) {
 
 	return `/file/${is_preview ? 'preview/' : ''}${[...pathSegments].join('/')}`;
 }
+
+
+let keyboard_queue = Promise.resolve();
+
+export function add_to_keyboard_queue(task: () => Promise<void>) {
+	keyboard_queue = keyboard_queue.then(task).catch((err) => {
+		console.error('Error in input queue:', err);
+	});
+}

control/frontend/src/routes/+page.svelte

@@ -46,8 +46,7 @@
 		open: false,
 		snippet: null,
 		title: '',
-		title_class: '!text-xl',
-		closable: true
+		title_class: '!text-xl'
 	});
 	let remove_display_name = $state('');
 
@@ -121,8 +120,7 @@
 			title: 'Neuen Bildschirm Hinzufügen',
 			title_icon: Monitor,
 			title_class: '!text-xl',
-			window_class: 'w-3xl',
-			closable: true
+			window_class: 'w-3xl'
 		};
 	};
 
@@ -133,8 +131,7 @@
 			title: 'Einstellungen',
 			title_icon: Settings,
 			title_class: '!text-xl',
-			window_class: 'w-3xl',
-			closable: true
+			window_class: 'w-3xl'
 		};
 	};
 
@@ -146,8 +143,7 @@
 			snippet_arg: display_id,
 			title: 'Bildschirm wirklich löschen?',
 			title_class: 'text-red-400 !text-xl',
-			title_icon: Trash2,
-			closable: true
+			title_icon: Trash2
 		};
 	};
 
@@ -165,8 +161,7 @@
 			snippet_arg: display_id,
 			title: 'Bildschirm bearbeiten',
 			title_icon: Monitor,
-			title_class: '!text-xl',
-			closable: true
+			title_class: '!text-xl'
 		};
 	};
 
@@ -178,8 +173,7 @@
 			snippet: about_popup,
 			title: 'Über PLG MuDiCS',
 			title_icon: Info,
-			title_class: '!text-xl',
-			closable: true
+			title_class: '!text-xl'
 		};
 	};
 </script>
@@ -188,8 +182,8 @@
 	<div class="px-2">
 		<h3 class="text-lg font-bold mt-4">Entwickler</h3>
 		<p>
-			<a target="_blank" class="link" href="https://github.com/programmer-44">E44</a>
-			<a target="_blank" class="link" href="https://codeberg.org/2mal3">2mal3</a>,
+			<a target="_blank" class="link" href="https://github.com/programmer-44">E44</a>,
+			<a target="_blank" class="link" href="https://codeberg.org/2mal3">2mal3</a>
 		</p>
 
 		<h3 class="text-lg font-bold mt-4">Lizenz</h3>

control/frontend/src/routes/ControlView.svelte

@@ -25,15 +25,15 @@
 	} from '$lib/ts/api_handler';
 	import {
 		get_display_by_id,
-		no_active_display_selected,
-		online_displays,
-		run_on_all_selected_displays
+		run_on_all_selected_displays,
+		selected_online_display_ids
 	} from '$lib/ts/stores/displays';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import TipTapInput from './TipTapInput.svelte';
 	import { db } from '$lib/ts/database';
 	import { liveQuery, type Observable } from 'dexie';
 	import TextInput from '$lib/components/TextInput.svelte';
+	import { add_to_keyboard_queue } from '$lib/ts/utils';
 
 	let all_display_states: Observable<'on' | 'off' | 'mixed'> | undefined = $state();
 	$effect(() => {
@@ -45,9 +45,10 @@
 		open: false,
 		snippet: null,
 		title: '',
-		closable: true
 	});
 
+	let current_text = $state('');
+
 	function popup_close_function() {
 		popup_content.open = false;
 	}
@@ -58,7 +59,7 @@
 			snippet: send_keys_popup,
 			title: 'Tastatur-Eingaben Senden',
 			title_icon: Keyboard,
-			closable: true
+			window_class: 'h-full'
 		};
 	};
 
@@ -68,7 +69,6 @@
 			snippet: text_popup,
 			title: 'Text Anzeigen',
 			title_icon: TextAlignStart,
-			closable: true,
 			window_class: 'size-full'
 		};
 	};
@@ -80,7 +80,6 @@
 			title: 'Webseite Anzeigen',
 			window_class: 'w-xl',
 			title_icon: Globe,
-			closable: true
 		};
 	};
 
@@ -104,7 +103,6 @@
 			snippet: ask_shutdown_popup,
 			title: 'Bildschirm Herunterfahren',
 			title_icon: PowerOff,
-			closable: true
 		};
 	}
 
@@ -124,21 +122,12 @@
 				db.displays.update(d.id, { status: 'app_offline' });
 			},
 			false,
-			false
+			$selected_display_ids
 		);
 	}
 
-	async function send_single_key_press(key: string) {
-		await run_on_all_selected_displays((d) =>
-			send_keyboard_input(d.ip, [{ key, action: 'press' }])
-		);
-		setTimeout(
-			async () =>
-				await run_on_all_selected_displays((d) =>
-					send_keyboard_input(d.ip, [{ key, action: 'release' }])
-				),
-			10
-		);
+	async function send_single_key_press(key: string, action: 'press' | 'release') {
+		await run_on_all_selected_displays((d) => send_keyboard_input(d.ip, [{ key, action }]));
 	}
 	let website_url = $state('');
 	let website_url_valid = $state(false);
@@ -157,7 +146,6 @@
 		await run_on_all_selected_displays((d) =>
 			show_html(d.ip, `<iframe src="${website_url}"></iframe>`)
 		);
-		website_url = '';
 	}
 </script>
 
@@ -197,18 +185,11 @@
 {/snippet}
 
 {#snippet send_keys_popup()}
-	<div class="overflow-hidden flex flex-col gap-2">
-		<div>
-			<KeyInput />
-		</div>
-		<div class="flex flex-row justify-end gap-2">
-			<Button className="px-4 font-bold" click_function={popup_close_function}>Fertig</Button>
-		</div>
-	</div>
+	<KeyInput {popup_close_function}/>
 {/snippet}
 
 {#snippet text_popup()}
-	<TipTapInput />
+	<TipTapInput bind:text={current_text}/>
 {/snippet}
 
 <div class="grid grid-rows-[2.5rem_auto] bg-stone-800 rounded-2xl min-w-0">
@@ -219,40 +200,55 @@
 		<div class="flex flex-row justify-between gap-2">
 			<div class="flex flex-col gap-2">
 				<div class="flex flex-row gap-2 w-75 justify-normal">
-					<Button
-						title="Vorherige Folie (Pfeil nach Links)"
-						className="px-9"
-						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
-						click_function={async () => {
-							await send_single_key_press('VK_LEFT');
-						}}><ArrowBigLeft /></Button
+					<button
+						title="Vorherige Folie (Pfeil nach Links) [gedrückt halten möglich]"
+						class="px-9 bg-stone-700 {$selected_online_display_ids.length === 0
+							? 'text-stone-500 cursor-not-allowed'
+							: 'hover:bg-stone-600 active:bg-stone-500 cursor-pointer'} py-2 rounded-xl flex justify-center items-center transition-colors duration-200"
+						disabled={$selected_online_display_ids.length === 0}
+						onmousedown={() => {
+							add_to_keyboard_queue(async () => await send_single_key_press('ArrowLeft', 'press'));
+						}}
+						onmouseup={() => {
+							add_to_keyboard_queue(async () => await send_single_key_press('ArrowLeft', 'release'));
+						}}
 					>
-					<Button
-						title="Nächste Folie (Pfeil nach Rechts)"
-						className="px-9"
-						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
-						click_function={async () => {
-							await send_single_key_press('VK_RIGHT');
-						}}><ArrowBigRight /></Button
+						<ArrowBigLeft />
+					</button>
+
+					<button
+						title="Vorherige Folie (Pfeil nach Links) [gedrückt halten möglich]"
+						class="px-9 bg-stone-700 {$selected_online_display_ids.length === 0
+							? 'text-stone-500 cursor-not-allowed'
+							: 'hover:bg-stone-600 active:bg-stone-500 cursor-pointer'} py-2 rounded-xl flex justify-center items-center transition-colors duration-200"
+						disabled={$selected_online_display_ids.length === 0}
+						onmousedown={() => {
+							add_to_keyboard_queue(async () => await send_single_key_press('ArrowRight', 'press'));
+						}}
+						onmouseup={() => {
+							add_to_keyboard_queue(async () => await send_single_key_press('ArrowRight', 'release'));
+						}}
 					>
+						<ArrowBigRight />
+					</button>
 				</div>
 
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
 					click_function={show_text_popup}
-					disabled={no_active_display_selected($selected_display_ids, $online_displays)}
+					disabled={$selected_online_display_ids.length === 0}
 					><TextAlignStart /> Text Anzeigen</Button
 				>
 
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
-					disabled={no_active_display_selected($selected_display_ids, $online_displays)}
+					disabled={$selected_online_display_ids.length === 0}
 					click_function={show_website_popup}><Globe /> Webseite Anzeigen</Button
 				>
 
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
-					disabled={no_active_display_selected($selected_display_ids, $online_displays)}
+					disabled={$selected_online_display_ids.length === 0}
 					click_function={async () => {
 						await run_on_all_selected_displays((d) => show_blackscreen(d.ip));
 					}}><Presentation />Blackout</Button
@@ -267,7 +263,7 @@
 
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
-					disabled={no_active_display_selected($selected_display_ids, $online_displays)}
+					disabled={$selected_online_display_ids.length === 0}
 					click_function={show_send_keys_popup}><Keyboard /> Tastatur-Eingaben Senden</Button
 				>
 			</div>
@@ -276,7 +272,7 @@
 					<Button
 						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
 						disabled={$all_display_states === 'on' ||
-							no_active_display_selected($selected_display_ids, $online_displays)}
+							$selected_display_ids.length === 0}
 						click_function={startup_action}
 					>
 						<Power /> Bildschirm Hochfahren
@@ -285,7 +281,7 @@
 					<Button
 						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
 						disabled={$all_display_states === 'off' ||
-							no_active_display_selected($selected_display_ids, $online_displays)}
+							$selected_online_display_ids.length === 0}
 						click_function={ask_shutdown}
 					>
 						<PowerOff /> Bildschirm Herunterfahren</Button

control/frontend/src/routes/FileView.svelte

@@ -14,7 +14,7 @@
 	import { change_height, current_height, next_height_step_size } from '$lib/ts/stores/ui_behavior';
 	import Button from '$lib/components/Button.svelte';
 	import PathBar from './PathBar.svelte';
-	import { selected_display_ids, selected_file_ids } from '$lib/ts/stores/select';
+	import { select, selected_display_ids, selected_file_ids } from '$lib/ts/stores/select';
 	import {
 		current_file_path,
 		get_folder_elements,
@@ -22,12 +22,12 @@
 		run_for_selected_files_on_selected_displays,
 		update_current_folder_on_selected_displays,
 		get_displays_where_path_not_exists,
-		create_folder_on_all_selected_displays
+		create_path_on_all_selected_displays
 	} from '$lib/ts/stores/files';
 	import { slide } from 'svelte/transition';
 	import InodeElement from '../lib/components/InodeElement.svelte';
 	import PopUp from '$lib/components/PopUp.svelte';
-	import { get_file_primary_key, type Inode, type PopupContent } from '$lib/ts/types';
+	import { get_file_primary_key, is_folder, type Inode, type PopupContent } from '$lib/ts/types';
 	import TextInput from '$lib/components/TextInput.svelte';
 	import {
 		first_letter_is_valid,
@@ -38,7 +38,7 @@
 	import HighlightedText from '$lib/components/HighlightedText.svelte';
 	import { liveQuery, type Observable } from 'dexie';
 	import { download_file, add_upload, add_sync_recursively } from '$lib/ts/file_transfer_handler';
-	import { no_active_display_selected, online_displays } from '$lib/ts/stores/displays';
+	import { selected_online_display_ids } from '$lib/ts/stores/displays';
 
 	let current_name: string = $state('');
 	let current_valid: boolean = $state(false);
@@ -52,22 +52,23 @@
 	let current_folder_elements: Observable<Inode[]> | undefined = $state();
 	$effect(() => {
 		const path = $current_file_path,
-			display_ids = $selected_display_ids;
+			display_ids = $selected_online_display_ids;
 		current_folder_elements = liveQuery(() => get_folder_elements(path, display_ids));
 	});
 	let one_file_selected: Observable<boolean> | undefined = $state();
 	$effect(() => {
 		const s = $selected_file_ids;
 		one_file_selected = liveQuery(async () => {
-			return s.length === 1 && (await get_file_by_id(s[0]))?.type !== 'inode/directory';
+			const inode = await get_file_by_id(s[0]);
+			if (!inode) return false;
+			return s.length === 1 && !is_folder(inode);
 		});
 	});
 
 	let popup_content: PopupContent = $state({
 		open: false,
 		snippet: null,
-		title: '',
-		closable: true
+		title: ''
 	});
 
 	let file_input: HTMLInputElement;
@@ -88,11 +89,8 @@
 
 	async function create_new_folder() {
 		popup_close_function();
-		await create_folder_on_all_selected_displays(
-			current_name.trim(),
-			$current_file_path,
-			$selected_display_ids
-		);
+		const path_with_folder_name = ($current_file_path += current_name.trim() + '/');
+		await create_path_on_all_selected_displays(path_with_folder_name, $selected_online_display_ids);
 		await update_current_folder_on_selected_displays();
 	}
 
@@ -111,17 +109,16 @@
 	const show_edit_file_popup = async () => {
 		const file = await get_file_by_id($selected_file_ids[0]);
 		if (!file) return;
-		const is_folder = file.type === 'inode/directory';
-		const extension = is_folder ? '' : '.' + file.name.split('.').at(-1) || '';
+		const file_is_folder = is_folder(file);
+		const extension = file_is_folder ? '' : '.' + file.name.split('.').at(-1) || '';
 		current_name = file.name.slice(0, file.name.length - extension.length);
 		current_valid = true;
 		popup_content = {
 			open: true,
 			snippet: edit_file_name_popup,
-			title: `${is_folder ? 'Ordner' : 'Datei'} umbenennen`,
+			title: `${file_is_folder ? 'Ordner' : 'Datei'} umbenennen`,
 			title_icon: FolderPlus,
-			snippet_arg: extension,
-			closable: true
+			snippet_arg: extension
 		};
 	};
 
@@ -129,14 +126,13 @@
 		current_name = '';
 		current_valid = false;
 		display_names_where_path_does_not_exist = (
-			await get_displays_where_path_not_exists($current_file_path, $selected_display_ids)
+			await get_displays_where_path_not_exists($current_file_path, $selected_online_display_ids)
 		).map((display) => display.name);
 		popup_content = {
 			open: true,
 			snippet: new_folder_popup,
 			title: 'Neuen Ordner erstellen',
-			title_icon: FolderPlus,
-			closable: true
+			title_icon: FolderPlus
 		};
 	};
 
@@ -145,22 +141,24 @@
 			open: true,
 			snippet: delete_request_popup,
 			title: `${$selected_file_ids.length} ${$selected_file_ids.length === 1 ? 'Objekt' : 'Objekte'} wirklich löschen?`,
-			title_icon: Trash2,
-			closable: true
+			title_icon: Trash2
 		};
 	};
 
 	async function sync_selected_files(
-		selected_file_ids: string[],
+		current_selected_file_ids: string[],
 		selected_display_ids: string[],
 		current_folder_elements: Inode[]
 	) {
-		if (selected_file_ids.length === 0 && current_folder_elements.length > 0) {
-			selected_file_ids = current_folder_elements.map((inode) => get_file_primary_key(inode));
+		if (current_selected_file_ids.length === 0 && current_folder_elements.length > 0) {
+			current_selected_file_ids = current_folder_elements.map((inode) =>
+				get_file_primary_key(inode)
+			);
 		}
-		if (selected_file_ids.length === 0) return;
+		if (current_selected_file_ids.length === 0) return;
 		// Mit For-Schleife über ausgewählte Elemente gehen
-		for (const file_id of selected_file_ids) {
+		for (const file_id of current_selected_file_ids) {
+			await select(selected_file_ids, file_id, 'deselect');
 			await add_sync_recursively(file_id, selected_display_ids);
 		}
 	}
@@ -279,8 +277,11 @@
 	bind:this={file_input}
 	multiple
 	accept={get_accepted_file_type_string()}
-	onchange={(e) =>
-		add_upload((e.target as HTMLInputElement).files!, $selected_display_ids, $current_file_path)}
+	onchange={async (e) => {
+		const target = e.target as HTMLInputElement;
+		await add_upload(target.files!, $selected_online_display_ids, $current_file_path);
+		target.value = '';
+	}}
 />
 
 <div class="bg-stone-800 h-full rounded-2xl grid grid-rows-[2.5rem_1fr] min-h-0">
@@ -322,7 +323,7 @@
 						title="Neuen Ordner erstellen (Neuen Ordner mit ausgewählten Objekten erstellen)"
 						className="px-3 flex"
 						click_function={show_new_folder_popup}
-						disabled={no_active_display_selected($selected_display_ids, $online_displays)}><FolderPlus /></Button
+						disabled={$selected_online_display_ids.length === 0}><FolderPlus /></Button
 					>
 					<div class="border border-stone-700 my-1"></div>
 					<Button
@@ -331,13 +332,13 @@
 						click_function={() => {
 							if (file_input) file_input.click();
 						}}
-						disabled={no_active_display_selected($selected_display_ids, $online_displays)}><Upload /></Button
+						disabled={$selected_online_display_ids.length === 0}><Upload /></Button
 					>
 					<Button
 						title="Ausgewählte Datei herunterladen"
 						className="px-3 flex"
 						click_function={async () =>
-							await download_file($selected_file_ids[0], $selected_display_ids)}
+							await download_file($selected_file_ids[0], $selected_online_display_ids)}
 						disabled={!$one_file_selected}><Download /></Button
 					>
 					<div class="border border-stone-700 my-1"></div>
@@ -347,10 +348,10 @@
 						click_function={async () =>
 							await sync_selected_files(
 								$selected_file_ids,
-								$selected_display_ids,
+								$selected_online_display_ids,
 								$current_folder_elements ?? []
 							)}
-						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
+						disabled={$selected_online_display_ids.length === 0}
 						><RefreshCcw />
 						<span class="hidden 2xl:flex">Synchronisieren</span>
 					</Button>
@@ -364,7 +365,7 @@
 					<Button
 						title="Ausgewählte Datei(en) einfügen"
 						className="px-3 flex"
-						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
+						disabled={$selected_online_display_ids.length === 0}
 					>
 						<ClipboardPaste />
 					</Button>
@@ -388,7 +389,7 @@
 		</div>
 		<div class="min-h-0 h-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl">
 			<div class="flex flex-col gap-2 p-2 min-h-0 max-w-full">
-				{#if no_active_display_selected($selected_display_ids, $online_displays)}
+				{#if $selected_online_display_ids.length === 0}
 					<span class="text-stone-450 px-10 py-6 leading-relaxed text-center">
 						Es sind keine Bildschirme ausgewählt.
 					</span>

control/frontend/src/routes/KeyInput.svelte

@@ -1,106 +1,175 @@
 <script lang="ts">
 	import { flip } from 'svelte/animate';
 	import { get_selectable_color_classes } from '$lib/ts/stores/ui_behavior';
-	import key_map_json from './../../../../shared/keys.json';
 	import { fade } from 'svelte/transition';
 	import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
 	import { send_keyboard_input } from '$lib/ts/api_handler';
+	import { ArrowDownToLine, ArrowUpFromLine, Grid2x2, Grid2X2, Option } from 'lucide-svelte';
+	import Button from '$lib/components/Button.svelte';
+	import { onDestroy } from 'svelte';
+	import { add_to_keyboard_queue } from '$lib/ts/utils';
 
-	const key_map: Record<string, string> = key_map_json as Record<string, string>;
+	let {
+		popup_close_function
+	}: {
+		popup_close_function: () => void;
+	} = $props();
 
 	let active = $state(false);
 	const current_keys: string[] = $state([]);
+
 	let last_keys: { id: number; key: string }[] = $state([]);
+	let seq = 0;
 
 	let el: HTMLDivElement;
 
 	function add_to_last_keys(name: string) {
-		const id = Date.now();
-		last_keys.push({ id, key: name });
+		const id = ++seq;
+
+		// Neueste oben
+		last_keys = [{ id, key: name }, ...last_keys].slice(0, 6);
+
 		setTimeout(() => {
 			last_keys = last_keys.filter((e) => e.id !== id);
 		}, 1500);
 	}
 
-	async function on_key(e: KeyboardEvent, key_down: boolean) {
+	async function on_keyboard_input(e: KeyboardEvent, key_down: boolean) {
 		if (!active) return;
-		const id = key_map[e.code];
+		const id = e.code;
 		if (!id) return;
 
-		if (key_down) {
-			if (current_keys.includes(e.code)) return;
-			current_keys.push(e.code);
-		} else {
-			const index = current_keys.indexOf(e.code);
-			if (index === -1) return;
-			current_keys.splice(index, 1);
-		}
-
-		if (e.repeat) return;
-
 		e.preventDefault();
 		e.stopPropagation();
 
-		const action: 'press' | 'release' = key_down ? 'press' : 'release';
-
-		add_to_last_keys(action.toUpperCase() + ' ' + e.code);
-
-		await run_on_all_selected_displays(
-			(d) => send_keyboard_input(d.ip, [{ key: id, action }]),
-			true
-		);
+		if (e.repeat) return;
+		await on_key(id, key_down);
 	}
 
-	async function release_all_pressed_keys() {
-		const inputs: {key: string; action: 'press' | 'release' }[] = [];
+	async function on_key(key: string, key_down: boolean) {
+		if (key_down) {
+			if (current_keys.includes(key)) return;
+			current_keys.push(key);
+		} else {
+			const index = current_keys.indexOf(key);
+			if (index === -1) return;
+			current_keys.splice(index, 1);
+		}
+
+		const action: 'press' | 'release' = key_down ? 'press' : 'release';
+
+		add_to_last_keys(action.toUpperCase() + ' ' + key);
+		add_to_keyboard_queue(async () => {
+			await run_on_all_selected_displays((d) => send_keyboard_input(d.ip, [{ key, action }]), true);
+		});
+	}
+
+	function release_all_pressed_keys() {
+		const inputs: { key: string; action: 'press' | 'release' }[] = [];
 		for (let i = current_keys.length - 1; i >= 0; i--) {
-			inputs.push({key: current_keys[i], action: 'release'})
+			inputs.push({ key: current_keys[i], action: 'release' });
 			current_keys.splice(i, 1);
 		}
 
-		await run_on_all_selected_displays(
-			(d) => send_keyboard_input(d.ip, inputs),
-			true
-		);
+		add_to_keyboard_queue(async () => {
+			await run_on_all_selected_displays((d) => send_keyboard_input(d.ip, inputs), true);
+		});
 	}
+
+	onDestroy(() => {
+		release_all_pressed_keys();
+	});
 </script>
 
-<div
-	role="textbox"
-	tabindex="0"
-	bind:this={el}
-	onclick={() => {
-		if (active) {
-			el.blur();
-		} else {
-			el.focus();
-			active = true;
-		}
-	}}
-	onblur={async () => {
-		active = false;
-		await release_all_pressed_keys();
-	}}
-	onkeydown={(e) => on_key(e, true)}
-	onkeyup={(e) => on_key(e, false)}
-	class="relative flex justify-center items-center h-15 w-full cursor-pointer rounded-xl transition-colors duration-200 select-none {get_selectable_color_classes(
-		active,
-		{
-			bg: true,
-			hover: true,
-			active: true,
-			text: true
-		}
-	)}"
->
-	{active ? 'Erfassung aktiv' : 'Hier für Erfassung klicken'}
-	<div class="absolute top-full left-0 ml-1 mt-0.5 flex flex-col-reverse text-sm text-stone-400">
-		{#each last_keys as key (key.id)}
+<div class="flex flex-row gap-2 overflow-hidden h-full">
+	<div
+		role="textbox"
+		tabindex="0"
+		bind:this={el}
+		onclick={() => {
+			if (active) {
+				el.blur();
+			} else {
+				el.focus();
+				active = true;
+			}
+		}}
+		onblur={async () => {
+			active = false;
+			release_all_pressed_keys();
+		}}
+		onkeydown={(e) => on_keyboard_input(e, true)}
+		onkeyup={(e) => on_keyboard_input(e, false)}
+		class="flex justify-center items-center text-center grow py-2 px-8 w-70 h-full cursor-pointer rounded-xl transition-colors duration-200 select-none {get_selectable_color_classes(
+			active,
+			{
+				bg: true,
+				hover: true,
+				active: true,
+				text: true
+			}
+		)}"
+	>
+		{active ? 'Erfassung aktiv' : 'Hier für Erfassung klicken'}
+	</div>
+	<div
+		class="relative flex flex-col gap-1 text-sm w-40 p-2 bg-stone-750 rounded-xl overflow-hidden h-full"
+	>
+		{#each last_keys as item (item.id)}
 			<span
-				animate:flip={{ duration: 200 }}
-				in:fade={{ duration: 200 }}
-				out:fade={{ duration: 500 }}>{key.key}</span
+				class="flex flex-row gap-2 {item.key.split(' ')[0] === 'PRESS'
+					? 'text-sky-600'
+					: 'text-lime-600'}"
+				animate:flip={{ duration: 120 }}
+				in:fade={{ duration: 120 }}
+				out:fade={{ duration: 200 }}
 			>
+				{#if item.key.split(' ')[0] === 'PRESS'}
+					<ArrowDownToLine />
+				{:else}
+					<ArrowUpFromLine />
+				{/if}
+				{item.key.split(' ').at(-1)}
+			</span>
 		{/each}
+		<div
+			class="absolute bottom-0 right-0 left-0 h-5 bg-linear-to-b from-transparent to-stone-750"
+		></div>
+	</div>
+	<div class="flex flex-col gap-2 justify-between">
+		<div class="flex flex-col gap-2">
+			<button
+				title="Windows-/Meta-Taste [gedrückt halten möglich]"
+				class="px-3 bg-stone-700 py-2 gap-2 rounded-xl flex items-center transition-colors duration-200 hover:bg-stone-600 active:bg-stone-500 cursor-pointer"
+				onmousedown={async (e) => {
+					e.preventDefault();
+					await on_key('MetaLeft', true);
+				}}
+				onmouseup={async () => {
+					await on_key('MetaLeft', false);
+				}}
+			>
+				<Grid2x2 /> Meta
+			</button>
+			<button
+				title="Alt-Taste [gedrückt halten möglich]"
+				class="px-3 bg-stone-700 py-2 gap-2 rounded-xl flex items-center transition-colors duration-200 hover:bg-stone-600 active:bg-stone-500 cursor-pointer"
+				onmousedown={async (e) => {
+					e.preventDefault();
+					await on_key('AltLeft', true);
+				}}
+				onmouseup={async () => {
+					await on_key('AltLeft', false);
+				}}
+			>
+				<Option /> Alt
+			</button>
+		</div>
+
+		<Button
+			div_class="mt-2 justify-end"
+			className="px-4 font-bold"
+			click_function={popup_close_function}>Fertig</Button
+		>
 	</div>
 </div>

control/frontend/src/routes/TipTapInput.svelte

@@ -20,6 +20,12 @@
 	import { Color } from '@tiptap/extension-text-style';
 	import Highlight from '@tiptap/extension-highlight';
 
+	let {
+		text = $bindable()
+	}: {
+		text: string;
+	} = $props();
+
 	type TextEditOption = {
 		onclick: () => void;
 		is_selected: () => boolean;
@@ -128,15 +134,17 @@
 					multicolor: true
 				})
 			],
-			content: '',
+			content: text,
 			onTransaction: ({ editor }) => {
 				// Increment the state signal to force a re-render
 				editor_state = { editor };
 			},
 			autofocus: true
 		});
+		editor_state.editor.commands.selectAll();
 	});
 	onDestroy(() => {
+		if (editor_state.editor) text = editor_state.editor.getHTML();
 		editor_state.editor?.destroy();
 	});
 </script>

control/main.go

@@ -77,13 +77,13 @@ func pingRoute(ctx echo.Context) error {
 		return ctx.JSON(http.StatusBadRequest, PingResponse{Error: "missing 'ip' query parameter"})
 	}
 
-	cmd := exec.Command("ping", "-c", "1", "-w", "1", ip)
+	cmd := exec.Command("ping", "-c", "1", "-w", "5", ip)
 	result := shared.RunShellCommand(cmd)
 	if result.ExitCode != 0 {
 		return ctx.JSON(http.StatusOK, PingResponse{Status: "host_offline"})
 	}
 
-	conn, err := net.DialTimeout("tcp", ip+":1323", 1*time.Second)
+	conn, err := net.DialTimeout("tcp", ip+":1323", 5*time.Second)
 	if err != nil {
 		return ctx.JSON(http.StatusOK, PingResponse{Status: "app_offline"})
 	}

display/pkg/file_handler.go

@@ -2,8 +2,10 @@ package pkg
 
 import (
 	"fmt"
+	"log/slog"
 	"os"
 	"os/exec"
+	"path/filepath"
 	"plg-mudics/shared"
 	"syscall"
 
@@ -36,7 +38,17 @@ func (fh *fileHandler) OpenFile(path string) error {
 
 	switch mType.String() {
 	case "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.oasis.opendocument.presentation":
-		fh.runningProgram = exec.Command("soffice", "--show", path, "--nologo", "--view", "--norestore", fmt.Sprintf("-env:UserInstallation=file://%s", tempDirPath))
+		// yes, we need this weird workaround to delete lock files since libreoffice
+		// doesn't expose an option to ignore them or prevent their creation
+		// the --view argument for some reason doesn't work with --show
+		parent := filepath.Dir(path)
+		cmd := exec.Command("find", parent, "-name", ".~lock*", "-type", "f", "-delete")
+		result := shared.RunShellCommand(cmd)
+		if result.ExitCode != 0 {
+			slog.Warn("could not remove lock files", "path", parent, "stderr", result.Stderr, "exitCode", result.ExitCode)
+		}
+
+		fh.runningProgram = exec.Command("soffice", "--show", path, "--nologo", "--norestore", fmt.Sprintf("-env:UserInstallation=file://%s", tempDirPath))
 	case "application/pdf":
 		fh.runningProgram = exec.Command("xreader", path, "--presentation")
 	default:

display/pkg/keyboard.go

@@ -0,0 +1,178 @@
+package pkg
+
+import (
+	"fmt"
+	"log/slog"
+	"time"
+
+	"github.com/micmonay/keybd_event"
+)
+
+type KeyAction int
+
+const (
+	KeyPress KeyAction = iota
+	KeyRelease
+)
+
+type Input struct {
+	Key    string
+	Action KeyAction
+}
+
+func KeyboardInput(inputs []Input) error {
+	var err error
+
+	kb, err := keybd_event.NewKeyBonding()
+	if err != nil {
+		return fmt.Errorf("failed to create key bonding: %w", err)
+	}
+
+	for _, input := range inputs {
+		switch input.Key {
+		case "Shift", "ShiftLeft", "ShiftRight":
+			kb.HasSHIFT(true)
+		case "Ctrl", "Control", "ControlLeft", "ControlRight":
+			kb.HasCTRL(true)
+		case "Alt", "AltLeft", "AltRight":
+			kb.HasALT(true)
+		case "Super", "Meta", "MetaLeft", "MetaRight":
+			kb.HasSuper(true)
+		default:
+			keyCode, ok := KeyboardEvents[input.Key]
+			if !ok {
+				slog.Warn("Could not parse keyboard input", "key", input.Key)
+				continue
+			}
+			kb.SetKeys(keyCode)
+		}
+
+		switch input.Action {
+		case KeyPress:
+			err = kb.Press()
+		case KeyRelease:
+			err = kb.Release()
+		}
+
+		if err != nil {
+			return fmt.Errorf("failed to run key event: %w", err)
+		}
+
+		time.Sleep(time.Microsecond * 10)
+	}
+
+	return nil
+}
+
+var KeyboardEvents = map[string]int{
+	"Escape":         keybd_event.VK_ESC,
+	"Digit1":         keybd_event.VK_1,
+	"Digit2":         keybd_event.VK_2,
+	"Digit3":         keybd_event.VK_3,
+	"Digit4":         keybd_event.VK_4,
+	"Digit5":         keybd_event.VK_5,
+	"Digit6":         keybd_event.VK_6,
+	"Digit7":         keybd_event.VK_7,
+	"Digit8":         keybd_event.VK_8,
+	"Digit9":         keybd_event.VK_9,
+	"Digit0":         keybd_event.VK_0,
+	"KeyQ":           keybd_event.VK_Q,
+	"KeyW":           keybd_event.VK_W,
+	"KeyE":           keybd_event.VK_E,
+	"KeyR":           keybd_event.VK_R,
+	"KeyT":           keybd_event.VK_T,
+	"KeyY":           keybd_event.VK_Y,
+	"KeyU":           keybd_event.VK_U,
+	"KeyI":           keybd_event.VK_I,
+	"KeyO":           keybd_event.VK_O,
+	"KeyP":           keybd_event.VK_P,
+	"KeyA":           keybd_event.VK_A,
+	"KeyS":           keybd_event.VK_S,
+	"KeyD":           keybd_event.VK_D,
+	"KeyF":           keybd_event.VK_F,
+	"KeyG":           keybd_event.VK_G,
+	"KeyH":           keybd_event.VK_H,
+	"KeyJ":           keybd_event.VK_J,
+	"KeyK":           keybd_event.VK_K,
+	"KeyL":           keybd_event.VK_L,
+	"KeyZ":           keybd_event.VK_Z,
+	"KeyX":           keybd_event.VK_X,
+	"KeyC":           keybd_event.VK_C,
+	"KeyV":           keybd_event.VK_V,
+	"KeyB":           keybd_event.VK_B,
+	"KeyN":           keybd_event.VK_N,
+	"KeyM":           keybd_event.VK_M,
+	"F1":             keybd_event.VK_F1,
+	"F2":             keybd_event.VK_F2,
+	"F3":             keybd_event.VK_F3,
+	"F4":             keybd_event.VK_F4,
+	"F5":             keybd_event.VK_F5,
+	"F6":             keybd_event.VK_F6,
+	"F7":             keybd_event.VK_F7,
+	"F8":             keybd_event.VK_F8,
+	"F9":             keybd_event.VK_F9,
+	"F10":            keybd_event.VK_F10,
+	"F11":            keybd_event.VK_F11,
+	"F12":            keybd_event.VK_F12,
+	"F13":            keybd_event.VK_F13,
+	"F14":            keybd_event.VK_F14,
+	"F15":            keybd_event.VK_F15,
+	"F16":            keybd_event.VK_F16,
+	"F17":            keybd_event.VK_F17,
+	"F18":            keybd_event.VK_F18,
+	"F19":            keybd_event.VK_F19,
+	"F20":            keybd_event.VK_F20,
+	"F21":            keybd_event.VK_F21,
+	"F22":            keybd_event.VK_F22,
+	"F23":            keybd_event.VK_F23,
+	"F24":            keybd_event.VK_F24,
+	"NumLock":        keybd_event.VK_NUMLOCK,
+	"ScrollLock":     keybd_event.VK_SCROLLLOCK,
+	"CapsLock":       keybd_event.VK_CAPSLOCK,
+	"Minus":          keybd_event.VK_SP2,
+	"Equal":          keybd_event.VK_SP3,
+	"Backspace":      keybd_event.VK_BACKSPACE,
+	"Tab":            keybd_event.VK_TAB,
+	"BracketLeft":    keybd_event.VK_SP4,
+	"BracketRight":   keybd_event.VK_SP5,
+	"Enter":          keybd_event.VK_ENTER,
+	"Semicolon":      keybd_event.VK_SP6,
+	"Quote":          keybd_event.VK_SP7,
+	"Backquote":      keybd_event.VK_SP1,
+	"Backslash":      keybd_event.VK_SP8,
+	"Comma":          keybd_event.VK_SP9,
+	"Period":         keybd_event.VK_SP10,
+	"Slash":          keybd_event.VK_SP11,
+	"IntlBackslash":  keybd_event.VK_SP12,
+	"NumpadMultiply": keybd_event.VK_KPASTERISK,
+	"NumpadAdd":      keybd_event.VK_KPPLUS,
+	"NumpadSubtract": keybd_event.VK_KPMINUS,
+	"NumpadDecimal":  keybd_event.VK_KPDOT,
+	"Space":          keybd_event.VK_SPACE,
+	"Numpad0":        keybd_event.VK_KP0,
+	"Numpad1":        keybd_event.VK_KP1,
+	"Numpad2":        keybd_event.VK_KP2,
+	"Numpad3":        keybd_event.VK_KP3,
+	"Numpad4":        keybd_event.VK_KP4,
+	"Numpad5":        keybd_event.VK_KP5,
+	"Numpad6":        keybd_event.VK_KP6,
+	"Numpad7":        keybd_event.VK_KP7,
+	"Numpad8":        keybd_event.VK_KP8,
+	"Numpad9":        keybd_event.VK_KP9,
+	"PageUp":         keybd_event.VK_PAGEUP,
+	"PageDown":       keybd_event.VK_PAGEDOWN,
+	"End":            keybd_event.VK_END,
+	"Home":           keybd_event.VK_HOME,
+	"ArrowLeft":      keybd_event.VK_LEFT,
+	"ArrowUp":        keybd_event.VK_UP,
+	"ArrowRight":     keybd_event.VK_RIGHT,
+	"ArrowDown":      keybd_event.VK_DOWN,
+	"PrintScreen":    keybd_event.VK_PRINT,
+	"Insert":         keybd_event.VK_INSERT,
+	"Delete":         keybd_event.VK_DELETE,
+	"Help":           keybd_event.VK_HELP,
+	"BrowserBack":    keybd_event.VK_BACK,
+	"Pause":          keybd_event.VK_PAUSE,
+	"Lang1":          keybd_event.VK_HANGUEL,
+	"Lang2":          keybd_event.VK_HANJA,
+}

display/pkg/keys.go

@@ -1,129 +0,0 @@
-package pkg
-
-import "github.com/micmonay/keybd_event"
-
-var KeyboardEvents = map[string]int{
-	"VK_SP1":        keybd_event.VK_SP1,
-	"VK_SP2":        keybd_event.VK_SP2,
-	"VK_SP3":        keybd_event.VK_SP3,
-	"VK_SP4":        keybd_event.VK_SP4,
-	"VK_SP5":        keybd_event.VK_SP5,
-	"VK_SP6":        keybd_event.VK_SP6,
-	"VK_SP7":        keybd_event.VK_SP7,
-	"VK_SP8":        keybd_event.VK_SP8,
-	"VK_SP9":        keybd_event.VK_SP9,
-	"VK_SP10":       keybd_event.VK_SP10,
-	"VK_SP11":       keybd_event.VK_SP11,
-	"VK_SP12":       keybd_event.VK_SP12,
-	"VK_ESC":        keybd_event.VK_ESC,
-	"VK_1":          keybd_event.VK_1,
-	"VK_2":          keybd_event.VK_2,
-	"VK_3":          keybd_event.VK_3,
-	"VK_4":          keybd_event.VK_4,
-	"VK_5":          keybd_event.VK_5,
-	"VK_6":          keybd_event.VK_6,
-	"VK_7":          keybd_event.VK_7,
-	"VK_8":          keybd_event.VK_8,
-	"VK_9":          keybd_event.VK_9,
-	"VK_0":          keybd_event.VK_0,
-	"VK_Q":          keybd_event.VK_Q,
-	"VK_W":          keybd_event.VK_W,
-	"VK_E":          keybd_event.VK_E,
-	"VK_R":          keybd_event.VK_R,
-	"VK_T":          keybd_event.VK_T,
-	"VK_Y":          keybd_event.VK_Y,
-	"VK_U":          keybd_event.VK_U,
-	"VK_I":          keybd_event.VK_I,
-	"VK_O":          keybd_event.VK_O,
-	"VK_P":          keybd_event.VK_P,
-	"VK_A":          keybd_event.VK_A,
-	"VK_S":          keybd_event.VK_S,
-	"VK_D":          keybd_event.VK_D,
-	"VK_F":          keybd_event.VK_F,
-	"VK_G":          keybd_event.VK_G,
-	"VK_H":          keybd_event.VK_H,
-	"VK_J":          keybd_event.VK_J,
-	"VK_K":          keybd_event.VK_K,
-	"VK_L":          keybd_event.VK_L,
-	"VK_Z":          keybd_event.VK_Z,
-	"VK_X":          keybd_event.VK_X,
-	"VK_C":          keybd_event.VK_C,
-	"VK_V":          keybd_event.VK_V,
-	"VK_B":          keybd_event.VK_B,
-	"VK_N":          keybd_event.VK_N,
-	"VK_M":          keybd_event.VK_M,
-	"VK_F1":         keybd_event.VK_F1,
-	"VK_F2":         keybd_event.VK_F2,
-	"VK_F3":         keybd_event.VK_F3,
-	"VK_F4":         keybd_event.VK_F4,
-	"VK_F5":         keybd_event.VK_F5,
-	"VK_F6":         keybd_event.VK_F6,
-	"VK_F7":         keybd_event.VK_F7,
-	"VK_F8":         keybd_event.VK_F8,
-	"VK_F9":         keybd_event.VK_F9,
-	"VK_F10":        keybd_event.VK_F10,
-	"VK_F11":        keybd_event.VK_F11,
-	"VK_F12":        keybd_event.VK_F12,
-	"VK_F13":        keybd_event.VK_F13,
-	"VK_F14":        keybd_event.VK_F14,
-	"VK_F15":        keybd_event.VK_F15,
-	"VK_F16":        keybd_event.VK_F16,
-	"VK_F17":        keybd_event.VK_F17,
-	"VK_F18":        keybd_event.VK_F18,
-	"VK_F19":        keybd_event.VK_F19,
-	"VK_F20":        keybd_event.VK_F20,
-	"VK_F21":        keybd_event.VK_F21,
-	"VK_F22":        keybd_event.VK_F22,
-	"VK_F23":        keybd_event.VK_F23,
-	"VK_F24":        keybd_event.VK_F24,
-	"VK_NUMLOCK":    keybd_event.VK_NUMLOCK,
-	"VK_SCROLLLOCK": keybd_event.VK_SCROLLLOCK,
-	"VK_RESERVED":   keybd_event.VK_RESERVED,
-	"VK_MINUS":      keybd_event.VK_MINUS,
-	"VK_EQUAL":      keybd_event.VK_EQUAL,
-	"VK_BACKSPACE":  keybd_event.VK_BACKSPACE,
-	"VK_TAB":        keybd_event.VK_TAB,
-	"VK_LEFTBRACE":  keybd_event.VK_LEFTBRACE,
-	"VK_RIGHTBRACE": keybd_event.VK_RIGHTBRACE,
-	"VK_ENTER":      keybd_event.VK_ENTER,
-	"VK_SEMICOLON":  keybd_event.VK_SEMICOLON,
-	"VK_APOSTROPHE": keybd_event.VK_APOSTROPHE,
-	"VK_GRAVE":      keybd_event.VK_GRAVE,
-	"VK_BACKSLASH":  keybd_event.VK_BACKSLASH,
-	"VK_COMMA":      keybd_event.VK_COMMA,
-	"VK_DOT":        keybd_event.VK_DOT,
-	"VK_SLASH":      keybd_event.VK_SLASH,
-	"VK_KPASTERISK": keybd_event.VK_KPASTERISK,
-	"VK_SPACE":      keybd_event.VK_SPACE,
-	"VK_CAPSLOCK":   keybd_event.VK_CAPSLOCK,
-	"VK_KP0":        keybd_event.VK_KP0,
-	"VK_KP1":        keybd_event.VK_KP1,
-	"VK_KP2":        keybd_event.VK_KP2,
-	"VK_KP3":        keybd_event.VK_KP3,
-	"VK_KP4":        keybd_event.VK_KP4,
-	"VK_KP5":        keybd_event.VK_KP5,
-	"VK_KP6":        keybd_event.VK_KP6,
-	"VK_KP7":        keybd_event.VK_KP7,
-	"VK_KP8":        keybd_event.VK_KP8,
-	"VK_KP9":        keybd_event.VK_KP9,
-	"VK_KPMINUS":    keybd_event.VK_KPMINUS,
-	"VK_KPPLUS":     keybd_event.VK_KPPLUS,
-	"VK_KPDOT":      keybd_event.VK_KPDOT,
-	"VK_CANCEL":     keybd_event.VK_CANCEL,
-	"VK_BACK":       keybd_event.VK_BACK,
-	"VK_PAUSE":      keybd_event.VK_PAUSE,
-	"VK_HANGUEL":    keybd_event.VK_HANGUEL,
-	"VK_HANJA":      keybd_event.VK_HANJA,
-	"VK_PAGEUP":     keybd_event.VK_PAGEUP,
-	"VK_PAGEDOWN":   keybd_event.VK_PAGEDOWN,
-	"VK_END":        keybd_event.VK_END,
-	"VK_HOME":       keybd_event.VK_HOME,
-	"VK_LEFT":       keybd_event.VK_LEFT,
-	"VK_UP":         keybd_event.VK_UP,
-	"VK_RIGHT":      keybd_event.VK_RIGHT,
-	"VK_DOWN":       keybd_event.VK_DOWN,
-	"VK_PRINT":      keybd_event.VK_PRINT,
-	"VK_INSERT":     keybd_event.VK_INSERT,
-	"VK_DELETE":     keybd_event.VK_DELETE,
-	"VK_HELP":       keybd_event.VK_HELP,
-}

display/pkg/main.go

@@ -11,8 +11,6 @@ import (
 	"time"
 
 	"plg-mudics/shared"
-
-	"github.com/micmonay/keybd_event"
 )
 
 func GetDeviceIp() (string, error) {
@@ -46,46 +44,6 @@ func GetDeviceMac() (string, error) {
 	return "", fmt.Errorf("no suitable MAC address found")
 }
 
-type KeyAction int
-
-const (
-	KeyPress KeyAction = iota
-	KeyRelease
-)
-
-type Input struct {
-	Key    int
-	Action KeyAction
-}
-
-func KeyboardInput(inputs []Input) error {
-	var err error
-
-	kb, err := keybd_event.NewKeyBonding()
-	if err != nil {
-		return fmt.Errorf("failed to create key bonding: %w", err)
-	}
-
-	for _, input := range inputs {
-		kb.SetKeys(input.Key)
-
-		switch input.Action {
-		case KeyPress:
-			err = kb.Press()
-		case KeyRelease:
-			err = kb.Release()
-		}
-
-		if err != nil {
-			return fmt.Errorf("failed to run key event: %w", err)
-		}
-
-		time.Sleep(time.Microsecond * 100)
-	}
-
-	return nil
-}
-
 func TakeScreenshot() (string, error) {
 	tempFilePath := filepath.Join(os.TempDir(), fmt.Sprintf("screenshot_%d.png", time.Now().Unix()))
 

display/web/main.go

@@ -216,12 +216,6 @@ func keyboardInputRoute(ctx echo.Context) error {
 			return ctx.JSON(http.StatusBadRequest, shared.ErrorResponse{Description: fmt.Sprintf("Invalid action: %s", input.Action)})
 		}
 
-		code, ok := pkg.KeyboardEvents[input.Key]
-		if !ok {
-			slog.Error("Unsupported key", "key", input.Key)
-			return ctx.JSON(http.StatusBadRequest, shared.ErrorResponse{Description: fmt.Sprintf("Unsupported key: %s", input.Key)})
-		}
-
 		var action pkg.KeyAction
 		if input.Action == "press" {
 			action = pkg.KeyPress
@@ -231,7 +225,7 @@ func keyboardInputRoute(ctx echo.Context) error {
 		}
 
 		inputs = append(inputs, pkg.Input{
-			Key:    code,
+			Key:    input.Key,
 			Action: action,
 		})
 	}
@@ -301,14 +295,7 @@ func downloadFileRoute(ctx echo.Context) error {
 
 	slog.Info("Serving file for download", "path", fullPath)
 
-	file, err := os.Open(fullPath)
-	if err != nil {
-		slog.Error("Failed to open file", "file", fullPath, "error", err)
-		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to open file"})
-	}
-	defer file.Close()
-
-	return ctx.Stream(http.StatusOK, "application/octet-stream", file)
+	return ctx.File(fullPath)
 }
 
 func openFileRoute(ctx echo.Context) error {

nixos/configuration.nix

@@ -106,6 +106,7 @@
     xfconf.settings = {
       xfce4-power-manager."xfce4-power-manager/dpms-enabled" = false;
       xfce4-screensaver."saver/enabled" = false;
+      displays.Notify = 0; # disable popup when connecting new display
     };
 
     home.stateVersion = "25.05";

shared/keys.json

@@ -1,114 +0,0 @@
-{
-  "Escape": "VK_ESC",
-  "Digit1": "VK_1",
-  "Digit2": "VK_2",
-  "Digit3": "VK_3",
-  "Digit4": "VK_4",
-  "Digit5": "VK_5",
-  "Digit6": "VK_6",
-  "Digit7": "VK_7",
-  "Digit8": "VK_8",
-  "Digit9": "VK_9",
-  "Digit0": "VK_0",
-  "KeyQ": "VK_Q",
-  "KeyW": "VK_W",
-  "KeyE": "VK_E",
-  "KeyR": "VK_R",
-  "KeyT": "VK_T",
-  "KeyY": "VK_Y",
-  "KeyU": "VK_U",
-  "KeyI": "VK_I",
-  "KeyO": "VK_O",
-  "KeyP": "VK_P",
-  "KeyA": "VK_A",
-  "KeyS": "VK_S",
-  "KeyD": "VK_D",
-  "KeyF": "VK_F",
-  "KeyG": "VK_G",
-  "KeyH": "VK_H",
-  "KeyJ": "VK_J",
-  "KeyK": "VK_K",
-  "KeyL": "VK_L",
-  "KeyZ": "VK_Z",
-  "KeyX": "VK_X",
-  "KeyC": "VK_C",
-  "KeyV": "VK_V",
-  "KeyB": "VK_B",
-  "KeyN": "VK_N",
-  "KeyM": "VK_M",
-  "F1": "VK_F1",
-  "F2": "VK_F2",
-  "F3": "VK_F3",
-  "F4": "VK_F4",
-  "F5": "VK_F5",
-  "F6": "VK_F6",
-  "F7": "VK_F7",
-  "F8": "VK_F8",
-  "F9": "VK_F9",
-  "F10": "VK_F10",
-  "F11": "VK_F11",
-  "F12": "VK_F12",
-  "F13": "VK_F13",
-  "F14": "VK_F14",
-  "F15": "VK_F15",
-  "F16": "VK_F16",
-  "F17": "VK_F17",
-  "F18": "VK_F18",
-  "F19": "VK_F19",
-  "F20": "VK_F20",
-  "F21": "VK_F21",
-  "F22": "VK_F22",
-  "F23": "VK_F23",
-  "F24": "VK_F24",
-  "NumLock": "VK_NUMLOCK",
-  "ScrollLock": "VK_SCROLLLOCK",
-  "CapsLock": "VK_CAPSLOCK",
-  "Minus": "VK_SP2",
-  "Equal": "VK_SP3",
-  "Backspace": "VK_BACKSPACE",
-  "Tab": "VK_TAB",
-  "BracketLeft": "VK_SP4",
-  "BracketRight": "VK_SP5",
-  "Enter": "VK_ENTER",
-  "Semicolon": "VK_SP6",
-  "Quote": "VK_SP7",
-  "Backquote": "VK_SP1",
-  "Backslash": "VK_SP8",
-  "Comma": "VK_SP9",
-  "Period": "VK_SP10",
-  "Slash": "VK_SP11",
-  "IntlBackslash": "VK_SP12",
-  "NumpadMultiply": "VK_KPASTERISK",
-  "NumpadDivide": "VK_KPSLASH",
-  "NumpadAdd": "VK_KPPLUS",
-  "NumpadSubtract": "VK_KPMINUS",
-  "NumpadDecimal": "VK_KPDOT",
-  "NumpadEnter": "VK_KPENTER",
-  "Space": "VK_SPACE",
-  "Numpad0": "VK_KP0",
-  "Numpad1": "VK_KP1",
-  "Numpad2": "VK_KP2",
-  "Numpad3": "VK_KP3",
-  "Numpad4": "VK_KP4",
-  "Numpad5": "VK_KP5",
-  "Numpad6": "VK_KP6",
-  "Numpad7": "VK_KP7",
-  "Numpad8": "VK_KP8",
-  "Numpad9": "VK_KP9",
-  "PageUp": "VK_PAGEUP",
-  "PageDown": "VK_PAGEDOWN",
-  "End": "VK_END",
-  "Home": "VK_HOME",
-  "ArrowLeft": "VK_LEFT",
-  "ArrowUp": "VK_UP",
-  "ArrowRight": "VK_RIGHT",
-  "ArrowDown": "VK_DOWN",
-  "PrintScreen": "VK_PRINT",
-  "Insert": "VK_INSERT",
-  "Delete": "VK_DELETE",
-  "Help": "VK_HELP",
-  "BrowserBack": "VK_BACK",
-  "Pause": "VK_PAUSE",
-  "Lang1": "VK_HANGUEL",
-  "Lang2": "VK_HANJA"
-}

shared/supported_file_types.json

@@ -1,34 +1,34 @@
 {
-    ".mp4": {
-        "display_name": "MP4",
-        "mime_type": "video/mp4"
-    },
-    ".jpg": {
-        "display_name": "JPG",
-        "mime_type": "image/jpg"
-    },
-    ".jpeg": {
-        "display_name": "JPG",
-        "mime_type": "image/jpeg"
-    },
-    ".png": {
-        "display_name": "PNG",
-        "mime_type": "image/png"
-    },
-    ".gif": {
-        "display_name": "GIF",
-        "mime_type": "image/gif"
-    },
-    ".pptx": {
-        "display_name": "PPTX",
-        "mime_type": "application/vnd.openxmlformats-officedocument.presentationml.presentation"
-    },
-    ".odp": {
-        "display_name": "ODP",
-        "mime_type": "application/vnd.oasis.opendocument.presentation"
-    },
-    ".pdf": {
-        "display_name": "PDF",
-        "mime_type": "application/pdf"
-    }
-}
+  ".mp4": {
+    "display_name": "MP4",
+    "mime_type": "video/mp4"
+  },
+  ".jpg": {
+    "display_name": "JPG",
+    "mime_type": "image/jpg"
+  },
+  ".jpeg": {
+    "display_name": "JPG",
+    "mime_type": "image/jpeg"
+  },
+  ".png": {
+    "display_name": "PNG",
+    "mime_type": "image/png"
+  },
+  ".gif": {
+    "display_name": "GIF",
+    "mime_type": "image/gif"
+  },
+  ".pptx": {
+    "display_name": "PPTX",
+    "mime_type": "application/vnd.openxmlformats-officedocument.presentationml.presentation"
+  },
+  ".odp": {
+    "display_name": "ODP",
+    "mime_type": ".odp"
+  },
+  ".pdf": {
+    "display_name": "PDF",
+    "mime_type": "application/pdf"
+  }
+}

shared/version.txt

@@ -1 +1 @@
-v0.0.16
+v0.1.2