Add ONVIF focus support (#18883)

* backend

* frontend and i18n

web/public/locales/en/views/live.json

@@ -38,6 +38,14 @@
         "label": "Zoom PTZ camera out"
       }
     },
+    "focus": {
+      "in": {
+        "label": "Focus PTZ camera in"
+      },
+      "out": {
+        "label": "Focus PTZ camera out"
+      }
+    },
     "frame": {
       "center": {
         "label": "Click in the frame to center the PTZ camera"

web/src/types/ptz.ts

@@ -1,4 +1,11 @@
-type PtzFeature = "pt" | "zoom" | "pt-r" | "zoom-r" | "zoom-a" | "pt-r-fov";
+type PtzFeature =
+  | "pt"
+  | "zoom"
+  | "pt-r"
+  | "zoom-r"
+  | "zoom-a"
+  | "pt-r-fov"
+  | "focus";
 
 export type CameraPtzInfo = {
   name: string;

web/src/views/live/LiveCameraView.tsx

@@ -92,6 +92,8 @@ import {
   LuX,
 } from "react-icons/lu";
 import {
+  MdCenterFocusStrong,
+  MdCenterFocusWeak,
   MdClosedCaption,
   MdClosedCaptionDisabled,
   MdNoPhotography,
@@ -809,10 +811,10 @@ function PtzControlPanel({
           sendPtz("MOVE_DOWN");
           break;
         case "+":
-          sendPtz("ZOOM_IN");
+          sendPtz(modifiers.shift ? "FOCUS_IN" : "ZOOM_IN");
           break;
         case "-":
-          sendPtz("ZOOM_OUT");
+          sendPtz(modifiers.shift ? "FOCUS_OUT" : "ZOOM_OUT");
           break;
       }
     },
@@ -923,6 +925,40 @@ function PtzControlPanel({
           </TooltipButton>
         </>
       )}
+      {ptz?.features?.includes("focus") && (
+        <>
+          <TooltipButton
+            label={t("ptz.focus.in.label")}
+            onMouseDown={(e) => {
+              e.preventDefault();
+              sendPtz("FOCUS_IN");
+            }}
+            onTouchStart={(e) => {
+              e.preventDefault();
+              sendPtz("FOCUS_IN");
+            }}
+            onMouseUp={onStop}
+            onTouchEnd={onStop}
+          >
+            <MdCenterFocusStrong />
+          </TooltipButton>
+          <TooltipButton
+            label={t("ptz.focus.out.label")}
+            onMouseDown={(e) => {
+              e.preventDefault();
+              sendPtz("FOCUS_OUT");
+            }}
+            onTouchStart={(e) => {
+              e.preventDefault();
+              sendPtz("FOCUS_OUT");
+            }}
+            onMouseUp={onStop}
+            onTouchEnd={onStop}
+          >
+            <MdCenterFocusWeak />
+          </TooltipButton>
+        </>
+      )}
 
       {ptz?.features?.includes("pt-r-fov") && (
         <TooltipProvider>