From 77bc06545c5279255b80f619d497c5aec9573f6e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 May 2024 15:05:29 +0800
Subject: [PATCH] Handle inline images

---
 src/components/status.css    |  6 ++++++
 src/utils/enhance-content.js | 11 +++++++++++
 2 files changed, 17 insertions(+)

diff --git a/src/components/status.css b/src/components/status.css
index a472bbe8..247600cf 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -825,6 +825,12 @@
 .timeline-deck .status .content.truncated ~ .card {
   display: none;
 }
+.status .content .inner-content {
+  > img[height] {
+    height: auto;
+    aspect-ratio: var(--original-aspect-ratio);
+  }
+}
 .status .content .inner-content a:not(.mention, .has-url-text) {
   color: var(--link-text-color);
 }
diff --git a/src/utils/enhance-content.js b/src/utils/enhance-content.js
index d6157352..4a30481e 100644
--- a/src/utils/enhance-content.js
+++ b/src/utils/enhance-content.js
@@ -242,6 +242,17 @@ function _enhanceContent(content, opts = {}) {
     }
   }
 
+  // ADD ASPECT RATIO TO ALL IMAGES
+  if (enhancedContent.includes('<img')) {
+    dom.querySelectorAll('img').forEach((img) => {
+      const width = img.getAttribute('width') || img.naturalWidth;
+      const height = img.getAttribute('height') || img.naturalHeight;
+      if (width && height) {
+        img.style.setProperty('--original-aspect-ratio', `${width}/${height}`);
+      }
+    });
+  }
+
   if (postEnhanceDOM) {
     queueMicrotask(() => postEnhanceDOM(dom));
     // postEnhanceDOM(dom); // mutate dom