homebridge-unifi-protect 7.20.0 → 7.21.0

package/homebridge-ui/public/lib/webUi.mjs

@@ -57,7 +57,7 @@ export class webUi {
     }
   }
 
-  // Show the first run user experience if we don't have valid login credentials.
+  // Show the first run user experience if needed.
   async #showFirstRun() {
 
     const buttonFirstRun = document.getElementById("firstRun");
@@ -68,6 +68,9 @@ export class webUi {
       return;
     }
 
+    // We disable saving any settings until we configure the plugin.
+    homebridge.disableSaveButton();
+
     // First run user experience.
     buttonFirstRun.addEventListener("click", async () => {
 
@@ -80,10 +83,13 @@ export class webUi {
         return;
       }
 
-      // Create our UI.
+      // Create our UI and allow users to save the configuration.
       document.getElementById("pageFirstRun").style.display = "none";
       document.getElementById("menuWrapper").style.display = "inline-flex";
-      this.featureOptions.show();
+
+      await this.featureOptions.show();
+
+      homebridge.enableSaveButton();
 
       // All done. Let the user interact with us, although in practice, we shouldn't get here.
       // homebridge.hideSpinner();
@@ -97,6 +103,7 @@ export class webUi {
 
     // Show the beachball while we setup.
     homebridge.showSpinner();
+    this.featureOptions.hide();
 
     // Highlight the tab in our UI.
     this.#toggleClasses("menuHome", "btn-elegant", "btn-primary");
@@ -118,6 +125,7 @@ export class webUi {
     // Show the beachball while we setup.
     homebridge.showSpinner();
     homebridge.hideSchemaForm();
+    this.featureOptions.hide();
 
     // Highlight the tab in our UI.
     this.#toggleClasses("menuHome", "btn-primary", "btn-elegant");
@@ -139,14 +147,14 @@ export class webUi {
 
     // Add our event listeners to animate the UI.
     document.getElementById("menuHome").addEventListener("click", () => this.#showSupport());
-    document.getElementById("menuFeatureOptions").addEventListener("click", () => this.featureOptions.show());
+    document.getElementById("menuFeatureOptions").addEventListener("click", async () => await this.featureOptions.show());
     document.getElementById("menuSettings").addEventListener("click", () => this.#showSettings());
 
     // If we've got devices detected, we launch our feature option UI. Otherwise, we launch our first run UI.
     if(this.featureOptions.currentConfig.length && !(await this.#processHandler(this.#firstRun.isRequired))) {
 
       document.getElementById("menuWrapper").style.display = "inline-flex";
-      this.featureOptions.show();
+      await this.featureOptions.show();
 
       return;
     }

package/homebridge-ui/public/ui.mjs

@@ -75,107 +75,63 @@ const firstRunOnSubmit = async () => {
   return true;
 };
 
-// Return the list of devices associated with a given Protect controller.
-const getDevices = async (controller) => {
-
-  // If we're in the global context, we have no devices.
-  if(!controller) {
-
-    return [];
-  }
-
-  // Retrieve the current list of devices from the Protect controller.
-  let devices = await homebridge.request("/getDevices", { address: controller.address, password: controller.password, username: controller.username });
-
-  // Add the fields that the webUI framework is looking for to render.
-  devices = devices.map(device => ({
-
-    ...device,
-    serialNumber: device.mac
-  }));
-
-  return devices;
-};
-
 // Return whether a given device is a controller.
 const isController = (device) => device.modelKey === "nvr";
 
-// Show the list of Protect devices associated with a controller, grouped by model.
-const showSidebarDevices = (controller, devices) => {
+// Return the list of controllers from our plugin configuration.
+const getControllers = () => {
 
-  const modelKeys = [...new Set(devices.map(x => x.modelKey))];
+  const controllers = [];
 
-  // Start with a clean slate.
-  ui.featureOptions.devicesTable.innerHTML = "";
+  // Grab the controllers from our configuration.
+  for(const controller of ui.featureOptions.currentConfig[0].controllers ?? []) {
 
-  for(const key of modelKeys) {
-
-    // Get all the devices associated with this device category.
-    const modelDevices = devices.filter(x => x.modelKey === key);
-
-    // If it's a controller, we handle that case differently.
-    if((key === "nvr") && modelDevices.length) {
-
-      // Change the name of the controller that we show users once we've connected with the controller.
-      ui.featureOptions.webUiControllerList.map(x => (x.name === controller.address) ? x.childNodes[0].nodeValue = modelDevices[0].name : true);
-
-      continue;
-    }
-
-    // Create a row for this device category.
-    const trCategory = document.createElement("tr");
-
-    // Disable any pointer events and hover activity.
-    trCategory.style.pointerEvents = "none";
-
-    // Create the cell for our device category row.
-    const tdCategory = document.createElement("td");
-
-    tdCategory.classList.add("m-0", "p-0", "pl-1", "w-100");
-
-    // Add the category name, with appropriate casing.
-    tdCategory.appendChild(document.createTextNode((key.charAt(0).toUpperCase() + key.slice(1) + "s")));
-    tdCategory.style.fontWeight = "bold";
+    controllers.push({ name: controller.address, serialNumber: controller.address });
+  }
 
-    // Add the cell to the table row.
-    trCategory.appendChild(tdCategory);
+  return controllers;
+};
 
-    // Add the table row to the table.
-    ui.featureOptions.devicesTable.appendChild(trCategory);
+// Return the list of devices associated with a given Protect controller.
+const getDevices = async (selectedController) => {
 
-    for(const device of modelDevices) {
+  // If we're in the global context, we have no devices.
+  if(!selectedController) {
 
-      // Create a row for this device.
-      const trDevice = document.createElement("tr");
+    return [];
+  }
 
-      trDevice.classList.add("m-0", "p-0");
+  // Find the entry in our plugin configuration.
+  const controller = (ui.featureOptions.currentConfig[0].controllers ?? []).find(c => c.address === selectedController.serialNumber);
 
-      // Create a cell for our device.
-      const tdDevice = document.createElement("td");
+  if(!controller) {
 
-      tdDevice.classList.add("m-0", "p-0" , "w-100");
+    return [];
+  }
 
-      const label = document.createElement("label");
+  // Retrieve the current list of devices from the Protect controller.
+  const devices = await homebridge.request("/getDevices", { address: controller.address, password: controller.password, username: controller.username });
 
-      label.name = device.serialNumber;
-      label.appendChild(document.createTextNode(device.name ?? device.marketName));
-      label.style.cursor = "pointer";
-      label.classList.add("mx-2", "my-0", "p-0", "w-100");
+  // Add the fields that the webUI framework is looking for to render.
+  for(const device of devices) {
 
-      label.addEventListener("click", () => ui.featureOptions.showDeviceOptions(device.serialNumber));
+    device.name ??= device.marketName;
+    device.serialNumber = device.mac;
+    device.sidebarGroup = device.modelKey + "s";
 
-      // Add the device label to our cell.
-      tdDevice.appendChild(label);
+    // We update the name of the controller that we show users once we've connected with the controller and have it's name.
+    if(isController(device)) {
 
-      // Add the cell to the table row.
-      trDevice.appendChild(tdDevice);
+      const activeController = [...document.querySelectorAll("[data-navigation='controller']")].find(c => c.getAttribute("data-device-serial") === controller.address);
 
-      // Add the table row to the table.
-      ui.featureOptions.devicesTable.appendChild(trDevice);
+      if(activeController) {
 
-      ui.featureOptions.webUiDeviceList.push(label);
+        activeController.textContent = device.name;
+      }
     }
   }
+
+  return devices;
 };
 
 // Only show feature options that are valid for the capabilities of this device.
@@ -245,7 +201,7 @@ const validOptionCategory = (device, category) => {
   }
 
   // Only show device categories we're explicitly interested in.
-  if(!category.modelKey?.some(model => ["all", device.modelKey].includes(model))) {
+  if(!category.modelKey?.some(model => [ "all", device.modelKey ].includes(model))) {
 
     return false;
   }
@@ -262,44 +218,51 @@ const validOptionCategory = (device, category) => {
 // Show the details for this device.
 const showProtectDetails = (device) => {
 
+  const deviceStatsContainer = document.getElementById("deviceStatsContainer");
+
   // No device specified, we must be in a global context.
   if(!device) {
 
-    document.getElementById("device_model").classList.remove("text-center");
-    document.getElementById("device_model").colSpan = 1;
-    document.getElementById("device_model").style.fontWeight = "normal";
-    document.getElementById("device_model").innerHTML = "N/A";
-    document.getElementById("device_mac").innerHTML = "N/A";
-    document.getElementById("device_address").innerHTML = "N/A";
-    document.getElementById("device_online").innerHTML = "N/A";
+    deviceStatsContainer.innerHTML = "";
 
     return;
   }
 
-  // Populate the device details.
-  document.getElementById("device_model").classList.remove("text-center");
-  document.getElementById("device_model").colSpan = 1;
-  document.getElementById("device_model").style.fontWeight = "normal";
-  document.getElementById("device_model").innerHTML = device.marketName ?? device.type;
-  document.getElementById("device_mac").innerHTML = device.mac;
-  document.getElementById("device_address").innerHTML = device.host ?? (device.modelKey === "sensor" ? "Bluetooth Device" : "None");
-  document.getElementById("device_online").innerHTML = ("state" in device) ? (device.state.charAt(0).toUpperCase() + device.state.slice(1).toLowerCase()) : "Connected";
+  // Populate the device details using the new CSS Grid layout. This provides a more flexible and responsive display than the previous table layout.
+  deviceStatsContainer.innerHTML =
+    "<div class=\"device-stats-grid\">" +
+      "<div class=\"stat-item\">" +
+        "<span class=\"stat-label\">Model</span>" +
+        "<span class=\"stat-value\">" + (device.marketName ?? device.type) + "</span>" +
+      "</div>" +
+      "<div class=\"stat-item\">" +
+        "<span class=\"stat-label\">MAC Address</span>" +
+        "<span class=\"stat-value font-monospace\">" + device.mac + "</span>" +
+      "</div>" +
+      "<div class=\"stat-item\">" +
+        "<span class=\"stat-label\">IP Address</span>" +
+        "<span class=\"stat-value font-monospace\">" + (device.host ?? (device.modelKey === "sensor" ? "Bluetooth Device" : "None")) + "</span>" +
+      "</div>" +
+      "<div class=\"stat-item\">" +
+        "<span class=\"stat-label\">Status</span>" +
+        "<span class=\"stat-value\">" + (("state" in device) ? (device.state.charAt(0).toUpperCase() + device.state.slice(1).toLowerCase()) : "Connected") + "</span>" +
+      "</div>" +
+    "</div>";
 };
 
 // Parameters for our feature options webUI.
 const featureOptionsParams = {
 
+  getControllers: getControllers,
   getDevices: getDevices,
-  hasControllers: true,
   infoPanel: showProtectDetails,
   sidebar: {
 
-    controllerLabel: "Protect Controllers",
-    deviceLabel: "Protect Devices",
-    showDevices: showSidebarDevices
+    controllerLabel: "Protect Controllers"
   },
   ui: {
 
+    controllerRetryEnableDelayMs: 20000,
     isController: isController,
     validOption: validOption,
     validOptionCategory: validOptionCategory

package/homebridge-ui/server.js

@@ -44,6 +44,8 @@ class PluginUiServer extends HomebridgePluginUiServer {
   // Register the getDevices() webUI server API endpoint.
   #registerGetDevices() {
 
+    let ufpApi;
+
     // Return the list of Protect devices.
     this.onRequest("/getDevices", async (controller) => {
 
@@ -65,7 +67,7 @@ class PluginUiServer extends HomebridgePluginUiServer {
         };
 
         // Connect to the Protect controller.
-        const ufpApi = new ProtectApi(log);
+        ufpApi = new ProtectApi(log);
 
         if(!(await ufpApi.login(controller.address, controller.username, controller.password))) {
 
@@ -135,6 +137,9 @@ class PluginUiServer extends HomebridgePluginUiServer {
 
         // Return nothing if we error out for some reason.
         return [];
+      } finally {
+
+        ufpApi?.logout();
       }
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homebridge-unifi-protect",
-  "version": "7.20.0",
+  "version": "7.21.0",
   "displayName": "Homebridge UniFi Protect",
   "description": "Homebridge UniFi Protect plugin providing complete HomeKit integration for the entire UniFi Protect ecosystem with full support for most features including HomeKit Secure Video, multiple controllers, blazing fast performance, and much more.",
   "author": {
@@ -81,20 +81,17 @@
   "dependencies": {
     "@homebridge/plugin-ui-utils": "2.1.0",
     "ffmpeg-for-homebridge": "2.1.7",
-    "homebridge-plugin-utils": "1.25.0",
-    "undici": "7.11.0",
-    "unifi-protect": "4.24.0"
+    "homebridge-plugin-utils": "1.27.0",
+    "undici": "7.13.0",
+    "unifi-protect": "4.26.0"
   },
   "devDependencies": {
-    "@stylistic/eslint-plugin": "5.1.0",
-    "@types/node": "24.0.13",
-    "eslint": "9.31.0",
+    "@stylistic/eslint-plugin": "5.2.3",
+    "@types/node": "24.2.1",
+    "eslint": "9.33.0",
     "homebridge": "1.11.0",
     "shx": "0.4.0",
-    "typescript": "5.8.3",
-    "typescript-eslint": "8.36.0"
-  },
-  "optionalDependencies": {
-    "bufferutil": "4.0.9"
+    "typescript": "5.9.2",
+    "typescript-eslint": "8.39.0"
   }
 }