Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 14:16:39 +01:00
Code Issues Projects Releases Packages Wiki Activity

Use state to set natural aspect ratio instead

Browse source 
And fix all other data attributes
This commit is contained in:
Lim Chee Aun 2024-06-15 10:25:10 +08:00
parent 8a1fda5a85
commit 497ede1a3d
1 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/media.jsx
View file

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