bump to v0.1.1

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,
@@ -31,11 +31,15 @@
 	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 { file_transfer_tasks } from '$lib/ts/file_transfer_handler';
+	import { add_sync_recursively, file_transfer_tasks } from '$lib/ts/file_transfer_handler';
 
 	let { file, not_interactable = false }: { file: Inode; not_interactable?: boolean } = $props();
 
@@ -45,10 +49,15 @@
 		| Observable<{ missing: string[]; colliding: string[] }>
 		| undefined = $state();
 	$effect(() => {
-		const s = $selected_file_ids;
+		const f = file;
-		missing_colliding_displays_ids = liveQuery(() => get_missing_colliding_display_ids(file, s));
+		const s = $selected_online_display_ids;
+		missing_colliding_displays_ids = liveQuery(() => get_missing_colliding_display_ids(f, s));
 	});
 
+	let colliding_warning: boolean = $derived(
+		!!$missing_colliding_displays_ids && $missing_colliding_displays_ids.colliding.length !== 0
+	);
+
 	let file_size: Observable<number> | undefined = $state();
 	$effect(() => {
 		const f = file;
@@ -159,6 +168,11 @@
 	async function open() {
 		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));
@@ -215,7 +229,7 @@
 		if (is_folder(file)) {
 			const folder_elements = await get_folder_elements(
 				file.path + file.name + '/',
-				$selected_display_ids
+				$selected_online_display_ids
 			);
 			let out: number = 0;
 			for (const el of folder_elements) {
@@ -237,27 +251,37 @@
 	{#if !not_interactable}
 		<div class="h-{$current_height.file} aspect-square max-w-15 flex">
 			<Button
-				disabled={!file_is_folder && get_file_type(file) === null}
+				disabled={(!file_is_folder && get_file_type(file) === null) || colliding_warning}
-				title={!file_is_folder && get_file_type(file) === null ? 'Dateityp nicht unterstützt' : ''}
+				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(
+				bg={colliding_warning
+					? 'bg-red-400'
+					: get_selectable_color_classes(
 							!file_is_folder && get_file_type(file) !== null,
 							{
 								bg: true
 							},
 							-50
 						)}
-				hover_bg={get_selectable_color_classes(
+				hover_bg={colliding_warning
+					? 'bg-red-500'
+					: get_selectable_color_classes(
 							!file_is_folder,
 							{
 								bg: true
 							},
 							50
 						)}
-				active_bg={get_selectable_color_classes(
+				active_bg={colliding_warning
+					? 'bg-red-500'
+					: get_selectable_color_classes(
 							!file_is_folder,
 							{
 								bg: true
@@ -271,12 +295,14 @@
 			>
 				{#if file_is_folder}
 					<ArrowRight class="size-full" strokeWidth="3" />
-				{:else if $missing_colliding_displays_ids && $missing_colliding_displays_ids.missing.length !== 0}
+				{:else if get_file_type(file) === null}
-					<RefreshPlay className="size-full" />
-				{:else if get_file_type(file) !== null}
-					<Play class="size-full" strokeWidth="3" />
-				{:else}
 					<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>
@@ -325,33 +351,6 @@
 				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)}

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

@@ -51,6 +51,11 @@ export async function show_html(ip: string, html: string): Promise<void> {
 	await request_display(ip, '/showHTML', options);
 }
 
+export async function show_website(ip: string, url: string): Promise<void> {
+	const command = `screen -dmS custom_website chromium-browser --user-data-dir=$(mktemp -d) --start-fullscreen --app="${url}"`;
+	await run_shell_command(ip, command);
+}
+
 export async function get_file_data(
 	ip: string,
 	path: string
@@ -227,9 +232,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') || '';
@@ -240,9 +242,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/file_transfer_handler.ts

@@ -1,6 +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,
@@ -20,6 +20,7 @@ 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,
@@ -102,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,
@@ -134,7 +136,8 @@ export async function add_sync_recursively(
 			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,
@@ -285,6 +288,12 @@ export async function sync(file_primary_key: string, task: FileTransferTask) {
 		}
 
 		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_general_error(file_primary_key, task, String(e));
 	}
@@ -295,8 +304,7 @@ export async function download_file(selected_file_id: string, selected_display_i
 		selected_file_id,
 		selected_display_ids
 	);
-	if (!file_data || is_folder(file_data.file))
+	if (!file_data || is_folder(file_data.file)) return console.warn('Download cancelled: is folder');
-		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)}`;
@@ -455,7 +463,11 @@ function update_current_loading_data(
 	});
 }
 
-function get_updated_task(current_loading_data: FileLoadingData, destination_display_id: string | null, task: FileTransferTask): FileTransferTask {
+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

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

@@ -7,7 +7,7 @@ import {
 	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';
@@ -29,13 +29,17 @@ 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);
+		await update_changed_directories(display, new_path);
-		if (!changed_paths) continue;
+	}
+}
+
+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);
 	}
-	}
 }
 
 export async function delete_and_deselect_unique_files_from_display(display_id: string) {
@@ -94,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);
 	}
 }
@@ -107,13 +114,19 @@ export async function get_missing_colliding_display_ids(
 
 	const colliding: string[] = [];
 	const colliding_files = await db.files
-		.where('[path+name]')
+		.where('name')
-		.equals([file.path, file.name])
+		.equals(file.name)
-		.filter((e) => e.size !== file.size || e.type !== file.type)
+		.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)
 		);
 	}
 
@@ -371,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);
@@ -395,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[]
@@ -418,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, '/');
+			await update_changed_directories(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);
-			}
 		}
 	}, 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/types.ts

@@ -48,6 +48,7 @@ export type FileTransferTaskData =
 				display: ShortDisplay;
 				loading_data: FileLoadingData;
 			}[];
+			open_file_afterwards_on_display_ids: string[];
 	  };
 
 export type FileLoadingData = {

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

@@ -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/ControlView.svelte

@@ -21,19 +21,19 @@
 		show_blackscreen,
 		shutdown,
 		startup,
-		show_html
+		show_website
 	} from '$lib/ts/api_handler';
 	import {
 		get_display_by_id,
-		no_active_display_selected,
+		run_on_all_selected_displays,
-		online_displays,
+		selected_online_display_ids
-		run_on_all_selected_displays
 	} 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(() => {
@@ -44,7 +44,7 @@
 	let popup_content: PopupContent = $state({
 		open: false,
 		snippet: null,
-		title: '',
+		title: ''
 	});
 
 	let current_text = $state('');
@@ -79,7 +79,7 @@
 			snippet: website_popup,
 			title: 'Webseite Anzeigen',
 			window_class: 'w-xl',
-			title_icon: Globe,
+			title_icon: Globe
 		};
 	};
 
@@ -102,7 +102,7 @@
 			open: true,
 			snippet: ask_shutdown_popup,
 			title: 'Bildschirm Herunterfahren',
-			title_icon: PowerOff,
+			title_icon: PowerOff
 		};
 	}
 
@@ -110,7 +110,10 @@
 		popup_content.open = false;
 		await run_on_all_selected_displays((d) => {
 			shutdown(d.ip); // no await here because we want to be fast
-			db.displays.update(d.id, { status: 'app_offline', preview: { currently_updating: false, url: null} });
+			db.displays.update(d.id, {
+				status: 'app_offline',
+				preview: { currently_updating: false, url: null }
+			});
 		}, false);
 	}
 
@@ -122,7 +125,7 @@
 				db.displays.update(d.id, { status: 'app_offline' });
 			},
 			false,
-			false
+			$selected_display_ids
 		);
 	}
 
@@ -143,9 +146,7 @@
 
 	async function send_website() {
 		popup_content.open = false;
-		await run_on_all_selected_displays((d) =>
+		await run_on_all_selected_displays((d) => show_website(d.ip, website_url));
-			show_html(d.ip, `<iframe src="${website_url}"></iframe>`)
-		);
 	}
 </script>
 
@@ -185,11 +186,11 @@
 {/snippet}
 
 {#snippet send_keys_popup()}
-	<KeyInput {popup_close_function}/>
+	<KeyInput {popup_close_function} />
 {/snippet}
 
 {#snippet text_popup()}
-	<TipTapInput bind:text={current_text}/>
+	<TipTapInput bind:text={current_text} />
 {/snippet}
 
 <div class="grid grid-rows-[2.5rem_auto] bg-stone-800 rounded-2xl min-w-0">
@@ -202,15 +203,15 @@
 				<div class="flex flex-row gap-2 w-75 justify-normal">
 					<button
 						title="Vorherige Folie (Pfeil nach Links) [gedrückt halten möglich]"
-						class="px-9 bg-stone-700 {$selected_display_ids.length === 0
+						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_display_ids.length === 0}
+						disabled={$selected_online_display_ids.length === 0}
-						onmousedown={async () => {
+						onmousedown={() => {
-							await send_single_key_press('ArrowLeft', 'press');
+							add_to_keyboard_queue(async () => await send_single_key_press('ArrowLeft', 'press'));
 						}}
-						onmouseup={async () => {
+						onmouseup={() => {
-							await send_single_key_press('ArrowLeft', 'release');
+							add_to_keyboard_queue(async () => await send_single_key_press('ArrowLeft', 'release'));
 						}}
 					>
 						<ArrowBigLeft />
@@ -218,15 +219,15 @@
 
 					<button
 						title="Vorherige Folie (Pfeil nach Links) [gedrückt halten möglich]"
-						class="px-9 bg-stone-700 {$selected_display_ids.length === 0
+						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_display_ids.length === 0}
+						disabled={$selected_online_display_ids.length === 0}
-						onmousedown={async () => {
+						onmousedown={() => {
-							await send_single_key_press('ArrowRight', 'press');
+							add_to_keyboard_queue(async () => await send_single_key_press('ArrowRight', 'press'));
 						}}
-						onmouseup={async () => {
+						onmouseup={() => {
-							await send_single_key_press('ArrowRight', 'release');
+							add_to_keyboard_queue(async () => await send_single_key_press('ArrowRight', 'release'));
 						}}
 					>
 						<ArrowBigRight />
@@ -236,19 +237,19 @@
 				<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
@@ -263,7 +264,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>
@@ -272,7 +273,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
@@ -281,7 +282,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,7 +22,8 @@
 		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';
@@ -38,7 +39,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,7 +53,7 @@
 	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();
@@ -61,7 +62,7 @@
 		one_file_selected = liveQuery(async () => {
 			const inode = await get_file_by_id(s[0]);
 			if (!inode) return false;
-			return s.length === 1 && is_folder(inode);
+			return s.length === 1 && !is_folder(inode);
 		});
 	});
 
@@ -89,11 +90,8 @@
 
 	async function create_new_folder() {
 		popup_close_function();
-		await create_folder_on_all_selected_displays(
+		const path_with_folder_name = ($current_file_path += current_name.trim() + '/');
-			current_name.trim(),
+		await create_path_on_all_selected_displays(path_with_folder_name, $selected_online_display_ids);
-			$current_file_path,
-			$selected_display_ids
-		);
 		await update_current_folder_on_selected_displays();
 	}
 
@@ -129,7 +127,7 @@
 		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,
@@ -149,16 +147,17 @@
 	};
 
 	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) {
+		if (current_selected_file_ids.length === 0 && current_folder_elements.length > 0) {
-			selected_file_ids = current_folder_elements.map((inode) => get_file_primary_key(inode));
+			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);
 		}
 	}
@@ -278,7 +277,7 @@
 	multiple
 	accept={get_accepted_file_type_string()}
 	onchange={(e) =>
-		add_upload((e.target as HTMLInputElement).files!, $selected_display_ids, $current_file_path)}
+		add_upload((e.target as HTMLInputElement).files!, $selected_online_display_ids, $current_file_path)}
 />
 
 <div class="bg-stone-800 h-full rounded-2xl grid grid-rows-[2.5rem_1fr] min-h-0">
@@ -320,7 +319,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
@@ -329,13 +328,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>
@@ -345,10 +344,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>
@@ -362,7 +361,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>
@@ -386,7 +385,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

@@ -7,6 +7,7 @@
 	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';
 
 	let {
 		popup_close_function
@@ -58,17 +59,21 @@
 		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);
+		});
 	}
 
-	async function release_all_pressed_keys() {
+	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' });
 			current_keys.splice(i, 1);
 		}
 
+		add_to_keyboard_queue(async () => {
 			await run_on_all_selected_displays((d) => send_keyboard_input(d.ip, inputs), true);
+		});
 	}
 
 	onDestroy(() => {
@@ -91,7 +96,7 @@
 		}}
 		onblur={async () => {
 			active = false;
-			await release_all_pressed_keys();
+			release_all_pressed_keys();
 		}}
 		onkeydown={(e) => on_keyboard_input(e, true)}
 		onkeyup={(e) => on_keyboard_input(e, false)}

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/web/main.go

@@ -295,14 +295,7 @@ func downloadFileRoute(ctx echo.Context) error {
 
 	slog.Info("Serving file for download", "path", fullPath)
 
-	file, err := os.Open(fullPath)
+	return ctx.File(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)
 }
 
 func openFileRoute(ctx echo.Context) error {

nixos/configuration.nix

@@ -95,6 +95,7 @@
     xreader
     tree
     jq
+    screen
 
     # Libraries
     imagemagick

shared/version.txt

@@ -1 +1 @@
-v0.0.17
+v0.1.1