Debug replay (#22212)

* debug replay implementation

* fix masks after dev rebase

* fix squash merge issues

* fix

* fix

* fix

* no need to write debug replay camera to config

* camera and filter button and dropdown

* add filters

* add ability to edit motion and object config for debug replay

* add debug draw overlay to debug replay

* add guard to prevent crash when camera is no longer in camera_states

* fix overflow due to radix absolutely positioned elements

* increase number of messages

* ensure deep_merge replaces existing list values when override is true

* add back button

* add debug replay to explore and review menus

* clean up

* clean up

* update instructions to prevent exposing exception info

* fix typing

* refactor output logic

* refactor with helper function

* move init to function for consistency

web/src/components/overlay/ActionsDropdown.tsx

@@ -0,0 +1,46 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { Button } from "../ui/button";
+import { useTranslation } from "react-i18next";
+import { FaFilm } from "react-icons/fa6";
+
+type ActionsDropdownProps = {
+  onDebugReplayClick: () => void;
+  onExportClick: () => void;
+};
+
+export default function ActionsDropdown({
+  onDebugReplayClick,
+  onExportClick,
+}: ActionsDropdownProps) {
+  const { t } = useTranslation(["components/dialog", "views/replay", "common"]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          className="flex items-center gap-2"
+          aria-label={t("menu.actions", { ns: "common" })}
+          size="sm"
+        >
+          <FaFilm className="size-5 text-secondary-foreground" />
+          <div className="text-primary">
+            {t("menu.actions", { ns: "common" })}
+          </div>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={onExportClick}>
+          {t("menu.export", { ns: "common" })}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={onDebugReplayClick}>
+          {t("title", { ns: "views/replay" })}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

web/src/components/overlay/CustomTimeSelector.tsx

@@ -0,0 +1,240 @@
+import { useMemo, useState } from "react";
+import { Button } from "../ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { SelectSeparator } from "../ui/select";
+import { TimeRange } from "@/types/timeline";
+import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { getUTCOffset } from "@/utils/dateUtil";
+import { TimezoneAwareCalendar } from "./ReviewActivityCalendar";
+import { FaArrowRight, FaCalendarAlt } from "react-icons/fa";
+import { isDesktop, isIOS } from "react-device-detect";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { useTranslation } from "react-i18next";
+
+type CustomTimeSelectorProps = {
+  latestTime: number;
+  range?: TimeRange;
+  setRange: (range: TimeRange | undefined) => void;
+  startLabel: string;
+  endLabel: string;
+};
+
+export function CustomTimeSelector({
+  latestTime,
+  range,
+  setRange,
+  startLabel,
+  endLabel,
+}: CustomTimeSelectorProps) {
+  const { t } = useTranslation(["common"]);
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  // times
+  const timezoneOffset = useMemo(
+    () =>
+      config?.ui.timezone
+        ? Math.round(getUTCOffset(new Date(), config.ui.timezone))
+        : undefined,
+    [config?.ui.timezone],
+  );
+  const localTimeOffset = useMemo(
+    () =>
+      Math.round(
+        getUTCOffset(
+          new Date(),
+          Intl.DateTimeFormat().resolvedOptions().timeZone,
+        ),
+      ),
+    [],
+  );
+
+  const startTime = useMemo(() => {
+    let time = range?.after || latestTime - 3600;
+
+    if (timezoneOffset) {
+      time = time + (timezoneOffset - localTimeOffset) * 60;
+    }
+
+    return time;
+  }, [range, latestTime, timezoneOffset, localTimeOffset]);
+
+  const endTime = useMemo(() => {
+    let time = range?.before || latestTime;
+
+    if (timezoneOffset) {
+      time = time + (timezoneOffset - localTimeOffset) * 60;
+    }
+
+    return time;
+  }, [range, latestTime, timezoneOffset, localTimeOffset]);
+
+  const formattedStart = useFormattedTimestamp(
+    startTime,
+    config?.ui.time_format == "24hour"
+      ? t("time.formattedTimestamp.24hour")
+      : t("time.formattedTimestamp.12hour"),
+  );
+
+  const formattedEnd = useFormattedTimestamp(
+    endTime,
+    config?.ui.time_format == "24hour"
+      ? t("time.formattedTimestamp.24hour")
+      : t("time.formattedTimestamp.12hour"),
+  );
+
+  const startClock = useMemo(() => {
+    const date = new Date(startTime * 1000);
+    return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
+  }, [startTime]);
+
+  const endClock = useMemo(() => {
+    const date = new Date(endTime * 1000);
+    return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
+  }, [endTime]);
+
+  // calendars
+  const [startOpen, setStartOpen] = useState(false);
+  const [endOpen, setEndOpen] = useState(false);
+
+  return (
+    <div
+      className={`mt-3 flex items-center rounded-lg bg-secondary text-secondary-foreground ${isDesktop ? "mx-8 gap-2 px-2" : "pl-2"}`}
+    >
+      <FaCalendarAlt />
+      <div className="flex flex-wrap items-center">
+        <Popover
+          open={startOpen}
+          onOpenChange={(open) => {
+            if (!open) {
+              setStartOpen(false);
+            }
+          }}
+        >
+          <PopoverTrigger asChild>
+            <Button
+              className={`text-primary ${isDesktop ? "" : "text-xs"}`}
+              aria-label={startLabel}
+              variant={startOpen ? "select" : "default"}
+              size="sm"
+              onClick={() => {
+                setStartOpen(true);
+                setEndOpen(false);
+              }}
+            >
+              {formattedStart}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="flex flex-col items-center" disablePortal>
+            <TimezoneAwareCalendar
+              timezone={config?.ui.timezone}
+              selectedDay={new Date(startTime * 1000)}
+              onSelect={(day) => {
+                if (!day) {
+                  return;
+                }
+
+                setRange({
+                  before: endTime,
+                  after: day.getTime() / 1000 + 1,
+                });
+              }}
+            />
+            <SelectSeparator className="bg-secondary" />
+            <input
+              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              id="startTime"
+              type="time"
+              value={startClock}
+              step={isIOS ? "60" : "1"}
+              onChange={(e) => {
+                const clock = e.target.value;
+                const [hour, minute, second] = isIOS
+                  ? [...clock.split(":"), "00"]
+                  : clock.split(":");
+
+                const start = new Date(startTime * 1000);
+                start.setHours(
+                  parseInt(hour),
+                  parseInt(minute),
+                  parseInt(second ?? 0),
+                  0,
+                );
+                setRange({
+                  before: endTime,
+                  after: start.getTime() / 1000,
+                });
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+        <FaArrowRight className="size-4 text-primary" />
+        <Popover
+          open={endOpen}
+          onOpenChange={(open) => {
+            if (!open) {
+              setEndOpen(false);
+            }
+          }}
+        >
+          <PopoverTrigger asChild>
+            <Button
+              className={`text-primary ${isDesktop ? "" : "text-xs"}`}
+              aria-label={endLabel}
+              variant={endOpen ? "select" : "default"}
+              size="sm"
+              onClick={() => {
+                setEndOpen(true);
+                setStartOpen(false);
+              }}
+            >
+              {formattedEnd}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="flex flex-col items-center" disablePortal>
+            <TimezoneAwareCalendar
+              timezone={config?.ui.timezone}
+              selectedDay={new Date(endTime * 1000)}
+              onSelect={(day) => {
+                if (!day) {
+                  return;
+                }
+
+                setRange({
+                  after: startTime,
+                  before: day.getTime() / 1000,
+                });
+              }}
+            />
+            <SelectSeparator className="bg-secondary" />
+            <input
+              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              id="endTime"
+              type="time"
+              value={endClock}
+              step={isIOS ? "60" : "1"}
+              onChange={(e) => {
+                const clock = e.target.value;
+                const [hour, minute, second] = isIOS
+                  ? [...clock.split(":"), "00"]
+                  : clock.split(":");
+
+                const end = new Date(endTime * 1000);
+                end.setHours(
+                  parseInt(hour),
+                  parseInt(minute),
+                  parseInt(second ?? 0),
+                  0,
+                );
+                setRange({
+                  before: end.getTime() / 1000,
+                  after: startTime,
+                });
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+}

web/src/components/overlay/DebugReplayDialog.tsx

@@ -0,0 +1,367 @@
+import { useCallback, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { Label } from "../ui/label";
+import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
+import { Button } from "../ui/button";
+import axios from "axios";
+import { toast } from "sonner";
+import { isDesktop } from "react-device-detect";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { SelectSeparator } from "../ui/select";
+import ActivityIndicator from "../indicators/activity-indicator";
+import { LuBug, LuPlay, LuX } from "react-icons/lu";
+import { ExportMode } from "@/types/filter";
+import { TimeRange } from "@/types/timeline";
+import { cn } from "@/lib/utils";
+import { CustomTimeSelector } from "./CustomTimeSelector";
+
+const REPLAY_TIME_OPTIONS = ["1", "5", "timeline", "custom"] as const;
+type ReplayTimeOption = (typeof REPLAY_TIME_OPTIONS)[number];
+
+type DebugReplayContentProps = {
+  currentTime: number;
+  latestTime: number;
+  range?: TimeRange;
+  selectedOption: ReplayTimeOption;
+  isStarting: boolean;
+  onSelectedOptionChange: (option: ReplayTimeOption) => void;
+  onStart: () => void;
+  onCancel: () => void;
+  setRange: (range: TimeRange | undefined) => void;
+  setMode: (mode: ExportMode) => void;
+};
+
+export function DebugReplayContent({
+  currentTime,
+  latestTime,
+  range,
+  selectedOption,
+  isStarting,
+  onSelectedOptionChange,
+  onStart,
+  onCancel,
+  setRange,
+  setMode,
+}: DebugReplayContentProps) {
+  const { t } = useTranslation(["views/replay"]);
+
+  return (
+    <div className="w-full">
+      {isDesktop && (
+        <>
+          <DialogHeader>
+            <DialogTitle>{t("dialog.title")}</DialogTitle>
+            <DialogDescription>{t("dialog.description")}</DialogDescription>
+          </DialogHeader>
+          <SelectSeparator className="my-4 bg-secondary" />
+        </>
+      )}
+
+      {/* Time range */}
+      <div className="mt-4 flex flex-col gap-2">
+        <RadioGroup
+          className="mt-2 flex flex-col gap-4"
+          value={selectedOption}
+          onValueChange={(value) =>
+            onSelectedOptionChange(value as ReplayTimeOption)
+          }
+        >
+          {REPLAY_TIME_OPTIONS.map((opt) => (
+            <div key={opt} className="flex items-center gap-2">
+              <RadioGroupItem
+                className={
+                  opt === selectedOption
+                    ? "bg-selected from-selected/50 to-selected/90 text-selected"
+                    : "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
+                }
+                id={`replay-${opt}`}
+                value={opt}
+              />
+              <Label className="cursor-pointer" htmlFor={`replay-${opt}`}>
+                {opt === "custom"
+                  ? t("dialog.preset.custom")
+                  : opt === "timeline"
+                    ? t("dialog.preset.timeline")
+                    : t(`dialog.preset.${opt}m`)}
+              </Label>
+            </div>
+          ))}
+        </RadioGroup>
+      </div>
+
+      {/* Custom time inputs */}
+      {selectedOption === "custom" && (
+        <CustomTimeSelector
+          latestTime={latestTime}
+          range={range}
+          setRange={setRange}
+          startLabel={t("dialog.startLabel")}
+          endLabel={t("dialog.endLabel")}
+        />
+      )}
+
+      {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
+
+      <DialogFooter
+        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
+      >
+        <div
+          className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`}
+          onClick={onCancel}
+        >
+          {t("button.cancel", { ns: "common" })}
+        </div>
+        <Button
+          className={isDesktop ? "" : "w-full"}
+          variant="select"
+          size="sm"
+          disabled={isStarting}
+          onClick={() => {
+            if (selectedOption === "timeline") {
+              setRange({
+                after: currentTime - 30,
+                before: currentTime + 30,
+              });
+              setMode("timeline");
+            } else {
+              onStart();
+            }
+          }}
+        >
+          {isStarting ? <ActivityIndicator className="mr-2" /> : null}
+          {isStarting
+            ? t("dialog.starting")
+            : selectedOption === "timeline"
+              ? t("dialog.selectFromTimeline")
+              : t("dialog.startButton")}
+        </Button>
+      </DialogFooter>
+    </div>
+  );
+}
+
+type DebugReplayDialogProps = {
+  camera: string;
+  currentTime: number;
+  latestTime: number;
+  range?: TimeRange;
+  mode: ExportMode;
+  setRange: (range: TimeRange | undefined) => void;
+  setMode: (mode: ExportMode) => void;
+};
+
+export default function DebugReplayDialog({
+  camera,
+  currentTime,
+  latestTime,
+  range,
+  mode,
+  setRange,
+  setMode,
+}: DebugReplayDialogProps) {
+  const { t } = useTranslation(["views/replay"]);
+  const navigate = useNavigate();
+
+  const [selectedOption, setSelectedOption] = useState<ReplayTimeOption>("1");
+  const [isStarting, setIsStarting] = useState(false);
+
+  const handleTimeOptionChange = useCallback(
+    (option: ReplayTimeOption) => {
+      setSelectedOption(option);
+
+      if (option === "custom" || option === "timeline") {
+        return;
+      }
+
+      const minutes = parseInt(option, 10);
+      const end = latestTime;
+      setRange({ after: end - minutes * 60, before: end });
+    },
+    [latestTime, setRange],
+  );
+
+  const handleStart = useCallback(() => {
+    if (!range || range.before <= range.after) {
+      toast.error(
+        t("dialog.toast.error", { error: "End time must be after start time" }),
+        { position: "top-center" },
+      );
+      return;
+    }
+
+    setIsStarting(true);
+
+    axios
+      .post("debug_replay/start", {
+        camera: camera,
+        start_time: range.after,
+        end_time: range.before,
+      })
+      .then((response) => {
+        if (response.status === 200) {
+          toast.success(t("dialog.toast.success"), {
+            position: "top-center",
+          });
+          setMode("none");
+          setRange(undefined);
+          navigate("/replay");
+        }
+      })
+      .catch((error) => {
+        const errorMessage =
+          error.response?.data?.message ||
+          error.response?.data?.detail ||
+          "Unknown error";
+
+        if (error.response?.status === 409) {
+          toast.error(t("dialog.toast.alreadyActive"), {
+            position: "top-center",
+            closeButton: true,
+            dismissible: false,
+            action: (
+              <a href="/replay" target="_blank" rel="noopener noreferrer">
+                <Button>{t("dialog.toast.goToReplay")}</Button>
+              </a>
+            ),
+          });
+        } else {
+          toast.error(t("dialog.toast.error", { error: errorMessage }), {
+            position: "top-center",
+          });
+        }
+      })
+      .finally(() => {
+        setIsStarting(false);
+      });
+  }, [camera, range, navigate, setMode, setRange, t]);
+
+  const handleCancel = useCallback(() => {
+    setMode("none");
+    setRange(undefined);
+  }, [setMode, setRange]);
+
+  const Overlay = isDesktop ? Dialog : Drawer;
+  const Trigger = isDesktop ? DialogTrigger : DrawerTrigger;
+  const Content = isDesktop ? DialogContent : DrawerContent;
+
+  return (
+    <>
+      <SaveDebugReplayOverlay
+        className="pointer-events-none absolute left-1/2 top-8 z-50 -translate-x-1/2"
+        show={mode == "timeline"}
+        isStarting={isStarting}
+        onSave={handleStart}
+        onCancel={handleCancel}
+      />
+      <Overlay
+        open={mode == "select"}
+        onOpenChange={(open) => {
+          if (!open) {
+            setMode("none");
+          }
+        }}
+      >
+        {!isDesktop && (
+          <Trigger asChild>
+            <Button
+              className="flex items-center gap-2"
+              aria-label={t("title")}
+              size="sm"
+              onClick={() => {
+                const end = latestTime;
+                setRange({ after: end - 60, before: end });
+                setSelectedOption("1");
+                setMode("select");
+              }}
+            >
+              <LuBug className="size-5 rounded-md bg-secondary-foreground fill-secondary stroke-secondary p-1" />
+              {isDesktop && <div className="text-primary">{t("title")}</div>}
+            </Button>
+          </Trigger>
+        )}
+        <Content
+          className={
+            isDesktop
+              ? "max-h-[90dvh] w-auto max-w-2xl overflow-visible sm:rounded-lg md:rounded-2xl"
+              : "max-h-[75dvh] overflow-y-auto rounded-lg px-4 pb-4 md:rounded-2xl"
+          }
+        >
+          <DebugReplayContent
+            currentTime={currentTime}
+            latestTime={latestTime}
+            range={range}
+            selectedOption={selectedOption}
+            isStarting={isStarting}
+            onSelectedOptionChange={handleTimeOptionChange}
+            onStart={handleStart}
+            onCancel={handleCancel}
+            setRange={setRange}
+            setMode={setMode}
+          />
+        </Content>
+      </Overlay>
+    </>
+  );
+}
+
+type SaveDebugReplayOverlayProps = {
+  className: string;
+  show: boolean;
+  isStarting: boolean;
+  onSave: () => void;
+  onCancel: () => void;
+};
+
+export function SaveDebugReplayOverlay({
+  className,
+  show,
+  isStarting,
+  onSave,
+  onCancel,
+}: SaveDebugReplayOverlayProps) {
+  const { t } = useTranslation(["views/replay"]);
+
+  return (
+    <div className={className}>
+      <div
+        className={cn(
+          "pointer-events-auto flex items-center justify-center gap-2 rounded-lg px-2",
+          show ? "duration-500 animate-in slide-in-from-top" : "invisible",
+          "mx-auto mt-5 text-center",
+        )}
+      >
+        <Button
+          className="flex items-center gap-1 text-primary"
+          aria-label={t("button.cancel", { ns: "common" })}
+          size="sm"
+          disabled={isStarting}
+          onClick={onCancel}
+        >
+          <LuX />
+          {t("button.cancel", { ns: "common" })}
+        </Button>
+        <Button
+          className="flex items-center gap-1"
+          aria-label={t("dialog.startButton")}
+          variant="select"
+          size="sm"
+          disabled={isStarting}
+          onClick={onSave}
+        >
+          {isStarting ? <ActivityIndicator className="size-4" /> : <LuPlay />}
+          {isStarting ? t("dialog.starting") : t("dialog.startButton")}
+        </Button>
+      </div>
+    </div>
+  );
+}

web/src/components/overlay/ExportDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import {
   Dialog,
   DialogContent,
@@ -12,16 +12,12 @@ import { Label } from "../ui/label";
 import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
 import { Button } from "../ui/button";
 import { ExportMode } from "@/types/filter";
-import { FaArrowDown, FaArrowRight, FaCalendarAlt } from "react-icons/fa";
+import { FaArrowDown } from "react-icons/fa";
 import axios from "axios";
 import { toast } from "sonner";
 import { Input } from "../ui/input";
 import { TimeRange } from "@/types/timeline";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import useSWR from "swr";
-import { FrigateConfig } from "@/types/frigateConfig";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { TimezoneAwareCalendar } from "./ReviewActivityCalendar";
 import {
   Select,
   SelectContent,
@@ -30,15 +26,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../ui/select";
-import { isDesktop, isIOS, isMobile } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import SaveExportOverlay from "./SaveExportOverlay";
-import { getUTCOffset } from "@/utils/dateUtil";
 import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
 import { GenericVideoPlayer } from "../player/GenericVideoPlayer";
 import { useTranslation } from "react-i18next";
 import { ExportCase } from "@/types/export";
+import { CustomTimeSelector } from "./CustomTimeSelector";
 
 const EXPORT_OPTIONS = [
   "1",
@@ -167,31 +163,33 @@ export default function ExportDialog({
           }
         }}
       >
-        <Trigger asChild>
-          <Button
-            className="flex items-center gap-2"
-            aria-label={t("menu.export", { ns: "common" })}
-            size="sm"
-            onClick={() => {
-              const now = new Date(latestTime * 1000);
-              let start = 0;
-              now.setHours(now.getHours() - 1);
-              start = now.getTime() / 1000;
-              setRange({
-                before: latestTime,
-                after: start,
-              });
-              setMode("select");
-            }}
-          >
-            <FaArrowDown className="rounded-md bg-secondary-foreground fill-secondary p-1" />
-            {isDesktop && (
-              <div className="text-primary">
-                {t("menu.export", { ns: "common" })}
-              </div>
-            )}
-          </Button>
-        </Trigger>
+        {!isDesktop && (
+          <Trigger asChild>
+            <Button
+              className="flex items-center gap-2"
+              aria-label={t("menu.export", { ns: "common" })}
+              size="sm"
+              onClick={() => {
+                const now = new Date(latestTime * 1000);
+                let start = 0;
+                now.setHours(now.getHours() - 1);
+                start = now.getTime() / 1000;
+                setRange({
+                  before: latestTime,
+                  after: start,
+                });
+                setMode("select");
+              }}
+            >
+              <FaArrowDown className="rounded-md bg-secondary-foreground fill-secondary p-1" />
+              {isDesktop && (
+                <div className="text-primary">
+                  {t("menu.export", { ns: "common" })}
+                </div>
+              )}
+            </Button>
+          </Trigger>
+        )}
         <Content
           className={
             isDesktop
@@ -332,6 +330,8 @@ export function ExportContent({
           latestTime={latestTime}
           range={range}
           setRange={setRange}
+          startLabel={t("export.time.start.title")}
+          endLabel={t("export.time.end.title")}
         />
       )}
       <Input
@@ -414,234 +414,6 @@ export function ExportContent({
   );
 }
 
-type CustomTimeSelectorProps = {
-  latestTime: number;
-  range?: TimeRange;
-  setRange: (range: TimeRange | undefined) => void;
-};
-function CustomTimeSelector({
-  latestTime,
-  range,
-  setRange,
-}: CustomTimeSelectorProps) {
-  const { t } = useTranslation(["components/dialog"]);
-  const { data: config } = useSWR<FrigateConfig>("config");
-
-  // times
-
-  const timezoneOffset = useMemo(
-    () =>
-      config?.ui.timezone
-        ? Math.round(getUTCOffset(new Date(), config.ui.timezone))
-        : undefined,
-    [config?.ui.timezone],
-  );
-  const localTimeOffset = useMemo(
-    () =>
-      Math.round(
-        getUTCOffset(
-          new Date(),
-          Intl.DateTimeFormat().resolvedOptions().timeZone,
-        ),
-      ),
-    [],
-  );
-
-  const startTime = useMemo(() => {
-    let time = range?.after || latestTime - 3600;
-
-    if (timezoneOffset) {
-      time = time + (timezoneOffset - localTimeOffset) * 60;
-    }
-
-    return time;
-  }, [range, latestTime, timezoneOffset, localTimeOffset]);
-  const endTime = useMemo(() => {
-    let time = range?.before || latestTime;
-
-    if (timezoneOffset) {
-      time = time + (timezoneOffset - localTimeOffset) * 60;
-    }
-
-    return time;
-  }, [range, latestTime, timezoneOffset, localTimeOffset]);
-  const formattedStart = useFormattedTimestamp(
-    startTime,
-    config?.ui.time_format == "24hour"
-      ? t("time.formattedTimestamp.24hour", { ns: "common" })
-      : t("time.formattedTimestamp.12hour", { ns: "common" }),
-  );
-  const formattedEnd = useFormattedTimestamp(
-    endTime,
-    config?.ui.time_format == "24hour"
-      ? t("time.formattedTimestamp.24hour", { ns: "common" })
-      : t("time.formattedTimestamp.12hour", { ns: "common" }),
-  );
-
-  const startClock = useMemo(() => {
-    const date = new Date(startTime * 1000);
-    return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
-  }, [startTime]);
-  const endClock = useMemo(() => {
-    const date = new Date(endTime * 1000);
-    return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
-  }, [endTime]);
-
-  // calendars
-
-  const [startOpen, setStartOpen] = useState(false);
-  const [endOpen, setEndOpen] = useState(false);
-
-  return (
-    <div
-      className={`mt-3 flex items-center rounded-lg bg-secondary text-secondary-foreground ${isDesktop ? "mx-8 gap-2 px-2" : "pl-2"}`}
-    >
-      <FaCalendarAlt />
-      <div className="flex flex-wrap items-center">
-        <Popover
-          modal={false}
-          open={startOpen}
-          onOpenChange={(open) => {
-            if (!open) {
-              setStartOpen(false);
-            }
-          }}
-        >
-          <PopoverTrigger asChild>
-            <Button
-              className={`text-primary ${isDesktop ? "" : "text-xs"}`}
-              aria-label={t("export.time.start.title")}
-              variant={startOpen ? "select" : "default"}
-              size="sm"
-              onClick={() => {
-                setStartOpen(true);
-                setEndOpen(false);
-              }}
-            >
-              {formattedStart}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent
-            disablePortal={isDesktop}
-            className="flex flex-col items-center"
-          >
-            <TimezoneAwareCalendar
-              timezone={config?.ui.timezone}
-              selectedDay={new Date(startTime * 1000)}
-              onSelect={(day) => {
-                if (!day) {
-                  return;
-                }
-
-                setRange({
-                  before: endTime,
-                  after: day.getTime() / 1000 + 1,
-                });
-              }}
-            />
-            <SelectSeparator className="bg-secondary" />
-            <input
-              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
-              id="startTime"
-              type="time"
-              value={startClock}
-              step={isIOS ? "60" : "1"}
-              onChange={(e) => {
-                const clock = e.target.value;
-                const [hour, minute, second] = isIOS
-                  ? [...clock.split(":"), "00"]
-                  : clock.split(":");
-
-                const start = new Date(startTime * 1000);
-                start.setHours(
-                  parseInt(hour),
-                  parseInt(minute),
-                  parseInt(second ?? 0),
-                  0,
-                );
-                setRange({
-                  before: endTime,
-                  after: start.getTime() / 1000,
-                });
-              }}
-            />
-          </PopoverContent>
-        </Popover>
-        <FaArrowRight className="size-4 text-primary" />
-        <Popover
-          modal={false}
-          open={endOpen}
-          onOpenChange={(open) => {
-            if (!open) {
-              setEndOpen(false);
-            }
-          }}
-        >
-          <PopoverTrigger asChild>
-            <Button
-              className={`text-primary ${isDesktop ? "" : "text-xs"}`}
-              aria-label={t("export.time.end.title")}
-              variant={endOpen ? "select" : "default"}
-              size="sm"
-              onClick={() => {
-                setEndOpen(true);
-                setStartOpen(false);
-              }}
-            >
-              {formattedEnd}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent
-            disablePortal={isDesktop}
-            className="flex flex-col items-center"
-          >
-            <TimezoneAwareCalendar
-              timezone={config?.ui.timezone}
-              selectedDay={new Date(endTime * 1000)}
-              onSelect={(day) => {
-                if (!day) {
-                  return;
-                }
-
-                setRange({
-                  after: startTime,
-                  before: day.getTime() / 1000,
-                });
-              }}
-            />
-            <SelectSeparator className="bg-secondary" />
-            <input
-              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
-              id="endTime"
-              type="time"
-              value={endClock}
-              step={isIOS ? "60" : "1"}
-              onChange={(e) => {
-                const clock = e.target.value;
-                const [hour, minute, second] = isIOS
-                  ? [...clock.split(":"), "00"]
-                  : clock.split(":");
-
-                const end = new Date(endTime * 1000);
-                end.setHours(
-                  parseInt(hour),
-                  parseInt(minute),
-                  parseInt(second ?? 0),
-                  0,
-                );
-                setRange({
-                  before: end.getTime() / 1000,
-                  after: startTime,
-                });
-              }}
-            />
-          </PopoverContent>
-        </Popover>
-      </div>
-    </div>
-  );
-}
-
 type ExportPreviewDialogProps = {
   camera: string;
   range?: TimeRange;

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -2,8 +2,13 @@ import { useCallback, useState } from "react";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import { Button } from "../ui/button";
 import { FaArrowDown, FaCalendarAlt, FaCog, FaFilter } from "react-icons/fa";
+import { LuBug } from "react-icons/lu";
 import { TimeRange } from "@/types/timeline";
 import { ExportContent, ExportPreviewDialog } from "./ExportDialog";
+import {
+  DebugReplayContent,
+  SaveDebugReplayOverlay,
+} from "./DebugReplayDialog";
 import { ExportMode, GeneralFilter } from "@/types/filter";
 import ReviewActivityCalendar from "./ReviewActivityCalendar";
 import { SelectSeparator } from "../ui/select";
@@ -16,19 +21,32 @@ import {
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { GeneralFilterContent } from "../filter/ReviewFilterGroup";
 import { toast } from "sonner";
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 import SaveExportOverlay from "./SaveExportOverlay";
 import { isIOS, isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 
-type DrawerMode = "none" | "select" | "export" | "calendar" | "filter";
+type DrawerMode =
+  | "none"
+  | "select"
+  | "export"
+  | "calendar"
+  | "filter"
+  | "debug-replay";
 
-const DRAWER_FEATURES = ["export", "calendar", "filter"] as const;
+const DRAWER_FEATURES = [
+  "export",
+  "calendar",
+  "filter",
+  "debug-replay",
+] as const;
 export type DrawerFeatures = (typeof DRAWER_FEATURES)[number];
 const DEFAULT_DRAWER_FEATURES: DrawerFeatures[] = [
   "export",
   "calendar",
   "filter",
+  "debug-replay",
 ];
 
 type MobileReviewSettingsDrawerProps = {
@@ -45,6 +63,10 @@ type MobileReviewSettingsDrawerProps = {
   recordingsSummary?: RecordingsSummary;
   allLabels: string[];
   allZones: string[];
+  debugReplayMode?: ExportMode;
+  debugReplayRange?: TimeRange;
+  setDebugReplayMode?: (mode: ExportMode) => void;
+  setDebugReplayRange?: (range: TimeRange | undefined) => void;
   onUpdateFilter: (filter: ReviewFilter) => void;
   setRange: (range: TimeRange | undefined) => void;
   setMode: (mode: ExportMode) => void;
@@ -64,13 +86,26 @@ export default function MobileReviewSettingsDrawer({
   recordingsSummary,
   allLabels,
   allZones,
+  debugReplayMode = "none",
+  debugReplayRange,
+  setDebugReplayMode = () => {},
+  setDebugReplayRange = () => {},
   onUpdateFilter,
   setRange,
   setMode,
   setShowExportPreview,
 }: MobileReviewSettingsDrawerProps) {
-  const { t } = useTranslation(["views/recording", "components/dialog"]);
+  const { t } = useTranslation([
+    "views/recording",
+    "components/dialog",
+    "views/replay",
+  ]);
+  const navigate = useNavigate();
   const [drawerMode, setDrawerMode] = useState<DrawerMode>("none");
+  const [selectedReplayOption, setSelectedReplayOption] = useState<
+    "1" | "5" | "custom" | "timeline"
+  >("1");
+  const [isDebugReplayStarting, setIsDebugReplayStarting] = useState(false);
 
   // exports
 
@@ -140,6 +175,76 @@ export default function MobileReviewSettingsDrawer({
       });
   }, [camera, name, range, selectedCaseId, setRange, setName, setMode, t]);
 
+  const onStartDebugReplay = useCallback(async () => {
+    if (
+      !debugReplayRange ||
+      debugReplayRange.before <= debugReplayRange.after
+    ) {
+      toast.error(
+        t("dialog.toast.error", {
+          error: "End time must be after start time",
+          ns: "views/replay",
+        }),
+        { position: "top-center" },
+      );
+      return;
+    }
+
+    setIsDebugReplayStarting(true);
+
+    try {
+      const response = await axios.post("debug_replay/start", {
+        camera: camera,
+        start_time: debugReplayRange.after,
+        end_time: debugReplayRange.before,
+      });
+
+      if (response.status === 200) {
+        toast.success(t("dialog.toast.success", { ns: "views/replay" }), {
+          position: "top-center",
+        });
+        setDebugReplayMode("none");
+        setDebugReplayRange(undefined);
+        setDrawerMode("none");
+        navigate("/replay");
+      }
+    } catch (error) {
+      const axiosError = error as AxiosError<{
+        message?: string;
+        detail?: string;
+      }>;
+      const errorMessage =
+        axiosError.response?.data?.message ||
+        axiosError.response?.data?.detail ||
+        "Unknown error";
+
+      if (axiosError.response?.status === 409) {
+        toast.error(t("dialog.toast.alreadyActive", { ns: "views/replay" }), {
+          position: "top-center",
+        });
+      } else {
+        toast.error(
+          t("dialog.toast.error", {
+            error: errorMessage,
+            ns: "views/replay",
+          }),
+          {
+            position: "top-center",
+          },
+        );
+      }
+    } finally {
+      setIsDebugReplayStarting(false);
+    }
+  }, [
+    camera,
+    debugReplayRange,
+    navigate,
+    setDebugReplayMode,
+    setDebugReplayRange,
+    t,
+  ]);
+
   // filters
 
   const [currentFilter, setCurrentFilter] = useState<GeneralFilter>({
@@ -196,6 +301,26 @@ export default function MobileReviewSettingsDrawer({
             {t("filter")}
           </Button>
         )}
+        {features.includes("debug-replay") && (
+          <Button
+            className="flex w-full items-center justify-center gap-2"
+            aria-label={t("title", { ns: "views/replay" })}
+            onClick={() => {
+              const now = new Date(latestTime * 1000);
+              now.setHours(now.getHours() - 1);
+              setDebugReplayRange({
+                after: now.getTime() / 1000,
+                before: latestTime,
+              });
+              setSelectedReplayOption("1");
+              setDrawerMode("debug-replay");
+              setDebugReplayMode("select");
+            }}
+          >
+            <LuBug className="size-5 rounded-md bg-secondary-foreground fill-secondary stroke-secondary p-1" />
+            {t("title", { ns: "views/replay" })}
+          </Button>
+        )}
       </div>
     );
   } else if (drawerMode == "export") {
@@ -311,6 +436,47 @@ export default function MobileReviewSettingsDrawer({
         />
       </div>
     );
+  } else if (drawerMode == "debug-replay") {
+    const handleTimeOptionChange = (
+      option: "1" | "5" | "custom" | "timeline",
+    ) => {
+      setSelectedReplayOption(option);
+
+      if (option === "custom" || option === "timeline") {
+        return;
+      }
+
+      const hours = parseInt(option);
+      const end = latestTime;
+      const now = new Date(end * 1000);
+      now.setHours(now.getHours() - hours);
+      setDebugReplayRange({ after: now.getTime() / 1000, before: end });
+    };
+
+    content = (
+      <DebugReplayContent
+        currentTime={currentTime}
+        latestTime={latestTime}
+        range={debugReplayRange}
+        selectedOption={selectedReplayOption}
+        isStarting={isDebugReplayStarting}
+        onSelectedOptionChange={handleTimeOptionChange}
+        onStart={onStartDebugReplay}
+        onCancel={() => {
+          setDebugReplayMode("none");
+          setDebugReplayRange(undefined);
+          setDrawerMode("select");
+        }}
+        setRange={setDebugReplayRange}
+        setMode={(mode) => {
+          setDebugReplayMode(mode);
+
+          if (mode == "timeline") {
+            setDrawerMode("none");
+          }
+        }}
+      />
+    );
   }
 
   return (
@@ -322,6 +488,16 @@ export default function MobileReviewSettingsDrawer({
         onCancel={() => setMode("none")}
         onPreview={() => setShowExportPreview(true)}
       />
+      <SaveDebugReplayOverlay
+        className="pointer-events-none absolute left-1/2 top-8 z-50 -translate-x-1/2"
+        show={debugReplayRange != undefined && debugReplayMode == "timeline"}
+        isStarting={isDebugReplayStarting}
+        onSave={onStartDebugReplay}
+        onCancel={() => {
+          setDebugReplayMode("none");
+          setDebugReplayRange(undefined);
+        }}
+      />
       <ExportPreviewDialog
         camera={camera}
         range={range}
@@ -354,7 +530,9 @@ export default function MobileReviewSettingsDrawer({
             />
           </Button>
         </DrawerTrigger>
-        <DrawerContent className="mx-1 flex max-h-[80dvh] flex-col items-center gap-2 overflow-hidden rounded-t-2xl px-4 pb-4">
+        <DrawerContent
+          className={`mx-1 flex max-h-[80dvh] flex-col items-center gap-2 rounded-t-2xl px-4 pb-4 ${drawerMode == "export" || drawerMode == "debug-replay" ? "overflow-visible" : "overflow-hidden"}`}
+        >
           {content}
         </DrawerContent>
       </Drawer>