homebridge-unifi-protect 6.6.0 → 6.8.1

package/homebridge-ui/public/index.html

@@ -29,7 +29,7 @@
     <div id="deviceInfo">
         <table class="table table-sm table-borderless">
           <tr class="align-center">
-            <td colspan="2" class="m-0 p-2 text-center font-weight-bold">Feature options are applied in prioritized order, from global to device-specific options:<br><i>Global options</i> (lowest priority) &rarr; <i>Protect controller options</i> &rarr; <i>Protect device options</i> (highest priority)</td>
+            <td id="headerInfo" colspan="2" class="m-0 p-2 text-center font-weight-bold"></td>
           </tr>
           <tr class="align-top">
             <td rowspan="3" class="w-25">
@@ -50,7 +50,7 @@
             </td>
             <td>
               <table class="table table-sm table-borderless border-bottom m-0 p-0" id="deviceStatsTable" style="display: none;">
-                <tr>
+                <tr id="deviceStatsHeader">
                     <th style="width: 30%;" class="m-0 p-0"><B>Model<B></th>
                     <th style="width: 25%;" class="m-0 p-0"><B>IP Address</B></th>
                     <th style="width: 20%;" class="m-0 p-0"><B>MAC Address</B></th>
@@ -234,6 +234,17 @@
         // Start with a clean slate.
         controllersTable.innerHTML = "";
 
+        // We haven't configured anything yet - we're done.
+        if(!currentConfig[0]?.controllers?.length) {
+
+          document.getElementById("headerInfo").innerHTML = "Please configure a UniFi Protect controller to access in the main settings tab before configuring feature options."
+          homebridge.hideSpinner();
+          return;
+        }
+
+        // Initialize our informational header.
+        document.getElementById("headerInfo").innerHTML = "Feature options are applied in prioritized order, from global to device-specific options:<br><i class=\"text-warning\">Global options</i> (lowest priority) &rarr; <i class=\"text-success\">Protect controller options</i> &rarr; <i class=\"text-info\">Protect device options</i> (highest priority)"
+
         // Enumerate our global options.
         const trGlobal = document.createElement("tr");
 
@@ -342,7 +353,12 @@
 
           devicesTable.innerHTML = "";
 
-          document.getElementById("device_model").innerHTML = "Unable to connect to the Protect controller. Check your settings for this controller in the settings tab."
+          document.getElementById("device_model").innerHTML = "Unable to connect to the Protect controller. Check your settings for this controller in the main settings tab to verify they are correct."
+          document.getElementById("device_model").colSpan = 3;
+          document.getElementById("device_model").style.fontWeight = "bold";
+          document.getElementById("device_model").classList.add("text-center");
+          document.getElementById("deviceStatsHeader").style.display = "none";
+
           document.getElementById("device_mac").innerHTML = "";
           document.getElementById("device_address").innerHTML = "";
           document.getElementById("device_online").innerHTML = "";
@@ -355,6 +371,9 @@
         const modelKeys = [...new Set(ufpDevices.map(x => x.modelKey))];
         const deviceList = [];
 
+        // The first entry returned by getDevices is always the controller.
+        const nvr = ufpDevices[0];
+
         // Start with a clean slate.
         devicesTable.innerHTML = "";
 
@@ -366,7 +385,7 @@
           // If it's a controller, we handle that case differently.
           if((key === "nvr") && devices.length) {
 
-            // Change the name of the controler that we show users once we've connected with the controller.
+            // Change the name of the controller that we show users once we've connected with the controller.
             controllerList.map(x => (x.name === controller.address) ? x.childNodes[0].nodeValue = devices[0].name : true);
             continue;
           }
@@ -401,7 +420,7 @@
             const label = document.createElement("label");
 
             label.name = device.id;
-            label.appendChild(document.createTextNode(device.name));
+            label.appendChild(document.createTextNode(device.name ?? device.marketName));
             label.style.cursor = "pointer";
             label.classList.add("mx-2", "my-0", "p-0", "w-100");
 
@@ -437,6 +456,13 @@
         // Initialize our feature option configuration.
         updateConfigOptions(currentConfig[0].options ?? [])
 
+        // Is this feature option set explicitly?
+        const isOptionSet = (featureOption, deviceMac) => {
+
+          const optionRegex = new RegExp("^(Enable|Disable)\." + featureOption + (!deviceMac ? "" : "\." + deviceMac) + "$", "gi");
+          return optionsList.filter(x => x.match(optionRegex)).length ? true : false;
+        };
+
         // Is a feature option globally enabled?
         const isGlobalOptionEnabled = (featureOption, defaultValue) => {
 
@@ -448,9 +474,14 @@
             );
         };
 
-        // Is a feature option enabled at the device or controller level.
+        // Is a feature option enabled at the device or global level. It does not traverse the scoping hierarchy.
         const isDeviceOptionEnabled = (featureOption, mac, defaultValue) => {
 
+          if(!mac) {
+
+            return isGlobalOptionEnabled(featureOption, defaultValue);
+          }
+
           featureOption = featureOption.toUpperCase();
           mac = mac.toUpperCase();
 
@@ -460,6 +491,92 @@
             );
         };
 
+        // Is a feature option enabled at the device or global level. It does traverse the scoping hierarchy.
+        const isOptionEnabled = (featureOption, deviceMac, defaultValue) => {
+
+          if(deviceMac) {
+
+            // Device level check.
+            if(isDeviceOptionEnabled(featureOption, deviceMac, defaultValue) !== defaultValue) {
+
+              return !defaultValue;
+            }
+
+            // Controller level check.
+            if(isDeviceOptionEnabled(featureOption, nvr.mac, defaultValue) !== defaultValue) {
+
+              return !defaultValue;
+            }
+          }
+
+          // Global check.
+          if(isGlobalOptionEnabled(featureOption, defaultValue) !== defaultValue) {
+
+            return !defaultValue;
+          }
+
+          // Return the default.
+          return defaultValue;
+        };
+
+        // Return the scope level of a feature option.
+        const optionScope = (featureOption, deviceMac, defaultValue) => {
+
+          // Scope priority is always: device, NVR, global.
+
+          if(deviceMac) {
+
+            // Let's see if we've set it at the device-level.
+            if((isDeviceOptionEnabled(featureOption, deviceMac, defaultValue) !== defaultValue) || isOptionSet(featureOption, deviceMac)) {
+
+              return "device";
+            }
+
+            // Now let's test the controller level.
+            if((isDeviceOptionEnabled(featureOption, nvr.mac, defaultValue) !== defaultValue) || isOptionSet(featureOption, nvr.mac)) {
+
+              return "nvr";
+            }
+          }
+
+          // Finally, let's test the global level.
+          if((isGlobalOptionEnabled(featureOption, defaultValue) !== defaultValue) || isOptionSet(featureOption)) {
+
+            return "global";
+          }
+
+          // Option isn't set to a non-default value.
+          return "none";
+        };
+
+        // Return the color hinting for a given option's scope.
+        const optionScopeColor = (featureOption, deviceMac, defaultValue) => {
+
+          switch(optionScope(featureOption, deviceMac, defaultValue)) {
+
+            case "device":
+
+              return "text-info";
+              break;
+
+            case "nvr":
+
+              return "text-success";
+              break;
+
+            case "global":
+
+              return deviceMac ? "text-warning" : "text-info";
+              break;
+
+            default:
+
+              break;
+          }
+
+          return null;
+        };
+
         // Show feature option information for a specific device, controller, or globally.
         const showDeviceInfo = async (deviceId) => {
 
@@ -474,6 +591,10 @@
           // Ensure we have a controller or device. The only time this won't be the case is when we're looking at global options.
           if(ufpDevice) {
 
+            document.getElementById("deviceStatsHeader").style.display = "";
+            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 = ufpDevice.marketName ?? ufpDevice.type;
             document.getElementById("device_mac").innerHTML = ufpDevice.mac;
             document.getElementById("device_address").innerHTML = ufpDevice.host ?? (ufpDevice.modelKey === "sensor" ? "Bluetooth Device" : "None");
@@ -484,6 +605,10 @@
 
             document.getElementById("deviceStatsTable").style.display = "none";
 
+            document.getElementById("deviceStatsHeader").style.display = "";
+            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";
@@ -532,6 +657,7 @@
             // Finally, add the table head to the table.
             optionTable.appendChild(thead);
 
+            // Now enumerate all the feature options for a given device.
             for(const option of optionsDevice[category.name]) {
 
               // Only show feature options that are valid for this device.
@@ -553,24 +679,126 @@
 
               const featureOption = category.name + (option.name.length ? ("." + option.name): "");
               checkbox.type = "checkbox";
+              checkbox.readOnly = false;
               checkbox.id = featureOption;
               checkbox.name = featureOption;
               checkbox.value = featureOption + (!ufpDevice ? "" : ("." + ufpDevice.mac));
-              checkbox.checked = !ufpDevice ? isGlobalOptionEnabled(featureOption, option.default) :
-                isDeviceOptionEnabled(featureOption, ufpDevice.mac, option.default);
+
+              switch(optionScope(featureOption, ufpDevice?.mac, option.default)) {
+
+                case "global":
+                case "nvr":
+
+                  // If we're looking at the global scope, show the option value. Otherwise, we show that we're inheriting a value from the scope above.
+                  if(!ufpDevice) {
+
+                    checkbox.checked = isGlobalOptionEnabled(featureOption, option.default);
+
+                    if(checkbox.checked) {
+
+                      checkbox.indeterminate = false;
+                    }
+
+                  } else {
+
+                    checkbox.readOnly = checkbox.indeterminate = true;
+                  }
+
+                  break;
+
+                case "device":
+                case "none":
+                default:
+                  checkbox.checked = isDeviceOptionEnabled(featureOption, ufpDevice?.mac, option.default);
+                  break;
+              }
 
               checkbox.defaultChecked = option.default;
               checkbox.classList.add("mx-2");
 
+              // Add the checkbox to the table cell.
+              tdCheckbox.appendChild(checkbox);
+
+              // Add the checkbox to the table row.
+              trX.appendChild(tdCheckbox);
+
+              const tdLabel = document.createElement("td");
+              tdLabel.classList.add("w-100");
+
+              // Create a label for the checkbox with our option description.
+              const labelDescription = document.createElement("label");
+              labelDescription.for = checkbox.id;
+              labelDescription.style.cursor = "pointer";
+              labelDescription.classList.add("user-select-none", "my-0", "py-0");
+
+              // Highlight options for the user that are different than our defaults.
+              const scopeColor = optionScopeColor(featureOption, ufpDevice?.mac, option.default);
+
+              if(scopeColor) {
+
+                labelDescription.classList.add(scopeColor);
+              }
+
               // Add or remove the setting from our configuration when we've changed our state.
               checkbox.addEventListener("change", async () => {
 
                 // Find the option in our list and delete it if it exists.
-                const optionRegex = new RegExp("^(Enable|Disable)\." + checkbox.id + (!ufpDevice ? "" : ("\." + ufpDevice.mac)) + "$", "gi")
+                const optionRegex = new RegExp("^(Enable|Disable)\." + checkbox.id + (!ufpDevice ? "" : ("\." + ufpDevice.mac)) + "$", "gi");
                 const newOptions = configOptions.filter(x => !x.match(optionRegex));
 
-                // The setting is different from the default, highlight it for the user, and add it to our configuration.
-                if(checkbox.checked !== option.default) {
+                // Figure out if we've got the option set upstream.
+                let upstreamOption = false;
+
+                // We explicitly want to check for the scope of the feature option above where we are now, so we can appropriately determine what we should show.
+                switch(optionScope(checkbox.id, (ufpDevice && (ufpDevice.mac !== nvr.mac)) ? nvr.mac : null, option.default)) {
+
+                  case "device":
+                  case "nvr":
+
+                    if(ufpDevice.mac !== nvr.mac) {
+
+                      upstreamOption = true;
+                    }
+
+                    break;
+
+                  case "global":
+
+                    if(ufpDevice) {
+
+                      upstreamOption = true;
+                    }
+
+                    break;
+
+                  default:
+
+                    break;
+                }
+
+                if(checkbox.readOnly) {
+
+                  // We're truly unchecked. We need this because a checkbox can be in both an unchecked and indeterminate simultaneously,
+                  // so we use the readOnly property to let us know that we've just cycled from an indeterminate state.
+                  checkbox.checked = checkbox.readOnly = false;
+                } else if(!checkbox.checked) {
+
+                  // If we have an upstream option configured, we reveal a third state to show inheritance of that option and allow the user to select it.
+                  if(upstreamOption) {
+
+                    // We want to set the readOnly property as well, since it will survive a user interaction when they click the checkbox to clear out the
+                    // indeterminate state. This allows us to effectively cycle between three states.
+                    checkbox.readOnly = checkbox.indeterminate = true;
+                  }
+
+                } else if(checkbox.checked) {
+
+                  // We've explicitly checked this option.
+                  checkbox.readOnly = checkbox.indeterminate = false;
+                }
+
+                // The setting is different from the default, highlight it for the user, accounting for upstream scope, and add it to our configuration.
+                if(!checkbox.indeterminate && ((checkbox.checked !== option.default) || upstreamOption)) {
 
                   labelDescription.classList.add("text-info");
                   newOptions.push((checkbox.checked ? "Enable." : "Disable.") + checkbox.value);
@@ -584,28 +812,18 @@
                 currentConfig[0].options = newOptions;
                 updateConfigOptions(newOptions);
                 await homebridge.updatePluginConfig(currentConfig);
-              });
 
-              // Add the checkbox to the table cell.
-              tdCheckbox.appendChild(checkbox);
+                // If we've reset to defaults, make sure our color coding for scope is reflected.
+                if((checkbox.checked === option.default) || checkbox.indeterminate) {
 
-              // Add the checkbox to the table row.
-              trX.appendChild(tdCheckbox);
+                  const scopeColor = optionScopeColor(featureOption, ufpDevice?.mac, option.default);
 
-              const tdLabel = document.createElement("td");
-              tdLabel.classList.add("w-100");
+                  if(scopeColor) {
 
-              // Create a label for the checkbox with our option description.
-              const labelDescription = document.createElement("label");
-              labelDescription.for = checkbox.id;
-              labelDescription.style.cursor = "pointer";
-              labelDescription.classList.add("user-select-none", "my-0", "py-0");
-
-              // Highlight options for the user that are different than our defaults.
-              if(checkbox.checked !== checkbox.defaultChecked) {
-
-                labelDescription.classList.add("text-info");
-              }
+                    labelDescription.classList.add(scopeColor);
+                  }
+                }
+              });
 
               // Add the actual description for the option after the checkbox.
               labelDescription.appendChild(document.createTextNode(option.description));

package/homebridge-ui/server.js

@@ -50,40 +50,40 @@ class PluginUiServer extends HomebridgePluginUiServer {
 
         bootstrap.cameras.sort((a, b) => {
 
-          const aCase = a.name.toLowerCase();
-          const bCase = b.name.toLowerCase();
+          const aCase = (a.name ?? a.marketName).toLowerCase();
+          const bCase = (b.name ?? b.marketName).toLowerCase();
 
           return aCase > bCase ? 1 : (bCase > aCase ? -1 : 0);
         });
 
         bootstrap.chimes.sort((a, b) => {
 
-          const aCase = a.name.toLowerCase();
-          const bCase = b.name.toLowerCase();
+          const aCase = (a.name ?? a.marketName).toLowerCase();
+          const bCase = (b.name ?? b.marketName).toLowerCase();
 
           return aCase > bCase ? 1 : (bCase > aCase ? -1 : 0);
         });
 
         bootstrap.lights.sort((a, b) => {
 
-          const aCase = a.name.toLowerCase();
-          const bCase = b.name.toLowerCase();
+          const aCase = (a.name ?? a.marketName).toLowerCase();
+          const bCase = (b.name ?? b.marketName).toLowerCase();
 
           return aCase > bCase ? 1 : (bCase > aCase ? -1 : 0);
         });
 
         bootstrap.sensors.sort((a, b) => {
 
-          const aCase = a.name.toLowerCase();
-          const bCase = b.name.toLowerCase();
+          const aCase = (a.name ?? a.marketName).toLowerCase();
+          const bCase = (b.name ?? b.marketName).toLowerCase();
 
           return aCase > bCase ? 1 : (bCase > aCase ? -1 : 0);
         });
 
         bootstrap.viewers.sort((a, b) => {
 
-          const aCase = a.name.toLowerCase();
-          const bCase = b.name.toLowerCase();
+          const aCase = (a.name ?? a.marketName).toLowerCase();
+          const bCase = (b.name ?? b.marketName).toLowerCase();
 
           return aCase > bCase ? 1 : (bCase > aCase ? -1 : 0);
         });
@@ -129,6 +129,7 @@ class PluginUiServer extends HomebridgePluginUiServer {
 
     // Compatibility for older versions of the Homebridge UI.
     this.onRequest("/getCachedAccessories", async () => {
+
       try {
 
         // Define the plugin and create the array to return.
@@ -159,6 +160,7 @@ class PluginUiServer extends HomebridgePluginUiServer {
         return [];
       }
     });
+
     this.ready();
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homebridge-unifi-protect",
-  "version": "6.6.0",
+  "version": "6.8.1",
   "displayName": "Homebridge UniFi Protect",
   "description": "Homebridge UniFi Protect plugin providing complete HomeKit integration for the UniFi Protect ecosystem with full support for most features including autoconfiguration, motion detection, multiple controllers, and realtime updates.",
   "author": {
@@ -68,18 +68,18 @@
     "@homebridge/plugin-ui-utils": "^0.0.19",
     "ffmpeg-for-homebridge": "^0.1.4",
     "mqtt": "4.3.7",
-    "unifi-protect": "^4.2.3",
+    "unifi-protect": "^4.2.4",
     "ws": "^8.13.0"
   },
   "devDependencies": {
-    "@types/node": "^20.1.4",
+    "@types/node": "^20.2.5",
     "@types/ws": "^8.5.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
-    "eslint": "^8.40.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
+    "eslint": "^8.42.0",
     "homebridge": "=1.6.1",
     "nodemon": "^2.0.22",
-    "rimraf": "^5.0.0",
-    "typescript": "^5.0.4"
+    "rimraf": "^5.0.1",
+    "typescript": "^5.1.3"
   }
 }