9 changed files with 22 additions and 449 deletions
--- a/www/src/data/command.js
+++ b/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;
--- a/www/src/data/remote.js
+++ b/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;
--- a/www/src/services/remotes-service.js
+++ b/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;
--- a/www/src/services/webrtc-service.js
+++ b/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);
-    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();
-      }
-    });
+    console.log("ICE connection state:" + peerConnection.iceConnectionState)
+    peerConnection.oniceconnectionstatechange = (event) => {
+      console.log("ICE connection state changed to:", peerConnection.iceConnectionState);
+    };
    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,
  };
 }

--- a/www/src/views/integration-view.jsx
+++ b/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}
-            >
-              <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>
+          <button class="btn btn-dark me-2 mb-3" onClick={handleConnectWebRTC}>
+            <i class="bi bi-plug-fill me-2"></i>
+            Connect
+          </button>
        </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>
--- a/www/src/views/main-view.jsx
+++ b/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>
    );
--- a/www/src/views/remotes/commands-list-view.jsx
+++ b/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;
--- a/www/src/views/remotes/remotes-list-view.jsx
+++ b/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;
--- a/www/src/views/remotes/remotes-view.jsx
+++ b/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;