Media sync API refactor and UI (#21542)

* generic job infrastructure

* types and dispatcher changes for jobs

* save data in memory only for completed jobs

* implement media sync job and endpoints

* change logs to debug

* websocket hook and types

* frontend

* i18n

* docs tweaks

* endpoint descriptions

* tweak docs

web/src/api/ws.tsx

@@ -11,6 +11,7 @@ import {
   TrackedObjectUpdateReturnType,
   TriggerStatus,
   FrigateAudioDetections,
+  Job,
 } from "@/types/ws";
 import { FrigateStats } from "@/types/stats";
 import { createContainer } from "react-tracked";
@@ -651,3 +652,40 @@ export function useTriggers(): { payload: TriggerStatus } {
     : { name: "", camera: "", event_id: "", type: "", score: 0 };
   return { payload: useDeepMemo(parsed) };
 }
+
+export function useJobStatus(
+  jobType: string,
+  revalidateOnFocus: boolean = true,
+): { payload: Job | null } {
+  const {
+    value: { payload },
+    send: sendCommand,
+  } = useWs("job_state", "jobState");
+
+  const jobData = useDeepMemo(
+    payload && typeof payload === "string" ? JSON.parse(payload) : {},
+  );
+  const currentJob = jobData[jobType] || null;
+
+  useEffect(() => {
+    let listener: (() => void) | undefined;
+    if (revalidateOnFocus) {
+      sendCommand("jobState");
+      listener = () => {
+        if (document.visibilityState === "visible") {
+          sendCommand("jobState");
+        }
+      };
+      addEventListener("visibilitychange", listener);
+    }
+
+    return () => {
+      if (listener) {
+        removeEventListener("visibilitychange", listener);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [revalidateOnFocus]);
+
+  return { payload: currentJob as Job | null };
+}