Use Job infrastructure for Debug Replay (#23099)

* use ReplayState enum

* extract shared ffmpeg progress helper

* make start call non-blocking with worker thread

* expose replay state on status endpoint and return 202 from start

* cancel in-flight ffmpeg when stop is called during preparation

* add replay i18n strings for preparing and error states

* show status in replay UI

* navigate immediately on 202 from debug replay menus and dialog

* remove unused

* simplify to use Job infrastructure

* tests

* cleanup and tweaks

* fetch schema

* update api spec

* formatting

* fix e2e test

* mypy

* clean up

* formatting

* fix

* fix test

* don't try to show camera image until status reports ready

* simplify loading logic

* fix race in latest_frame on debug replay shutdown

* remove toast when successfully stopping

it gets hidden almost immediately

web/src/components/menu/SearchResultActions.tsx

@@ -90,10 +90,6 @@ export default function SearchResultActions({
   const handleDebugReplay = useCallback(
     (event: SearchResult) => {
       setIsStarting(true);
-      const toastId = toast.loading(
-        t("dialog.starting", { ns: "views/replay" }),
-        { position: "top-center" },
-      );
 
       axios
         .post("debug_replay/start", {
@@ -102,11 +98,7 @@ export default function SearchResultActions({
           end_time: event.end_time,
         })
         .then((response) => {
-          if (response.status === 200) {
-            toast.success(t("dialog.toast.success", { ns: "views/replay" }), {
-              id: toastId,
-              position: "top-center",
-            });
+          if (response.status === 202 || response.status === 200) {
             navigate("/replay");
           }
         })
@@ -120,7 +112,6 @@ export default function SearchResultActions({
             toast.error(
               t("dialog.toast.alreadyActive", { ns: "views/replay" }),
               {
-                id: toastId,
                 position: "top-center",
                 closeButton: true,
                 dismissible: false,
@@ -135,7 +126,6 @@ export default function SearchResultActions({
             );
           } else {
             toast.error(t("dialog.toast.error", { error: errorMessage }), {
-              id: toastId,
               position: "top-center",
             });
           }

web/src/components/overlay/DebugReplayDialog.tsx

@@ -209,10 +209,7 @@ export default function DebugReplayDialog({
         end_time: range.before,
       })
       .then((response) => {
-        if (response.status === 200) {
-          toast.success(t("dialog.toast.success"), {
-            position: "top-center",
-          });
+        if (response.status === 202 || response.status === 200) {
           setMode("none");
           setRange(undefined);
           navigate("/replay");

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -262,10 +262,7 @@ export default function MobileReviewSettingsDrawer({
         end_time: debugReplayRange.before,
       });
 
-      if (response.status === 200) {
-        toast.success(t("dialog.toast.success", { ns: "views/replay" }), {
-          position: "top-center",
-        });
+      if (response.status === 202 || response.status === 200) {
         setDebugReplayMode("none");
         setDebugReplayRange(undefined);
         setDrawerMode("none");

web/src/components/timeline/EventMenu.tsx

@@ -53,10 +53,6 @@ export default function EventMenu({
   const handleDebugReplay = useCallback(
     (event: Event) => {
       setIsStarting(true);
-      const toastId = toast.loading(
-        t("dialog.starting", { ns: "views/replay" }),
-        { position: "top-center" },
-      );
 
       axios
         .post("debug_replay/start", {
@@ -65,11 +61,7 @@ export default function EventMenu({
           end_time: event.end_time,
         })
         .then((response) => {
-          if (response.status === 200) {
-            toast.success(t("dialog.toast.success", { ns: "views/replay" }), {
-              id: toastId,
-              position: "top-center",
-            });
+          if (response.status === 202 || response.status === 200) {
             navigate("/replay");
           }
         })
@@ -83,7 +75,6 @@ export default function EventMenu({
             toast.error(
               t("dialog.toast.alreadyActive", { ns: "views/replay" }),
               {
-                id: toastId,
                 position: "top-center",
                 closeButton: true,
                 dismissible: false,
@@ -98,7 +89,6 @@ export default function EventMenu({
             );
           } else {
             toast.error(t("dialog.toast.error", { error: errorMessage }), {
-              id: toastId,
               position: "top-center",
             });
           }