Processed all feedback

docs/docs/configuration/index.md

@@ -520,8 +520,8 @@ cameras:
     # to be replaced by a newer image. (default: shown below)
     best_image_timeout: 60
 
-    # Optional: URL to visit the camera directly from system page (default: shown below)
+    # Optional: URL to visit the camera web UI directly from the system page. Might not be available on every camera.
-    visit_url: ""
+    webui_url: ""
 
     # Optional: zones for this camera
     zones:

frigate/config.py

@@ -731,9 +731,8 @@ class CameraConfig(FrigateBaseModel):
         default=60,
         title="How long to wait for the image with the highest confidence score.",
     )
-    visit_url: str = Field(
+    webui_url: Optional[str] = Field(
-        default="",
+        title="URL to visit the camera directly from system page",
-        title="URL to visit the camera directly from system page.",
     )
     zones: Dict[str, ZoneConfig] = Field(
         default_factory=dict, title="Zone configuration."

web/src/components/Button.jsx

@@ -67,6 +67,7 @@ export default function Button({
   disabled = false,
   ariaCapitalize = false,
   href,
+  target,
   type = 'contained',
   ...attrs
 }) {
@@ -101,6 +102,7 @@ export default function Button({
         tabindex="0"
         className={classes}
         href={href}
+        target={target}
         ref={ref}
         onmouseenter={handleMousenter}
         onmouseleave={handleMouseleave}

web/src/icons/WebUI.jsx

@@ -0,0 +1,21 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function WebUI({ className = 'h-6 w-6', stroke = 'currentColor', fill = 'none', onClick = () => {} }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      fill={fill}
+      viewBox="0 0 24 24"
+      stroke={stroke}
+      onClick={onClick}
+    >
+      <path
+        d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"
+      />
+    </svg>
+  );
+}
+
+export default memo(WebUI);

web/src/routes/System.jsx

@@ -12,6 +12,7 @@ import Dialog from '../components/Dialog';
 import TimeAgo from '../components/TimeAgo';
 import copy from 'copy-to-clipboard';
 import { About } from '../icons/About';
+import { WebUI } from '../icons/WebUI';
 
 const emptyObject = Object.freeze({});
 
@@ -348,15 +349,13 @@ export default function System() {
                       <div className="capitalize text-lg flex justify-between p-4">
                         <Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link>
                         <div className="flex">
-                          {(config.cameras[camera]['visit_url'] != "") && (
+                          {config.cameras[camera]['webui_url'] && (
-                            <Link
+                            <Button 
-                              className="text-blue-500 hover:underline"
+                              href={config.cameras[camera]['webui_url']}
                               target="_blank"
-                              rel="noopener noreferrer"
-                              href={config.cameras[camera]['visit_url']}
                             >
-                              visit
+                             visit<WebUI className="ml-1 h-4 w-4" fill="white" stroke="white" />
-                            </Link>
+                            </Button>
                           )}
                           <Button className="ml-2" onClick={(e) => onHandleFfprobe(camera, e)}>ffprobe</Button>
                         </div>