arrow binding in input focus

Author: algertc

app/actions.js

@@ -704,6 +704,12 @@ export async function updateSettings(formData) {
         metrics: formData.get("metricsEnabled") === "true",
       };
     }
+    if (updateIfExists("bihost")) {
+      newConfig.blueiris = {
+        ...currentConfig.blueiris,
+        host: formData.get("bihost"),
+      };
+    }
     const result = await saveConfig(newConfig);
     if (!result.success) {
       return { success: false, error: result.error };

app/api/plate-reads/route.js

@@ -209,6 +209,24 @@ export async function POST(req) {
         }
       }
 
+      let biPath = null;
+      if (data.ALERT_CLIP && data.ALERT_PATH && camera) {
+        try {
+          // Extract offset from ALERT_PATH (format: CAMERAID.YYYYMMDD_HHMMSS.OFFSET.3-1.jpg)
+          const parts = data.ALERT_PATH.split(".");
+          const msOffset = parts[2];
+          // Remove @ from ALERT_CLIP and construct path
+          const recId = data.ALERT_CLIP.replace("@", "");
+          biPath = `ui3.htm?rec=${recId}-${msOffset}&cam=${camera}`;
+        } catch (error) {
+          console.error("Error constructing bi_path:", error);
+        }
+      } else {
+        console.warn(
+          "[Blue Iris] Incomplete request. Your alert action is not sending the ALERT_PATH and ALERT_CLIP macros. These values are needed for BI integration. See readme for more info."
+        );
+      }
+
       const result = await dbClient.query(
         `WITH new_plate AS (
           INSERT INTO plates (plate_number)
@@ -222,9 +240,10 @@ export async function POST(req) {
             image_path, 
             thumbnail_path,
             timestamp, 
-            camera_name
+            camera_name,
+            bi_path
           )
-          SELECT $1, $2, $3, $4, $5, $6
+          SELECT $1, $2, $3, $4, $5, $6, $7
           WHERE NOT EXISTS (
             SELECT 1 FROM plate_reads 
             WHERE plate_number = $1 AND timestamp = $5
@@ -239,6 +258,7 @@ export async function POST(req) {
           imagePaths.thumbnailPath,
           timestamp,
           camera,
+          biPath, // Add biPath parameter here
         ]
       );
 

app/live_feed/page.jsx

@@ -1,9 +1,11 @@
 import {
+  getSettings,
   getLatestPlateReads,
   getTags,
   getCameraNames,
   getTimeFormat,
 } from "@/app/actions";
+
 import PlateTableWrapper from "@/components/PlateTableWrapper";
 import DashboardLayout from "@/components/layout/MainLayout";
 import BasicTitle from "@/components/layout/BasicTitle";
@@ -37,12 +39,14 @@ export default async function LivePlates(props) {
     sortDirection: searchParams?.sortDirection,
   };
 
-  const [platesRes, tagsRes, camerasRes, timeFormat] = await Promise.all([
-    getLatestPlateReads(params),
-    getTags(),
-    getCameraNames(),
-    getTimeFormat(),
-  ]);
+  const [platesRes, tagsRes, camerasRes, timeFormat, config] =
+    await Promise.all([
+      getLatestPlateReads(params),
+      getTags(),
+      getCameraNames(),
+      getTimeFormat(),
+      getSettings(),
+    ]);
 
   return (
     <DashboardLayout>
@@ -54,6 +58,7 @@ export default async function LivePlates(props) {
             tags={tagsRes.success ? tagsRes.data : []}
             cameras={camerasRes.success ? camerasRes.data : []}
             timeFormat={timeFormat}
+            biHost={config?.blueiris?.host} // Add this line
           />
         </Suspense>
       </BasicTitle>

app/settings/SettingsForm.jsx

@@ -47,6 +47,7 @@ const navigation = [
   { title: "Database", id: "database" },
   { title: "Push Notifications", id: "push" },
   { title: "HomeAssistant", id: "homeassistant" },
+  { title: "Blue Iris", id: "blueiris" },
   { title: "Security", id: "security" },
   { title: "Sharing & Privacy", id: "privacy" },
 ];
@@ -106,6 +107,9 @@ export default function SettingsForm({ initialSettings, initialApiKey }) {
           newFormData.append("haWhitelist", formData.get("haWhitelist"));
         }
         break;
+      case "blueiris":
+        newFormData.append("bihost", formData.get("bihost"));
+        break;
       case "privacy":
         newFormData.append(
           "metricsEnabled",
@@ -572,6 +576,26 @@ export default function SettingsForm({ initialSettings, initialApiKey }) {
     </div>
   );
 
+  const renderBlueirisSection = () => (
+    <div key="mqtt-section" className="space-y-4">
+      <h3 className="text-lg font-semibold">Blue Iris Configuration</h3>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="bihost">
+            Blue Iris Hostname or IP address (Include :port if not port 80)
+          </Label>
+          <Input
+            id="bihost"
+            name="bihost"
+            defaultValue={initialSettings.blueiris.host}
+            placeholder="192.168.1.68"
+            autoComplete="off"
+          />
+        </div>
+      </div>
+    </div>
+  );
+
   const renderSection = () => (
     <div key={activeSection}>
       {(() => {
@@ -590,6 +614,8 @@ export default function SettingsForm({ initialSettings, initialApiKey }) {
             return renderSecuritySection();
           case "privacy":
             return renderPrivacySection();
+          case "blueiris":
+            return renderBlueirisSection();
           default:
             return null;
         }

components/PlateTable.jsx

@@ -19,6 +19,7 @@ import {
   ChevronUp,
   ChevronDown,
   ChevronsUpDown,
+  Pencil,
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -71,6 +72,7 @@ import { format } from "date-fns";
 import { Switch } from "@/components/ui/switch";
 import { useRouter } from "next/navigation";
 import PlateImage from "@/components/PlateImage";
+import { getSettings } from "@/app/actions";
 
 const SortButton = ({ label, field, sort, onSort }) => {
   const isActive = sort.field === field;
@@ -125,11 +127,20 @@ export default function PlateTable({
   const [searchInput, setSearchInput] = useState(filters.search || "");
   const [isLive, setIsLive] = useState(true);
   const [prefetchedImages, setPrefetchedImages] = useState(new Set());
+  const [biHost, setBiHost] = useState(null);
 
   const router = useRouter();
 
   // Cycle through images without clicking out with arrow keys
   const handleKeyPress = (e) => {
+    // Don't handle arrow keys if any input element is focused
+    if (
+      document.activeElement?.tagName === "INPUT" ||
+      document.activeElement?.tagName === "TEXTAREA"
+    ) {
+      return;
+    }
+
     if (selectedImage === null) return;
 
     if (e.key === "ArrowRight") {
@@ -154,6 +165,17 @@ export default function PlateTable({
     }
   }, [selectedImage, selectedIndex, data]);
 
+  useEffect(() => {
+    async function fetchBiHost() {
+      const config = await getSettings();
+      console.log(config.blueiris.host);
+      if (config?.blueiris?.host) {
+        setBiHost(config.blueiris.host);
+      }
+    }
+    fetchBiHost();
+  }, []);
+
   useEffect(() => {
     let interval;
     if (isLive) {
@@ -841,6 +863,7 @@ export default function PlateTable({
                         hour12: timeFormat === 12,
                       })}
                     </TableCell>
+
                     <TableCell>
                       <div className="flex space-x-2 justify-end">
                         <DropdownMenu>
@@ -893,8 +916,22 @@ export default function PlateTable({
                             setIsCorrectPlateOpen(true);
                           }}
                         >
-                          <Edit className="h-4 w-4" />
+                          <Pencil className="h-4 w-4" />
                         </Button>
+                        {biHost && plate.bi_path && (
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() =>
+                              window.open(
+                                `http://${biHost}/${plate.bi_path}`,
+                                "_blank"
+                              )
+                            }
+                          >
+                            <ExternalLink className="h-4 w-4" />
+                          </Button>
+                        )}
                         <Button
                           variant="ghost"
                           size="icon"

components/PlateTableWrapper.jsx

@@ -17,6 +17,7 @@ export default function PlateTableWrapper({
   tags,
   cameras,
   timeFormat,
+  biHost,
 }) {
   const router = useRouter();
   const pathname = usePathname();
@@ -131,6 +132,7 @@ export default function PlateTableWrapper({
       availableTags={[{ name: "untagged", color: "#6B7280" }, ...tags]}
       availableCameras={cameras}
       timeFormat={timeFormat}
+      biHost={biHost}
       pagination={{
         page: parseInt(params.get("page") || "1"),
         pageSize: parseInt(params.get("pageSize") || "25"),

docker-compose_dbonly.yml renamed to docker-compose-dbonly.yml

@@ -200,6 +200,7 @@ export async function getPlateReads({
         pr.plate_number,
         pr.image_data,
         pr.image_path,
+        pr.bi_path,
         pr.thumbnail_path,
         pr.timestamp,
         pr.camera_name,
@@ -221,6 +222,7 @@ export async function getPlateReads({
         pr.image_data,
         pr.image_path,
         pr.thumbnail_path,
+        pr.bi_path,
         pr.timestamp, 
         pr.camera_name,
         p.occurrence_count,

lib/db.js

@@ -35,6 +35,9 @@ const DEFAULT_CONFIG = {
     enabled: false,
     whitelist: [],
   },
+  blueiris: {
+    host: "",
+  },
   privacy: {
     metrics: true,
   },
@@ -86,6 +89,9 @@ function getInitialEnvConfig() {
       enabled: DEFAULT_CONFIG.homeassistant.enabled,
       whitelist: DEFAULT_CONFIG.homeassistant.whitelist,
     },
+    blueiris: {
+      host: DEFAULT_CONFIG.privacy.metrics,
+    },
     privacy: {
       metrics: process.env.METRICS || DEFAULT_CONFIG.privacy.metrics,
     },
@@ -152,6 +158,10 @@ export async function getConfig() {
         ...DEFAULT_CONFIG.homeassistant,
         ...fileConfig.homeassistant,
       },
+      blueiris: {
+        ...DEFAULT_CONFIG.blueiris,
+        ...fileConfig.blueiris,
+      },
       privacy: {
         ...DEFAULT_CONFIG.privacy,
         ...fileConfig.privacy,
@@ -201,6 +211,10 @@ export async function saveConfig(newConfig) {
         ...DEFAULT_CONFIG.homeassistant,
         ...newConfig.homeassistant,
       },
+      blueiris: {
+        ...DEFAULT_CONFIG.blueiris,
+        ...newConfig.blueiris,
+      },
       privacy: {
         ...DEFAULT_CONFIG.privacy,
         ...newConfig.privacy,

lib/settings.js

@@ -23,6 +23,7 @@ export async function middleware(request) {
     "/api/verify-whitelist",
     "/api/check-update",
     "/update",
+    "/api/test",
   ];
 
   // Check for API key in query parameters for iframe embeds (insecure)