Compare commits

..

13 Commits

11 changed files with 170 additions and 87 deletions
@@ -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>
+22 -2
View File
@@ -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}`);
+8 -4
View File
@@ -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);
}
+73 -36
View File
@@ -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,49 +134,60 @@ 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);
if (settings.mode === 'never') return;
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;
const retry_seconds = get(preview_settings).retry_seconds.now;
const initial_retry_count = settings.retry_count.now;
const retry_seconds = get(preview_settings).retry_seconds.now;
const display = await db.displays.get(display_id);
if (!display || display.preview.currently_updating) return;
const display = await db.displays.get(display_id);
if (!display || display.preview.currently_updating) return;
display.preview.currently_updating = true;
await db.displays.update(display.id, { preview: display.preview });
display.preview.currently_updating = true;
await db.displays.update(display.id, { preview: display.preview });
let last_hash: number | null = null;
let last_hash: number | null = null;
let retry_count = initial_retry_count;
while (retry_count > 0) {
if (settings.mode !== 'always') retry_count -= 1;
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);
if (!new_blob) {
display.preview = { currently_updating: false, url: null };
await db.displays.update(display.id, { preview: display.preview });
return;
}
const new_hash = await image_content_hash(new_blob);
if (last_hash !== new_hash) {
if (display.preview.url) {
URL.revokeObjectURL(display.preview.url);
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 });
return;
}
const new_hash = await image_content_hash(new_blob);
if (last_hash !== new_hash) {
if (display.preview.url) {
URL.revokeObjectURL(display.preview.url);
}
last_hash = new_hash;
display.preview.url = URL.createObjectURL(new_blob);
await db.displays.update(display.id, { preview: display.preview });
retry_count = initial_retry_count;
}
last_hash = new_hash;
display.preview.url = URL.createObjectURL(new_blob);
await db.displays.update(display.id, { preview: display.preview });
retry_count = initial_retry_count;
await new Promise((resolve) => setTimeout(resolve, retry_seconds * 1000)); // sleep
}
await new Promise((resolve) => setTimeout(resolve, retry_seconds * 1000)); // sleep
}
display.preview.currently_updating = false;
await db.displays.update(display.id, { preview: display.preview });
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(
@@ -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() {
+20 -6
View File
@@ -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
},
{
+36 -28
View File
@@ -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>
@@ -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
+7 -6
View File
@@ -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>
@@ -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>
-1
View File
@@ -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",
}
+1 -1
View File
@@ -1 +1 @@
v0.0.15
v0.0.16