From 17230fc6908c308a3ec64da77c4143046eb3b00f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 10 Jun 2024 20:41:43 +0800
Subject: [PATCH] Experiment reduce radius for uncropped images

---
 src/components/media.jsx  | 51 ++++++++++++++++++++++++++++++---------
 src/components/status.css |  4 +++
 2 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/src/components/media.jsx b/src/components/media.jsx
index e094b824..82d48a05 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -338,18 +338,45 @@ function Media({
                 onLoad={(e) => {
                   // e.target.closest('.media-image').style.backgroundImage = '';
                   e.target.dataset.loaded = true;
-                  if (!hasDimensions) {
-                    const $media = e.target.closest('.media');
-                    if ($media) {
-                      const { naturalWidth, naturalHeight } = e.target;
-                      $media.dataset.orientation =
-                        naturalWidth > naturalHeight ? 'landscape' : 'portrait';
-                      $media.style.setProperty('--width', `${naturalWidth}px`);
-                      $media.style.setProperty(
-                        '--height',
-                        `${naturalHeight}px`,
-                      );
-                      $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
+                  const $media = e.target.closest('.media');
+                  if (!hasDimensions && $media) {
+                    const { naturalWidth, naturalHeight } = e.target;
+                    $media.dataset.orientation =
+                      naturalWidth > naturalHeight ? 'landscape' : 'portrait';
+                    $media.style.setProperty('--width', `${naturalWidth}px`);
+                    $media.style.setProperty('--height', `${naturalHeight}px`);
+                    $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
+                  }
+
+                  // Check natural aspect ratio vs display aspect ratio
+                  if ($media) {
+                    const {
+                      clientWidth,
+                      clientHeight,
+                      naturalWidth,
+                      naturalHeight,
+                    } = e.target;
+                    if (
+                      clientWidth &&
+                      clientHeight &&
+                      naturalWidth &&
+                      naturalHeight
+                    ) {
+                      const naturalAspectRatio = (
+                        naturalWidth / naturalHeight
+                      ).toFixed(2);
+                      const displayAspectRatio = (
+                        clientWidth / clientHeight
+                      ).toFixed(2);
+                      const similarThreshold = 0.05;
+                      if (
+                        naturalAspectRatio === displayAspectRatio ||
+                        Math.abs(naturalAspectRatio - displayAspectRatio) <
+                          similarThreshold
+                      ) {
+                        $media.classList.add('has-natural-aspect-ratio');
+                      }
+                      // $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
                     }
                   }
                 }}
diff --git a/src/components/status.css b/src/components/status.css
index 3d05463e..803bc0c7 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -1070,6 +1070,10 @@
   --aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */
   width: min(var(--aspectWidth), var(--width), 100%);
   max-height: min(var(--height), 33vh);
+
+  &.has-natural-aspect-ratio {
+    --media-radius: 4px;
+  }
 }
 .status .media-container.media-eq1 .media[data-orientation='portrait'] {
   /* width: auto;