From ea74609349ea288406b94f0bb9ba53eb203b4f4f Mon Sep 17 00:00:00 2001
From: E44 <129310925+programmer-44@users.noreply.github.com>
Date: Sat, 8 Nov 2025 22:03:12 +0100
Subject: [PATCH] show blackscreen added

---
 .../src/components/ControlView.svelte         | 37 ++++++++++++++++---
 .../src/components/DisplayObject.svelte       |  2 +-
 control/frontend/src/ts/api_handler.ts        | 15 +++++++-
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/control/frontend/src/components/ControlView.svelte b/control/frontend/src/components/ControlView.svelte
index e718e63..9900a53 100644
--- a/control/frontend/src/components/ControlView.svelte
+++ b/control/frontend/src/components/ControlView.svelte
@@ -15,6 +15,8 @@
 	import PopUp from './PopUp.svelte';
 	import type { PopupContent } from '../ts/types';
 	import KeyInput from './KeyInput.svelte';
+	import { send_keyboard_input, show_blackscreen } from '../ts/api_handler';
+	import { run_on_all_selected_displays } from '../ts/stores/displays';
 
 	let popup_content: PopupContent = $state({
 		open: false,
@@ -55,17 +57,42 @@
 		<div class="flex flex-row justify-between gap-2">
 			<div class="flex flex-col gap-2">
 				<div class="flex flex-row gap-2 w-75 justify-normal">
-					<Button title="Vorherige Folie (Pfeil nach Links)" className="px-9"
-						><ArrowBigLeft /></Button
+					<Button
+						title="Vorherige Folie (Pfeil nach Links)"
+						className="px-9"
+						click_function={() => {
+							run_on_all_selected_displays(
+								() => {
+									send_keyboard_input;
+								},
+								true,
+								'VK_LEFT'
+							);
+						}}><ArrowBigLeft /></Button
 					>
-					<Button title="Nächste Folie (Pfeil nach Rechts)" className="px-9"
-						><ArrowBigRight /></Button
+					<Button
+						title="Nächste Folie (Pfeil nach Rechts)"
+						className="px-9"
+						click_function={() => {
+							run_on_all_selected_displays(
+								() => {
+									send_keyboard_input;
+								},
+								true,
+								'VK_RIGHT'
+							);
+						}}><ArrowBigRight /></Button
 					>
 				</div>
 				<Button className="px-3 flex gap-3 w-75 justify-normal"
 					><TextAlignStart /> Text anzeigen</Button
 				>
-				<Button className="px-3 flex gap-3 w-75 justify-normal"><Presentation />Blackout</Button>
+				<Button
+					className="px-3 flex gap-3 w-75 justify-normal"
+					click_function={() => {
+						run_on_all_selected_displays(show_blackscreen, true);
+					}}><Presentation />Blackout</Button
+				>
 				<div class="flex flex-row justify-normal">
 					<Button className="rounded-r-none pl-3 flex gap-3 grow w-65 justify-normal"
 						><TrafficCone /> Fallback-Bild anzeigen</Button
diff --git a/control/frontend/src/components/DisplayObject.svelte b/control/frontend/src/components/DisplayObject.svelte
index 70631cd..e40fb60 100644
--- a/control/frontend/src/components/DisplayObject.svelte
+++ b/control/frontend/src/components/DisplayObject.svelte
@@ -31,7 +31,7 @@
 		} else {
 			$pinned_display_id = display.id;
 		}
-		// update_screenshot(display.id); DEBUG
+		update_screenshot(display.id);
 		e.stopPropagation();
 	}
 </script>
diff --git a/control/frontend/src/ts/api_handler.ts b/control/frontend/src/ts/api_handler.ts
index eadc262..956faa1 100644
--- a/control/frontend/src/ts/api_handler.ts
+++ b/control/frontend/src/ts/api_handler.ts
@@ -74,7 +74,7 @@ done
     return folder_element_list;
 }
 
-export async function get_file_tree_data(ip: string, path: string): Promise<TreeElement[]|null> {
+export async function get_file_tree_data(ip: string, path: string): Promise<TreeElement[] | null> {
     const options = {
         method: 'PATCH',
         headers: { 'content-type': 'application/json' },
@@ -84,11 +84,22 @@ export async function get_file_tree_data(ip: string, path: string): Promise<Tree
     };
     const raw_response = await request_display(ip, '/shellCommand', options);
     if (!raw_response) return null;
-    const tree_structure: TreeElement[]|null = (JSON.parse(raw_response.stdout.trim()) as [TreeElement, any])[0].contents || null;
+    const tree_structure: TreeElement[] | null = (JSON.parse(raw_response.stdout.trim()) as [TreeElement, any])[0].contents || null;
     return tree_structure;
 }
 
 
+export async function show_blackscreen(ip: string) {
+    const options = {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+            html: `<div style="width:100dvw; height:100dvh; background-color:black;"></div>`
+        })
+    };
+    await request_display(ip, '/showHTML', options);
+}
+
 
 export async function ping_ip(ip: string): Promise<DisplayStatus> {
     const raw_response = await request_control(`/ping?ip=${ip}`, { method: 'GET' });