Add connection relayed/p2p indicator.

Server/Pages/RemoteControl.cshtml

@@ -1,5 +1,7 @@
 @page
+@using Remotely.Shared.Models
 @inject Remotely.Server.Services.ApplicationConfig AppConfig
+@inject UserManager<RemotelyUser> UserManager
 @model Remotely.Server.Pages.RemoteControlModel
 @{
     Layout = null;
@@ -26,6 +28,35 @@
     {
         <link href="~/css/remote-control-dark.css" rel="stylesheet" asp-append-version="true" />
     }
+
+    @if (User.Identity.IsAuthenticated)
+    {
+        var user = await UserManager.GetUserAsync(User);
+        switch (user.UserOptions.Theme)
+        {
+            case Remotely.Shared.Enums.Theme.Light:
+                <link href="~/css/remote-control-light.css" rel="stylesheet" asp-append-version="true" />
+                break;
+            case Remotely.Shared.Enums.Theme.Dark:
+                <link href="~/css/remote-control-dark.css" rel="stylesheet" asp-append-version="true" />
+                break;
+            default:
+                break;
+        }
+    }
+    else
+    {
+        if (AppConfig.Theme.ToLower() == "light")
+        {
+            <link href="~/css/remote-control-light.css" rel="stylesheet" asp-append-version="true" />
+        }
+        else
+        {
+            <link href="~/css/remote-control-dark.css" rel="stylesheet" asp-append-version="true" />
+        }
+    }
+
+
     <link href="~/lib/fontawesome/css/all.min.css" rel="stylesheet" />
 
     <environment include="Development">
@@ -83,6 +114,12 @@
             <button id="qualityButton" class="option-button">Quality <i class="far fa-image"></i></button>
         </div>
 
+        <div style="margin-top:5px;">
+            <span>Connection: </span>
+            <i id="connectionRelayedIcon" class="fas fa-wifi connection-icon" title="Connection is relayed"></i>
+            <i id="connectionP2PIcon" class="fas fa-wifi connection-icon" title="Connection is peer-to-peer" style="display:none"></i>
+        </div>
+
     </div>
 
     <div id="screenSelectBar" class="horizontal-button-bar">

Server/wwwroot/css/remote-control-dark.css

@@ -292,3 +292,15 @@ footer a {
     position: fixed;
     top: -100%;
 }
+
+.connection-icon {
+    padding: 5px;
+}
+
+#connectionRelayedIcon {
+    background-color: orange;
+}
+
+#connectionP2PIcon {
+    background-color: green;
+}

Server/wwwroot/css/remote-control-light.css

@@ -10,7 +10,6 @@
 
 button {
     cursor: pointer;
-    /*background-color: #008cba;*/
     background-color: #017ea7;
     color: white;
     border-radius: 5px;
@@ -292,3 +291,15 @@ footer a {
     position: fixed;
     top: -100%;
 }
+
+.connection-icon {
+    padding: 5px;
+}
+
+#connectionRelayedIcon {
+    background-color: orange;
+}
+
+#connectionP2PIcon {
+    background-color: green;
+}

Server/wwwroot/scripts/RemoteControl/RtcSession.ts

@@ -26,9 +26,13 @@ export class RtcSession {
             };
             this.DataChannel.onclose = (ev) => {
                 console.log("Data channel closed.");
+                UI.ConnectionP2PIcon.style.display = "none";
+                UI.ConnectionRelayedIcon.style.display = "unset";
             };
             this.DataChannel.onerror = (ev) => {
                 console.log("Data channel error.", ev.error);
+                UI.ConnectionP2PIcon.style.display = "none";
+                UI.ConnectionRelayedIcon.style.display = "unset";
             };
             this.DataChannel.onmessage = async (ev) => {
                 var data = ev.data as ArrayBuffer;
@@ -38,14 +42,24 @@ export class RtcSession {
             };
             this.DataChannel.onopen = (ev) => {
                 console.log("Data channel opened.");
+                UI.ConnectionP2PIcon.style.display = "unset";
+                UI.ConnectionRelayedIcon.style.display = "none";
             };
         };
         this.PeerConnection.onconnectionstatechange = function (ev) {
             console.log("Connection state changed to " + this.connectionState);
+            if (this.connectionState != "connected") {
+                UI.ConnectionP2PIcon.style.display = "none";
+                UI.ConnectionRelayedIcon.style.display = "unset";
+            }
         }
 
         this.PeerConnection.oniceconnectionstatechange = function (ev) {
-            console.log("Connection state changed to " + this.iceConnectionState);
+            console.log("ICE connection state changed to " + this.iceConnectionState);
+            if (this.iceConnectionState != "connected") {
+                UI.ConnectionP2PIcon.style.display = "none";
+                UI.ConnectionRelayedIcon.style.display = "unset";
+            }
         }
         this.PeerConnection.onicecandidate = async (ev) => {
             await Remotely.RCBrowserSockets.SendIceCandidate(ev.candidate);

Server/wwwroot/scripts/RemoteControl/UI.ts

@@ -37,6 +37,8 @@ export var ClipboardTransferBar = document.getElementById("clipboardTransferBar"
 export var ClipboardTransferTextArea = document.getElementById("clipboardTransferTextArea") as HTMLTextAreaElement;
 export var ClipboardTransferButton = document.getElementById("clipboardTransferButton") as HTMLButtonElement;
 export var ClipboardTransferTypeCheckbox = document.getElementById("clipboardTransferTypeCheckbox") as HTMLInputElement;
+export var ConnectionP2PIcon = document.getElementById("connectionP2PIcon") as HTMLElement;
+export var ConnectionRelayedIcon = document.getElementById("connectionRelayedIcon") as HTMLElement;
 
 var lastPointerMove = Date.now();
 var isDragging: boolean;