From e09d42ecf60717ae7e75c027f66e5f706cadd04a Mon Sep 17 00:00:00 2001
From: Fritz Heiden <fritz.heiden@mailbox.org>
Date: Mon, 14 Apr 2025 23:56:51 +0200
Subject: [PATCH] feat: add toggle to display remote control

---
 www/src/views/devices/integration-view.jsx | 58 +++++++++++++++-------
 1 file changed, 41 insertions(+), 17 deletions(-)

diff --git a/www/src/views/devices/integration-view.jsx b/www/src/views/devices/integration-view.jsx
index ce2a8e4..378ae25 100644
--- a/www/src/views/devices/integration-view.jsx
+++ b/www/src/views/devices/integration-view.jsx
@@ -4,6 +4,7 @@ import {
   createResource,
   createSignal,
   onCleanup,
+  Show,
 } from "solid-js";
 import WebRTCService from "../../services/webrtc-service";
 import Integration from "../../data/integration";
@@ -37,8 +38,15 @@ function IntegrationView(props) {
     initialValue: [],
   });
   const [selectedRemote, setSelectedRemote] = createSignal();
+  const [remoteControlVisible, setRemoteControlVisible] = createSignal(false);
 
-  createEffect(() => handleRemoteSelected(availableRemotes().shift()?.getId()));
+  createEffect(() =>
+    handleRemoteSelected(
+      availableRemotes()
+        .find(() => true)
+        ?.getId()
+    )
+  );
 
   createEffect(() => {
     let url = UrlUtils.getUrl();
@@ -90,6 +98,10 @@ function IntegrationView(props) {
     RemoteService.sendCommand(command);
   }
 
+  function toggleRemoteControl() {
+    setRemoteControlVisible(!remoteControlVisible());
+  }
+
   return (
     <div
       class={
@@ -125,29 +137,41 @@ function IntegrationView(props) {
         </div>
       </div>
       <div class="flex-fill d-flex flex-row overflow-hidden">
-        <div class="flex-fill rounded overflow-hidden">
+        <div
+          class="flex-fill rounded overflow-hidden"
+          style="position:relative;"
+        >
           <video
             ref={videoElement}
             class="w-100 h-100"
             style="background-color: #000"
           ></video>
-        </div>
-        <div class="d-flex flex-column ps-3">
-          <select
-            class="form-select mb-3"
-            onChange={(e) => handleRemoteSelected(e.target.value)}
+          <button
+            class="btn btn-dark mt-2 me-2"
+            style="transform: rotate(180deg);position:absolute;top:0;right:0;z-index:1000;"
+            onClick={toggleRemoteControl}
           >
-            {availableRemotes().map((remote, index) => (
-              <option value={remote.getId()} selected={index === 0}>
-                {remote.getTitle()}
-              </option>
-            ))}
-          </select>
-          <RemoteControl
-            onCommand={handleRemoteButtonPressed}
-            remote={selectedRemote()}
-          />
+            <i class="bi bi-building"></i>
+          </button>
         </div>
+        <Show when={remoteControlVisible()}>
+          <div class="d-flex flex-column ps-3">
+            <select
+              class="form-select mb-3"
+              onChange={(e) => handleRemoteSelected(e.target.value)}
+            >
+              {availableRemotes().map((remote, index) => (
+                <option value={remote.getId()} selected={index === 0}>
+                  {remote.getTitle()}
+                </option>
+              ))}
+            </select>
+            <RemoteControl
+              onCommand={handleRemoteButtonPressed}
+              remote={selectedRemote()}
+            />
+          </div>
+        </Show>
       </div>
     </div>
   );