From b2ceb15db4be6e7f2a9ff0783b86c6eb618f0a93 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 22 Jan 2026 11:07:26 -0600
Subject: [PATCH] frontend

---
 web/src/components/player/LivePlayer.tsx | 27 ++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 9500688f5..38976d450 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -81,6 +81,11 @@ export default function LivePlayer({
   const internalContainerRef = useRef<HTMLDivElement | null>(null);
 
   const cameraName = useCameraFriendlyName(cameraConfig);
+
+  // player is showing on a dashboard if containerRef is not provided
+
+  const inDashboard = containerRef?.current == null;
+
   // stats
 
   const [stats, setStats] = useState<PlayerStatsType>({
@@ -408,6 +413,28 @@ export default function LivePlayer({
         />
       </div>
 
+      {offline && inDashboard && (
+        <>
+          <div className="absolute inset-0 rounded-lg bg-black/50 md:rounded-2xl" />
+          <div className="absolute inset-0 left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center">
+            <div className="flex flex-col items-center justify-center gap-2 rounded-lg bg-background/50 p-3 text-center">
+              <div className="text-md">{t("streamOffline.title")}</div>
+              <TbExclamationCircle className="size-6" />
+              <p className="text-center text-sm">
+                <Trans
+                  ns="components/player"
+                  values={{
+                    cameraName: cameraName,
+                  }}
+                >
+                  streamOffline.desc
+                </Trans>
+              </p>
+            </div>
+          </div>
+        </>
+      )}
+
       {offline && !showStillWithoutActivity && cameraEnabled && (
         <div className="absolute inset-0 left-1/2 top-1/2 flex h-96 w-96 -translate-x-1/2 -translate-y-1/2">
           <div className="flex flex-col items-center justify-center rounded-lg bg-background/50 p-5">