From ee73da655c4897d4333f24699d6600d300ce97c9 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 23 May 2026 08:19:38 -0500
Subject: [PATCH] restrict debug replay UI entry points to admin users

---
 .../components/menu/SearchResultActions.tsx   | 14 +++++++++----
 .../components/overlay/ActionsDropdown.tsx    | 10 ++++++----
 .../overlay/MobileReviewSettingsDrawer.tsx    |  4 +++-
 .../overlay/detail/DetailActionsMenu.tsx      | 14 +++++++++----
 web/src/components/timeline/EventMenu.tsx     | 14 +++++++++----
 web/src/views/recording/RecordingView.tsx     | 20 ++++++++++++-------
 6 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/web/src/components/menu/SearchResultActions.tsx b/web/src/components/menu/SearchResultActions.tsx
index 90a70ff5d9..c7af518932 100644
--- a/web/src/components/menu/SearchResultActions.tsx
+++ b/web/src/components/menu/SearchResultActions.tsx
@@ -130,9 +130,15 @@ export default function SearchResultActions({
               },
             );
           } else {
-            toast.error(t("dialog.toast.error", { error: errorMessage }), {
-              position: "top-center",
-            });
+            toast.error(
+              t("dialog.toast.error", {
+                ns: "views/replay",
+                error: errorMessage,
+              }),
+              {
+                position: "top-center",
+              },
+            );
           }
         })
         .finally(() => {
@@ -206,7 +212,7 @@ export default function SearchResultActions({
             <span>{t("itemMenu.addTrigger.label")}</span>
           </MenuItem>
         )}
-      {searchResult.has_clip && (
+      {isAdmin && searchResult.has_clip && (
         <MenuItem
           className="cursor-pointer"
           aria-label={t("itemMenu.debugReplay.aria")}
diff --git a/web/src/components/overlay/ActionsDropdown.tsx b/web/src/components/overlay/ActionsDropdown.tsx
index 9f9596d0ac..1bc750dd78 100644
--- a/web/src/components/overlay/ActionsDropdown.tsx
+++ b/web/src/components/overlay/ActionsDropdown.tsx
@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 import { FaFilm } from "react-icons/fa6";
 
 type ActionsDropdownProps = {
-  onDebugReplayClick: () => void;
+  onDebugReplayClick?: () => void;
   onExportClick: () => void;
   onShareTimestampClick: () => void;
 };
@@ -42,9 +42,11 @@ export default function ActionsDropdown({
         <DropdownMenuItem onClick={onShareTimestampClick}>
           {t("recording.shareTimestamp.label", { ns: "components/dialog" })}
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={onDebugReplayClick}>
-          {t("title", { ns: "views/replay" })}
-        </DropdownMenuItem>
+        {onDebugReplayClick && (
+          <DropdownMenuItem onClick={onDebugReplayClick}>
+            {t("title", { ns: "views/replay" })}
+          </DropdownMenuItem>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
index 2ad2067462..c2daf6d051 100644
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -29,6 +29,7 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { StartExportResponse } from "@/types/export";
 import { ShareTimestampContent } from "./ShareTimestampDialog";
+import { useIsAdmin } from "@/hooks/use-is-admin";
 
 type DrawerMode =
   | "none"
@@ -109,6 +110,7 @@ export default function MobileReviewSettingsDrawer({
     "views/replay",
     "common",
   ]);
+  const isAdmin = useIsAdmin();
   const navigate = useNavigate();
   const [drawerMode, setDrawerMode] = useState<DrawerMode>("none");
   const [exportTab, setExportTab] = useState<ExportTab>("export");
@@ -388,7 +390,7 @@ export default function MobileReviewSettingsDrawer({
             {t("filter")}
           </Button>
         )}
-        {features.includes("debug-replay") && (
+        {isAdmin && features.includes("debug-replay") && (
           <Button
             className="flex w-full items-center justify-center gap-2"
             aria-label={t("title", { ns: "views/replay" })}
diff --git a/web/src/components/overlay/detail/DetailActionsMenu.tsx b/web/src/components/overlay/detail/DetailActionsMenu.tsx
index af83700a6f..3705ce9baf 100644
--- a/web/src/components/overlay/detail/DetailActionsMenu.tsx
+++ b/web/src/components/overlay/detail/DetailActionsMenu.tsx
@@ -95,9 +95,15 @@ export default function DetailActionsMenu({
             ),
           });
         } else {
-          toast.error(t("dialog.toast.error", { error: errorMessage }), {
-            position: "top-center",
-          });
+          toast.error(
+            t("dialog.toast.error", {
+              ns: "views/replay",
+              error: errorMessage,
+            }),
+            {
+              position: "top-center",
+            },
+          );
         }
       })
       .finally(() => {
@@ -229,7 +235,7 @@ export default function DetailActionsMenu({
               </DropdownMenuItem>
             )}
 
-          {search.has_clip && (
+          {isAdmin && search.has_clip && (
             <DropdownMenuItem
               className="cursor-pointer"
               aria-label={t("itemMenu.debugReplay.aria")}
diff --git a/web/src/components/timeline/EventMenu.tsx b/web/src/components/timeline/EventMenu.tsx
index 5c2798f2af..7696424c62 100644
--- a/web/src/components/timeline/EventMenu.tsx
+++ b/web/src/components/timeline/EventMenu.tsx
@@ -94,9 +94,15 @@ export default function EventMenu({
               },
             );
           } else {
-            toast.error(t("dialog.toast.error", { error: errorMessage }), {
-              position: "top-center",
-            });
+            toast.error(
+              t("dialog.toast.error", {
+                ns: "views/replay",
+                error: errorMessage,
+              }),
+              {
+                position: "top-center",
+              },
+            );
           }
         })
         .finally(() => {
@@ -177,7 +183,7 @@ export default function EventMenu({
                 {t("itemMenu.findSimilar.label")}
               </DropdownMenuItem>
             )}
-            {event.has_clip && (
+            {isAdmin && event.has_clip && (
               <DropdownMenuItem
                 className="cursor-pointer"
                 disabled={isStarting}
diff --git a/web/src/views/recording/RecordingView.tsx b/web/src/views/recording/RecordingView.tsx
index 7f382dee1a..f19a86a17a 100644
--- a/web/src/views/recording/RecordingView.tsx
+++ b/web/src/views/recording/RecordingView.tsx
@@ -44,6 +44,7 @@ import {
 import { IoMdArrowRoundBack } from "react-icons/io";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Toaster } from "@/components/ui/sonner";
+import { useIsAdmin } from "@/hooks/use-is-admin";
 import useSWR from "swr";
 import { TimeRange, TimelineType } from "@/types/timeline";
 import MobileCameraDrawer from "@/components/overlay/MobileCameraDrawer";
@@ -109,6 +110,7 @@ export function RecordingView({
 }: RecordingViewProps) {
   const { t } = useTranslation(["views/events", "components/dialog"]);
   const { data: config } = useSWR<FrigateConfig>("config");
+  const isAdmin = useIsAdmin();
   const navigate = useNavigate();
   const location = useLocation();
   const contentRef = useRef<HTMLDivElement | null>(null);
@@ -723,13 +725,17 @@ export function RecordingView({
                   setCustomShareTimestamp(initialTimestamp);
                   setShareTimestampOpen(true);
                 }}
-                onDebugReplayClick={() => {
-                  setDebugReplayRange({
-                    after: timeRange.before - 60,
-                    before: timeRange.before,
-                  });
-                  setDebugReplayMode("select");
-                }}
+                onDebugReplayClick={
+                  isAdmin
+                    ? () => {
+                        setDebugReplayRange({
+                          after: timeRange.before - 60,
+                          before: timeRange.before,
+                        });
+                        setDebugReplayMode("select");
+                      }
+                    : undefined
+                }
                 onExportClick={() => {
                   const now = new Date(timeRange.before * 1000);
                   now.setHours(now.getHours() - 1);