From fa384a7f9db5464423ceb45ecf7f5269e04d2fc7 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 13 Feb 2024 17:25:28 -0600
Subject: [PATCH] ensure jsmpeg canvas is rounded and clipped (#9842)

---
 web/src/components/camera/CameraImage.tsx | 4 +++-
 web/src/components/player/LivePlayer.tsx  | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/src/components/camera/CameraImage.tsx b/web/src/components/camera/CameraImage.tsx
index 0c6fb61de..df08a2ea8 100644
--- a/web/src/components/camera/CameraImage.tsx
+++ b/web/src/components/camera/CameraImage.tsx
@@ -37,7 +37,9 @@ export default function CameraImage({
 
   return (
     <div
-      className={`relative w-full h-full flex justify-center ${className}`}
+      className={`relative w-full h-full flex justify-center ${
+        className || ""
+      }`}
       ref={containerRef}
     >
       {enabled ? (
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index f6f9c535f..7713f3b5b 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -111,7 +111,7 @@ export default function LivePlayer({
   } else if (liveMode == "jsmpeg") {
     player = (
       <JSMpegPlayer
-        className="w-full flex justify-center"
+        className="w-full flex justify-center rounded-2xl overflow-hidden"
         camera={cameraConfig.name}
         width={cameraConfig.detect.width}
         height={cameraConfig.detect.height}