feat: add toggle to display remote control

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,13 +137,24 @@ 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>
+          <button
+            class="btn btn-dark mt-2 me-2"
+            style="transform: rotate(180deg);position:absolute;top:0;right:0;z-index:1000;"
+            onClick={toggleRemoteControl}
+          >
+            <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"
@@ -148,6 +171,7 @@ function IntegrationView(props) {
               remote={selectedRemote()}
             />
           </div>
+        </Show>
       </div>
     </div>
   );