this repo has no description
Use state to set natural aspect ratio instead
And fix all other data attributes
+11
-5
+11
-5
src/components/media.jsx
+11
-5
src/components/media.jsx
···
248
248
);
249
249
};
250
250
251
+
const [hasNaturalAspectRatio, setHasNaturalAspectRatio] = useState(undefined);
252
+
251
253
if (isImage) {
252
254
// Note: type: unknown might not have width/height
253
255
quickPinchZoomProps.containerProps.style.display = 'inherit';
···
272
274
class={`media media-image ${className}`}
273
275
onClick={onClick}
274
276
data-orientation={orientation}
275
-
data-has-alt={!showInlineDesc}
277
+
data-has-alt={!showInlineDesc || undefined}
278
+
data-has-natural-aspect-ratio={hasNaturalAspectRatio || undefined}
276
279
style={
277
280
showOriginal
278
281
? {
···
381
384
Math.abs(naturalAspectRatio - displayAspectRatio) <
382
385
similarThreshold
383
386
) {
384
-
$media.dataset.hasNaturalAspectRatio = true;
387
+
// $media.dataset.hasNaturalAspectRatio = true;
388
+
setHasNaturalAspectRatio(true);
385
389
}
386
390
// $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
387
391
}
···
461
465
data-formatted-duration={
462
466
!showOriginal ? formattedDuration : undefined
463
467
}
464
-
data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
465
-
data-has-alt={!showInlineDesc}
468
+
data-label={
469
+
isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : undefined
470
+
}
471
+
data-has-alt={!showInlineDesc || undefined}
466
472
// style={{
467
473
// backgroundColor:
468
474
// rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
···
635
641
data-formatted-duration={
636
642
!showOriginal ? formattedDuration : undefined
637
643
}
638
-
data-has-alt={!showInlineDesc}
644
+
data-has-alt={!showInlineDesc || undefined}
639
645
onClick={onClick}
640
646
style={!showOriginal && mediaStyles}
641
647
>