From ba49054cd74c9b4ed9f79a1ffdf935ef350530a4 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 13 Sep 2024 06:57:30 -0500
Subject: [PATCH] Change camera offline error display and message (#13712)

* Don't display offline message in live player if camera is restreamed

* Update error message

* simplify message
---
 web/src/components/player/LivePlayer.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index ec24d255f..0d7b67fa8 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -59,6 +59,7 @@ export default function LivePlayer({
   onResetLiveMode,
 }: LivePlayerProps) {
   const internalContainerRef = useRef<HTMLDivElement | null>(null);
+
   // camera activity
 
   const { activeMotion, activeTracking, objects, offline } =
@@ -299,12 +300,16 @@ export default function LivePlayer({
       </div>
 
       {offline && !showStillWithoutActivity && (
-        <div className="flex size-full flex-col items-center">
-          <p className="mb-5">
-            {capitalizeFirstLetter(cameraConfig.name)} is offline
-          </p>
-          <TbExclamationCircle className="mb-3 size-10" />
-          <p>No frames have been received, check error logs</p>
+        <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">
+            <p className="my-5 text-lg">Stream offline</p>
+            <TbExclamationCircle className="mb-3 size-10" />
+            <p className="max-w-96 text-center">
+              No frames have been received on the{" "}
+              {capitalizeFirstLetter(cameraConfig.name)} <code>detect</code>{" "}
+              stream, check error logs
+            </p>
+          </div>
         </div>
       )}