From 5babdc9d63bf0c146aa6480e81ed06af685155eb Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 13 Apr 2024 19:21:20 +0800
Subject: [PATCH] Fix width/height not set

---
 src/components/media.jsx | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/media.jsx b/src/components/media.jsx
index b12a6e91..235bbb52 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -341,13 +341,15 @@ function Media({
                   if (!hasDimensions) {
                     const $media = e.target.closest('.media');
                     if ($media) {
+                      const { naturalWidth, naturalHeight } = e.target;
                       $media.dataset.orientation =
-                        e.target.naturalWidth > e.target.naturalHeight
-                          ? 'landscape'
-                          : 'portrait';
-                      $media.style['--width'] = `${e.target.naturalWidth}px`;
-                      $media.style['--height'] = `${e.target.naturalHeight}px`;
-                      $media.style.aspectRatio = `${e.target.naturalWidth}/${e.target.naturalHeight}`;
+                        naturalWidth > naturalHeight ? 'landscape' : 'portrait';
+                      $media.style.setProperty('--width', `${naturalWidth}px`);
+                      $media.style.setProperty(
+                        '--height',
+                        `${naturalHeight}px`,
+                      );
+                      $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
                     }
                   }
                 }}
@@ -515,15 +517,20 @@ function Media({
                     if (!hasDimensions) {
                       const $media = e.target.closest('.media');
                       if ($media) {
+                        const { naturalHeight, naturalWidth } = e.target;
                         $media.dataset.orientation =
-                          e.target.naturalWidth > e.target.naturalHeight
+                          naturalWidth > naturalHeight
                             ? 'landscape'
                             : 'portrait';
-                        $media.style['--width'] = `${e.target.naturalWidth}px`;
-                        $media.style[
-                          '--height'
-                        ] = `${e.target.naturalHeight}px`;
-                        $media.style.aspectRatio = `${e.target.naturalWidth}/${e.target.naturalHeight}`;
+                        $media.style.setProperty(
+                          '--width',
+                          `${naturalWidth}px`,
+                        );
+                        $media.style.setProperty(
+                          '--height',
+                          `${naturalHeight}px`,
+                        );
+                        $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
                       }
                     }
                   }}