feat: add remotes and commands data types and lists

www/src/data/command.js

@@ -0,0 +1,73 @@
+function Command({ id, protocol, command, device, command_type, title } = {}) {
+  let _id = id;
+  let _protocol = protocol;
+  let _command = command;
+  let _device = device;
+  let _command_type = command_type;
+  let _title = title;
+
+  function getId() {
+    return _id;
+  }
+
+  function setId(id) {
+    _id = id;
+  }
+
+  function getProtocol() {
+    return _protocol;
+  }
+
+  function setProtocol(protocol) {
+    _protocol = protocol;
+  }
+
+  function getCommand() {
+    return _command;
+  }
+
+  function setCommand(command) {
+    _command = command;
+  }
+
+  function getDevice() {
+    return _device;
+  }
+
+  function setDevice(device) {
+    _device = device;
+  }
+
+  function getCommandType() {
+    return _command_type;
+  }
+
+  function setCommandType(command_type) {
+    _command_type = command_type;
+  }
+
+  function getTitle() {
+    return _title;
+  }
+
+  function setTitle(title) {
+    _title = title;
+  }
+
+  return {
+    getId,
+    setId,
+    getProtocol,
+    setProtocol,
+    getCommand,
+    setCommand,
+    getDevice,
+    setDevice,
+    getCommandType,
+    setCommandType,
+    getTitle,
+    setTitle,
+  };
+}
+
+export default Command;

www/src/data/remote.js

@@ -0,0 +1,40 @@
+function Remote({ id, title, commands } = {}) {
+  let _id = id;
+  let _title = title;
+  let _commands = commands;
+
+  function getId() {
+    return _id;
+  }
+
+  function setId(id) {
+    _id = id;
+  }
+
+  function getTitle() {
+    return _title;
+  }
+
+  function setTitle(title) {
+    _title = title;
+  }
+
+  function getCommands() {
+    return _commands;
+  }
+
+  function setCommands(commands) {
+    _commands = commands;
+  }
+
+  return {
+    getId,
+    setId,
+    getTitle,
+    setTitle,
+    getCommands,
+    setCommands,
+  };
+}
+
+export default Remote;

www/src/services/remotes-service.js

@@ -0,0 +1,18 @@
+function RemotesService() {
+  async function getRemotes() {
+    return [];
+  }
+
+  async function getCommands() {
+    return [];
+  }
+
+  return {
+    getRemotes,
+    getCommands,
+  };
+}
+
+RemotesService = new RemotesService();
+
+export default RemotesService;

www/src/services/webrtc-service.js

@@ -1,12 +1,20 @@
+import EventEmitter from "../tools/event-emitter";
 import WebsocketService from "./websocket-service";
 
 function WebRTCService() {
   const TYPE_SIGNALING = "signaling";
+  const STATE_CONNECTED = "connected";
+  const STATE_DISCONNECTED = "disconnected";
+  const STATE_CLOSED = "closed";
+  const STATE_FAILED = "failed";
+  const ICE_CONNECTION_STATE_CHANGE_EVENT = "iceconnectionstatechange";
 
   let videoElement;
   let peerConnection;
   let peerId;
 
+  let eventEmitter = new EventEmitter();
+
   WebsocketService.onMessage((data) => {
     let dataObject = JSON.parse(data);
     let sender = dataObject.sender;
@@ -19,10 +27,15 @@ function WebRTCService() {
     peerId = targetId;
     let configuration = getConfiguration();
     peerConnection = new RTCPeerConnection(configuration);
-    console.log("ICE connection state:" + peerConnection.iceConnectionState)
-    peerConnection.oniceconnectionstatechange = (event) => {
-      console.log("ICE connection state changed to:", peerConnection.iceConnectionState);
-    };
+    console.log("ICE connection state:" + peerConnection.iceConnectionState);
+    peerConnection.addEventListener("iceconnectionstatechange", (event) => {
+      let state = peerConnection.iceConnectionState;
+      console.log("ICE connection state changed to:", state);
+      eventEmitter.dispatchEvent(ICE_CONNECTION_STATE_CHANGE_EVENT, state);
+      if (state === STATE_CONNECTED) {
+        videoElement.play();
+      }
+    });
     peerConnection.addEventListener("signalingstatechange", (event) => {
       console.log("Signaling state changed to:", event.target.signalingState);
     });
@@ -43,17 +56,22 @@ function WebRTCService() {
     peerConnection.onnegotiationneeded = () => {
       console.log("Negotiation needed");
       negotiate(targetId);
-    }
+    };
     negotiate(targetId);
   }
   
+  function disconnect() {
+    peerConnection.close();
+    eventEmitter.dispatchEvent(ICE_CONNECTION_STATE_CHANGE_EVENT, peerConnection.iceConnectionState);
+  }
+
   async function negotiate(targetId) {
     try {
       let offer = await peerConnection.createOffer({
         offerToReceiveAudio: true,
         offerToReceiveVideo: true,
       });
-      console.log("Created offer:", offer)
+      console.log("Created offer:", offer);
       await peerConnection.setLocalDescription(offer);
       sendOffer(targetId, offer);
     } catch (error) {
@@ -97,7 +115,7 @@ function WebRTCService() {
 
   function handleAnswer(answer) {
     console.log("Remote answer:", answer);
-    if (peerConnection.signalingState === "stable") return
+    if (peerConnection.signalingState === "stable") return;
     peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
   }
 
@@ -107,6 +125,12 @@ function WebRTCService() {
     peerConnection.addIceCandidate(iceCandidate);
   }
 
+  function onStateChanged(callback) {
+    eventEmitter.on(ICE_CONNECTION_STATE_CHANGE_EVENT, () => {
+      callback(peerConnection.iceConnectionState);
+    });
+  }
+
   function getConfiguration() {
     return {
       iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
@@ -123,9 +147,15 @@ function WebRTCService() {
   }
 
   return {
+    STATE_CONNECTED,
+    STATE_DISCONNECTED,
+    STATE_CLOSED,
+    STATE_FAILED,
     connect,
+    disconnect,
     setVideoElement,
     getVideoElement,
+    onStateChanged,
   };
 }
 

www/src/views/integration-view.jsx

@@ -10,6 +10,16 @@ function IntegrationView(props) {
       ? integration().getName()
       : "Integration"
   );
+  const [connectionState, setConnectionState] = createSignal(
+    WebRTCService.STATE_DISCONNECTED
+  );
+  const showConnectButton = createMemo(
+    () =>
+      connectionState() === WebRTCService.STATE_DISCONNECTED ||
+      connectionState() === WebRTCService.STATE_FAILED ||
+      connectionState() === WebRTCService.STATE_CLOSED
+  );
+  WebRTCService.onStateChanged(handleConnectionStateChanged);
   let videoElement = null;
 
   function handleConnectWebRTC() {
@@ -18,6 +28,14 @@ function IntegrationView(props) {
     WebRTCService.connect(integrationId);
   }
 
+  function handleDisconnectWebRTC() {
+    WebRTCService.disconnect();
+  }
+
+  function handleConnectionStateChanged(state) {
+    setConnectionState(state);
+  }
+
   return (
     <div
       class={
@@ -29,10 +47,24 @@ function IntegrationView(props) {
       <h1>{title}</h1>
       <div class="d-flex flex-row">
         <div class="d-flex flex-row justify-content-end flex-fill">
-          <button class="btn btn-dark me-2 mb-3" onClick={handleConnectWebRTC}>
-            <i class="bi bi-plug-fill me-2"></i>
-            Connect
-          </button>
+          <Show when={showConnectButton()}>
+            <button
+              class="btn btn-dark me-2 mb-3"
+              onClick={handleConnectWebRTC}
+            >
+              <i class="bi bi-plug-fill me-2"></i>
+              Connect
+            </button>
+          </Show>
+          <Show when={!showConnectButton()}>
+            <button
+              class="btn btn-dark me-2 mb-3"
+              onClick={handleDisconnectWebRTC}
+            >
+              <i class="bi bi-x-lg me-2"></i>
+              Disconnect
+            </button>
+          </Show>
         </div>
       </div>
       <div class="flex-fill d-flex flex-column justify-content-center align-items-center rounded overflow-hidden">
@@ -40,9 +72,6 @@ function IntegrationView(props) {
           ref={videoElement}
           class="w-100 h-100"
           style="background-color: #000"
-          controls={true}
-          muted={false}
-          autoplay={true}
         ></video>
       </div>
     </div>

www/src/views/main-view.jsx

@@ -1,27 +1,28 @@
+import { autoUpdate, computePosition, offset, shift } from "@floating-ui/dom";
 import {
+  createEffect,
+  createResource,
   createSignal,
   mergeProps,
-  createResource,
-  createEffect,
-  onMount,
   onCleanup,
+  onMount,
 } from "solid-js";
-import { computePosition, shift, autoUpdate, offset } from "@floating-ui/dom";
 
-import UserService from "../services/user-service.js";
 import ModalRegistry from "../modals/modal-registry.jsx";
+import UserService from "../services/user-service.js";
 import UrlUtils from "../tools/url-utils.js";
-import SettingsView from "./settings-view.jsx";
 import DevicesView from "./devices-view.jsx";
+import SettingsView from "./settings-view.jsx";
 
 import {
   DEVICES_VIEW,
-  REMOTES_VIEW,
-  RECORDINGS_VIEW,
-  SETTINGS_VIEW,
   INTEGRATION_VIEW,
+  RECORDINGS_VIEW,
+  REMOTES_VIEW,
+  SETTINGS_VIEW,
 } from "../data/constants.js";
 import IntegrationView from "./integration-view.jsx";
+import RemotesView from "./remotes/remotes-view.jsx";
 
 let [activeView, setActiveView] = createSignal(DEVICES_VIEW);
 
@@ -215,6 +216,9 @@ const MainView = function (props) {
           <Match when={activeView() === INTEGRATION_VIEW}>
             <IntegrationView {...props} />
           </Match>
+          <Match when={activeView() === REMOTES_VIEW}>
+            <RemotesView {...props} />
+          </Match>
         </Switch>
       </div>
     );

www/src/views/remotes/commands-list-view.jsx

@@ -0,0 +1,92 @@
+import { createResource, onMount } from "solid-js";
+import List from "../../modules/list";
+import RemotesService from "../../services/remotes-service";
+
+function CommandsList(props) {
+  const [commands, { refetch: refetchCommands }] = createResource(
+    RemotesService.getCommands
+  );
+
+  onMount(() => {
+    refetchCommands();
+  });
+
+  function handleNewCommand() {}
+
+  return (
+    <>
+      <div class="d-flex flex-row">
+        <div class="d-flex flex-row flex-fill">
+          {props.navigation ? props.navigation : null}
+        </div>
+        <div class="d-flex flex-row justify-content-end flex-fill">
+          <button class="btn btn-dark me-2 mb-3" onClick={handleNewCommand}>
+            <i class="bi bi-plus-square me-2"></i>
+            New Command
+          </button>
+        </div>
+      </div>
+      <List
+        class={"flex-fill"}
+        columns={[
+          {
+            id: "id",
+            name: "id",
+            width: 6,
+          },
+          {
+            id: "title",
+            name: "Title",
+          },
+          {
+            id: "protocol",
+            name: "Protocol",
+            width: 10,
+          },
+          {
+            id: "type",
+            name: "Type",
+            width: 6,
+          },
+          {
+            id: "options",
+            name: "",
+            width: 4,
+          },
+        ]}
+        items={(commands() || []).map((command) => ({
+          id: {
+            html: <span class="font-monospace">{command.getId()}</span>,
+          },
+          title: {
+            text: command.getTitle(),
+          },
+          protocol: {
+            text: command.getProtocol(),
+          },
+          type: {
+            text: command.getCommandType(),
+          },
+          options: {
+            html: (
+              <>
+                <button
+                  class="btn btn-outline-secondary me-2"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    handleDeleteCommand(command);
+                  }}
+                >
+                  <i class="bi bi-trash-fill"></i>
+                </button>
+              </>
+            ),
+          },
+          command,
+        }))}
+      ></List>
+    </>
+  );
+}
+
+export default CommandsList;

www/src/views/remotes/remotes-list-view.jsx

@@ -0,0 +1,77 @@
+import { createResource, onMount } from "solid-js";
+import List from "../../modules/list";
+import RemotesService from "../../services/remotes-service";
+
+function RemotesList(props) {
+  const [remotes, { refetch: refetchRemotes }] = createResource(
+    RemotesService.getRemotes
+  );
+
+  onMount(() => {
+    refetchRemotes();
+  });
+
+  function handleNewRemote() {}
+
+  return (
+    <>
+      <div class="d-flex flex-row">
+        <div class="d-flex flex-row flex-fill">
+          {props.navigation ? props.navigation : null}
+        </div>
+        <div class="d-flex flex-row justify-content-end flex-fill">
+          <button class="btn btn-dark me-2 mb-3" onClick={handleNewRemote}>
+            <i class="bi bi-plus-square me-2"></i>
+            New Remote
+          </button>
+        </div>
+      </div>
+      <List
+        class={"flex-fill"}
+        columns={[
+          {
+            id: "id",
+            name: "id",
+            width: 6,
+          },
+          {
+            id: "title",
+            name: "Title",
+          },
+          {
+            id: "options",
+            name: "",
+            width: 4,
+          },
+        ]}
+        onListItemClick={() => {}}
+        items={(remotes() || []).map((remote) => ({
+          id: {
+            html: <span class="font-monospace">{remote.getId()}</span>,
+          },
+          name: {
+            text: remote.getTitle(),
+          },
+          options: {
+            html: (
+              <>
+                <button
+                  class="btn btn-outline-secondary me-2"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    handleDeleteRemote(remote);
+                  }}
+                >
+                  <i class="bi bi-trash-fill"></i>
+                </button>
+              </>
+            ),
+          },
+          remote,
+        }))}
+      ></List>
+    </>
+  );
+}
+
+export default RemotesList;

www/src/views/remotes/remotes-view.jsx

@@ -0,0 +1,64 @@
+import {
+  createSignal,
+  Match,
+  mergeProps,
+  Switch
+} from "solid-js";
+
+import CommandsList from "./commands-list-view";
+import RemotesList from "./remotes-list-view";
+
+function RemotesView(props) {
+  props = mergeProps({ onIntegrationClicked: () => {} }, props);
+  const REMOTES_LIST_VIEW = "remotes_list";
+  const COMMANDS_LIST_VIEW = "commands_list";
+
+  const [currentView, setCurrentView] = createSignal(REMOTES_LIST_VIEW);
+
+  function Navigation(props) {
+    return (
+      <div class="d-flex flex-row flex-fill">
+        <button
+          class={
+            "btn me-2 mb-3" +
+            (currentView() === REMOTES_LIST_VIEW ? " btn-secondary" : " btn-dark")
+          }
+          onClick={() => setCurrentView(REMOTES_LIST_VIEW)}
+        >
+          <i class="bi bi-tv me-2"></i>
+          Remotes
+        </button>
+        <button
+          class={
+            "btn me-2 mb-3" +
+            (currentView() === COMMANDS_LIST_VIEW ? " btn-secondary" : " btn-dark")
+          }
+          onClick={() => setCurrentView(COMMANDS_LIST_VIEW)}
+        >
+          <i class="bi bi-gear me-2"></i>
+          Commands
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      class={
+        "d-flex flex-column overflow-hidden flex-fill px-3 pb-2 pt-3 " +
+        props.class
+      }
+    >
+      <Switch>
+        <Match when={currentView() === REMOTES_LIST_VIEW}>
+          <RemotesList navigation={<Navigation />} />
+        </Match>
+        <Match when={currentView() === COMMANDS_LIST_VIEW}>
+          <CommandsList navigation={<Navigation />} />
+        </Match>
+      </Switch>
+    </div>
+  );
+}
+
+export default RemotesView;