www/src/data/command.js

@@ -1,73 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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,20 +1,12 @@
-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;
@@ -27,15 +19,10 @@ function WebRTCService() {
     peerId = targetId;
     let configuration = getConfiguration();
     peerConnection = new RTCPeerConnection(configuration);
-    console.log("ICE connection state:" + peerConnection.iceConnectionState);
+    console.log("ICE connection state:" + peerConnection.iceConnectionState)
-    peerConnection.addEventListener("iceconnectionstatechange", (event) => {
+    peerConnection.oniceconnectionstatechange = (event) => {
-      let state = peerConnection.iceConnectionState;
+      console.log("ICE connection state changed to:", 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);
     });
@@ -56,14 +43,9 @@ 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 {
@@ -71,7 +53,7 @@ function WebRTCService() {
         offerToReceiveAudio: true,
         offerToReceiveVideo: true,
       });
-      console.log("Created offer:", offer);
+      console.log("Created offer:", offer)
       await peerConnection.setLocalDescription(offer);
       sendOffer(targetId, offer);
     } catch (error) {
@@ -115,7 +97,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));
   }
 
@@ -125,12 +107,6 @@ 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" }],
@@ -147,15 +123,9 @@ function WebRTCService() {
   }
 
   return {
-    STATE_CONNECTED,
-    STATE_DISCONNECTED,
-    STATE_CLOSED,
-    STATE_FAILED,
     connect,
-    disconnect,
     setVideoElement,
     getVideoElement,
-    onStateChanged,
   };
 }
 

www/src/views/integration-view.jsx

@@ -10,16 +10,6 @@ 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() {
@@ -28,14 +18,6 @@ function IntegrationView(props) {
     WebRTCService.connect(integrationId);
   }
 
-  function handleDisconnectWebRTC() {
-    WebRTCService.disconnect();
-  }
-
-  function handleConnectionStateChanged(state) {
-    setConnectionState(state);
-  }
-
   return (
     <div
       class={
@@ -47,24 +29,10 @@ function IntegrationView(props) {
       <h1>{title}</h1>
       <div class="d-flex flex-row">
         <div class="d-flex flex-row justify-content-end flex-fill">
-          <Show when={showConnectButton()}>
+          <button class="btn btn-dark me-2 mb-3" onClick={handleConnectWebRTC}>
-            <button
+            <i class="bi bi-plug-fill me-2"></i>
-              class="btn btn-dark me-2 mb-3"
+            Connect
-              onClick={handleConnectWebRTC}
+          </button>
-            >
-              <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">
@@ -72,6 +40,9 @@ 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,28 +1,27 @@
-import { autoUpdate, computePosition, offset, shift } from "@floating-ui/dom";
 import {
-  createEffect,
-  createResource,
   createSignal,
   mergeProps,
-  onCleanup,
+  createResource,
+  createEffect,
   onMount,
+  onCleanup,
 } from "solid-js";
+import { computePosition, shift, autoUpdate, offset } from "@floating-ui/dom";
 
-import ModalRegistry from "../modals/modal-registry.jsx";
 import UserService from "../services/user-service.js";
+import ModalRegistry from "../modals/modal-registry.jsx";
 import UrlUtils from "../tools/url-utils.js";
-import DevicesView from "./devices-view.jsx";
 import SettingsView from "./settings-view.jsx";
+import DevicesView from "./devices-view.jsx";
 
 import {
   DEVICES_VIEW,
-  INTEGRATION_VIEW,
-  RECORDINGS_VIEW,
   REMOTES_VIEW,
+  RECORDINGS_VIEW,
   SETTINGS_VIEW,
+  INTEGRATION_VIEW,
 } from "../data/constants.js";
 import IntegrationView from "./integration-view.jsx";
-import RemotesView from "./remotes/remotes-view.jsx";
 
 let [activeView, setActiveView] = createSignal(DEVICES_VIEW);
 
@@ -216,9 +215,6 @@ 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

@@ -1,92 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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;