Add device discovery and reconnect after connection error

Author: 1RandomDev

renderer/assets/css/index.css

@@ -32,3 +32,46 @@ body {
     width: 35px;
     background-image: url("../img/plus-circle.svg");
 }
+
+#deviceDiscovery {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    left: 20px;
+    max-height: 150px;
+    overflow-y: auto;
+    background-color: #252627;
+    border: 1px solid #a0a0a0;
+    border-radius: 4px;
+}
+#deviceDiscovery .scanning {
+    display: none;
+    text-align: center;
+    color: #d1d1d1;
+    margin: 10px;
+}
+#deviceDiscovery .rescan {
+    text-align: center;
+    margin: 4px;
+}
+#deviceDiscovery .rescan .rescanBtn {
+    color: #a3a3a3;
+    text-decoration: none;
+}
+#deviceDiscovery .rescan .rescanBtn:hover {
+    text-decoration: underline;
+}
+#deviceDiscovery .device {
+    padding: 10px 15px;
+    border-top: 1px solid #575757;
+    box-sizing: content-box;
+    cursor: pointer;
+}
+#deviceDiscovery .device:hover {
+    background-color: #343536;
+    transition: 0.2s;
+}
+#deviceDiscovery .device .ip {
+    float: right;
+    color: #999999;
+}

renderer/assets/js/index.js

@@ -1,6 +1,7 @@
 const ipAddressField = document.getElementById('ipAddressField');
 const connectBtn = document.getElementById('connectBtn');
 const autoConnectOpt = document.getElementById('autoConnectOpt');
+const deviceDiscovery = document.getElementById('deviceDiscovery');
 
 ipAddressField.addEventListener('keyup', () => {
     connectBtn.disabled = ipAddressField.value == '';
@@ -11,6 +12,7 @@ ipAddressField.addEventListener('keypress', event => {
     }
 });
 connectBtn.addEventListener('click', () => {
+    if(connectBtn.classList.contains('running')) return;
     connectBtn.classList.add('running');
     window.electronAPI.saveSettings({deviceAddress: ipAddressField.value});
 
@@ -27,6 +29,10 @@ connectBtn.addEventListener('click', () => {
 autoConnectOpt.addEventListener('change', () => {
     window.electronAPI.saveSettings({autoConnect: autoConnectOpt.checked});
 });
+deviceDiscovery.querySelector('.rescanBtn').addEventListener('click', event => {
+    event.preventDefault();
+    scanDevices();
+});
 
 (async () => {
     const settings = await window.electronAPI.getSettings();
@@ -37,9 +43,39 @@ autoConnectOpt.addEventListener('change', () => {
     if(settings.autoConnect && await window.electronAPI.firstConnect()) {
         connectBtn.click();
     }
+
+    const params = new URLSearchParams(window.location.search);
+    if(params.get('message') == 'timeout') {
+        toastr.error('Connection to device lost. Please check your internet connection and reconnect.', 'Connection lost');
+        if(settings.autoConnect) {
+            setTimeout(() => {
+                connectBtn.click();
+            }, 5000);
+        }
+    }
+
+    scanDevices();
 })();
 
-const params = new URLSearchParams(window.location.search);
-if(params.get('message') == 'timeout') {
-    toastr.error('Connection to device lost. Please check your internet connection and reconnect.', 'Connection lost');
+async function scanDevices() {
+    const rescan = deviceDiscovery.querySelector('.rescan');
+    const scanning = deviceDiscovery.querySelector('.scanning');
+    rescan.style.display = 'none';
+    scanning.style.display = 'block';
+
+    const devices = await window.electronAPI.scanDevices();
+    for(let dev of deviceDiscovery.querySelectorAll('.device')) dev.remove();
+    devices.forEach(dev => {
+        const element = document.createElement('div');
+        element.classList.add('device');
+        element.innerHTML = `<span class="name">${dev.name}</span><span class="ip">${dev.ip}</span>`;
+        element.onclick = () => {
+            ipAddressField.value = dev.ip;
+            connectBtn.click();
+        };
+        deviceDiscovery.appendChild(element);
+    });
+
+    rescan.style.display = null;
+    scanning.style.display = null;
 }

renderer/index.html

@@ -23,6 +23,15 @@ <h2>Connect your device</h2>
             <label for="autoConnectOpt">Auto connect</label>
         </div>
     </div>
+    <div id="deviceDiscovery">
+        <div class="scanning">
+            <div class="ld ld-spin ld-ring"></div>&nbsp;
+            Scanning for devices
+        </div>
+        <div class="rescan">
+            <a href="" class="rescanBtn">Scan again</a>
+        </div>
+    </div>
     <script src="assets/js/jquery.min.js"></script>
     <script src="assets/js/toastr.min.js"></script>
     <script src="assets/js/index.js"></script>