From 23335e467828704b2e1a3f09d5cd4456102668a5 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 2 May 2024 12:44:17 -0500
Subject: [PATCH] check container aspect

---
 web/src/components/camera/CameraImage.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/src/components/camera/CameraImage.tsx b/web/src/components/camera/CameraImage.tsx
index b7fd2be10..b4fb707bc 100644
--- a/web/src/components/camera/CameraImage.tsx
+++ b/web/src/components/camera/CameraImage.tsx
@@ -2,6 +2,7 @@ import { useApiHost } from "@/api";
 import { useEffect, useRef, useState } from "react";
 import useSWR from "swr";
 import ActivityIndicator from "../indicators/activity-indicator";
+import { useResizeObserver } from "@/hooks/resize-observer";
 
 type CameraImageProps = {
   className?: string;
@@ -36,6 +37,9 @@ export default function CameraImage({
     }`;
   }, [apiHost, name, imgRef, searchParams, config]);
 
+  const [{ width: containerWidth, height: containerHeight }] =
+    useResizeObserver(containerRef);
+
   return (
     <div className={className} ref={containerRef}>
       {enabled ? (
@@ -47,7 +51,9 @@ export default function CameraImage({
 
             if (imgRef.current) {
               const { naturalHeight, naturalWidth } = imgRef.current;
-              setIsPortraitImage(naturalHeight > naturalWidth);
+              setIsPortraitImage(
+                naturalWidth / naturalHeight < containerWidth / containerHeight,
+              );
             }
 
             if (onload) {