chore: bump to version v0.1.5

closes #54

control/frontend/deno.lock

@@ -3,7 +3,6 @@
   "specifiers": {
     "npm:@eslint/compat@^1.4.1": "1.4.1_eslint@9.39.2",
     "npm:@eslint/js@^9.39.2": "9.39.2",
-    "npm:@playwright/test@1.56.1": "1.56.1",
     "npm:@sveltejs/adapter-auto@^6.1.1": "6.1.1_@sveltejs+kit@2.49.3__@sveltejs+vite-plugin-svelte@6.2.3___svelte@5.46.1____acorn@8.15.0___vite@7.3.1____sass-embedded@1.97.2____picomatch@4.0.3___sass-embedded@1.97.2__svelte@5.46.1___acorn@8.15.0__typescript@5.9.3__vite@7.3.1___sass-embedded@1.97.2___picomatch@4.0.3__acorn@8.15.0__sass-embedded@1.97.2_@sveltejs+vite-plugin-svelte@6.2.3__svelte@5.46.1___acorn@8.15.0__vite@7.3.1___sass-embedded@1.97.2___picomatch@4.0.3__sass-embedded@1.97.2_svelte@5.46.1__acorn@8.15.0_typescript@5.9.3_vite@7.3.1__sass-embedded@1.97.2__picomatch@4.0.3_sass-embedded@1.97.2",
     "npm:@sveltejs/adapter-static@^3.0.10": "3.0.10_@sveltejs+kit@2.49.3__@sveltejs+vite-plugin-svelte@6.2.3___svelte@5.46.1____acorn@8.15.0___vite@7.3.1____sass-embedded@1.97.2____picomatch@4.0.3___sass-embedded@1.97.2__svelte@5.46.1___acorn@8.15.0__typescript@5.9.3__vite@7.3.1___sass-embedded@1.97.2___picomatch@4.0.3__acorn@8.15.0__sass-embedded@1.97.2_@sveltejs+vite-plugin-svelte@6.2.3__svelte@5.46.1___acorn@8.15.0__vite@7.3.1___sass-embedded@1.97.2___picomatch@4.0.3__sass-embedded@1.97.2_svelte@5.46.1__acorn@8.15.0_typescript@5.9.3_vite@7.3.1__sass-embedded@1.97.2__picomatch@4.0.3_sass-embedded@1.97.2",
     "npm:@sveltejs/kit@^2.49.3": "2.49.3_@sveltejs+vite-plugin-svelte@6.2.3__svelte@5.46.1___acorn@8.15.0__vite@7.3.1___sass-embedded@1.97.2___picomatch@4.0.3__sass-embedded@1.97.2_svelte@5.46.1__acorn@8.15.0_typescript@5.9.3_vite@7.3.1__sass-embedded@1.97.2__picomatch@4.0.3_acorn@8.15.0_sass-embedded@1.97.2",
@@ -369,13 +368,6 @@
       ],
       "scripts": true
     },
-    "@playwright/test@1.56.1": {
-      "integrity": "sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==",
-      "dependencies": [
-        "playwright"
-      ],
-      "bin": true
-    },
     "@polka/url@1.0.0-next.29": {
       "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="
     },
@@ -1374,11 +1366,6 @@
     "flatted@3.3.3": {
       "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg=="
     },
-    "fsevents@2.3.2": {
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "os": ["darwin"],
-      "scripts": true
-    },
     "fsevents@2.3.3": {
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "os": ["darwin"],
@@ -1694,20 +1681,6 @@
     "picomatch@4.0.3": {
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="
     },
-    "playwright-core@1.56.1": {
-      "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==",
-      "bin": true
-    },
-    "playwright@1.56.1": {
-      "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==",
-      "dependencies": [
-        "playwright-core"
-      ],
-      "optionalDependencies": [
-        "fsevents@2.3.2"
-      ],
-      "bin": true
-    },
     "postcss-load-config@3.1.4_postcss@8.5.6": {
       "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
       "dependencies": [
@@ -1942,7 +1915,7 @@
         "@rollup/rollup-win32-ia32-msvc",
         "@rollup/rollup-win32-x64-gnu",
         "@rollup/rollup-win32-x64-msvc",
-        "fsevents@2.3.3"
+        "fsevents"
       ],
       "bin": true
     },
@@ -2291,7 +2264,7 @@
         "tinyglobby"
       ],
       "optionalDependencies": [
-        "fsevents@2.3.3"
+        "fsevents"
       ],
       "optionalPeers": [
         "sass-embedded"
@@ -2335,7 +2308,6 @@
       "dependencies": [
         "npm:@eslint/compat@^1.4.1",
         "npm:@eslint/js@^9.39.2",
-        "npm:@playwright/test@1.56.1",
         "npm:@sveltejs/adapter-auto@^6.1.1",
         "npm:@sveltejs/adapter-static@^3.0.10",
         "npm:@sveltejs/kit@^2.49.3",

control/frontend/e2e/basic.test.ts

@@ -1,39 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test('page loads', async ({ page }) => {
-	await page.goto('/');
-	await expect(page.getByText('PLG MuDiCS')).toBeVisible();
-});
-
-test('page loads without problems', async ({ page }) => {
-	await page.goto('/');
-	await expect(page.getByText('PLG MuDiCS')).toBeVisible();
-	await expect(page.getByTestId('notification')).not.toBeVisible();
-});
-
-test('diplay click shows files', async ({ page }) => {
-	await page.goto('/');
-	await page.getByTestId('display').click();
-	await expect(page.getByTestId('inode').first()).toBeVisible();
-});
-
-test('show text', async ({ page }) => {
-	await page.goto('/');
-	await page.getByTestId('display').click();
-
-	const controlButton = page.getByText('Text anzeigen');
-	await expect(controlButton).toBeVisible();
-	await controlButton.click();
-
-	const textPopup = page.getByTestId('text-popup');
-	await expect(textPopup).toBeVisible();
-	const textArea = textPopup.getByRole('textbox');
-	await expect(textArea).toBeVisible();
-	await textArea.fill('Hello, world!');
-
-	const submitButton = textPopup.locator('button').filter({ hasText: 'Text anzeigen' });
-	await submitButton.click();
-	await expect(
-		page.locator('[data-testid="notification"]:not(:has-text("Fehler 500"))')
-	).not.toBeVisible();
-});

control/frontend/embed.go

@@ -5,9 +5,6 @@ import (
 	"io/fs"
 )
 
-//go:generate deno install
-//go:generate deno task build
-
 //go:embed all:build
 var buildDir embed.FS
 

control/frontend/package.json

@@ -11,14 +11,11 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "eslint . && prettier --check .",
-		"format": "prettier --write .",
+		"format": "prettier --write ."
-		"test:e2e": "playwright test",
-		"test": "deno task test:e2e"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.4.1",
 		"@eslint/js": "^9.39.2",
-		"@playwright/test": "1.56.1",
 		"@sveltejs/adapter-auto": "^6.1.1",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.49.3",

control/frontend/playwright.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from '@playwright/test';
-
-export default defineConfig({
-	fullyParallel: true,
-	webServer: {
-		command: 'deno task build && deno task preview',
-		port: 4173
-	},
-	testDir: 'e2e'
-});

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { get_shifted_color } from '$lib/ts/stores/ui_behavior';
 	import type { MenuOption } from '$lib/ts/types';
+	import type { Snippet } from 'svelte';
 	import { fade } from 'svelte/transition';
 
 	let {
@@ -26,7 +27,7 @@
 		menu_options?: MenuOption[];
 		menu_class?: string;
 		div_class?: string;
-		children?: any;
+		children: Snippet;
 	} = $props();
 
 	let menu_shown = $state(false);
@@ -158,14 +159,14 @@
 				e.stopPropagation();
 			}}
 		>
-			{#each menu_options as option}
+			{#each menu_options as option, i (i)}
 				<button
 					disabled={option.disabled ?? false}
 					class="bg-white/15 {option.disabled
 						? 'text-stone-500 cursor-not-allowed'
 						: 'hover:bg-white/35 active:bg-white/60 cursor-pointer ' +
 							option.class} rounded-lg p-2 transition-colors duration-200 select-none flex flex-row gap-2 items-center"
-					onclick={async (e) => {
+					onclick={async () => {
 						if (option.on_select) await option.on_select();
 						close_menu();
 					}}

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

@@ -3,11 +3,8 @@
 	import {
 		dnd_flip_duration_ms,
 		get_selectable_color_classes,
-		is_display_drag,
+		is_display_drag
-		is_group_drag
 	} from '$lib/ts/stores/ui_behavior';
-	import { cubicOut } from 'svelte/easing';
-	import { flip } from 'svelte/animate';
 	import DisplayObject from './DisplayObject.svelte';
 	import {
 		all_displays_of_group_selected,
@@ -18,10 +15,9 @@
 	} from '$lib/ts/stores/displays';
 	import DNDGrip from '$lib/components/DNDGrip.svelte';
 	import { fade } from 'svelte/transition';
-	import type { Display, DisplayIdGroup, MenuOption } from '$lib/ts/types';
+	import type { DisplayIdGroup, MenuOption } from '$lib/ts/types';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import { liveQuery, type Observable } from 'dexie';
-	import { onMount } from 'svelte';
 	import { get_uuid } from '$lib/ts/utils';
 
 	let {
@@ -30,7 +26,7 @@
 		close_pinned_display
 	}: {
 		display_id_group: DisplayIdGroup;
-		get_display_menu_options: (display_id: string) => MenuOption[];
+		get_display_menu_options: (display_id: string, display_version: string|undefined) => MenuOption[];
 		close_pinned_display: () => void;
 	} = $props();
 

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

@@ -8,7 +8,7 @@
 	import DNDGrip from '$lib/components/DNDGrip.svelte';
 	import { Menu, Pin, PinOff, VideoOff } from 'lucide-svelte';
 	import OnlineState from './OnlineState.svelte';
-	import type { Display, DisplayIdObject, MenuOption } from '$lib/ts/types';
+	import type { DisplayIdObject, MenuOption } from '$lib/ts/types';
 	import { is_selected, select, selected_display_ids } from '$lib/ts/stores/select';
 	import { get_display_by_id, screenshot_loop } from '$lib/ts/stores/displays';
 	import { change_file_path, current_file_path } from '$lib/ts/stores/files';
@@ -20,7 +20,7 @@
 		close_pinned_display
 	}: {
 		display_id_object: DisplayIdObject;
-		get_display_menu_options: (display_id: string) => MenuOption[];
+		get_display_menu_options: (display_id: string, display_version: string|undefined) => MenuOption[];
 		close_pinned_display: () => void;
 	} = $props();
 
@@ -136,7 +136,7 @@
 				click_function={(e) => {
 					e.stopPropagation();
 				}}
-				menu_options={get_display_menu_options(display_id_object.id)}
+				menu_options={get_display_menu_options(display_id_object.id, $display?.version)}
 			>
 				<Menu />
 			</Button>

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

@@ -1,11 +1,13 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
+
 	let {
 		children,
 		bg = 'bg-stone-750',
 		fg = 'text-stone-200',
 		className = ''
 	}: {
-		children: any;
+		children: Snippet;
 		bg?: string;
 		fg?: string;
 		className?: string;

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ArrowRight, Ban, FileIcon, Folder, Play, Triangle, TriangleAlert } from 'lucide-svelte';
+	import { ArrowRight, Ban, FileIcon, Folder, Play, TriangleAlert } from 'lucide-svelte';
 	import {
 		current_height,
 		get_selectable_color_classes,
@@ -10,7 +10,6 @@
 		supported_file_type_icon,
 		type Inode,
 		get_file_primary_key,
-		type FileOnDisplay,
 		type FileTransferTask,
 		is_folder
 	} from '$lib/ts/types';
@@ -18,7 +17,6 @@
 	import {
 		is_selected,
 		select,
-		selected_display_ids,
 		selected_file_ids
 	} from '$lib/ts/stores/select';
 	import {
@@ -32,13 +30,11 @@
 	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,
 		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();
@@ -64,8 +60,8 @@
 		file_size = liveQuery(() => get_size_recursively(f));
 	});
 
-	let file_transfer_task: FileTransferTask | null = $derived(
+	let file_transfer_task_list: FileTransferTask[] | null = $derived(
-		$file_transfer_tasks.hasOwnProperty(file_primary_key)
+		Object.hasOwn($file_transfer_tasks, file_primary_key)
 			? $file_transfer_tasks[file_primary_key]
 			: null
 	);
@@ -73,7 +69,7 @@
 	let loading_finished = $state(false);
 	let previous_loading_state = $state(false);
 	$effect(() => {
-		const ftt = file_transfer_task;
+		const ftt = file_transfer_task_list;
 		if (previous_loading_state && !ftt) {
 			loading_finished = true;
 			setTimeout(() => (loading_finished = false), 200);
@@ -145,7 +141,7 @@
 
 	function get_grayed_out_text_color_strings(is_selected: boolean): string {
 		if (not_interactable) return 'text-stone-400';
-		if (!!file_transfer_task) return 'text-white/20';
+		if (file_transfer_task_list) return 'text-white/20';
 		const color = is_selected ? 'text-stone-600' : 'text-stone-400';
 		const factor = is_selected ? -1 : 1;
 		return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
@@ -153,14 +149,14 @@
 
 	function get_grayed_out_border_color_strings(is_selected: boolean): string {
 		if (not_interactable) return 'border-stone-550';
-		if (!!file_transfer_task) return 'border-white/10';
+		if (file_transfer_task_list) return 'border-white/10';
 		const color = is_selected ? 'border-stone-450' : 'border-stone-550';
 		const 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 || !!file_transfer_task) return;
+		if (not_interactable || file_transfer_task_list) return;
 		select(selected_file_ids, file_primary_key, 'toggle');
 		e.stopPropagation();
 	}
@@ -184,7 +180,7 @@
 
 		if (loading_finished) {
 			out += 'bg-stone-500 text-white/30';
-		} else if (!!file_transfer_task) {
+		} else if (file_transfer_task_list) {
 			out += 'bg-stone-700 text-white/30';
 		} else {
 			out += get_selectable_color_classes(
@@ -200,7 +196,7 @@
 
 		if (not_interactable) {
 			out += ' rounded-lg';
-		} else if (!!file_transfer_task) {
+		} else if (file_transfer_task_list) {
 			out += ' rounded-r-lg';
 		} else {
 			out += ' rounded-r-lg cursor-pointer';
@@ -209,7 +205,16 @@
 		return out;
 	}
 
-	function get_total_percentage(ftt: FileTransferTask): number {
+	function get_total_percentage(ftt_list: FileTransferTask[]): number {
+		let percentage_sum = 0;
+		for (const ftt of ftt_list) {
+			percentage_sum += get_percentage(ftt);
+		}
+		return Math.round(percentage_sum / ftt_list.length);
+	}
+
+
+	function get_percentage(ftt: FileTransferTask): number {
 		let total_percentage: number;
 		if (ftt.data.type === 'upload') {
 			total_percentage = ftt.loading_data.percentage;
@@ -316,10 +321,10 @@
 		{onclick}
 		class="{get_main_classes()} relative transition-colors duration-200 gap-4 flex flex-row justify-between group w-full min-w-0"
 	>
-		{#if !!file_transfer_task}
+		{#if !!file_transfer_task_list}
 			<div
 				class="absolute pointer-events-none inset-y-0 left-0 transition-[width] duration-400 bg-stone-600 rounded-r-lg"
-				style={`width: ${get_total_percentage(file_transfer_task)}%;`}
+				style={`width: ${get_total_percentage(file_transfer_task_list)}%;`}
 			></div>
 		{/if}
 		<div class="flex flex-row gap-2 min-w-0 w-full z-10">

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { NumberSetting } from '$lib/ts/types';
-	import { ChevronDown, ChevronUp, Minus, Plus } from 'lucide-svelte';
+	import { ChevronDown, ChevronUp } from 'lucide-svelte';
 	import Button from './Button.svelte';
 
 	let {

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

@@ -51,6 +51,17 @@ export async function show_html(ip: string, html: string): Promise<void> {
 	await request_display(ip, '/showHTML', options);
 }
 
+export async function open_website(ip: string, url: string): Promise<void> {
+	const options = {
+		method: 'PATCH',
+		headers: { 'content-type': 'application/json' },
+		body: JSON.stringify({
+			url: url
+		})
+	};
+	await request_display(ip, '/openWebsite', options);
+}
+
 export async function get_file_data(
 	ip: string,
 	path: string
@@ -175,15 +186,21 @@ export async function get_thumbnail_blob(ip: string, path_to_file: string): Prom
 	return raw_response.blob;
 }
 
-export async function ping_ip(ip: string): Promise<DisplayStatus> {
+export async function ping_ip(ip: string): Promise<{ status: DisplayStatus; version?: string }> {
 	const raw_response = await request_control(`/ping?ip=${ip}`, { method: 'GET' });
-	if (!raw_response.ok || !raw_response.json) return null;
+	if (!raw_response.ok || !raw_response.json) return { status: null };
 
-	const status = raw_response.json.status;
+	const raw_status = raw_response.json.status;
-	if (typeof status === 'string') {
+	if (typeof raw_status === 'string') {
-		return to_display_status(status);
+		const status = to_display_status(raw_status);
+		const version = raw_response.json.version;
+		if (typeof version === 'string') {
+			return { status, version };
+		} else {
+			return { status };
+		}
 	}
-	return null;
+	return { status: null };
 }
 
 async function request_display(

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

@@ -28,12 +28,23 @@ const START_LOADING_DATA = {
 	seconds_until_finish: -1
 };
 
-export const file_transfer_tasks: Writable<Record<string, FileTransferTask>> = writable<
+export const file_transfer_tasks: Writable<Record<string, FileTransferTask[]>> = writable<
-	Record<string, FileTransferTask>
+	Record<string, FileTransferTask[]>
 >({});
 
 let is_processing: boolean = false;
 
+function add_file_transfer_task(file_primary_key: string, new_task: FileTransferTask) {
+	file_transfer_tasks.update((tasks) => {
+		if (Object.hasOwn(tasks, file_primary_key)) {
+			tasks[file_primary_key].push(new_task);
+			return tasks;
+		} else {
+			return { ...tasks, [file_primary_key]: [new_task] };
+		}
+	});
+}
+
 export async function add_upload(
 	file_list: FileList,
 	selected_display_ids: string[],
@@ -59,7 +70,7 @@ export async function add_upload(
 		};
 		const file_primary_key = get_file_primary_key(db_file);
 
-		if (Object.prototype.hasOwnProperty.call(file_transfer_tasks, file_primary_key))
+		if (Object.hasOwn(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);
@@ -89,10 +100,7 @@ export async function add_upload(
 				loading_data: START_LOADING_DATA,
 				bytes_total: file.size
 			};
-			file_transfer_tasks.update((tasks) => ({
+			add_file_transfer_task(file_primary_key, new_task);
-				...tasks,
-				[file_primary_key]: new_task
-			}));
 		});
 
 		await Promise.all(upload_task_promises);
@@ -146,10 +154,7 @@ export async function add_sync_recursively(
 		bytes_total: file_data.file.size
 	};
 
-	file_transfer_tasks.update((tasks) => ({
+	add_file_transfer_task(selected_file_id, new_task);
-		...tasks,
-		[selected_file_id]: new_task
-	}));
 
 	const display_ids_without_file = file_data.short_displays_without_file.map((d) => d.id);
 	const new_fods: FileOnDisplay[] = display_ids_without_file.map((display_id) => ({
@@ -230,15 +235,19 @@ function generate_valid_file_name(original_file_name: string, used_file_names: s
 	return name;
 }
 
-async function upload(file_primary_key: string, task: FileTransferTask): Promise<void> {
+async function upload(
+	file_primary_key: string,
+	task: FileTransferTask,
+	list_index: number
+): Promise<void> {
 	const task_data = task.data;
 	if (task_data.type !== 'upload' || !task_data.file)
 		return console.warn('Task cancelled: wrong task type:', task);
 
-	await upload_file_via_xhr(file_primary_key, task, task_data.file);
+	await upload_file_via_xhr(file_primary_key, list_index, task, task_data.file);
 }
 
-export async function sync(file_primary_key: string, task: FileTransferTask) {
+export async function sync(file_primary_key: string, task: FileTransferTask, list_index: number) {
 	if (task.data.type !== 'sync') return console.warn('Task cancelled: wrong task type:', task);
 
 	const hasOPFS =
@@ -273,18 +282,24 @@ export async function sync(file_primary_key: string, task: FileTransferTask) {
 			if (done) break;
 			if (!value) continue;
 
-			update_current_loading_data(file_primary_key, value.byteLength, start_time);
+			update_current_loading_data(file_primary_key, list_index, value.byteLength, start_time);
 			await writable.write(value);
 		}
 		await writable.close();
 
-		finish_loading_data(file_primary_key);
+		finish_loading_data(file_primary_key, list_index);
 
 		// 02 - send downloaded file to every destination_display
 		const temp_file = await file_handle.getFile();
 
 		for (const current_short_display of task.data.destination_display_data) {
-			await upload_file_via_xhr(file_primary_key, task, temp_file, current_short_display.display);
+			await upload_file_via_xhr(
+				file_primary_key,
+				list_index,
+				task,
+				temp_file,
+				current_short_display.display
+			);
 		}
 
 		await dir.removeEntry(temp_name);
@@ -292,7 +307,11 @@ export async function sync(file_primary_key: string, task: FileTransferTask) {
 		// 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);
+			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));
@@ -336,24 +355,37 @@ async function start_task_loop() {
 	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];
+		const current_task_list = tasks[current_file_id];
-		if (current_task.data.type === 'upload') {
-			await upload(current_file_id, current_task);
-		} else if (current_task.data.type === 'sync') {
-			await sync(current_file_id, current_task);
-		}
 
-		file_transfer_tasks.update((all_tasks) => {
+		for (const [list_index, current_task] of current_task_list.entries()) {
-			const next = { ...all_tasks };
+			if (current_task.data.type === 'upload') {
-			delete next[current_file_id];
+				await upload(current_file_id, current_task, list_index);
-			return next;
+			} else if (current_task.data.type === 'sync') {
-		});
+				await sync(current_file_id, current_task, list_index);
+			}
+			delete_current_task_if_needed(current_file_id);
+		}
 	}
 	is_processing = false;
 }
 
+function delete_current_task_if_needed(current_file_id: string) {
+	file_transfer_tasks.update((all_tasks) => {
+		const next = { ...all_tasks };
+		const current_tasks = next[current_file_id];
+		if (current_tasks.length !== 1) {
+			if (current_tasks.find((t) => t.loading_data.percentage !== 100)) {
+				return next; // not all tasks are finished -> do nothing
+			}
+		}
+		delete next[current_file_id];
+		return next;
+	});
+}
+
 async function upload_file_via_xhr(
 	file_primary_key: string,
+	list_index: number,
 	task: FileTransferTask,
 	current_file: File,
 	destination_short_display: ShortDisplay | null = null
@@ -373,6 +405,7 @@ async function upload_file_via_xhr(
 			const apply = async () => {
 				update_current_loading_data(
 					file_primary_key,
+					list_index,
 					e.loaded,
 					start_time,
 					destination_short_display ? destination_short_display.id : null
@@ -392,6 +425,7 @@ async function upload_file_via_xhr(
 					// set loading_data to 100%
 					finish_loading_data(
 						file_primary_key,
+						list_index,
 						destination_short_display ? destination_short_display.id : null
 					);
 					// Generate Thumbnail if not done already
@@ -416,38 +450,43 @@ async function upload_file_via_xhr(
 
 function finish_loading_data(
 	file_primary_key: string,
+	list_index: number,
 	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
 		};
+		const new_task_list = tasks[file_primary_key].map((task, index) =>
+			index === list_index
+				? get_updated_task(current_loading_data, destination_display_id, task)
+				: task
+		);
 
 		return {
 			...tasks,
-			[file_primary_key]: get_updated_task(current_loading_data, destination_display_id, task)
+			[file_primary_key]: new_task_list
 		};
 	});
 }
 
 function update_current_loading_data(
 	file_primary_key: string,
+	list_index: number,
 	current_bytes: number,
 	start_time: Date,
 	destination_display_id: string | null = null
 ) {
 	file_transfer_tasks.update((tasks) => {
-		const task = tasks[file_primary_key];
+		const task = tasks[file_primary_key][list_index];
 		if (!task) return tasks;
 
 		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 = {
@@ -456,9 +495,15 @@ function update_current_loading_data(
 			seconds_until_finish: prognosed_data.seconds_until_finish
 		};
 
+		const new_task_list = tasks[file_primary_key].map((task, index) =>
+			index === list_index
+				? get_updated_task(current_loading_data, destination_display_id, task)
+				: task
+		);
+
 		return {
 			...tasks,
-			[file_primary_key]: get_updated_task(current_loading_data, destination_display_id, task)
+			[file_primary_key]: new_task_list
 		};
 	});
 }

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

@@ -40,22 +40,26 @@ async function update_all_display_status(only_loading_displays: boolean) {
 }
 
 export async function update_display_status(display: Display): Promise<DisplayStatus> {
-	const new_status = await ping_ip(display.ip);
+	const resp = await ping_ip(display.ip);
-	if (new_status === null && display.status !== null) return null;
+	if (resp.version && display.version !== resp.version) {
-	if (new_status !== display.status) {
+		display.version = resp.version;
+		await db.displays.put(display); // save
+	}
+	if (resp.status === null && display.status !== null) return null;
+	if (resp.status !== display.status) {
 		// status change
-		if (new_status === 'app_offline') {
+		if (resp.status === 'app_offline') {
 			loading_display_ids.push(display.id);
 		} else {
 			remove_display_from_loading_displays(display.id);
-			if (new_status === 'app_online') {
+			if (resp.status === 'app_online') {
 				on_display_start(display);
 			}
 		}
-		display.status = new_status;
+		display.status = resp.status;
 		await db.displays.put(display); // save
 	}
-	return new_status;
+	return resp.status;
 }
 
 export function remove_display_from_loading_displays(display_id: string) {

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

@@ -96,6 +96,7 @@ export type Display = {
 	group_id: string;
 	name: string;
 	status: DisplayStatus;
+	version?: string;
 };
 
 export type DisplayGroup = {
@@ -127,8 +128,8 @@ export type MenuOption = {
 
 export type PopupContent = {
 	open: boolean;
-	snippet: Snippet<[any]> | Snippet<[]> | Snippet | null | any;
+	snippet: Snippet<[string]> | Snippet<[]> | null;
-	snippet_arg?: any;
+	snippet_arg?: string;
 	title?: string;
 	title_class?: string;
 	title_icon?: typeof X | null;

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

@@ -100,7 +100,7 @@ export function display_status_to_info(status: DisplayStatus): string {
 			return 'Lädt';
 		case 'host_offline':
 			return 'Offline';
-		case null:
+		default:
 			return '???';
 	}
 }

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

@@ -15,6 +15,7 @@
 </svelte:head>
 
 {#if !dev}
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html versionSplashScreen}
 {/if}
 

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

@@ -7,10 +7,8 @@
 		Trash2,
 		Menu,
 		ChevronDown,
-		icons,
 		SquareCheckBig,
 		Square,
-		X,
 		Info
 	} from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
@@ -37,6 +35,7 @@
 	import { preview_settings } from '$lib/ts/stores/ui_behavior';
 	import NumberSettingInput from '$lib/components/NumberSettingInput.svelte';
 	import { db } from '$lib/ts/database';
+	import version from './../../../../shared/version.txt?raw';
 
 	const ip_regex =
 		/^(?:(?:10|127)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|192\.168\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|172\.(?:1[6-9]|2\d|3[0-1])\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d))$/;
@@ -72,13 +71,13 @@
 		const mac = text_inputs_valid.mac.value === '' ? null : text_inputs_valid.mac.value;
 		const name = text_inputs_valid.name.value;
 		let display: Display | null = null;
-		if (!!existing_display_id) {
+		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);
 			display = await add_display(ip, mac, name, status);
 		}
-		if (!!display) {
+		if (display) {
 			await update_display_status(display);
 		}
 	}
@@ -178,8 +177,12 @@
 	};
 </script>
 
+<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
 {#snippet about_popup(_: string)}
 	<div class="px-2">
+		<p>
+			{version}
+		</p>
 		<h3 class="text-lg font-bold mt-4">Entwickler</h3>
 		<p>
 			<a target="_blank" class="link" href="https://github.com/programmer-44">E44</a>,
@@ -249,7 +252,7 @@
 		title="Anzeigename"
 		placeholder="z.B. Beamer vorne links"
 		is_valid_function={async (input: string) => {
-			if (!!existing_display_id) {
+			if (existing_display_id) {
 				if (input === (await get_display_by_id(existing_display_id))?.name)
 					return [true, 'Gültiger Name'];
 			}
@@ -313,7 +316,7 @@
 		{/if}
 		<Button
 			disabled={!all_text_inputs_valid()}
-			className="{!!existing_display_id ? 'px-4' : 'pl-3 pr-4 gap-2'} font-bold"
+			className="{existing_display_id ? 'px-4' : 'pl-3 pr-4 gap-2'} font-bold"
 			bg="bg-stone-650"
 			click_function={async () => {
 				await finalize_add_edit_display(existing_display_id);

control/frontend/src/routes/ControlView.svelte

@@ -21,7 +21,7 @@
 		show_blackscreen,
 		shutdown,
 		startup,
-		show_html
+		open_website
 	} from '$lib/ts/api_handler';
 	import {
 		get_display_by_id,
@@ -134,7 +134,7 @@
 
 	function validate_website_url(url: string): [boolean, string] {
 		if (url === '') return [true, ''];
-		const regex = /^https?:\/\/[\w\-]+(\.[\w\-]+)+([\w\-\._~:/?#\[\]@!$&'\(\)\*\+,;=.])*/;
+		const regex = /^https?:\/\/[\w-]+(\.[\w-]+)+([\w\-._~:/?#[\]@!$&'()*+,;=.])*/;
 		if (regex.test(url)) {
 			return [true, ''];
 		}
@@ -144,7 +144,7 @@
 	async function send_website() {
 		popup_content.open = false;
 		await run_on_all_selected_displays((d) =>
-			show_html(d.ip, `<iframe src="${website_url}"></iframe>`)
+			open_website(d.ip, website_url)
 		);
 	}
 </script>
@@ -217,7 +217,7 @@
 					</button>
 
 					<button
-						title="Vorherige Folie (Pfeil nach Links) [gedrückt halten möglich]"
+						title="Nächste Folie (Pfeil nach Rechts) [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"

control/frontend/src/routes/DisplayView.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { fade, scale } from 'svelte/transition';
+	import { fade } from 'svelte/transition';
 	import {
 		all_displays_of_group_selected,
 		get_display_by_id,
@@ -21,16 +21,13 @@
 	import { type Display, type DisplayGroup, type MenuOption } from '$lib/ts/types';
 	import Button from '$lib/components/Button.svelte';
 	import OnlineState from '../lib/components/OnlineState.svelte';
-	import { Menu, Pencil, PinOff, Trash2, VideoOff, ZoomIn, ZoomOut } from 'lucide-svelte';
+	import { History, Menu, Pencil, PinOff, Trash2, VideoOff, ZoomIn, ZoomOut } from 'lucide-svelte';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import { dragHandleZone } from 'svelte-dnd-action';
 	import DisplayGroupObject from '../lib/components/DisplayGroupObject.svelte';
-	import { Pane, Splitpanes } from 'svelte-splitpanes';
+	import { Pane, Splitpanes, type IPaneSizingEvent } from 'svelte-splitpanes';
 	import HighlightedText from '$lib/components/HighlightedText.svelte';
 	import { liveQuery, type Observable } from 'dexie';
-	import { onMount } from 'svelte';
-	import { flip } from 'svelte/animate';
-	import { cubicOut } from 'svelte/easing';
 
 	let {
 		handle_display_deletion,
@@ -71,8 +68,13 @@
 		pinned_pane_size = 0;
 	}
 
-	function get_display_menu_options(display_id: string): MenuOption[] {
+	function get_display_menu_options(display_id: string, display_version: string|undefined): MenuOption[] {
 		return [
+			{
+				icon: History,
+				name: display_version ?? "Version unbekannt",
+				disabled: true,
+			},
 			{
 				icon: Pencil,
 				name: 'Bildschirm bearbeiten',
@@ -110,7 +112,7 @@
 		return true;
 	}
 
-	function handle_splitpane_resize(e: any) {
+	function handle_splitpane_resize(e: CustomEvent<IPaneSizingEvent[]>) {
 		if (e.detail[0].size === 0) {
 			$pinned_display_id = null;
 			pinned_pane_size = last_pinned_pane_size;
@@ -168,7 +170,7 @@
 									click_function={(e) => {
 										e.stopPropagation();
 									}}
-									menu_options={get_display_menu_options($pinned_display_id)}
+									menu_options={get_display_menu_options($pinned_display_id, $pinned_display?.version)}
 								>
 									<Menu />
 								</Button>
@@ -225,7 +227,7 @@
 								title="Bildschirme größer darstellen"
 								className="aspect-square p-1.5! pr-1! rounded-r-none"
 								bg="bg-stone-600"
-								disabled={!Boolean(next_height_step_size('display', $current_height, 1))}
+								disabled={!next_height_step_size('display', $current_height, 1)}
 								click_function={() => {
 									change_height('display', 1);
 								}}
@@ -236,7 +238,7 @@
 								title="Bildschirme kleiner darstellen"
 								className="aspect-square p-1.5! pl-1! rounded-l-none"
 								bg="bg-stone-600"
-								disabled={!Boolean(next_height_step_size('display', $current_height, -1))}
+								disabled={!next_height_step_size('display', $current_height, -1)}
 								click_function={() => {
 									change_height('display', -1);
 								}}

control/frontend/src/routes/FileView.svelte

@@ -59,9 +59,10 @@
 	$effect(() => {
 		const s = $selected_file_ids;
 		one_file_selected = liveQuery(async () => {
+			if (s.length !== 1) return false
 			const inode = await get_file_by_id(s[0]);
 			if (!inode) return false;
-			return s.length === 1 && !is_folder(inode);
+			return !is_folder(inode);
 		});
 	});
 
@@ -78,7 +79,7 @@
 			const results = await Promise.all(selected_file_ids.map((id) => get_file_by_id(id)));
 			return results.filter((element) => element !== null);
 		} catch (e: unknown) {
-			console.error('Error on generating selected_files');
+			console.error('Error on generating selected_files', e);
 			return [];
 		}
 	}
@@ -172,7 +173,7 @@
 			> existiert nicht auf {display_names_where_path_does_not_exist.length === 1
 				? 'dem Bildschirm'
 				: 'den Bildschirmen'}
-			{#each display_names_where_path_does_not_exist as display_name, i}
+			{#each display_names_where_path_does_not_exist as display_name, i (i)}
 				{#if i !== 0}
 					,
 				{/if}
@@ -247,7 +248,7 @@
 			>{`${$selected_file_ids.length === 1 ? 'Folgendes Objekt' : `Folgende ${$selected_file_ids.length} Objekte`} löschen? (Wiederherstellung nicht möglich)`}</span
 		>
 		<div class="flex flex-col gap-2 overflow-y-auto h-full min-h-0 grow-0">
-			{#each $selected_files || [] as file}
+			{#each $selected_files || [] as file, i (i)}
 				<InodeElement {file} not_interactable />
 			{/each}
 		</div>
@@ -294,7 +295,7 @@
 				title="Dateien größer darstellen"
 				className="aspect-square p-1.5! pr-1! rounded-r-none"
 				bg="bg-stone-600"
-				disabled={!Boolean(next_height_step_size('file', $current_height, 1))}
+				disabled={!next_height_step_size('file', $current_height, 1)}
 				click_function={() => {
 					change_height('file', 1);
 				}}
@@ -305,7 +306,7 @@
 				title="Dateien kleiner darstellen"
 				className="aspect-square p-1.5! pl-1! rounded-l-none"
 				bg="bg-stone-600"
-				disabled={!Boolean(next_height_step_size('file', $current_height, -1))}
+				disabled={!next_height_step_size('file', $current_height, -1)}
 				click_function={() => {
 					change_height('file', -1);
 				}}

control/frontend/src/routes/KeyInput.svelte

@@ -4,7 +4,7 @@
 	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 { ArrowDownToLine, ArrowUpFromLine, 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';

control/frontend/src/routes/TipTapInput.svelte

@@ -9,7 +9,6 @@
 		Highlighter,
 		Italic,
 		PaintBucket,
-		QrCode,
 		Strikethrough
 	} from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
@@ -149,7 +148,7 @@
 		editor_state.editor?.destroy();
 	});
 </script>
-
+
 {#each Object.values(color_states) as color_state, i (i)}
 	<input type="color" bind:this={color_state.el} bind:value={color_state.value} class="hidden" />
 {/each}
@@ -163,9 +162,9 @@
 	</div>
 
 	<div class="flex flex-col gap-2 justify-between">
-		<div class="flex flex-col gap-2">
+		<div class="flex flex-col gap-2">
 			{#each text_edit_options as edit_row, i (i)}
-				<div class="flex flex-row gap-1">
+				<div class="flex flex-row gap-1">
 					{#each edit_row as option, j (j)}
 						<div class="flex flex-row">
 							<button

control/justfile

@@ -0,0 +1,7 @@
+[working-directory: 'frontend']
+gen:
+    deno install
+    deno task build
+
+dev: gen
+    go run *.go

control/main.go

@@ -1,6 +1,7 @@
 package main
 
 import (
+	"encoding/json"
 	"log/slog"
 	"net"
 	"net/http"
@@ -64,7 +65,7 @@ func main() {
 			os.Exit(1)
 		}
 	}()
-	err = shared.OpenBrowserWindow("http://localhost:"+port, false, "control")
+	err = openBrowserWindow("http://localhost:" + port)
 	if err != nil {
 		slog.Error("Failed to open browser window", "error", err)
 		os.Exit(1)
@@ -83,18 +84,40 @@ func pingRoute(ctx echo.Context) error {
 		return ctx.JSON(http.StatusOK, PingResponse{Status: "host_offline"})
 	}
 
-	conn, err := net.DialTimeout("tcp", ip+":1323", 5*time.Second)
+	client := http.Client{
+		Timeout: 5 * time.Second,
+	}
+
+	resp, err := client.Get("http://" + ip + ":1323/api/ping")
 	if err != nil {
 		return ctx.JSON(http.StatusOK, PingResponse{Status: "app_offline"})
 	}
-	conn.Close()
+	defer resp.Body.Close()
+	if resp.StatusCode != http.StatusOK {
+		return ctx.JSON(http.StatusOK, PingResponse{Status: "app_offline"})
+	}
 
-	return ctx.JSON(http.StatusOK, PingResponse{Status: "app_online"})
+	var appPing AppPingResponse
+	if err := json.NewDecoder(resp.Body).Decode(&appPing); err != nil {
+		return ctx.JSON(http.StatusOK, PingResponse{
+			Status: "app_offline",
+		})
+	}
+
+	return ctx.JSON(http.StatusOK, PingResponse{
+		Status:  "app_online",
+		Version: appPing.Version,
+	})
+}
+
+type AppPingResponse struct {
+	Version string `json:"version"`
 }
 
 type PingResponse struct {
-	Status string `json:"status"`
+	Status  string `json:"status"`
-	Error  string `json:"error"`
+	Version string `json:"version"`
+	Error   string `json:"error"`
 }
 
 type WakeOnLanRequest struct {

control/open_browser.go

@@ -1,4 +1,4 @@
-package shared
+package main
 
 import (
 	"errors"
@@ -6,35 +6,30 @@ import (
 	"os"
 	"os/exec"
 	"path/filepath"
+	"plg-mudics/shared"
 )
 
-func OpenBrowserWindow(url string, fullscreen bool, profile string) error {
+func openBrowserWindow(url string) error {
 	bins := []string{"chromium", "chromium-browser"}
 
 	home, err := os.UserHomeDir()
 	if err != nil {
 		return fmt.Errorf("unable to determine user home directory: %w", err)
 	}
-	browserProfileDirPath := filepath.Join(home, ".local", "share", "plg-mudics", fmt.Sprintf("browser-%s", profile))
+	browserProfileDirPath := filepath.Join(home, ".local", "share", "plg-mudics", "browser-control")
 	if err := os.MkdirAll(browserProfileDirPath, os.ModePerm); err != nil {
 		return fmt.Errorf("failed to create local config directory: %w", err)
 	}
 
 	args := []string{
 		fmt.Sprintf("--app=%s", url),
-		"--autoplay-policy=no-user-gesture-required",
 		fmt.Sprintf("--user-data-dir=%s", browserProfileDirPath),
-		"--allow-running-insecure-content",
-		"--disable-features=XFrameOptions",
-	}
-	if fullscreen {
-		args = append(args, "--start-fullscreen")
 	}
 
 	errs := []string{}
 	for _, bin := range bins {
 		cmd := exec.Command(bin, args...)
-		commandOutput := RunShellCommand(cmd)
+		commandOutput := shared.RunShellCommand(cmd)
 		if commandOutput.ExitCode == 0 {
 			return nil
 		}

display/README.md

@@ -62,6 +62,12 @@ Even when the command itself fails.
 
 The screenshot as binary in the response body.
 
+## PATCH `/openWebsite`
+
+### Request Body
+
+- `url`: string
+
 ## POST `/file/<path>` - Upload File
 
 ### Responses

display/browser/main.go

@@ -0,0 +1,83 @@
+package browser
+
+import (
+	"context"
+	"fmt"
+	"os"
+	"path/filepath"
+
+	"github.com/chromedp/chromedp"
+)
+
+var Browser BrowserType = BrowserType{}
+
+type BrowserType struct {
+	Ctx    context.Context
+	Cancel context.CancelFunc
+}
+
+func (b *BrowserType) Init() error {
+	home, err := os.UserHomeDir()
+	if err != nil {
+		return fmt.Errorf("unable to determine user home directory: %w", err)
+	}
+	browserProfileDirPath := filepath.Join(home, ".local", "share", "plg-mudics", "browser-display")
+	if err := os.MkdirAll(browserProfileDirPath, os.ModePerm); err != nil {
+		return fmt.Errorf("failed to create local config directory: %w", err)
+	}
+
+	opts := []chromedp.ExecAllocatorOption{
+		chromedp.Flag("headless", false),
+		chromedp.Flag("app", "http://example.com"), // app mode prevents a few unwanted features of chrome, the start url is directly overwritten
+		chromedp.Flag("start-fullscreen", true),
+		chromedp.Flag("hide-scrollbars", true),
+		chromedp.Flag("allow-file-access-from-files", true),
+		chromedp.Flag("user-data-dir", browserProfileDirPath),
+		chromedp.Flag("autoplay-policy", "no-user-gesture-required"),
+	}
+
+	initCtx, _ := chromedp.NewExecAllocator(context.Background(), opts...)
+	b.Ctx, b.Cancel = chromedp.NewContext(initCtx)
+
+	return nil
+}
+
+func (b *BrowserType) OpenPage(url string) error {
+	err := chromedp.Run(b.Ctx, chromedp.Navigate(url))
+	if err != nil {
+		return fmt.Errorf("navigate to URL: %w", err)
+	}
+	return nil
+}
+
+// Yes, we need that trick with creating a temp file and not directly sending html since
+// chrome only allows us to access local files via other local files
+func (b *BrowserType) OpenHTML(html string) error {
+	var err error
+
+	tempFile, err := os.CreateTemp("", "mudics-*.html")
+	if err != nil {
+		return fmt.Errorf("could not create tempfile: %w", err)
+	}
+	defer func() { _ = tempFile.Close() }()
+
+	_, err = tempFile.WriteString(html)
+	if err != nil {
+		return fmt.Errorf("could not write to tempfile: %w", err)
+	}
+
+	err = chromedp.Run(b.Ctx, chromedp.Navigate("file://"+tempFile.Name()))
+	if err != nil {
+		return fmt.Errorf("navigate to URL: %w", err)
+	}
+
+	return nil
+}
+
+func (b *BrowserType) OpenPDF(path string) error {
+	err := b.OpenPage("file://" + path + "#toolbar=0&view=Fit")
+	if err != nil {
+		return fmt.Errorf("open PDF: %w", err)
+	}
+	return nil
+}

display/go.mod

@@ -1,9 +1,10 @@
 module plg-mudics/display
 
-go 1.24.4
+go 1.25
 
 require (
-	github.com/a-h/templ v0.3.960
+	github.com/a-h/templ v0.3.977
+	github.com/chromedp/chromedp v0.14.2
 	github.com/gabriel-vasile/mimetype v1.4.11
 	github.com/labstack/echo/v4 v4.15.0
 	github.com/micmonay/keybd_event v1.1.2
@@ -14,9 +15,15 @@ require (
 	github.com/a-h/parse v0.0.0-20250122154542-74294addb73e // indirect
 	github.com/andybalholm/brotli v1.1.0 // indirect
 	github.com/cenkalti/backoff/v4 v4.3.0 // indirect
+	github.com/chromedp/cdproto v0.0.0-20250803210736-d308e07a266d // indirect
+	github.com/chromedp/sysutil v1.1.0 // indirect
 	github.com/cli/browser v1.3.0 // indirect
 	github.com/fatih/color v1.16.0 // indirect
 	github.com/fsnotify/fsnotify v1.7.0 // indirect
+	github.com/go-json-experiment/json v0.0.0-20251027170946-4849db3c2f7e // indirect
+	github.com/gobwas/httphead v0.1.0 // indirect
+	github.com/gobwas/pool v0.2.1 // indirect
+	github.com/gobwas/ws v1.4.0 // indirect
 	github.com/labstack/gommon v0.4.2 // indirect
 	github.com/mattn/go-colorable v0.1.14 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
@@ -27,7 +34,7 @@ require (
 	golang.org/x/mod v0.30.0 // indirect
 	golang.org/x/net v0.48.0 // indirect
 	golang.org/x/sync v0.19.0 // indirect
-	golang.org/x/sys v0.39.0 // indirect
+	golang.org/x/sys v0.40.0 // indirect
 	golang.org/x/text v0.32.0 // indirect
 	golang.org/x/time v0.14.0 // indirect
 	golang.org/x/tools v0.39.0 // indirect

display/go.sum

@@ -2,10 +2,18 @@ github.com/a-h/parse v0.0.0-20250122154542-74294addb73e h1:HjVbSQHy+dnlS6C3XajZ6
 github.com/a-h/parse v0.0.0-20250122154542-74294addb73e/go.mod h1:3mnrkvGpurZ4ZrTDbYU84xhwXW2TjTKShSwjRi2ihfQ=
 github.com/a-h/templ v0.3.960 h1:trshEpGa8clF5cdI39iY4ZrZG8Z/QixyzEyUnA7feTM=
 github.com/a-h/templ v0.3.960/go.mod h1:oCZcnKRf5jjsGpf2yELzQfodLphd2mwecwG4Crk5HBo=
+github.com/a-h/templ v0.3.977 h1:kiKAPXTZE2Iaf8JbtM21r54A8bCNsncrfnokZZSrSDg=
+github.com/a-h/templ v0.3.977/go.mod h1:oCZcnKRf5jjsGpf2yELzQfodLphd2mwecwG4Crk5HBo=
 github.com/andybalholm/brotli v1.1.0 h1:eLKJA0d02Lf0mVpIDgYnqXcUn0GqVmEFny3VuID1U3M=
 github.com/andybalholm/brotli v1.1.0/go.mod h1:sms7XGricyQI9K10gOSf56VKKWS4oLer58Q+mhRPtnY=
 github.com/cenkalti/backoff/v4 v4.3.0 h1:MyRJ/UdXutAwSAT+s3wNd7MfTIcy71VQueUuFK343L8=
 github.com/cenkalti/backoff/v4 v4.3.0/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
+github.com/chromedp/cdproto v0.0.0-20250803210736-d308e07a266d h1:ZtA1sedVbEW7EW80Iz2GR3Ye6PwbJAJXjv7D74xG6HU=
+github.com/chromedp/cdproto v0.0.0-20250803210736-d308e07a266d/go.mod h1:NItd7aLkcfOA/dcMXvl8p1u+lQqioRMq/SqDp71Pb/k=
+github.com/chromedp/chromedp v0.14.2 h1:r3b/WtwM50RsBZHMUm9fsNhhzRStTHrKdr2zmwbZSzM=
+github.com/chromedp/chromedp v0.14.2/go.mod h1:rHzAv60xDE7VNy/MYtTUrYreSc0ujt2O1/C3bzctYBo=
+github.com/chromedp/sysutil v1.1.0 h1:PUFNv5EcprjqXZD9nJb9b/c9ibAbxiYo4exNWZyipwM=
+github.com/chromedp/sysutil v1.1.0/go.mod h1:WiThHUdltqCNKGc4gaU50XgYjwjYIhKWoHGPTUfWTJ8=
 github.com/cli/browser v1.3.0 h1:LejqCrpWr+1pRqmEPDGnTZOjsMe7sehifLynZJuqJpo=
 github.com/cli/browser v1.3.0/go.mod h1:HH8s+fOAxjhQoBUAsKuPCbqUuxZDhQ2/aD+SzsEfBTk=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
@@ -16,6 +24,14 @@ github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nos
 github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
 github.com/gabriel-vasile/mimetype v1.4.11 h1:AQvxbp830wPhHTqc1u7nzoLT+ZFxGY7emj5DR5DYFik=
 github.com/gabriel-vasile/mimetype v1.4.11/go.mod h1:d+9Oxyo1wTzWdyVUPMmXFvp4F9tea18J8ufA774AB3s=
+github.com/go-json-experiment/json v0.0.0-20251027170946-4849db3c2f7e h1:Lf/gRkoycfOBPa42vU2bbgPurFong6zXeFtPoxholzU=
+github.com/go-json-experiment/json v0.0.0-20251027170946-4849db3c2f7e/go.mod h1:uNVvRXArCGbZ508SxYYTC5v1JWoz2voff5pm25jU1Ok=
+github.com/gobwas/httphead v0.1.0 h1:exrUm0f4YX0L7EBwZHuCF4GDp8aJfVeBrlLQrs6NqWU=
+github.com/gobwas/httphead v0.1.0/go.mod h1:O/RXo79gxV8G+RqlR/otEwx4Q36zl9rqC5u12GKvMCM=
+github.com/gobwas/pool v0.2.1 h1:xfeeEhW7pwmX8nuLVlqbzVc7udMDrwetjEv+TZIz1og=
+github.com/gobwas/pool v0.2.1/go.mod h1:q8bcK0KcYlCgd9e7WYLm9LpyS+YeLd8JVDW6WezmKEw=
+github.com/gobwas/ws v1.4.0 h1:CTaoG1tojrh4ucGPcoJFiAQUAsEWekEWvLy7GsVNqGs=
+github.com/gobwas/ws v1.4.0/go.mod h1:G3gNqMNtPppf5XUz7O4shetPpcZ1VJ7zt18dlUeakrc=
 github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/labstack/echo/v4 v4.13.4 h1:oTZZW+T3s9gAu5L8vmzihV7/lkXGZuITzTQkTEhcXEA=
@@ -64,6 +80,8 @@ golang.org/x/sys v0.34.0 h1:H5Y5sJ2L2JRdyv7ROF1he/lPdvFsd0mJHFw2ThKHxLA=
 golang.org/x/sys v0.34.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
 golang.org/x/sys v0.39.0 h1:CvCKL8MeisomCi6qNZ+wbb0DN9E5AATixKsvNtMoMFk=
 golang.org/x/sys v0.39.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
+golang.org/x/sys v0.40.0 h1:DBZZqJ2Rkml6QMQsZywtnjnnGvHza6BTfYFWY9kjEWQ=
+golang.org/x/sys v0.40.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
 golang.org/x/text v0.27.0 h1:4fGWRpyh641NLlecmyl4LOe6yDdfaYNrGb2zdfo4JV4=
 golang.org/x/text v0.27.0/go.mod h1:1D28KMCvyooCX9hBiosv5Tz/+YLxj0j7XhWjpSUF7CU=
 golang.org/x/text v0.32.0 h1:ZD01bjUt1FQ9WJ0ClOL5vxgxOI/sVCNgX1YtKwcY0mU=

display/justfile

@@ -0,0 +1,5 @@
+gen:
+    go tool templ generate
+
+dev: gen
+    go run *.go

display/main.go

@@ -4,13 +4,11 @@ import (
 	"log/slog"
 	"os"
 
+	"plg-mudics/display/browser"
 	"plg-mudics/display/pkg"
 	"plg-mudics/display/web"
-	"plg-mudics/shared"
 )
 
-//go:generate go tool templ generate
-
 func main() {
 	var err error
 
@@ -19,16 +17,23 @@ func main() {
 	if err != nil {
 		slog.Error("Failed to get storage path", "error", err)
 		os.Exit(1)
-		return
 	}
 	port := "1323"
 
 	// the order is important, the open browser command exitsts as soon as the winodw is closed
 	// and since its the last action in the main go func all other goroutines (e.g. the webserver) are killed
-	go web.StartWebServer(shared.Version, port)
+	go web.StartWebServer(port)
-	err = shared.OpenBrowserWindow("http://localhost:"+port, true, "display")
+
+	err = browser.Browser.Init()
 	if err != nil {
-		slog.Error("Failed to open browser window", "error", err)
+		slog.Error("Initialize browser", "error", err)
 		os.Exit(1)
 	}
+	err = pkg.OpenStartScreen()
+	if err != nil {
+		slog.Error("Open start screen", "error", err)
+		os.Exit(1)
+	}
+	defer browser.Browser.Cancel()
+	<-browser.Browser.Ctx.Done()
 }

display/pkg/file_handler.go

@@ -1,75 +0,0 @@
-package pkg
-
-import (
-	"fmt"
-	"log/slog"
-	"os"
-	"os/exec"
-	"path/filepath"
-	"plg-mudics/shared"
-	"syscall"
-
-	"github.com/gabriel-vasile/mimetype"
-)
-
-var FileHandler fileHandler = fileHandler{}
-
-type fileHandler struct {
-	runningProgram *exec.Cmd
-}
-
-func (fh *fileHandler) OpenFile(path string) error {
-	var err error
-
-	mType, err := mimetype.DetectFile(path)
-	if err != nil {
-		return fmt.Errorf("failed to detect mime type: %w", err)
-	}
-
-	tempDirPath, err := os.MkdirTemp("", "plg-mudics-program-profile-")
-	if err != nil {
-		return fmt.Errorf("failed to create temporary profile directory: %w", err)
-	}
-
-	err = fh.CloseRunningProgram()
-	if err != nil {
-		return err
-	}
-
-	switch mType.String() {
-	case "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.oasis.opendocument.presentation":
-		// 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:
-		return fmt.Errorf("unsupported file type: %s", mType.String())
-	}
-
-	fh.runningProgram.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
-
-	result := shared.RunShellCommandNonBlocking(fh.runningProgram)
-	if result.ExitCode != 0 {
-		return fmt.Errorf("could not open pdf: %s (%d)", result.Stderr, result.ExitCode)
-	}
-
-	return nil
-}
-
-func (fh *fileHandler) CloseRunningProgram() error {
-	if fh.runningProgram == nil {
-		return nil
-	}
-	err := syscall.Kill(-fh.runningProgram.Process.Pid, syscall.SIGTERM)
-	fh.runningProgram = nil
-	return err
-}

display/pkg/main.go

@@ -1,51 +1,23 @@
 package pkg
 
 import (
+	"bytes"
+	"context"
 	"errors"
 	"fmt"
-	"net"
+	"log/slog"
 	"os"
 	"os/exec"
 	"path/filepath"
 	"strings"
 	"time"
 
+	"plg-mudics/display/browser"
 	"plg-mudics/shared"
 )
 
-func GetDeviceIp() (string, error) {
-	addrs, err := net.InterfaceAddrs()
-	if err != nil {
-		return "", fmt.Errorf("failed to get network interfaces: %w", err)
-	}
-	for _, addr := range addrs {
-		ipNet, ok := addr.(*net.IPNet)
-		if ok && !ipNet.IP.IsLoopback() && ipNet.IP.To4() != nil {
-			return ipNet.IP.String(), nil
-		}
-	}
-
-	return "", fmt.Errorf("no suitable IP address found")
-}
-
-func GetDeviceMac() (string, error) {
-	interfaces, err := net.Interfaces()
-	if err != nil {
-		return "", fmt.Errorf("failed to get network interfaces: %w", err)
-	}
-
-	for _, interf := range interfaces {
-		mac := interf.HardwareAddr.String()
-		if mac != "" {
-			return mac, nil
-		}
-	}
-
-	return "", fmt.Errorf("no suitable MAC address found")
-}
-
 func TakeScreenshot() (string, error) {
-	tempFilePath := filepath.Join(os.TempDir(), fmt.Sprintf("screenshot_%d.png", time.Now().Unix()))
+	tempFilePath := filepath.Join(os.TempDir(), fmt.Sprintf("screenshot_%d.jpg", time.Now().Unix()))
 
 	cmds := []*exec.Cmd{
 		exec.Command("gnome-screenshot", "-f", tempFilePath),
@@ -106,3 +78,20 @@ func ResolveStorageFilePath(pathParam string) (string, bool, error) {
 
 	return fullPath, true, nil
 }
+
+func ShowHTML(html string) error {
+	ResetView()
+
+	var templateBuffer bytes.Buffer
+	_ = htmlTemplate(html).Render(context.Background(), &templateBuffer)
+	err := browser.Browser.OpenHTML(templateBuffer.String())
+
+	return err
+}
+
+func ResetView() {
+	err := fileHandler.closeRunningProgram()
+	if err != nil {
+		slog.Error("Failed to close running program", "error", err)
+	}
+}

display/pkg/main.templ

@@ -0,0 +1,148 @@
+package pkg
+
+templ basicTemplate() {
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<title>PLG MuDiCS Display</title>
+			<style>
+          		:root {
+         			--background-color: black;
+         			--foreground-color: oklch(92.3% 0.003 48.717);
+         			--font-size: 5rem;
+          		}
+
+          		body {
+         			display: flex;
+         			justify-content: center;
+         			/* centers horizontally */
+         			align-items: center;
+         			/* centers vertically */
+         			width: 100vw;
+         			/* Viewport width */
+         			height: 100vh;
+         			/* Viewport height */
+         			margin: 0;
+         			padding: 0;
+         			overflow: hidden;
+         			background-color: var(--background-color);
+         			color: var(--foreground-color);
+         			font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+         			cursor: none;
+          		}
+
+          		video,
+          		img {
+         			width: 100vw;
+         			/* Viewport width */
+         			height: 100vh;
+         			/* Viewport height */
+         			object-fit: contain;
+          		}
+
+          		p,
+          		li {
+         			font-size: var(--font-size);
+         			line-height: 1.2;
+         			text-wrap: balance;
+         			max-width: 90vw;
+         			word-break: break-word;
+         			margin: 0 0 calc(var(--font-size) * 0.4) 0;
+          		}
+
+          		ul,
+          		ol {
+         			padding-left: calc(var(--font-size)*1.5);
+          		}
+           	</style>
+		</head>
+		<bod>
+			{ children... }
+		</bod>
+	</html>
+}
+
+templ videoTemplate(path string) {
+	@basicTemplate() {
+		<video autoplay>
+			<source src={ "file://" + path } type="video/mp4"/>
+		</video>
+	}
+}
+
+templ htmlTemplate(html string) {
+	@basicTemplate() {
+		@templ.Raw(html)
+	}
+}
+
+templ imageTemplate(path string) {
+	@basicTemplate() {
+		<img src={ "file://" + path }/>
+	}
+}
+
+templ deviceInfoTemplate(ip string, mac string, showQR bool) {
+	@basicTemplate() {
+		<div style="width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: space-between;">
+			<div
+				style="display: flex; flex-direction: column; gap: 1rem; justify-content: end; padding: 2rem; font-size: 4rem;"
+			>
+				{ ip }
+				<span style="text-transform: uppercase;">{ mac }</span>
+			</div>
+			if showQR {
+				<div style="display: flex; justify-content: end; align-items: end; padding: 2rem;">
+					<div style="padding: 1rem; background-color: var(--foreground-color); border-radius: 1rem;">
+						<img
+							style="height: 30vh; width: auto; image-rendering: pixelated; image-rendering: crisp-edges;"
+							src={ "/qr?data=http://" + ip + ":8080" }
+							alt="QR-Code"
+						/>
+					</div>
+				</div>
+			}
+		</div>
+		<style>
+    		:root {
+    			--splash-bg: transparent !important;
+    			--splash-fade-out-state: paused !important;
+    			--background-color: oklch(21.6% 0.006 56.043);
+    		}
+        </style>
+	}
+}
+
+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;">
+			<div
+				style="display: flex; flex-direction: column; gap: 1rem; justify-content: end; padding: 2rem; font-size: 4rem;"
+			>
+				{ ip }
+				<span style="text-transform: uppercase;">{ mac }</span>
+			</div>
+			if qrPath != "" {
+				<div style="display: flex; justify-content: end; align-items: end; padding: 2rem;">
+					<div style="padding: 1rem; background-color: var(--foreground-color); border-radius: 1rem;">
+						<img
+							style="height: 30vh; width: auto; image-rendering: pixelated; image-rendering: crisp-edges;"
+							src={ "file://" + qrPath }
+							alt="QR-Code"
+						/>
+					</div>
+				</div>
+			}
+		</div>
+		@templ.Raw(splashScreenHtml)
+		<style>
+			:root {
+    			--splash-bg: transparent !important;
+    			--splash-fade-out-state: paused !important;
+                --background-color: oklch(21.6% 0.006 56.043);
+			}
+		</style>
+	}
+}

display/pkg/open_file.go

@@ -0,0 +1,112 @@
+package pkg
+
+import (
+	"bytes"
+	"context"
+	"fmt"
+	"log/slog"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"plg-mudics/shared"
+	"syscall"
+
+	"github.com/gabriel-vasile/mimetype"
+
+	"plg-mudics/display/browser"
+)
+
+var fileHandler fileHandlerType = fileHandlerType{}
+
+type fileHandlerType struct {
+	runningProgram *exec.Cmd
+}
+
+func OpenFile(path string) error {
+	ResetView()
+
+	mType, err := mimetype.DetectFile(path)
+	if err != nil {
+		return fmt.Errorf("detect mime type of file %q: %w", path, err)
+	}
+
+	switch mType.String() {
+	case "video/mp4":
+		var templateBuffer bytes.Buffer
+		_ = videoTemplate(path).Render(context.Background(), &templateBuffer)
+		err = browser.Browser.OpenHTML(templateBuffer.String())
+	case "image/jpeg", "image/png", "image/gif":
+		var templateBuffer bytes.Buffer
+		_ = imageTemplate(path).Render(context.Background(), &templateBuffer)
+		err = browser.Browser.OpenHTML(templateBuffer.String())
+	case "application/pdf":
+		err = browser.Browser.OpenPDF(path)
+	case "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.oasis.opendocument.presentation":
+		err = fileHandler.openFileWithApp(path)
+	default:
+		return fmt.Errorf("unsupported file type: %s", mType.String())
+	}
+
+	if err != nil {
+		return fmt.Errorf("failed to open file: %w", err)
+	}
+
+	return nil
+}
+
+func (fh *fileHandlerType) openFileWithApp(path string) error {
+	var err error
+
+	mType, err := mimetype.DetectFile(path)
+	if err != nil {
+		return fmt.Errorf("failed to detect mime type: %w", err)
+	}
+
+	switch mType.String() {
+	case "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.oasis.opendocument.presentation":
+		err = fh.openLibreoffice(path)
+		if err != nil {
+			return err
+		}
+	default:
+		return fmt.Errorf("unsupported file type: %s", mType.String())
+	}
+
+	fh.runningProgram.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
+
+	result := shared.RunShellCommandNonBlocking(fh.runningProgram)
+	if result.ExitCode != 0 {
+		return fmt.Errorf("could not open pdf: %s (%d)", result.Stderr, result.ExitCode)
+	}
+
+	return nil
+}
+
+func (fh *fileHandlerType) openLibreoffice(path string) error {
+	// 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)
+	}
+
+	tempDirPath, err := os.MkdirTemp("", "plg-mudics-program-profile-")
+	if err != nil {
+		return fmt.Errorf("failed to create temporary profile directory: %w", err)
+	}
+	fh.runningProgram = exec.Command("soffice", "--show", path, "--nologo", "--norestore", fmt.Sprintf("-env:UserInstallation=file://%s", tempDirPath))
+
+	return nil
+}
+
+func (fh *fileHandlerType) closeRunningProgram() error {
+	if fh.runningProgram == nil {
+		return nil
+	}
+	err := syscall.Kill(-fh.runningProgram.Process.Pid, syscall.SIGTERM)
+	fh.runningProgram = nil
+	return err
+}

display/pkg/start_screen.go

@@ -0,0 +1,120 @@
+package pkg
+
+import (
+	"bytes"
+	"context"
+	"fmt"
+	"image/color"
+	"net"
+	"os"
+	"plg-mudics/shared"
+	"strings"
+
+	"plg-mudics/display/browser"
+
+	"github.com/skip2/go-qrcode"
+)
+
+func OpenStartScreen() error {
+	var err error
+
+	raw := shared.RawSplashScreenTemplate
+	html := strings.ReplaceAll(raw, "%%APP-VERSION%%", shared.Version)
+
+	ip, err := getDeviceIp()
+	if err != nil {
+		return fmt.Errorf("get device IP: %w", err)
+	}
+	mac, err := getDeviceMac()
+	if err != nil {
+		return fmt.Errorf("get device MAC address: %w", err)
+	}
+
+	port := 8080
+	showQrCode := !isPortFree(port)
+	qrCodePath := ""
+	if showQrCode {
+		qrCodePath, err = generateQRCode(fmt.Sprintf("http://%s:%d", ip, port))
+		if err != nil {
+			return fmt.Errorf("generate QR code: %w", err)
+		}
+	}
+
+	var templateBuffer bytes.Buffer
+	_ = startScreenTemplate(html, ip, mac, qrCodePath).Render(context.Background(), &templateBuffer)
+	err = browser.Browser.OpenHTML(templateBuffer.String())
+	if err != nil {
+		return fmt.Errorf("open start screen in browser: %w", err)
+	}
+	return nil
+}
+
+func getDeviceIp() (string, error) {
+	addrs, err := net.InterfaceAddrs()
+	if err != nil {
+		return "", fmt.Errorf("failed to get network interfaces: %w", err)
+	}
+	for _, addr := range addrs {
+		ipNet, ok := addr.(*net.IPNet)
+		if ok && !ipNet.IP.IsLoopback() && ipNet.IP.To4() != nil {
+			return ipNet.IP.String(), nil
+		}
+	}
+
+	return "", fmt.Errorf("no suitable IP address found")
+}
+
+func isPortFree(port int) bool {
+	addr := fmt.Sprintf("127.0.0.1:%d", port)
+	l, err := net.Listen("tcp", addr)
+	if err != nil {
+		return false
+	}
+	_ = l.Close()
+	return true
+}
+
+func getDeviceMac() (string, error) {
+	interfaces, err := net.Interfaces()
+	if err != nil {
+		return "", fmt.Errorf("failed to get network interfaces: %w", err)
+	}
+
+	for _, interf := range interfaces {
+		mac := interf.HardwareAddr.String()
+		if mac != "" {
+			return mac, nil
+		}
+	}
+
+	return "", fmt.Errorf("no suitable MAC address found")
+}
+
+func generateQRCode(data string) (string, error) {
+	qr, err := qrcode.New(data, qrcode.Medium)
+	if err != nil {
+		return "", fmt.Errorf("could not generate qr code: %w", err)
+	}
+
+	qr.DisableBorder = true
+	qr.ForegroundColor = color.RGBA{R: 0x1c, G: 0x19, B: 0x17, A: 0xff}
+	qr.BackgroundColor = color.RGBA{R: 0xe7, G: 0xe5, B: 0xe4, A: 0xff}
+
+	png, err := qr.PNG(-1)
+	if err != nil {
+		return "", fmt.Errorf("could not render qr code: %w", err)
+	}
+
+	file, err := os.CreateTemp("", "mudics-qr-code-*.png")
+	if err != nil {
+		return "", fmt.Errorf("could not save qr code: %w", err)
+	}
+	defer func() { _ = file.Close() }()
+
+	_, err = file.Write(png)
+	if err != nil {
+		return "", fmt.Errorf("could not write qr code to file: %w", err)
+	}
+
+	return file.Name(), nil
+}

display/requests/openWebsite.bru

@@ -0,0 +1,22 @@
+meta {
+  name: openWebsite
+  type: http
+  seq: 10
+}
+
+patch {
+  url: 127.0.0.1:1323/api/openWebsite
+  body: json
+  auth: inherit
+}
+
+body:json {
+  {
+    "url": "https://example.com"
+  }
+}
+
+settings {
+  encodeUrl: true
+  timeout: 0
+}

display/web/embed.go

@@ -1,12 +0,0 @@
-package web
-
-import (
-	"embed"
-	"io/fs"
-)
-
-//go:embed all:static
-var staticDir embed.FS
-
-// BuildDirFS contains the embedded dist directory files (without the "build" prefix)
-var StaticDirFS, _ = fs.Sub(staticDir, "static")

display/web/main.go

@@ -1,53 +1,27 @@
 package web
 
 import (
-	"bytes"
-	"context"
 	"errors"
 	"fmt"
-	"image/color"
 	"io"
 	"log/slog"
-	"net"
 	"net/http"
 	"net/url"
 	"os"
 	"os/exec"
 	"path/filepath"
 	shared "plg-mudics/shared"
-	"strings"
 
-	"github.com/gabriel-vasile/mimetype"
 	"github.com/labstack/echo/v4"
 	"github.com/labstack/echo/v4/middleware"
-	"github.com/skip2/go-qrcode"
 
+	"plg-mudics/display/browser"
 	"plg-mudics/display/pkg"
 )
 
-var version string
+func StartWebServer(port string) {
-var sseConnection chan string
-
-func StartWebServer(v string, port string) {
-	version = v
-
 	e := echo.New()
 
-	e.GET("/", indexRoute)
-	e.GET("/sse", sseRoute)
-	e.GET("/splash", func(ctx echo.Context) error {
-		html := shared.SplashScreenTemplate
-		html = strings.ReplaceAll(html, "%%APP-VERSION%%", version)
-		return ctx.HTML(http.StatusOK, html)
-	})
-	e.GET("/qr", qrRoute)
-
-	staticGroup := e.Group("/static")
-	staticGroup.Use(middleware.StaticWithConfig(middleware.StaticConfig{
-		Filesystem: http.FS(StaticDirFS),
-		HTML5:      true,
-	}))
-
 	apiGroup := e.Group("/api")
 	apiGroup.Use(middleware.CORS())
 	apiGroup.GET("/ping", pingRoute)
@@ -55,6 +29,7 @@ func StartWebServer(v string, port string) {
 	apiGroup.PATCH("/keyboardInput", keyboardInputRoute)
 	apiGroup.PATCH("/showHTML", showHTMLRoute)
 	apiGroup.PATCH("/takeScreenshot", takeScreenshotRoute)
+	apiGroup.PATCH("/openWebsite", openWebsiteRoute)
 
 	fileGroup := apiGroup.Group("/file")
 	fileGroup.Use(extractFilePathMiddleware)
@@ -69,85 +44,6 @@ func StartWebServer(v string, port string) {
 	}
 }
 
-func indexRoute(ctx echo.Context) error {
-	return indexTemplate().Render(ctx.Request().Context(), ctx.Response().Writer)
-}
-
-func sseRoute(ctx echo.Context) error {
-	slog.Info("SSE client connected")
-
-	w := ctx.Response()
-	w.Header().Set("Content-Type", "text/event-stream")
-	w.Header().Set("Cache-Control", "no-cache")
-	w.Header().Set("Connection", "keep-alive")
-	w.WriteHeader(http.StatusOK)
-	flusher, _ := w.Writer.(http.Flusher)
-
-	sseConnection = make(chan string)
-
-	// init display
-	ip, err := pkg.GetDeviceIp()
-	if err != nil {
-		slog.Error("Failed to get device IP address", "error", err)
-	}
-	mac, err := pkg.GetDeviceMac()
-	if err != nil {
-		slog.Error("Failed to get device MAC address", "error", err)
-	}
-	showQR := !isPortFree(8080)
-	var status bytes.Buffer
-	deviceInfoTemplate(ip, mac, showQR).Render(context.Background(), &status)
-	connectedEvent := Event{
-		Data: status.Bytes(),
-	}
-	connectedEvent.MarshalTo(w)
-	flusher.Flush()
-
-	for {
-		select {
-		case <-ctx.Request().Context().Done():
-			slog.Info("SSE client disconnected")
-			sseConnection = nil
-			return nil
-
-		case event := <-sseConnection:
-			rawEvent := Event{
-				Event: []byte(""),
-				Data:  []byte(event),
-			}
-
-			if err := rawEvent.MarshalTo(w); err != nil {
-				slog.Warn("Error writing to client", "error", err)
-				return err
-			}
-			flusher.Flush()
-		}
-	}
-}
-
-func qrRoute(c echo.Context) error {
-	data := c.QueryParam("data")
-	if data == "" {
-		return c.String(http.StatusBadRequest, "missing data")
-	}
-
-	qr, err := qrcode.New(data, qrcode.Medium)
-	if err != nil {
-		return c.String(http.StatusInternalServerError, "could not generate qr")
-	}
-
-	qr.DisableBorder = true
-	qr.ForegroundColor = color.RGBA{R: 0x1c, G: 0x19, B: 0x17, A: 0xff}
-	qr.BackgroundColor = color.RGBA{R: 0xe7, G: 0xe5, B: 0xe4, A: 0xff}
-
-	png, err := qr.PNG(-1)
-	if err != nil {
-		return c.String(http.StatusInternalServerError, "could not encode png")
-	}
-
-	return c.Blob(http.StatusOK, "image/png", png)
-}
-
 func extractFilePathMiddleware(next echo.HandlerFunc) echo.HandlerFunc {
 	return func(ctx echo.Context) error {
 		raw := ctx.Param("path")
@@ -266,7 +162,10 @@ func uploadFileRoute(ctx echo.Context) error {
 			slog.Error("Failed to close file", "file", fullPath, "error", fileCloseErr)
 		}
 		if err != nil {
-			os.Remove(fullPath)
+			err = os.Remove(fullPath)
+			if err != nil {
+				slog.Warn("could not remove broken file", "file", fullPath, "error", err)
+			}
 		}
 	}()
 
@@ -295,7 +194,7 @@ func downloadFileRoute(ctx echo.Context) error {
 
 	slog.Info("Serving file for download", "path", fullPath)
 
-	return ctx.File(fullPath)
+	return ctx.Attachment(fullPath, filepath.Base(fullPath))
 }
 
 func openFileRoute(ctx echo.Context) error {
@@ -308,38 +207,7 @@ func openFileRoute(ctx echo.Context) error {
 		return ctx.JSON(http.StatusNotFound, shared.ErrorResponse{Description: "File not found"})
 	}
 
-	if sseConnection == nil {
+	err = pkg.OpenFile(fullPath)
-		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Cant connect to display browser client"})
-	}
-
-	err = resetView()
-	if err != nil {
-		slog.Error("Failed to reset view", "error", err)
-	}
-
-	mType, err := mimetype.DetectFile(fullPath)
-	if err != nil {
-		slog.Error("Failed to detect mime type", "file", pathParam, "error", err)
-		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to detect file type"})
-	}
-
-	switch mType.String() {
-	case "video/mp4":
-		var templateBuffer bytes.Buffer
-		videoTemplate(pathParam).Render(context.Background(), &templateBuffer)
-
-		sseConnection <- templateBuffer.String()
-	case "image/jpeg", "image/png", "image/gif":
-		var templateBuffer bytes.Buffer
-		imageTemplate(pathParam).Render(context.Background(), &templateBuffer)
-		sseConnection <- templateBuffer.String()
-	case "application/pdf", "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.oasis.opendocument.presentation":
-		err = pkg.FileHandler.OpenFile(fullPath)
-	default:
-		slog.Info("Unsupported file type", "type", mType)
-		return ctx.JSON(http.StatusUnsupportedMediaType, shared.ErrorResponse{Description: "Unsupported file type: " + mType.String()})
-	}
-
 	if err != nil {
 		slog.Error("Failed to open file", "file", pathParam, "error", err)
 		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to open file"})
@@ -358,13 +226,12 @@ func showHTMLRoute(ctx echo.Context) error {
 		return ctx.JSON(http.StatusBadRequest, shared.ErrorResponse{Description: shared.BadRequestDescription})
 	}
 
-	err := resetView()
+	err := pkg.ShowHTML(request.HTML)
 	if err != nil {
-		slog.Error("Failed to reset view", "error", err)
+		slog.Error("Failed to open html", "error", err)
+		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to open html"})
 	}
 
-	sseConnection <- request.HTML
-
 	slog.Info("HTML content sent to client")
 	return ctx.JSON(http.StatusOK, struct{}{})
 }
@@ -372,7 +239,7 @@ func showHTMLRoute(ctx echo.Context) error {
 func pingRoute(ctx echo.Context) error {
 	return ctx.JSON(http.StatusOK, struct {
 		Version string `json:"version"`
-	}{Version: version})
+	}{Version: shared.Version})
 }
 
 func takeScreenshotRoute(ctx echo.Context) error {
@@ -415,24 +282,24 @@ func previewRoute(ctx echo.Context) error {
 	return ctx.File(outputFilePath)
 }
 
-// Reset previous file views so they dont collide with the new one
+func openWebsiteRoute(ctx echo.Context) error {
-func resetView() error {
+	var err error
-	err := pkg.FileHandler.CloseRunningProgram()
+
-	if err != nil {
+	var request struct {
-		return fmt.Errorf("failed to close running program: %w", err)
+		URL string `json:"url"`
+	}
+	if err := ctx.Bind(&request); err != nil {
+		slog.Error("Failed to parse website input", "error", err)
+		return ctx.JSON(http.StatusBadRequest, shared.ErrorResponse{Description: shared.BadRequestDescription})
 	}
 
-	sseConnection <- ""
+	slog.Info("Opening url")
 
-	return nil
+	err = browser.Browser.OpenPage(request.URL)
-}
-
-func isPortFree(port int) bool {
-	addr := fmt.Sprintf("127.0.0.1:%d", port)
-	l, err := net.Listen("tcp", addr)
 	if err != nil {
-		return false
+		slog.Error("Failed to open website", "url", request.URL, "error", err)
+		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to open website"})
 	}
-	_ = l.Close()
+
-	return true
+	return ctx.JSON(http.StatusOK, struct{}{})
 }

display/web/main.templ

@@ -1,123 +0,0 @@
-package web
-
-templ indexTemplate() {
-	<!DOCTYPE html>
-	<html lang="en">
-		<head>
-			<meta charset="UTF-8"/>
-			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-			<title>PLG MuDiCS Display</title>
-			<script src="/static/htmx.min.js"></script>
-			<script src="/static/htmx-ext-sse.min.js"></script>
-			<style>
-		:root {
-			--background-color: black;
-			--foreground-color: oklch(92.3% 0.003 48.717);
-			--font-size: 5rem;
-		}
-
-		body {
-			display: flex;
-			justify-content: center;
-			/* centers horizontally */
-			align-items: center;
-			/* centers vertically */
-			width: 100vw;
-			/* Viewport width */
-			height: 100vh;
-			/* Viewport height */
-			margin: 0;
-			padding: 0;
-			overflow: hidden;
-			background-color: var(--background-color);
-			color: var(--foreground-color);
-			font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-			cursor: none;
-		}
-
-		video,
-		img,
-		iframe {
-			width: 100vw;
-			/* Viewport width */
-			height: 100vh;
-			/* Viewport height */
-			object-fit: contain;
-		}
-
-		p,
-		li {
-			font-size: var(--font-size);
-			line-height: 1.2;
-			text-wrap: balance;
-			max-width: 90vw;
-			word-break: break-word;
-			margin: 0 0 calc(var(--font-size) * 0.4) 0;
-		}
-
-		ul,
-		ol {
-			padding-left: calc(var(--font-size)*1.5);
-		}
-	</style>
-			<script>
-		document.addEventListener('keydown', function (event) {
-			if (event.code === 'Space') {
-				event.preventDefault();
-				var video = document.querySelector('video');
-				if (video) {
-					if (video.paused) {
-						video.play();
-					} else {
-						video.pause();
-					}
-				}
-			}
-		});
-	</script>
-		</head>
-		<bod>
-			<div hx-get="/splash" hx-trigger="load"></div>
-			<main hx-ext="sse" sse-connect="/sse" sse-swap="message"></main>
-		</bod>
-	</html>
-}
-
-templ videoTemplate(path string) {
-	<video autoplay>
-		<source src={ "/api/file/" + path } type="video/mp4"/>
-	</video>
-}
-
-templ imageTemplate(path string) {
-	<img src={ "/api/file/" + path }/>
-}
-
-templ deviceInfoTemplate(ip string, mac string, showQR bool) {
-	<div style="width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: space-between;">
-		<div
-			style="display: flex; flex-direction: column; gap: 1rem; justify-content: end; padding: 2rem; font-size: 4rem;"
-		>
-			{ ip }
-			<span style="text-transform: uppercase;">{ mac }</span>
-		</div>
-		if showQR {
-			<div style="display: flex; justify-content: end; align-items: end; padding: 2rem;">
-				<div style="padding: 1rem; background-color: var(--foreground-color); border-radius: 1rem;">
-					<img
-						style="height: 30vh; width: auto; image-rendering: pixelated; image-rendering: crisp-edges;"
-						src={ "/qr?data=http://" + ip + ":8080" }
-						alt="QR-Code"
-					/>
-				</div>
-			</div>
-		}
-	</div>
-	<style>
-	:root {
-		--splash-bg: transparent !important;
-		--splash-fade-out-state: paused !important;
-		--background-color: oklch(21.6% 0.006 56.043);
-	}
-</style>
-}

display/web/sse.go

@@ -1,75 +0,0 @@
-package web
-
-import (
-	"bytes"
-	"fmt"
-	"io"
-)
-
-// Event represents Server-Sent Event.
-// SSE explanation: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#event_stream_format
-type Event struct {
-	// ID is used to set the EventSource object's last event ID value.
-	ID []byte
-	// Data field is for the message. When the EventSource receives multiple consecutive lines
-	// that begin with data:, it concatenates them, inserting a newline character between each one.
-	// Trailing newlines are removed.
-	Data []byte
-	// Event is a string identifying the type of event described. If this is specified, an event
-	// will be dispatched on the browser to the listener for the specified event name; the website
-	// source code should use addEventListener() to listen for named events. The onmessage handler
-	// is called if no event name is specified for a message.
-	Event []byte
-	// Retry is the reconnection time. If the connection to the server is lost, the browser will
-	// wait for the specified time before attempting to reconnect. This must be an integer, specifying
-	// the reconnection time in milliseconds. If a non-integer value is specified, the field is ignored.
-	Retry []byte
-	// Comment line can be used to prevent connections from timing out; a server can send a comment
-	// periodically to keep the connection alive.
-	Comment []byte
-}
-
-// MarshalTo marshals Event to given Writer
-func (ev *Event) MarshalTo(w io.Writer) error {
-	// Marshalling part is taken from: https://github.com/r3labs/sse/blob/c6d5381ee3ca63828b321c16baa008fd6c0b4564/http.go#L16
-	if len(ev.Data) == 0 && len(ev.Comment) == 0 {
-		return nil
-	}
-
-	if len(ev.Data) > 0 {
-		if _, err := fmt.Fprintf(w, "id: %s\n", ev.ID); err != nil {
-			return err
-		}
-
-		sd := bytes.Split(ev.Data, []byte("\n"))
-		for i := range sd {
-			if _, err := fmt.Fprintf(w, "data: %s\n", sd[i]); err != nil {
-				return err
-			}
-		}
-
-		if len(ev.Event) > 0 {
-			if _, err := fmt.Fprintf(w, "event: %s\n", ev.Event); err != nil {
-				return err
-			}
-		}
-
-		if len(ev.Retry) > 0 {
-			if _, err := fmt.Fprintf(w, "retry: %s\n", ev.Retry); err != nil {
-				return err
-			}
-		}
-	}
-
-	if len(ev.Comment) > 0 {
-		if _, err := fmt.Fprintf(w, ": %s\n", ev.Comment); err != nil {
-			return err
-		}
-	}
-
-	if _, err := fmt.Fprint(w, "\n"); err != nil {
-		return err
-	}
-
-	return nil
-}

display/web/static/htmx-ext-sse.min.js

@@ -1 +0,0 @@
-(function(){var g;htmx.defineExtension("sse",{init:function(e){g=e;if(htmx.createEventSource==undefined){htmx.createEventSource=t}},getSelectors:function(){return["[sse-connect]","[data-sse-connect]","[sse-swap]","[data-sse-swap]"]},onEvent:function(e,t){var r=t.target||t.detail.elt;switch(e){case"htmx:beforeCleanupElement":var n=g.getInternalData(r);var s=n.sseEventSource;if(s){g.triggerEvent(r,"htmx:sseClose",{source:s,type:"nodeReplaced"});n.sseEventSource.close()}return;case"htmx:afterProcessNode":i(r)}}});function t(e){return new EventSource(e,{withCredentials:true})}function a(n){if(g.getAttributeValue(n,"sse-swap")){var s=g.getClosestMatch(n,v);if(s==null){return null}var e=g.getInternalData(s);var a=e.sseEventSource;var t=g.getAttributeValue(n,"sse-swap");var r=t.split(",");for(var i=0;i<r.length;i++){const u=r[i].trim();const c=function(e){if(l(s)){return}if(!g.bodyContains(n)){a.removeEventListener(u,c);return}if(!g.triggerEvent(n,"htmx:sseBeforeMessage",e)){return}f(n,e.data);g.triggerEvent(n,"htmx:sseMessage",e)};g.getInternalData(n).sseEventListener=c;a.addEventListener(u,c)}}if(g.getAttributeValue(n,"hx-trigger")){var s=g.getClosestMatch(n,v);if(s==null){return null}var e=g.getInternalData(s);var a=e.sseEventSource;var o=g.getTriggerSpecs(n);o.forEach(function(t){if(t.trigger.slice(0,4)!=="sse:"){return}var r=function(e){if(l(s)){return}if(!g.bodyContains(n)){a.removeEventListener(t.trigger.slice(4),r)}htmx.trigger(n,t.trigger,e);htmx.trigger(n,"htmx:sseMessage",e)};g.getInternalData(n).sseEventListener=r;a.addEventListener(t.trigger.slice(4),r)})}}function i(e,t){if(e==null){return null}if(g.getAttributeValue(e,"sse-connect")){var r=g.getAttributeValue(e,"sse-connect");if(r==null){return}n(e,r,t)}a(e)}function n(r,e,n){var s=htmx.createEventSource(e);s.onerror=function(e){g.triggerErrorEvent(r,"htmx:sseError",{error:e,source:s});if(l(r)){return}if(s.readyState===EventSource.CLOSED){n=n||0;n=Math.max(Math.min(n*2,128),1);var t=n*500;window.setTimeout(function(){i(r,n)},t)}};s.onopen=function(e){g.triggerEvent(r,"htmx:sseOpen",{source:s});if(n&&n>0){const t=r.querySelectorAll("[sse-swap], [data-sse-swap], [hx-trigger], [data-hx-trigger]");for(let e=0;e<t.length;e++){a(t[e])}n=0}};g.getInternalData(r).sseEventSource=s;var t=g.getAttributeValue(r,"sse-close");if(t){s.addEventListener(t,function(){g.triggerEvent(r,"htmx:sseClose",{source:s,type:"message"});s.close()})}}function l(e){if(!g.bodyContains(e)){var t=g.getInternalData(e).sseEventSource;if(t!=undefined){g.triggerEvent(e,"htmx:sseClose",{source:t,type:"nodeMissing"});t.close();return true}}return false}function f(t,r){g.withExtensions(t,function(e){r=e.transformResponse(r,null,t)});var e=g.getSwapSpecification(t);var n=g.getTarget(t);g.swap(n,r,e,{contextElement:t})}function v(e){return g.getInternalData(e).sseEventSource!=null}})();

flake.nix

@@ -11,20 +11,13 @@
   in {
     devShells."x86_64-linux".default = pkgs.mkShell {
       packages = with pkgs; [
+        gcc
         libreoffice
         ungoogled-chromium
-        xreader
         imagemagick
         ffmpeg
-        ghostscript
         gnome-screenshot
-
-        playwright-driver.browsers
       ];
-
-      PLAYWRIGHT_BROWSERS_PATH = pkgs.playwright-driver.browsers;
-      PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD = "true";
-      PW_DISABLE_TS_ESM = "true";
     };
   };
 }

go.work.sum

@@ -1,15 +1,25 @@
 github.com/a-h/htmlformat v0.0.0-20250209131833-673be874c677/go.mod h1:FMIm5afKmEfarNbIXOaPHFY8X7fo+fRQB6I9MPG2nB0=
+github.com/ledongthuc/pdf v0.0.0-20220302134840-0c2507a12d80 h1:6Yzfa6GP0rIo/kULo2bwGEkFvCePZ3qHDDTC3/J9Swo=
+github.com/ledongthuc/pdf v0.0.0-20220302134840-0c2507a12d80/go.mod h1:imJHygn/1yfhB7XSJJKlFZKl/J+dCPAknuiaGOshXAs=
+github.com/mdlayher/raw v0.0.0-20190313224157-43dbcdd7739d h1:rjAS0af7FIYCScTtEU5KjIldC6qVaEScUJhABHC+ccM=
+github.com/orisano/pixelmatch v0.0.0-20220722002657-fb0b55479cde h1:x0TT0RDC7UhAVbbWWBzr41ElhJx5tXPWkIHA2HWPRuw=
+github.com/orisano/pixelmatch v0.0.0-20220722002657-fb0b55479cde/go.mod h1:nZgzbfBr3hhjoZnS66nKrHmduYNpc34ny7RK4z5/HM0=
+github.com/rs/cors v1.11.0 h1:0B9GE/r9Bc2UxRMMtymBkHTenPkHDv0CW4Y98GBY+po=
 github.com/rs/cors v1.11.0/go.mod h1:XyqrcTp5zjWr1wsJ8PIRZssZ8b/WMcMf71DJnit4EMU=
 github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
+github.com/yuin/goldmark v1.4.13 h1:fVcFKWvrslecOb/tg+Cc05dkeYx540o0FuFt3nUVDoE=
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 golang.org/x/mod v0.25.0/go.mod h1:IXM97Txy2VM4PJ3gI61r1YEk/gAj6zAHN3AdZt6S9Ww=
 golang.org/x/net v0.41.0/go.mod h1:B/K4NNqkfmg07DQYrbwvSluqCJOOXwUjeb/5lOisjbA=
 golang.org/x/net v0.47.0/go.mod h1:/jNxtkgq5yWUGYkaZGqo27cfGZ1c5Nen03aYrrKpVRU=
 golang.org/x/telemetry v0.0.0-20240521205824-bda55230c457/go.mod h1:pRgIJT+bRLFKnoM1ldnzKoxTIn14Yxz928LQRYYgIN0=
 golang.org/x/telemetry v0.0.0-20250710130107-8d8967aff50b/go.mod h1:4ZwOYna0/zsOKwuR5X/m0QFOJpSZvAxFfkQT+Erd9D4=
+golang.org/x/telemetry v0.0.0-20251111182119-bc8e575c7b54 h1:E2/AqCUMZGgd73TQkxUMcMla25GB9i/5HOdLr+uH7Vo=
 golang.org/x/telemetry v0.0.0-20251111182119-bc8e575c7b54/go.mod h1:hKdjCMrbv9skySur+Nek8Hd0uJ0GuxJIoIX2payrIdQ=
 golang.org/x/term v0.32.0/go.mod h1:uZG1FhGx848Sqfsq4/DlJr3xGGsYMu/L5GW4abiaEPQ=
 golang.org/x/term v0.33.0/go.mod h1:s18+ql9tYWp1IfpV9DmCtQDDSRBUjKaw9M1eAv5UeF0=
+golang.org/x/term v0.38.0 h1:PQ5pkm/rLO6HnxFR7N2lJHOZX6Kez5Y1gDSJla6jo7Q=
 golang.org/x/term v0.38.0/go.mod h1:bSEAKrOT1W+VSu9TSCMtoGEOUcKxOKgl3LE5QEF/xVg=
 golang.org/x/tools v0.34.0/go.mod h1:pAP9OwEaY1CAW3HOmg3hLZC5Z0CCmzjAF2UQMSqNARg=
+golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543 h1:E7g+9GITq07hpfrRu66IVDexMakfv52eLZ2CXBWiKr4=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=

nixos/configuration.nix

@@ -92,14 +92,12 @@
     nushell
     unzip
     iputils
-    xreader
     tree
     jq
 
     # Libraries
     imagemagick
     ffmpeg
-    ghostscript
   ];
 
   home-manager.users.mudics = {

shared/embed.go

@@ -6,7 +6,7 @@ import (
 )
 
 //go:embed splash_screen.html
-var SplashScreenTemplate string
+var RawSplashScreenTemplate string
 
 //go:embed version.txt
 var versionNotTrimmed string

shared/splash_screen.html

@@ -170,15 +170,8 @@
 
   <span id="version-label" aria-label="Version">%%APP-VERSION%%</span>
 
-  <div class="fade-in">
+  <div class="fade-in cursor-layer" aria-hidden="true">
-    <div
+    <div class="cursor-x">
-      class="cursor-x"
-      style="
-        position: absolute;
-        left: calc(50cqw + var(--mouse-start-x));
-        top: calc(50cqh + var(--mouse-start-y));
-      "
-    >
       <svg class="cursor-y" width="50" height="50" viewBox="0 0 24 24">
         <g
           stroke="#ffffff"
@@ -223,8 +216,6 @@
 
     --mouse-size: 50px;
     --mouse-bounce-delay: 5s;
-    --mouse-start-x: calc((35 * 100vw) / 1920);
-    --mouse-start-y: calc((60 * 100vh) / 1080);
 
     --dur-x: 16s;
     --dur-y: 9s;
@@ -254,8 +245,12 @@
     align-items: center;
     justify-content: center;
     z-index: 9999;
-    height: 100vh;
+
-    width: 100vw;
+    width: 100dvw;
+    height: 100dvh;
+    overflow: hidden;
+
+    container: splash / size;
 
     animation-name: splash-fade;
     animation-duration: 1s;
@@ -342,7 +337,23 @@
     animation: start-button-hover-press 1s ease-in-out 450ms forwards;
   }
 
+  .cursor-layer {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+
+    --mouse-start-x: calc(100cqw * 35 / 1920);
+    --mouse-start-y: calc(100cqh * 60 / 1080);
+  }
+
   .cursor-x {
+    position: absolute;
+    left: calc(50cqw + var(--mouse-start-x));
+    top: calc(50cqh + var(--mouse-start-y));
+    width: var(--mouse-size);
+    height: var(--mouse-size);
+
     animation-name: move-mouse, mouse-bounceX;
     animation-duration: 1s, var(--dur-x);
     animation-delay: 0s, var(--mouse-bounce-delay);
@@ -354,6 +365,10 @@
   }
 
   .cursor-y {
+    width: 100%;
+    height: 100%;
+    display: block;
+
     animation-name: mouse-bounceY;
     animation-duration: var(--dur-y);
     animation-delay: var(--mouse-bounce-delay);
@@ -364,6 +379,10 @@
     will-change: transform;
   }
 
+  .cursor-y * {
+    vector-effect: non-scaling-stroke;
+  }
+
   @keyframes fade-in {
     to {
       opacity: 1;
@@ -383,7 +402,7 @@
       transform: translateX(0px);
     }
   }
-
+  
   @keyframes mouse-bounceX {
     0% {
       transform: translateX(0);
@@ -398,6 +417,10 @@
         calc(50cqw - var(--mouse-size) - var(--mouse-start-x))
       );
     }
+
+    100% {
+      transform: translateX(0);
+    }
   }
 
   @keyframes mouse-bounceY {
@@ -414,6 +437,10 @@
         calc(50cqh - var(--mouse-size) - var(--mouse-start-y))
       );
     }
+
+    100% {
+      transform: translateY(0);
+    }
   }
 
   @keyframes start-button-hover-press {

shared/version.txt

@@ -1 +1 @@
-v0.1.2
+v0.1.5