From 497ede1a3dc8b84476356d1f83ae72932bd130b4 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 15 Jun 2024 10:25:10 +0800
Subject: [PATCH] Use state to set natural aspect ratio instead

And fix all other data attributes
---
 src/components/media.jsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/media.jsx b/src/components/media.jsx
index a757827f..c23b839c 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -248,6 +248,8 @@ function Media({
         );
       };
 
+  const [hasNaturalAspectRatio, setHasNaturalAspectRatio] = useState(undefined);
+
   if (isImage) {
     // Note: type: unknown might not have width/height
     quickPinchZoomProps.containerProps.style.display = 'inherit';
@@ -272,7 +274,8 @@ function Media({
           class={`media media-image ${className}`}
           onClick={onClick}
           data-orientation={orientation}
-          data-has-alt={!showInlineDesc}
+          data-has-alt={!showInlineDesc || undefined}
+          data-has-natural-aspect-ratio={hasNaturalAspectRatio || undefined}
           style={
             showOriginal
               ? {
@@ -381,7 +384,8 @@ function Media({
                           Math.abs(naturalAspectRatio - displayAspectRatio) <
                             similarThreshold
                         ) {
-                          $media.dataset.hasNaturalAspectRatio = true;
+                          // $media.dataset.hasNaturalAspectRatio = true;
+                          setHasNaturalAspectRatio(true);
                         }
                         // $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
                       }
@@ -461,8 +465,10 @@ function Media({
           data-formatted-duration={
             !showOriginal ? formattedDuration : undefined
           }
-          data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
-          data-has-alt={!showInlineDesc}
+          data-label={
+            isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : undefined
+          }
+          data-has-alt={!showInlineDesc || undefined}
           // style={{
           //   backgroundColor:
           //     rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
@@ -635,7 +641,7 @@ function Media({
           data-formatted-duration={
             !showOriginal ? formattedDuration : undefined
           }
-          data-has-alt={!showInlineDesc}
+          data-has-alt={!showInlineDesc || undefined}
           onClick={onClick}
           style={!showOriginal && mediaStyles}
         >