chore: bump to version v0.1.7

Co-authored-by: E44 <129310925+programmer-44@users.noreply.github.com>
Reviewed-on: https://codeberg.org/PLG-Development/PLG-MuDiCS/pulls/58

.gitignore

@@ -1,2 +1,13 @@
 .aider*
 .env
+
+/display/internal/pdfjs/node_modules/*
+
+!/display/internal/pdfjs/node_modules/pdfjs-dist/
+/display/internal/pdfjs/node_modules/pdfjs-dist/*
+
+!/display/internal/pdfjs/node_modules/pdfjs-dist/build/
+/display/internal/pdfjs/node_modules/pdfjs-dist/build/*
+
+!/display/internal/pdfjs/node_modules/pdfjs-dist/build/pdf.min.mjs
+!/display/internal/pdfjs/node_modules/pdfjs-dist/build/pdf.worker.min.mjs

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

@@ -0,0 +1,176 @@
+<script lang="ts">
+	import { add_upload } from '$lib/ts/file_transfer_handler';
+	import { selected_online_display_ids } from '$lib/ts/stores/displays';
+	import { current_file_path } from '$lib/ts/stores/files';
+	import HighlightedText from './HighlightedText.svelte';
+
+	let { className } = $props();
+
+	let drop_zone: HTMLDivElement | undefined;
+
+	let is_dragging = $state(false);
+	let is_dragging_over_drop_zone = $state(false);
+	let is_dragging_multiple_files = $state(false);
+
+	let drag_counter = 0;
+
+	function contains_files(event: DragEvent): boolean {
+		return Array.from(event.dataTransfer?.types ?? []).includes('Files');
+	}
+
+	function reset_drag_vars(): void {
+		drag_counter = 0;
+		is_dragging = false;
+		is_dragging_over_drop_zone = false;
+		is_dragging_multiple_files = false;
+	}
+
+	function is_inside_drop_zone(event: DragEvent): boolean {
+		if (!drop_zone) return false;
+
+		const rect = drop_zone.getBoundingClientRect();
+
+		return (
+			event.clientX >= rect.left &&
+			event.clientX <= rect.right &&
+			event.clientY >= rect.top &&
+			event.clientY <= rect.bottom
+		);
+	}
+
+	function handle_window_drag_enter(event: DragEvent): void {
+		if (!contains_files(event)) return;
+
+		event.preventDefault();
+
+		drag_counter += 1;
+		is_dragging = true;
+		is_dragging_multiple_files =
+			(event.dataTransfer?.items.length ?? 0) > 1;
+
+		if (event.dataTransfer) {
+			event.dataTransfer.dropEffect = 'copy';
+		}
+	}
+
+	function handle_window_drag_over(event: DragEvent): void {
+		if (!contains_files(event)) return;
+
+		event.preventDefault();
+
+		is_dragging = true;
+		is_dragging_multiple_files =
+			(event.dataTransfer?.items.length ?? 0) > 1;
+
+		is_dragging_over_drop_zone =
+			$selected_online_display_ids.length > 0 &&
+			is_inside_drop_zone(event);
+
+		if (event.dataTransfer) {
+			event.dataTransfer.dropEffect = 'copy';
+		}
+	}
+
+	function handle_window_drag_leave(event: DragEvent): void {
+		if (!contains_files(event) && !is_dragging) return;
+
+		drag_counter = Math.max(0, drag_counter - 1);
+
+		if (drag_counter === 0) {
+			reset_drag_vars();
+		}
+	}
+
+	function handle_window_drop_capture(event: DragEvent): void {
+		if (!contains_files(event)) return;
+		event.preventDefault();
+	}
+
+	function handle_window_drop(event: DragEvent): void {
+		if (!contains_files(event)) return;
+
+		event.preventDefault();
+		reset_drag_vars();
+	}
+
+	async function handle_drop_zone_drop(
+		event: DragEvent
+	): Promise<void> {
+		if (!contains_files(event)) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		const may_import =
+			$selected_online_display_ids.length > 0 &&
+			is_inside_drop_zone(event);
+
+		const items = Array.from(event.dataTransfer?.items ?? []);
+
+		reset_drag_vars();
+
+		if (!may_import) return;
+
+		const transfer = new DataTransfer();
+
+		for (const item of items) {
+			if (item.kind !== 'file') continue;
+
+			const file = item.getAsFile();
+			const entry = item.webkitGetAsEntry?.();
+
+			if (file && (!entry || entry.isFile)) {
+				transfer.items.add(file);
+			}
+		}
+
+		if (transfer.files.length === 0) return;
+
+		await add_upload(
+			transfer.files,
+			$selected_online_display_ids,
+			$current_file_path
+		);
+	}
+</script>
+
+<svelte:window
+	ondragenter={handle_window_drag_enter}
+	ondragover={handle_window_drag_over}
+	ondragleave={handle_window_drag_leave}
+	ondrop={handle_window_drop}
+	ondropcapture={handle_window_drop_capture}
+/>
+
+<div
+	class="fixed {is_dragging
+		? 'bg-black/50 opacity-100'
+		: 'opacity-0'} pointer-events-none p-10 z-1000 inset-0 transition-all duration-100 flex items-center justify-center text-xl text-white font-bold select-none"
+>
+	{$selected_online_display_ids.length === 0
+		? 'Für das Hochladen von Dateien müssen erreichbare Displays ausgewählt werden!'
+		: ''}
+</div>
+
+<div
+	bind:this={drop_zone}
+	aria-hidden="true"
+	ondrop={handle_drop_zone_drop}
+	class="{className} absolute p-6 inset-0 flex z-1001 justify-center items-center transition-all duration-200 {$selected_online_display_ids.length >
+		0 && is_dragging
+		? 'opacity-100'
+		: 'opacity-0 pointer-events-none'} {is_dragging_over_drop_zone
+		? 'bg-stone-500'
+		: 'bg-stone-700'}"
+>
+	<p class="text-lg pointer-events-none">
+		Hier {is_dragging_multiple_files ? 'Dateien' : 'Datei'} ablegen, um sie auf {$selected_online_display_ids.length ===
+		1
+			? 'dem ausgewählten Display'
+			: 'den ausgewählten Displays'} in den Pfad <HighlightedText
+			className="transition-colors duration-200"
+			bg={is_dragging_over_drop_zone ? 'bg-stone-550' : 'bg-stone-750'}
+			>{$current_file_path}</HighlightedText
+		> hochzuladen
+	</p>
+</div>

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

@@ -36,7 +36,7 @@
 
 {#if content.open}
 	<div
-		class="absolute inset-0 backdrop-blur flex justify-center items-center z-50 {className}"
+		class="popup absolute inset-0 backdrop-blur flex justify-center items-center z-50 {className}"
 		transition:fade={{ duration: 100 }}
 	>
 		<div

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

@@ -84,9 +84,10 @@ export async function get_file_data(
     `;
 	const raw_response = await run_shell_command(ip, command);
 	if (!raw_response.ok || !raw_response.json) return null;
+	if (!raw_response.ok) return null;
+	if (handle_shell_error(ip, raw_response, command, true)) return null;
+
 	const json_response = raw_response.json as ShellCommandResponse;
-	if (json_response.exitCode === 0 && json_response.stdout.trim() === '') return [];
-	if (handle_shell_error(ip, json_response, command, true)) return null;
 	if (json_response.stdout.trim() === '') return null;
 
 	const response: FileInfo[] = json_response.stdout
@@ -116,11 +117,10 @@ export async function get_file_data(
 export async function get_file_tree_data(ip: string, path: string): Promise<TreeElement[] | null> {
 	const command = `cd ".${path}" && tree -Js`;
 	const raw_response = await run_shell_command(ip, command);
+	if (!raw_response.ok) return null;
+	if (handle_shell_error(ip, raw_response, command, true)) return null;
 
-	if (!raw_response.ok || !raw_response.json) return null;
 	const json_response = raw_response.json as ShellCommandResponse;
-	if (handle_shell_error(ip, json_response, command, true)) return null;
-
 	const tree_element: TreeElement | null = JSON.parse(json_response.stdout.trim())[0] || null;
 
 	return tree_element?.contents || null;
@@ -130,9 +130,8 @@ export async function create_path(ip: string, path: string): Promise<void> {
 	const command = `mkdir -p ".${path}"`;
 
 	const raw_response = await run_shell_command(ip, command);
-	if (!raw_response.ok || !raw_response.json) return;
+	if (!raw_response.ok) return;
-	const json_response = raw_response.json as ShellCommandResponse;
+	handle_shell_error(ip, raw_response, command, true);
-	handle_shell_error(ip, json_response, command, true);
 }
 
 export async function rename_file(
@@ -144,9 +143,8 @@ export async function rename_file(
 	const command: string = `cd ".${path}" && mv "${old_file_name}" "${new_file_name}"`;
 
 	const raw_response = await run_shell_command(ip, command);
-	if (!raw_response.ok || !raw_response.json) return;
+	if (!raw_response.ok) return;
-	const json_response = raw_response.json as ShellCommandResponse;
+	handle_shell_error(ip, raw_response, command, true);
-	handle_shell_error(ip, json_response, command, true);
 }
 
 export async function delete_files(
@@ -159,9 +157,8 @@ export async function delete_files(
 		command += ` && rm -r "${file_name}"`;
 	}
 	const raw_response = await run_shell_command(ip, command);
-	if (!raw_response.ok || !raw_response.json) return;
+	if (!raw_response.ok) return;
-	const json_response = raw_response.json as ShellCommandResponse;
+	handle_shell_error(ip, raw_response, command, true);
-	handle_shell_error(ip, json_response, command, true);
 }
 
 export async function show_blackscreen(ip: string): Promise<void> {
@@ -288,11 +285,21 @@ async function request(
 
 function handle_shell_error(
 	ip: string,
-	shell_response: ShellCommandResponse,
+	response: RequestResponse,
 	shell_command: string,
-	command_includs_cd: boolean
+	command_includs_cd: boolean,
+	response_type: 'json' | 'blob' = 'json'
 ): boolean {
-	if (shell_response.exitCode !== 0) {
+	if (
+		(response_type === 'json' && !response.json) ||
+		(response_type === 'blob' && !response.blob)
+	) {
+		const error_string = `Did not receive ${response_type}: ${JSON.stringify(response)}`;
+		console.error(error_string);
+		notifications.push('error', `Fehler in API-Shell`, `${ip}\n${shell_command}\n${error_string}`);
+		return true;
+	} else if (response.json && response.json.exitCode !== 0) {
+		const shell_response = response.json as ShellCommandResponse;
 		if (
 			command_includs_cd &&
 			shell_response.stderr &&
@@ -325,8 +332,12 @@ async function run_shell_command(ip: string, command: string): Promise<RequestRe
 	return await request_display(ip, '/shellCommand', options);
 }
 
-export async function shutdown(ip: string): Promise<RequestResponse> {
+export async function shutdown(ip: string): Promise<boolean> {
-	return await run_shell_command(ip, 'xfce4-session-logout --halt');
+	const command = 'xfce4-session-logout --halt';
+	const raw_response = await run_shell_command(ip, command);
+	if (!raw_response.ok) return false;
+	if (handle_shell_error(ip, raw_response, command, true)) return false;
+	return true;
 }
 
 export async function startup(mac: string): Promise<RequestResponse> {

control/frontend/src/lib/ts/main.ts

@@ -1,8 +1,8 @@
 import { screenshot_loop } from './stores/displays';
 import { ping_ip } from './api_handler';
 import type { Display, DisplayStatus } from './types';
-import { update_folder_elements_recursively } from './stores/files';
 import { db } from './database';
+import { update_changed_directories } from './stores/files';
 
 const update_display_status_interval_seconds = 20;
 const update_display_loading_status_interval_seconds = 2;
@@ -10,8 +10,6 @@ const update_display_loading_status_interval_seconds = 2;
 const loading_display_ids: string[] = [];
 
 export async function on_app_start() {
-	await db.files.clear();
-	await db.files_on_display.clear();
 	await db.displays
 		.toCollection()
 		.modify({ status: null, preview: { currently_updating: false, url: null } });
@@ -47,17 +45,19 @@ export async function update_display_status(display: Display): Promise<DisplaySt
 	}
 	if (resp.status === null && display.status !== null) return null;
 	if (resp.status !== display.status) {
+		let run_on_display_start = false;
 		// status change
 		if (resp.status === 'app_offline') {
 			loading_display_ids.push(display.id);
 		} else {
 			remove_display_from_loading_displays(display.id);
 			if (resp.status === 'app_online') {
-				on_display_start(display);
+				run_on_display_start = true;
 			}
 		}
 		display.status = resp.status;
 		await db.displays.put(display); // save
+		if (run_on_display_start) await on_display_start(display);
 	}
 	return resp.status;
 }
@@ -70,6 +70,6 @@ export function remove_display_from_loading_displays(display_id: string) {
 }
 
 async function on_display_start(display: Display) {
-	await update_folder_elements_recursively(display, '/');
+	await update_changed_directories(display);
 	screenshot_loop(display.id);
 }

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

@@ -7,7 +7,7 @@ import {
 	type Inode,
 	type TreeElement
 } from '../types';
-import { get_display_by_id, selected_online_display_ids } from './displays';
+import { get_display_by_id, online_displays, 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';
@@ -26,14 +26,12 @@ export async function change_file_path(new_path: string) {
 
 	deactivate_old_thumbnail_urls();
 
-	const displays = await db.displays.toArray();
+	for (const display of get(online_displays)) {
-
-	for (const display of displays) {
 		await update_changed_directories(display, new_path);
 	}
 }
 
-async function update_changed_directories(display: Display, path: string = '/') {
+export 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);
@@ -239,7 +237,7 @@ async function get_recursive_changed_directory_paths(
 	return has_changed;
 }
 
-export async function update_folder_elements_recursively(
+async function update_folder_elements_recursively(
 	display: Display,
 	file_path: string = '/'
 ): Promise<void> {

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

@@ -74,8 +74,8 @@
 		if (existing_display_id) {
 			display = await edit_display_data(existing_display_id, ip, mac, name);
 		} else {
-			const status = await ping_ip(text_inputs_valid.ip.value);
+			const resp = await ping_ip(text_inputs_valid.ip.value);
-			display = await add_display(ip, mac, name, status);
+			display = await add_display(ip, mac, name, resp.status);
 		}
 		if (display) {
 			await update_display_status(display);
@@ -282,11 +282,11 @@
 				className="px-4 gap-2"
 				bg="bg-stone-750"
 				click_function={async () => {
-					const status = await ping_ip(text_inputs_valid.ip.value);
+					const resp = await ping_ip(text_inputs_valid.ip.value);
 					notifications.push(
 						'info',
 						`Ping '${text_inputs_valid.ip.value}'`,
-						`Aktueller Zustand: ${display_status_to_info(status)}`
+						`Aktueller Zustand: ${display_status_to_info(resp.status)}`
 					);
 				}}><Radio /> Ping</Button
 			>

control/frontend/src/routes/ControlView.svelte

@@ -34,6 +34,7 @@
 	import { liveQuery, type Observable } from 'dexie';
 	import TextInput from '$lib/components/TextInput.svelte';
 	import { add_to_keyboard_queue } from '$lib/ts/utils';
+	import { onMount } from 'svelte';
 
 	let all_display_states: Observable<'on' | 'off' | 'mixed'> | undefined = $state();
 	$effect(() => {
@@ -44,11 +45,16 @@
 	let popup_content: PopupContent = $state({
 		open: false,
 		snippet: null,
-		title: '',
+		title: ''
 	});
 
 	let current_text = $state('');
 
+	const key_pressed = $state({
+		ArrowRight: false,
+		ArrowLeft: false
+	});
+
 	function popup_close_function() {
 		popup_content.open = false;
 	}
@@ -79,7 +85,7 @@
 			snippet: website_popup,
 			title: 'Webseite Anzeigen',
 			window_class: 'w-xl',
-			title_icon: Globe,
+			title_icon: Globe
 		};
 	};
 
@@ -102,15 +108,19 @@
 			open: true,
 			snippet: ask_shutdown_popup,
 			title: 'Bildschirm Herunterfahren',
-			title_icon: PowerOff,
+			title_icon: PowerOff
 		};
 	}
 
 	async function shutdown_action() {
 		popup_content.open = false;
-		await run_on_all_selected_displays((d) => {
+		await run_on_all_selected_displays(async (d) => {
-			shutdown(d.ip); // no await here because we want to be fast
+			if (await shutdown(d.ip)) {
-			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);
 	}
 
@@ -143,10 +153,58 @@
 
 	async function send_website() {
 		popup_content.open = false;
-		await run_on_all_selected_displays((d) =>
+		await run_on_all_selected_displays((d) => open_website(d.ip, website_url));
-			open_website(d.ip, website_url)
-		);
 	}
+
+	function has_open_popup(): boolean {
+		return document.querySelector('.popup') !== null;
+	}
+
+	function handle_key(
+		event: KeyboardEvent,
+		key: 'ArrowRight' | 'ArrowLeft',
+		action: 'press' | 'release'
+	) {
+		if (event.key === key) {
+			const current_press_state: boolean = key_pressed[key];
+			if (
+				(action === 'press' && (current_press_state === true || has_open_popup())) ||
+				(action === 'release' && current_press_state === false)
+			)
+				return;
+
+			key_pressed[key] = !current_press_state;
+			add_to_keyboard_queue(async () => {
+				await run_on_all_selected_displays(
+					(d) => send_keyboard_input(d.ip, [{ key, action }]),
+					true
+				);
+			});
+		}
+	}
+
+	function add_remove_event_listeners(
+		add_remove_function: (type: string, listener: (e: KeyboardEvent) => void) => void
+	) {
+		const actions = {
+			keydown: 'press',
+			keyup: 'release'
+		} as const;
+		const keys = ['ArrowRight', 'ArrowLeft'] as const;
+
+		for (const [action_type, action_value] of Object.entries(actions)) {
+			for (const key of keys) {
+				add_remove_function(action_type, (e: KeyboardEvent) => handle_key(e, key, action_value));
+			}
+		}
+	}
+
+	onMount(() => {
+		add_remove_event_listeners(window.addEventListener);
+		return () => {
+			add_remove_event_listeners(window.removeEventListener);
+		};
+	});
 </script>
 
 {#snippet website_popup()}
@@ -185,11 +243,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 +260,19 @@
 				<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_online_display_ids.length === 0
+						class="px-9 {key_pressed.ArrowLeft
+							? 'bg-stone-500'
+							: '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}
+						disabled={$selected_online_display_ids.length === 0 || key_pressed.ArrowLeft}
 						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'));
+							add_to_keyboard_queue(
+								async () => await send_single_key_press('ArrowLeft', 'release')
+							);
 						}}
 					>
 						<ArrowBigLeft />
@@ -218,15 +280,21 @@
 
 					<button
 						title="Nächste Folie (Pfeil nach Rechts) [gedrückt halten möglich]"
-						class="px-9 bg-stone-700 {$selected_online_display_ids.length === 0
+						class="px-9 {key_pressed.ArrowRight
-							? 'text-stone-500 cursor-not-allowed'
+							? 'bg-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"
+							: `bg-stone-700 ${
-						disabled={$selected_online_display_ids.length === 0}
+									$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 || key_pressed.ArrowRight}
 						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'));
+							add_to_keyboard_queue(
+								async () => await send_single_key_press('ArrowRight', 'release')
+							);
 						}}
 					>
 						<ArrowBigRight />
@@ -271,8 +339,7 @@
 				<div class="flex flex-col gap-2">
 					<Button
 						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
-						disabled={$all_display_states === 'on' ||
+						disabled={$all_display_states === 'on' || $selected_display_ids.length === 0}
-							$selected_display_ids.length === 0}
 						click_function={startup_action}
 					>
 						<Power /> Bildschirm Hochfahren
@@ -280,8 +347,7 @@
 
 					<Button
 						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
-						disabled={$all_display_states === 'off' ||
+						disabled={$all_display_states === 'off' || $selected_online_display_ids.length === 0}
-							$selected_online_display_ids.length === 0}
 						click_function={ask_shutdown}
 					>
 						<PowerOff /> Bildschirm Herunterfahren</Button

control/frontend/src/routes/DisplayView.svelte

@@ -13,6 +13,7 @@
 		change_height,
 		current_height,
 		dnd_flip_duration_ms,
+		get_selectable_color_classes,
 		is_display_drag,
 		is_group_drag,
 		next_height_step_size,
@@ -57,7 +58,7 @@
 	$effect(() => {
 		const d = $display_groups;
 		const sdi = $selected_display_ids;
-		all_groups_selected = liveQuery(() => all_selected(d || [], sdi));
+		all_groups_selected = liveQuery(() => d.length !== 0 && all_selected(d || [], sdi));
 	});
 
 	let last_pinned_pane_size: number = 45;
@@ -217,11 +218,22 @@
 					</span>
 					<div class="flex flex-row gap-1">
 						<button
-							class="min-w-40 px-4 rounded-xl cursor-pointer duration-200 transition-colors bg-stone-600"
+							disabled={$display_groups?.length === 0}
+							class="min-w-40 px-4 rounded-xl duration-200 transition-colors {$display_groups?.length ===
+				0
+					? 'text-stone-500 cursor-not-allowed'
+					: 'cursor-pointer'} {get_selectable_color_classes($all_groups_selected || false, {
+					bg: true,
+					hover: $display_groups?.length !== 0,
+					active: $display_groups?.length !== 0,
+					text: true
+				})}"
 							onclick={async () => await toggle_all_selected_displays($display_groups)}
 						>
 							<span>{$all_groups_selected || false ? 'Alle Abwählen' : 'Alle Auswählen'}</span>
 						</button>
+
+
 						<div class="flex flex-row">
 							<Button
 								title="Bildschirme größer darstellen"

control/frontend/src/routes/FileView.svelte

@@ -11,7 +11,12 @@
 		ZoomIn,
 		ZoomOut
 	} from 'lucide-svelte';
-	import { change_height, current_height, next_height_step_size } from '$lib/ts/stores/ui_behavior';
+	import {
+		change_height,
+		current_height,
+		get_selectable_color_classes,
+		next_height_step_size
+	} from '$lib/ts/stores/ui_behavior';
 	import Button from '$lib/components/Button.svelte';
 	import PathBar from './PathBar.svelte';
 	import { select, selected_display_ids, selected_file_ids } from '$lib/ts/stores/select';
@@ -39,6 +44,7 @@
 	import { liveQuery, type Observable } from 'dexie';
 	import { download_file, add_upload, add_sync_recursively } from '$lib/ts/file_transfer_handler';
 	import { selected_online_display_ids } from '$lib/ts/stores/displays';
+	import FileDropZone from '$lib/components/FileDropZone.svelte';
 
 	let current_name: string = $state('');
 	let current_valid: boolean = $state(false);
@@ -49,6 +55,16 @@
 		const s = $selected_file_ids;
 		selected_files = liveQuery(() => get_selected_files(s));
 	});
+	let all_files_selected: boolean = $state(false);
+	$effect(() => {
+		const fe = $current_folder_elements;
+		const sfe_id = $selected_file_ids;
+		if (fe && sfe_id && fe.length !== 0) {
+			all_files_selected =
+				fe.length === sfe_id.length &&
+				!fe.find((inode) => !sfe_id.includes(get_file_primary_key(inode)));
+		}
+	});
 	let current_folder_elements: Observable<Inode[]> | undefined = $state();
 	$effect(() => {
 		const path = $current_file_path,
@@ -59,7 +75,7 @@
 	$effect(() => {
 		const s = $selected_file_ids;
 		one_file_selected = liveQuery(async () => {
-			if (s.length !== 1) return false
+			if (s.length !== 1) return false;
 			const inode = await get_file_by_id(s[0]);
 			if (!inode) return false;
 			return !is_folder(inode);
@@ -146,6 +162,18 @@
 		};
 	};
 
+	async function toggle_all_selected_files(current_files: Inode[]) {
+		let action: 'select' | 'deselect';
+		if (all_files_selected === false) {
+			action = 'select';
+		} else {
+			action = 'deselect';
+		}
+		for (const file of current_files) {
+			await select(selected_file_ids, get_file_primary_key(file), action);
+		}
+	}
+
 	async function sync_selected_files(
 		current_selected_file_ids: string[],
 		selected_display_ids: string[],
@@ -285,34 +313,51 @@
 	}}
 />
 
-<div class="bg-stone-800 h-full rounded-2xl grid grid-rows-[2.5rem_1fr] min-h-0">
+<div class="bg-stone-800 size-full rounded-2xl grid grid-rows-[2.5rem_1fr] min-h-0">
 	<div class="bg-stone-700 flex justify-between w-full p-1 rounded-t-2xl min-w-0 gap-2">
 		<span class="text-xl font-bold pl-2 content-center truncate min-w-0">
 			Dateien Anzeigen und Verwalten
 		</span>
-		<div class="flex flex-row">
+		<div class="flex flex-row gap-1">
-			<Button
+			<button
-				title="Dateien größer darstellen"
+				disabled={$current_folder_elements?.length === 0}
-				className="aspect-square p-1.5! pr-1! rounded-r-none"
+				class="min-w-40 px-4 rounded-xl duration-200 transition-colors {$current_folder_elements?.length ===
-				bg="bg-stone-600"
+				0
-				disabled={!next_height_step_size('file', $current_height, 1)}
+					? 'text-stone-500 cursor-not-allowed'
-				click_function={() => {
+					: 'cursor-pointer'} {get_selectable_color_classes(all_files_selected, {
-					change_height('file', 1);
+					bg: true,
-				}}
+					hover: $current_folder_elements?.length !== 0,
+					active: $current_folder_elements?.length !== 0,
+					text: true
+				})}"
+				onclick={async () => await toggle_all_selected_files($current_folder_elements ?? [])}
 			>
-				<ZoomIn class="size-full" />
+				<span>{all_files_selected ? 'Alle Abwählen' : 'Alle Auswählen'}</span>
-			</Button>
+			</button>
-			<Button
+			<div class="flex flex-row">
-				title="Dateien kleiner darstellen"
+				<Button
-				className="aspect-square p-1.5! pl-1! rounded-l-none"
+					title="Dateien größer darstellen"
-				bg="bg-stone-600"
+					className="aspect-square p-1.5! pr-1! rounded-r-none"
-				disabled={!next_height_step_size('file', $current_height, -1)}
+					bg="bg-stone-600"
-				click_function={() => {
+					disabled={!next_height_step_size('file', $current_height, 1)}
-					change_height('file', -1);
+					click_function={() => {
-				}}
+						change_height('file', 1);
-			>
+					}}
-				<ZoomOut class="size-full" />
+				>
-			</Button>
+					<ZoomIn class="size-full" />
+				</Button>
+				<Button
+					title="Dateien kleiner darstellen"
+					className="aspect-square p-1.5! pl-1! rounded-l-none"
+					bg="bg-stone-600"
+					disabled={!next_height_step_size('file', $current_height, -1)}
+					click_function={() => {
+						change_height('file', -1);
+					}}
+				>
+					<ZoomOut class="size-full" />
+				</Button>
+			</div>
 		</div>
 	</div>
 	<div class="flex flex-col gap-2 p-2 overflow-hidden relative rounded-b-2xl">
@@ -388,7 +433,11 @@
 				</div>
 			</div>
 		</div>
-		<div class="min-h-0 h-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl">
+
+		<div
+			class="min-h-0 size-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl relative"
+		>
+			<FileDropZone className="rounded-xl size-full" />
 			<div class="flex flex-col gap-2 p-2 min-h-0 max-w-full">
 				{#if $selected_online_display_ids.length === 0}
 					<span class="text-stone-450 px-10 py-6 leading-relaxed text-center">

control/open_browser.go

@@ -24,6 +24,7 @@ func openBrowserWindow(url string) error {
 	args := []string{
 		fmt.Sprintf("--app=%s", url),
 		fmt.Sprintf("--user-data-dir=%s", browserProfileDirPath),
+		"--disable-features=Translate",
 	}
 
 	errs := []string{}

display/internal/pdfjs/assets.go

@@ -0,0 +1,7 @@
+package pdfjs
+
+import "embed"
+
+//go:embed node_modules/pdfjs-dist/build/pdf.min.mjs
+//go:embed node_modules/pdfjs-dist/build/pdf.worker.min.mjs
+var Files embed.FS

display/internal/pdfjs/deno.json

@@ -0,0 +1,10 @@
+{
+  "nodeModulesDir": "manual",
+  "nodeModulesLinker": "hoisted",
+  "imports": {
+    "pdfjs-dist": "npm:pdfjs-dist@6.0.227"
+  },
+  "tasks": {
+    "install": "deno install --frozen"
+  }
+}

display/internal/pdfjs/deno.lock

@@ -0,0 +1,90 @@
+{
+  "version": "5",
+  "specifiers": {
+    "npm:pdfjs-dist@6.0.227": "6.0.227"
+  },
+  "npm": {
+    "@napi-rs/canvas-android-arm64@1.0.0": {
+      "integrity": "sha512-3hNKJObUK7JsCF9aJlVCs1J0/KE/gGfZNeK8MO1ge6bB3aicr5walGme9t9No1f/oyk9GgvdAT/rjSdsx3gbIw==",
+      "os": ["android"],
+      "cpu": ["arm64"]
+    },
+    "@napi-rs/canvas-darwin-arm64@1.0.0": {
+      "integrity": "sha512-ZIja19/BiGz2puhki+WUYSRriwFeFJ8Mi9eK3hZdSS85w4Y60cuEAJVhMCfKwswQkKkUtrnzdKMBuO7TupvexA==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@napi-rs/canvas-darwin-x64@1.0.0": {
+      "integrity": "sha512-hImggWc82jqZVpEsFR9S7PE9OQYjq/H/D7vwCGB6X1jRH+UVBP1+1niJTPBOat1B154T6GKK7/kcFtoWgjgFzQ==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "@napi-rs/canvas-linux-arm-gnueabihf@1.0.0": {
+      "integrity": "sha512-hlJRy6d+kWLKVOG/+1rEvNQVURZ0DxxRPJsLmEWwhwiXZUJc0BF5o9esALHSEP4CoJK4wChRtj3hnyBgVx2oWA==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@napi-rs/canvas-linux-arm64-gnu@1.0.0": {
+      "integrity": "sha512-5Hru4T3RXkosRQafcjelv7AUzw9mXqmGYsxnzeDDOWveFCJyEPMSJltvGCM+jfH98seOCbfwm9KyFg6Jm5FhAA==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@napi-rs/canvas-linux-arm64-musl@1.0.0": {
+      "integrity": "sha512-LTUl9jS8WsLSUGaxQZKQkxfluOJRpgvBuxxdM4pYcjib+di8AU4OzQc6+L6SzGMLcKc9H0RAjojRatBhTMqYdg==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@napi-rs/canvas-linux-riscv64-gnu@1.0.0": {
+      "integrity": "sha512-Iz931SAZf+WVDzpjk52Q3ffW3zw0YflFwEZMgs036Wfu1kX/LrwT9wGjsuSqyduqefUkl91/vTdAjn8hQu5ezA==",
+      "os": ["linux"],
+      "cpu": ["riscv64"]
+    },
+    "@napi-rs/canvas-linux-x64-gnu@1.0.0": {
+      "integrity": "sha512-pFEQ5eFK4JusgN1K6KkO9DKP/Hi1WMJOkF8Ch03/khTc4bFbCKkCCsJG4YcOMOW9bI4XbT2/eMAWxhO0xaWgPA==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@napi-rs/canvas-linux-x64-musl@1.0.0": {
+      "integrity": "sha512-jnvr8NrLHiZ3NCiOKWqDbkI4Ah+QDrqtZ+sddPZBltEb1mQ2coSvCSJYfict+oAwcm0c970oTmVySpjKP/lnaA==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@napi-rs/canvas-win32-arm64-msvc@1.0.0": {
+      "integrity": "sha512-y2j9/Gfd5joqiqxdP/L1smqjQ+uAx3C4N0EC7bDHrnZEEH8ToM/OC5p3uHvtj4Lq591aHj+ArL01UDLNwT5HgQ==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "@napi-rs/canvas-win32-x64-msvc@1.0.0": {
+      "integrity": "sha512-qwdhh9N6Gge/hC4pL9S1tQp0iKwhSl/dYjg7+RGp9k26iRGRi5MqqUyKGOXIWli0zOcuy5Y2wIH/jk2ry6i/jA==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "@napi-rs/canvas@1.0.0": {
+      "integrity": "sha512-Jqxcy1XOIqj+lH9sl1GT+il6GR3uQv13vI2mrwubP3uT8Olak2ClDrK2RnxlQKjwv8BRr4b3ug0YR7c6hBX8wg==",
+      "optionalDependencies": [
+        "@napi-rs/canvas-android-arm64",
+        "@napi-rs/canvas-darwin-arm64",
+        "@napi-rs/canvas-darwin-x64",
+        "@napi-rs/canvas-linux-arm-gnueabihf",
+        "@napi-rs/canvas-linux-arm64-gnu",
+        "@napi-rs/canvas-linux-arm64-musl",
+        "@napi-rs/canvas-linux-riscv64-gnu",
+        "@napi-rs/canvas-linux-x64-gnu",
+        "@napi-rs/canvas-linux-x64-musl",
+        "@napi-rs/canvas-win32-arm64-msvc",
+        "@napi-rs/canvas-win32-x64-msvc"
+      ]
+    },
+    "pdfjs-dist@6.0.227": {
+      "integrity": "sha512-/P6M4SXw+70waMVLUM7rdRtvo+dEzqE1t6W/zQNvBETo2MaRa5rrvCcAYdfWGiUzadTgM0lJmRApUrW0d9zgKg==",
+      "optionalDependencies": [
+        "@napi-rs/canvas"
+      ]
+    }
+  },
+  "workspace": {
+    "dependencies": [
+      "npm:pdfjs-dist@6.0.227"
+    ]
+  }
+}

display/pkg/main.templ

@@ -1,5 +1,7 @@
 package pkg
 
+import "strings"
+
 templ basicTemplate() {
 	<!DOCTYPE html>
 	<html lang="en">
@@ -115,6 +117,166 @@ templ deviceInfoTemplate(ip string, mac string, showQR bool) {
 	}
 }
 
+templ pdfTemplate(path string, serverOrigin string) {
+	@basicTemplate() {
+		<base href={ serverOrigin + "/" }/>
+
+		<div
+			id="pdf"
+			data-src={ "api/file/" + strings.Split(path, "/.local/share/plg-mudics/display")[1] }
+			data-lib="static/pdfjs/pdf.min.mjs"
+			data-worker="static/pdfjs/pdf.worker.min.mjs"
+		></div>
+
+		<style>
+			html,body,#pdf {
+				margin:0;
+				width:100%;
+				height:100%;
+				overflow:hidden;
+				background:#000;
+			}
+			#pdf {
+				display:grid;
+				place-items:center;
+			}
+			#pdf canvas {
+				grid-area:1/1;
+				display:block;
+			}
+		</style>
+
+		<script type="module">
+			const host=document.querySelector("#pdf");
+			const resolve=x=>new URL(x,document.baseURI).href;
+
+			const P=await import(resolve(host.dataset.lib));
+			P.GlobalWorkerOptions.workerSrc=resolve(host.dataset.worker);
+
+			const pdf=await P.getDocument({
+				url:resolve(host.dataset.src),
+				useWasm:false
+			}).promise;
+
+			const cache=new Map();
+			let currentPage=1;
+			let wantedPage=1;
+			let requestNumber=0;
+
+			function renderPage(number) {
+				if(cache.has(number)) return cache.get(number);
+
+				const promise=(async()=>{
+					const page=await pdf.getPage(number);
+					const original=page.getViewport({scale:1});
+					const scale=Math.min(
+						innerWidth/original.width,
+						innerHeight/original.height
+					);
+
+					// Use 1 on old hardware. Raise to 1.5 for sharper output.
+					const pixelRatio=1;
+					const viewport=page.getViewport({
+						scale:scale*pixelRatio
+					});
+
+					const canvas=document.createElement("canvas");
+					canvas.width=Math.ceil(viewport.width);
+					canvas.height=Math.ceil(viewport.height);
+					canvas.style.width=`${viewport.width/pixelRatio}px`;
+					canvas.style.height=`${viewport.height/pixelRatio}px`;
+
+					const task=page.render({
+						canvasContext:canvas.getContext("2d"),
+						viewport
+					});
+
+					await task.promise;
+					return canvas;
+				})().catch(error=>{
+					cache.delete(number);
+					throw error;
+				});
+
+				cache.set(number,promise);
+				return promise;
+			}
+
+			async function show(number) {
+				wantedPage=Math.max(1,Math.min(pdf.numPages,number));
+				const request=++requestNumber;
+				const canvas=await renderPage(wantedPage);
+
+				// Ignore an obsolete result after multiple fast key presses.
+				if(request!==requestNumber) return;
+
+				// The new canvas is already completely rendered.
+				host.replaceChildren(canvas);
+				currentPage=wantedPage;
+
+				pruneCache();
+				preloadNeighbours();
+			}
+
+			function preloadNeighbours() {
+				const page=currentPage;
+
+				requestIdleCallback(async()=>{
+					if(page+1<=pdf.numPages) {
+						await renderPage(page+1);
+					}
+					if(page-1>=1) {
+						await renderPage(page-1);
+					}
+				},{timeout:250});
+			}
+
+			function pruneCache() {
+				const keep=new Set([
+					currentPage-1,
+					currentPage,
+					currentPage+1
+				]);
+
+				for(const [number,promise] of cache) {
+					if(keep.has(number)) continue;
+
+					cache.delete(number);
+					promise.then(canvas=>{
+						if(!canvas.isConnected) {
+							canvas.width=0;
+							canvas.height=0;
+						}
+					}).catch(()=>{});
+				}
+			}
+
+			addEventListener("keydown",event=>{
+				if(event.key==="ArrowRight") {
+					event.preventDefault();
+					show(wantedPage+1);
+				} else if(event.key==="ArrowLeft") {
+					event.preventDefault();
+					show(wantedPage-1);
+				}
+			});
+
+			addEventListener("resize",()=>{
+				cache.clear();
+				show(currentPage);
+			});
+
+			window.pdfViewer={
+				page:()=>currentPage,
+				count:()=>pdf.numPages,
+				show
+			};
+
+			await show(1);
+		</script>
+	}
+}
+
 templ startScreenTemplate(splashScreenHtml string, ip string, mac string, qrPath string) {
 	@basicTemplate() {
 		<div style="width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: space-between;">

display/pkg/open_file.go

@@ -40,7 +40,12 @@ func OpenFile(path string) error {
 		_ = imageTemplate(path).Render(context.Background(), &templateBuffer)
 		err = browser.Browser.OpenHTML(templateBuffer.String())
 	case "application/pdf":
-		err = browser.Browser.OpenPDF(path)
+		var templateBuffer bytes.Buffer
+		err = pdfTemplate(path, "http://127.0.0.1:1323").Render(context.Background(), &templateBuffer)
+		if err == nil {
+			err = browser.Browser.OpenHTML(templateBuffer.String())
+		}
+
 	case "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.oasis.opendocument.presentation":
 		err = fileHandler.openFileWithApp(path)
 	default:

display/web/main.go

@@ -16,12 +16,20 @@ import (
 	"github.com/labstack/echo/v4/middleware"
 
 	"plg-mudics/display/browser"
+	"plg-mudics/display/internal/pdfjs"
 	"plg-mudics/display/pkg"
 )
 
 func StartWebServer(port string) {
 	e := echo.New()
 
+	pdfJSGroup := e.Group("/static/pdfjs")
+	pdfJSGroup.Use(middleware.CORS())
+	pdfJSGroup.StaticFS(
+		"/",
+		echo.MustSubFS(pdfjs.Files, "node_modules/pdfjs-dist/build"),
+	)
+
 	apiGroup := e.Group("/api")
 	apiGroup.Use(middleware.CORS())
 	apiGroup.GET("/ping", pingRoute)

shared/version.txt

@@ -1 +1 @@
-v0.1.5
+v0.1.7