this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Use state to set natural aspect ratio instead

And fix all other data attributes

+11 -5
+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 >