bump to v0.0.16

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

@@ -41,7 +41,7 @@
 		} else {
 			$pinned_display_id = display_id_object.id;
 		}
-		await screenshot_loop(display_id_object.id);
+		screenshot_loop(display_id_object.id);
 		e.stopPropagation();
 	}
 </script>

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

@@ -9,6 +9,9 @@ import {
 } from './types';
 import { dev } from '$app/environment';
 import { get_sanitized_file_url } from './utils';
+import { online_displays } from './stores/displays';
+import { get } from 'svelte/store';
+import { update_display_status } from './main';
 
 export async function get_screenshot(ip: string): Promise<Blob | null> {
 	const options = { method: 'PATCH' };
@@ -188,14 +191,30 @@ async function request_display(
 	supress_error_handling_http_codes: number[] = []
 ): Promise<RequestResponse> {
 	const url = `http://${ip}:1323/api${api_route}`;
-	return await request(url, options, supress_error_handling_http_codes);
+
+	const current_online_displays = get(online_displays);
+	if (!current_online_displays.map((d) => d.ip).includes(ip)) return { ok: false };
+
+	const response = await request(url, options, supress_error_handling_http_codes);
+	if (!response.ok && response.http_code === 408) {
+		// Network error -> device possibly not longer online -> test status and throw no error if its offline
+		const possible_displays = current_online_displays.filter((d) => d.ip === ip);
+		for (const display of possible_displays) {
+			const current_status = await update_display_status(display);
+			if (current_status === 'app_online') {
+				console.error(`No response from ${url}`)
+				notifications.push('error', "Netzwerk-Fehler bei API-Anfrage", `${url}`);
+			}
+		}
+	}
+	return response;
 }
 
 async function request_control(
 	api_route: string,
 	options: { method: string; headers?: Record<string, string>; body?: string }
 ): Promise<RequestResponse> {
-	const url = `http://127.0.0.1:8080/api${api_route}`;
+	const url = `${dev ? 'http://127.0.0.1:8080' : window.location.origin}/api${api_route}`;
 	return await request(url, options);
 }
 
@@ -245,6 +264,7 @@ async function request(
 			if (dev) {
 				console.warn('Request failed - Is the targeted device online?');
 			}
+			return { ok: false, http_code: 408 };
 		} else {
 			console.error(url, error);
 			notifications.push('error', `Fataler Fehler bei API-Anfrage`, `${url}\nFehler: ${error}`);

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

@@ -1,6 +1,6 @@
 import { screenshot_loop } from './stores/displays';
 import { ping_ip } from './api_handler';
-import type { Display } from './types';
+import type { Display, DisplayStatus } from './types';
 import { update_folder_elements_recursively } from './stores/files';
 import { db } from './database';
 
@@ -12,6 +12,9 @@ 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 } });
 	await update_all_display_status(false);
 	await setInterval(
 		() => update_all_display_status(false),
@@ -36,9 +39,9 @@ async function update_all_display_status(only_loading_displays: boolean) {
 	}
 }
 
-export async function update_display_status(display: Display) {
+export async function update_display_status(display: Display): Promise<DisplayStatus> {
 	const new_status = await ping_ip(display.ip);
-	if (new_status === null && display.status !== null) return;
+	if (new_status === null && display.status !== null) return null;
 	if (new_status !== display.status) {
 		// status change
 		if (new_status === 'app_offline') {
@@ -52,6 +55,7 @@ export async function update_display_status(display: Display) {
 		display.status = new_status;
 		await db.displays.put(display); // save
 	}
+	return new_status;
 }
 
 export function remove_display_from_loading_displays(display_id: string) {
@@ -63,5 +67,5 @@ export function remove_display_from_loading_displays(display_id: string) {
 
 async function on_display_start(display: Display) {
 	await update_folder_elements_recursively(display, '/');
-	await screenshot_loop(display.id);
+	screenshot_loop(display.id);
 }

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

@@ -14,6 +14,15 @@ import { db } from '../database';
 import { dev } from '$app/environment';
 import { remove_display_from_loading_displays } from '../main';
 import { preview_settings } from './ui_behavior';
+import { liveQuery } from 'dexie';
+
+export const online_displays: Writable<Display[]> = writable<Display[]>([]);
+
+export const online_displays_sub = liveQuery(() =>
+	db.displays.where('status').equals('app_online').toArray()
+).subscribe((value) => {
+	online_displays.set(value);
+});
 
 export const local_displays: Writable<DisplayIdGroup[]> = writable<DisplayIdGroup[]>([]);
 
@@ -62,8 +71,15 @@ export async function edit_display_data(
 ): Promise<Display | null> {
 	let display = await db.displays.get(display_id);
 	if (!display) return null;
-	display = { ...display, ip: ip, mac: mac, name: name };
+	display = {
+		...display,
+		ip: ip,
+		mac: mac,
+		name,
+		preview: { currently_updating: false, url: null }
+	};
 	await db.displays.put(display); // save
+	screenshot_loop(display.id);
 	return display;
 }
 
@@ -118,8 +134,9 @@ export async function get_display_by_id(display_id: string): Promise<Display | n
 	return (await db.displays.get(display_id)) ?? null;
 }
 
-export async function screenshot_loop(display_id: string) {
-	const settings = get(preview_settings);
+export function screenshot_loop(display_id: string) {
+	setTimeout(async () => {
+		let settings = get(preview_settings);
 		if (settings.mode === 'never') return;
 
 		const initial_retry_count = settings.retry_count.now;
@@ -135,9 +152,14 @@ export async function screenshot_loop(display_id: string) {
 
 		let retry_count = initial_retry_count;
 		while (retry_count > 0) {
+			settings = get(preview_settings);
+			if (settings.mode === 'never') break;
 			if (settings.mode !== 'always') retry_count -= 1;
 
 			const new_blob = await get_screenshot(display.ip);
+			settings = get(preview_settings);
+			if (settings.mode === 'never') break;
+
 			if (!new_blob) {
 				display.preview = { currently_updating: false, url: null };
 				await db.displays.update(display.id, { preview: display.preview });
@@ -159,9 +181,14 @@ export async function screenshot_loop(display_id: string) {
 			await new Promise((resolve) => setTimeout(resolve, retry_seconds * 1000)); // sleep
 		}
 
+		if (settings.mode === 'never') {
+			await db.displays.update(display.id, { preview: { currently_updating: false, url: null } });
+		} else {
 			display.preview.currently_updating = false;
 			await db.displays.update(display.id, { preview: display.preview });
 		}
+	}, 0);
+}
 
 export async function run_on_all_selected_displays(
 	run_function: (display: Display) => void | Promise<void>,
@@ -179,7 +206,7 @@ export async function run_on_all_selected_displays(
 			if (!display || (ignore_offline && display.status === 'host_offline')) return;
 			await run_function(display);
 			if (update_screenshot_afterwards) {
-				await screenshot_loop(display.id);
+				screenshot_loop(display.id);
 			}
 		})
 	);
@@ -204,7 +231,7 @@ export async function update_local_displays() {
 
 export async function update_db_displays() {
 	local_displays.update((groups) => groups.filter((g) => g.displays.length !== 0));
-	const filtered_local_display_groups = get(local_displays)
+	const filtered_local_display_groups = get(local_displays);
 	const db_display_group_ids = (await db.display_groups.toArray()).map((group) => group.id);
 	const local_display_group_ids = filtered_local_display_groups.map((group) => group.id);
 
@@ -242,6 +269,16 @@ export function set_new_display_order(display_id_group_id: string, new_data: Dis
 	});
 }
 
+export function no_active_display_selected(
+	selected_display_ids: string[],
+	online_displays: Display[]
+) {
+	const online_and_selected_displays = online_displays.filter((d) =>
+		selected_display_ids.includes(d.id)
+	);
+	return online_and_selected_displays.length === 0;
+}
+
 if (dev) {
 	setTimeout(add_testing_displays, 0);
 	async function add_testing_displays() {

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

@@ -25,7 +25,8 @@
 		edit_display_data,
 		get_display_by_id,
 		is_display_name_taken,
-		remove_display
+		remove_display,
+		screenshot_loop
 	} from '$lib/ts/stores/displays';
 	import { notifications } from '$lib/ts/stores/notification';
 	import { ping_ip } from '$lib/ts/api_handler';
@@ -35,6 +36,7 @@
 	import HighlightedText from '$lib/components/HighlightedText.svelte';
 	import { preview_settings } from '$lib/ts/stores/ui_behavior';
 	import NumberSettingInput from '$lib/components/NumberSettingInput.svelte';
+	import { db } from '$lib/ts/database';
 
 	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))$/;
@@ -93,6 +95,20 @@
 		}
 	}
 
+	async function change_preview_mode(mode: 'never' | 'normal' | 'always') {
+		$preview_settings.mode = mode;
+		if (mode === 'never') {
+			await db.displays
+				.toCollection()
+				.modify({ preview: { currently_updating: false, url: null } });
+		} else {
+			const display_ids = (await db.displays.toArray()).map((d) => d.id);
+			for (const display_id of display_ids) {
+				screenshot_loop(display_id);
+			}
+		}
+	}
+
 	function popup_close_function() {
 		popup_content.open = false;
 	}
@@ -102,7 +118,7 @@
 		popup_content = {
 			open: true,
 			snippet: display_popup,
-			title: 'Neuen Bildschirm hinzufügen',
+			title: 'Neuen Bildschirm Hinzufügen',
 			title_icon: Monitor,
 			title_class: '!text-xl',
 			window_class: 'w-3xl',
@@ -332,9 +348,7 @@
 					menu_options={(['never', 'normal', 'always'] as const).map((mode) => ({
 						icon: mode === $preview_settings.mode ? SquareCheckBig : Square,
 						name: get_display_preview_mode(mode),
-						on_select: () => {
-							$preview_settings.mode = mode;
-						}
+						on_select: async () => await change_preview_mode(mode)
 					}))}>{get_display_preview_mode($preview_settings.mode)} <ChevronDown /></Button
 				>
 			</div>
@@ -374,7 +388,7 @@
 			menu_options={[
 				{
 					icon: Plus,
-					name: 'Neuen Bildschirm hinzufügen',
+					name: 'Neuen Bildschirm Hinzufügen',
 					on_select: show_new_display_popup
 				},
 				{

control/frontend/src/routes/ControlView.svelte

@@ -23,7 +23,12 @@
 		startup,
 		show_html
 	} from '$lib/ts/api_handler';
-	import { get_display_by_id, run_on_all_selected_displays } from '$lib/ts/stores/displays';
+	import {
+		get_display_by_id,
+		no_active_display_selected,
+		online_displays,
+		run_on_all_selected_displays
+	} from '$lib/ts/stores/displays';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import TipTapInput from './TipTapInput.svelte';
 	import { db } from '$lib/ts/database';
@@ -51,7 +56,7 @@
 		popup_content = {
 			open: true,
 			snippet: send_keys_popup,
-			title: 'Tastatur-Eingaben durchgeben',
+			title: 'Tastatur-Eingaben Senden',
 			title_icon: Keyboard,
 			closable: true
 		};
@@ -61,7 +66,7 @@
 		popup_content = {
 			open: true,
 			snippet: text_popup,
-			title: 'Text anzeigen',
+			title: 'Text Anzeigen',
 			title_icon: TextAlignStart,
 			closable: true,
 			window_class: 'size-full'
@@ -72,7 +77,7 @@
 		popup_content = {
 			open: true,
 			snippet: website_popup,
-			title: 'Webseite anzeigen',
+			title: 'Webseite Anzeigen',
 			window_class: 'w-xl',
 			title_icon: Globe,
 			closable: true
@@ -93,11 +98,11 @@
 		}
 	}
 
-	async function ask_shutdonw() {
+	async function ask_shutdown() {
 		popup_content = {
 			open: true,
-			snippet: ask_shutdonw_popup,
-			title: 'PC Herunterfahren',
+			snippet: ask_shutdown_popup,
+			title: 'Bildschirm Herunterfahren',
 			title_icon: PowerOff,
 			closable: true
 		};
@@ -107,7 +112,7 @@
 		popup_content.open = false;
 		await run_on_all_selected_displays((d) => {
 			shutdown(d.ip); // no await here because we want to be fast
-			db.displays.update(d.id, { status: 'app_offline' });
+			db.displays.update(d.id, { status: 'app_offline', preview: { currently_updating: false, url: null} });
 		}, false);
 	}
 
@@ -140,7 +145,7 @@
 
 	function validate_website_url(url: string): [boolean, string] {
 		if (url === '') return [true, ''];
-		const regex = /^https?:\/\/[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/;
+		const regex = /^https?:\/\/[\w\-]+(\.[\w\-]+)+([\w\-\._~:/?#\[\]@!$&'\(\)\*\+,;=.])*/;
 		if (regex.test(url)) {
 			return [true, ''];
 		}
@@ -159,7 +164,7 @@
 {#snippet website_popup()}
 	<div class="flex flex-col gap-2">
 		<TextInput
-			title="URL"
+			title="URL (mit http:// oder https://)"
 			placeholder="https://example.com"
 			bind:current_value={website_url}
 			bind:current_valid={website_url_valid}
@@ -180,7 +185,7 @@
 	</div>
 {/snippet}
 
-{#snippet ask_shutdonw_popup()}
+{#snippet ask_shutdown_popup()}
 	<p>Bist du sicher, dass du alle ausgewählten Displays herunterfahren möchtest?</p>
 
 	<div class="flex flex-row justify-end gap-2">
@@ -208,7 +213,7 @@
 
 <div class="grid grid-rows-[2.5rem_auto] bg-stone-800 rounded-2xl min-w-0">
 	<div class="text-xl font-bold pl-3 content-center bg-stone-700 rounded-t-2xl truncate min-w-0">
-		Bildschirme steuern
+		Bildschirme Steuern
 	</div>
 	<div class="relative flex flex-col gap-2 p-2 overflow-auto">
 		<div class="flex flex-row justify-between gap-2">
@@ -217,7 +222,7 @@
 					<Button
 						title="Vorherige Folie (Pfeil nach Links)"
 						className="px-9"
-						disabled={$selected_display_ids.length === 0}
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 						click_function={async () => {
 							await send_single_key_press('VK_LEFT');
 						}}><ArrowBigLeft /></Button
@@ -225,7 +230,7 @@
 					<Button
 						title="Nächste Folie (Pfeil nach Rechts)"
 						className="px-9"
-						disabled={$selected_display_ids.length === 0}
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 						click_function={async () => {
 							await send_single_key_press('VK_RIGHT');
 						}}><ArrowBigRight /></Button
@@ -234,19 +239,20 @@
 
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
-					disabled={$selected_display_ids.length === 0}
-					click_function={show_text_popup}><TextAlignStart /> Text anzeigen</Button
+					click_function={show_text_popup}
+					disabled={no_active_display_selected($selected_display_ids, $online_displays)}
+					><TextAlignStart /> Text Anzeigen</Button
 				>
 
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
-					disabled={$selected_display_ids.length === 0}
-					click_function={show_website_popup}><Globe /> Webseite anzeigen</Button
+					disabled={no_active_display_selected($selected_display_ids, $online_displays)}
+					click_function={show_website_popup}><Globe /> Webseite Anzeigen</Button
 				>
 
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
-					disabled={$selected_display_ids.length === 0}
+					disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 					click_function={async () => {
 						await run_on_all_selected_displays((d) => show_blackscreen(d.ip));
 					}}><Presentation />Blackout</Button
@@ -254,38 +260,40 @@
 
 				<div class="flex flex-row justify-normal">
 					<Button className="rounded-r-none pl-3 flex gap-3 grow w-65 justify-normal" disabled>
-						<TrafficCone /> Fallback-Bild anzeigen
+						<TrafficCone /> Fallback-Bild Anzeigen
 					</Button>
 					<Button className="rounded-l-none flex grow-0 w-10" disabled><ChevronDown /></Button>
 				</div>
 
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
-					disabled={$selected_display_ids.length === 0}
-					click_function={show_send_keys_popup}><Keyboard /> Tastatur-Eingaben durchgeben</Button
+					disabled={no_active_display_selected($selected_display_ids, $online_displays)}
+					click_function={show_send_keys_popup}><Keyboard /> Tastatur-Eingaben Senden</Button
 				>
 			</div>
 			<div class="flex flex-col gap-2 justify-between">
 				<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' || $selected_display_ids.length === 0}
+						disabled={$all_display_states === 'on' ||
+							no_active_display_selected($selected_display_ids, $online_displays)}
 						click_function={startup_action}
 					>
-						<Power /> PC hochfahren
+						<Power /> Bildschirm Hochfahren
 					</Button>
 
 					<Button
 						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
-						disabled={$all_display_states === 'off' || $selected_display_ids.length === 0}
-						click_function={ask_shutdonw}
+						disabled={$all_display_states === 'off' ||
+							no_active_display_selected($selected_display_ids, $online_displays)}
+						click_function={ask_shutdown}
 					>
-						<PowerOff /> PC herunterfahren</Button
+						<PowerOff /> Bildschirm Herunterfahren</Button
 					>
 				</div>
 				<Button className="px-3 flex gap-3 w-full xl:w-75 justify-normal" disabled>
 					<SquareTerminal />
-					Shell-Befehl ausführen
+					Shell-Befehl Ausführen
 				</Button>
 			</div>
 		</div>

control/frontend/src/routes/DisplayView.svelte

@@ -218,7 +218,7 @@
 							class="min-w-40 px-4 rounded-xl cursor-pointer duration-200 transition-colors bg-stone-600"
 							onclick={async () => await toggle_all_selected_displays($display_groups)}
 						>
-							<span>{$all_groups_selected || false ? 'Alle abwählen' : 'Alle auswählen'}</span>
+							<span>{$all_groups_selected || false ? 'Alle Abwählen' : 'Alle Auswählen'}</span>
 						</button>
 						<div class="flex flex-row">
 							<Button

control/frontend/src/routes/FileView.svelte

@@ -38,6 +38,7 @@
 	import HighlightedText from '$lib/components/HighlightedText.svelte';
 	import { liveQuery, type Observable } from 'dexie';
 	import { download_file, add_upload, add_sync_recursively } from '$lib/ts/file_transfer_handler';
+	import { no_active_display_selected, online_displays } from '$lib/ts/stores/displays';
 
 	let current_name: string = $state('');
 	let current_valid: boolean = $state(false);
@@ -285,7 +286,7 @@
 <div class="bg-stone-800 h-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
+			Dateien Anzeigen und Verwalten
 		</span>
 		<div class="flex flex-row">
 			<Button
@@ -321,7 +322,7 @@
 						title="Neuen Ordner erstellen (Neuen Ordner mit ausgewählten Objekten erstellen)"
 						className="px-3 flex"
 						click_function={show_new_folder_popup}
-						disabled={$selected_display_ids.length === 0}><FolderPlus /></Button
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}><FolderPlus /></Button
 					>
 					<div class="border border-stone-700 my-1"></div>
 					<Button
@@ -330,7 +331,7 @@
 						click_function={() => {
 							if (file_input) file_input.click();
 						}}
-						disabled={$selected_display_ids.length === 0}><Upload /></Button
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}><Upload /></Button
 					>
 					<Button
 						title="Ausgewählte Datei herunterladen"
@@ -349,7 +350,7 @@
 								$selected_display_ids,
 								$current_folder_elements ?? []
 							)}
-						disabled={$selected_display_ids.length === 0}
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 						><RefreshCcw />
 						<span class="hidden 2xl:flex">Synchronisieren</span>
 					</Button>
@@ -363,7 +364,7 @@
 					<Button
 						title="Ausgewählte Datei(en) einfügen"
 						className="px-3 flex"
-						disabled={$selected_display_ids.length === 0}
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 					>
 						<ClipboardPaste />
 					</Button>
@@ -387,7 +388,7 @@
 		</div>
 		<div class="min-h-0 h-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl">
 			<div class="flex flex-col gap-2 p-2 min-h-0 max-w-full">
-				{#if $selected_display_ids.length === 0}
+				{#if no_active_display_selected($selected_display_ids, $online_displays)}
 					<span class="text-stone-450 px-10 py-6 leading-relaxed text-center">
 						Es sind keine Bildschirme ausgewählt.
 					</span>

control/frontend/src/routes/TipTapInput.svelte

@@ -210,7 +210,7 @@
 			{/each}
 		</div>
 
-		<Button click_function={show_text} className="w-full font-bold">Text anzeigen</Button>
+		<Button click_function={show_text} className="w-full font-bold">Text Anzeigen</Button>
 	</div>
 </div>
 

shared/open_browser.go

@@ -24,7 +24,6 @@ func OpenBrowserWindow(url string, fullscreen bool, profile string) error {
 		fmt.Sprintf("--app=%s", url),
 		"--autoplay-policy=no-user-gesture-required",
 		fmt.Sprintf("--user-data-dir=%s", browserProfileDirPath),
-		"--disable-web-security",
 		"--allow-running-insecure-content",
 		"--disable-features=XFrameOptions",
 	}

shared/version.txt

@@ -1 +1 @@
-v0.0.15
+v0.0.16