From 4f9b40ff171afa45d48ffe59f7a34262ddffbf41 Mon Sep 17 00:00:00 2001
From: Jody Clements <jody@neomorphic.co.uk>
Date: Wed, 13 Nov 2024 17:32:47 -0500
Subject: [PATCH] fix: Nasty hack to get image aspect correct in safari

The images in the summary were not rendering with the correct aspect
ratio when they were wide. This made them look like squashed squares,
instead of rectangles. I added another parameter to the ImagePlaceholder
component to fix this in the places where it was broken on safari,
because there was no general fix that worked for all the places that the
placeholder is called.
---
 src/components/ImagePlaceholder.jsx | 17 ++++++++++++-----
 src/components/ImageWithModal.jsx   | 10 +++++++---
 src/components/Results.jsx          |  1 +
 src/components/SearchSummary.jsx    |  1 +
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/ImagePlaceholder.jsx b/src/components/ImagePlaceholder.jsx
index 4bf86a42..74fb2d3d 100644
--- a/src/components/ImagePlaceholder.jsx
+++ b/src/components/ImagePlaceholder.jsx
@@ -12,6 +12,7 @@ export default function ImagePlaceholder({
   className,
   maxHeight,
   maxWidth,
+  fixAspectRatio
 }) {
   const [signedSrc, setSignedSrc] = useState();
   const [imageLoaded, setLoaded] = useState(false);
@@ -21,16 +22,20 @@ export default function ImagePlaceholder({
     ? {
         ...style,
         transform: "scaleX(-1)",
-        width: maxHeight ? "auto" : "100%",
-        height: maxHeight ? "100%" : "auto",
       }
     : {
         ...style,
         transform: "scaleX(1)",
-        width: maxHeight ? "auto" : "100%",
-        height: maxHeight ? "100%" : "auto",
       };
 
+  updatedStyle.width = "100%";
+
+  if (fixAspectRatio && imageDimensions[0] > imageDimensions[1]) {
+    updatedStyle.width = "auto";
+  }
+
+  updatedStyle.height = "100%"
+
   if (maxHeight) {
     updatedStyle.maxHeight = maxHeight;
   }
@@ -112,7 +117,8 @@ ImagePlaceholder.propTypes = {
   imageDimensions: PropTypes.arrayOf(PropTypes.string).isRequired,
   mirrored: PropTypes.bool,
   maxHeight: PropTypes.string,
-  maxWidth: PropTypes.string
+  maxWidth: PropTypes.string,
+  fixAspectRatio: PropTypes.bool
 };
 
 ImagePlaceholder.defaultProps = {
@@ -121,4 +127,5 @@ ImagePlaceholder.defaultProps = {
   className: "",
   maxHeight: null,
   maxWidth: null,
+  fixAspectRatio: false
 };
diff --git a/src/components/ImageWithModal.jsx b/src/components/ImageWithModal.jsx
index 9a8bac4f..61525c79 100644
--- a/src/components/ImageWithModal.jsx
+++ b/src/components/ImageWithModal.jsx
@@ -7,7 +7,7 @@ import { signedPublicLink } from "../libs/awsLib";
 
 
 export default function ImageWithModal(props) {
-  const { thumbSrc, src, title, showModal, vertical, maxHeight, maxWidth } = props;
+  const { thumbSrc, src, title, showModal, vertical, maxHeight, maxWidth, fixAspectRatio } = props;
   const [modalOpen, setModalOpen] = useState(false);
   const [signedSrc, setSignedSrc] = useState();
   const [signedThumbnailSrc, setSignedThumbnailSrc] = useState();
@@ -43,6 +43,7 @@ export default function ImageWithModal(props) {
           className="thumbnail"
           maxHeight={maxHeight}
           maxWidth={maxWidth}
+          fixAspectRatio={fixAspectRatio}
         />
       </Button>
     );
@@ -59,6 +60,7 @@ export default function ImageWithModal(props) {
           className="thumbnail"
           maxHeight={maxHeight}
           maxWidth={maxWidth}
+          fixAspectRatio={fixAspectRatio}
         />
       </Button>
       <Modal
@@ -85,7 +87,8 @@ ImageWithModal.propTypes = {
   showModal: PropTypes.func,
   vertical: PropTypes.bool,
   maxHeight: PropTypes.string,
-  maxWidth: PropTypes.string
+  maxWidth: PropTypes.string,
+  fixAspectRatio: PropTypes.bool
 };
 
 ImageWithModal.defaultProps = {
@@ -93,5 +96,6 @@ ImageWithModal.defaultProps = {
   showModal: null,
   vertical: false,
   maxHeight: null,
-  maxWidth: null
+  maxWidth: null,
+  fixAspectRatio: false
 };
diff --git a/src/components/Results.jsx b/src/components/Results.jsx
index d78d31bd..9ac4c033 100644
--- a/src/components/Results.jsx
+++ b/src/components/Results.jsx
@@ -137,6 +137,7 @@ export default function Results({ match }) {
           vertical={isVertical}
           maxHeight="350px"
           maxWidth="100%"
+          fixAspectRatio
       />
         <AlignmentMeta metadata={searchMeta}/>
       </CustomInputSummary>
diff --git a/src/components/SearchSummary.jsx b/src/components/SearchSummary.jsx
index 388933cb..0f357c92 100644
--- a/src/components/SearchSummary.jsx
+++ b/src/components/SearchSummary.jsx
@@ -24,6 +24,7 @@ export default function SearchSummary({ searchAlgorithm, input }) {
         input.libraryName?.toLowerCase().includes("vnc")
       }
       maxHeight={maxHeight}
+      fixAspectRatio
     />
   );