nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Experiment reduce radius for uncropped images

Browse source
This commit is contained in:
Lim Chee Aun 2024-06-10 20:41:43 +08:00
parent 88e36183c6
commit 17230fc690
2 changed files with 43 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/components/media.jsx
View file

@ -338,18 +338,45 @@ function Media({
onLoad={(e) => { onLoad={(e) => {
// e.target.closest('.media-image').style.backgroundImage = ''; // e.target.closest('.media-image').style.backgroundImage = '';
e.target.dataset.loaded = true; e.target.dataset.loaded = true;
if (!hasDimensions) { const $media = e.target.closest('.media');
const $media = e.target.closest('.media'); if (!hasDimensions && $media) {
if ($media) { const { naturalWidth, naturalHeight } = e.target;
const { naturalWidth, naturalHeight } = e.target; $media.dataset.orientation =
$media.dataset.orientation = naturalWidth > naturalHeight ? 'landscape' : 'portrait';
naturalWidth > naturalHeight ? 'landscape' : 'portrait'; $media.style.setProperty('--width', `${naturalWidth}px`);
$media.style.setProperty('--width', `${naturalWidth}px`); $media.style.setProperty('--height', `${naturalHeight}px`);
$media.style.setProperty( $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
'--height', }
`${naturalHeight}px`,
); // Check natural aspect ratio vs display aspect ratio
$media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`; if ($media) {
const {
clientWidth,
clientHeight,
naturalWidth,
naturalHeight,
} = e.target;
if (
clientWidth &&
clientHeight &&
naturalWidth &&
naturalHeight
) {
const naturalAspectRatio = (
naturalWidth / naturalHeight
).toFixed(2);
const displayAspectRatio = (
clientWidth / clientHeight
).toFixed(2);
const similarThreshold = 0.05;
if (
naturalAspectRatio === displayAspectRatio ||
Math.abs(naturalAspectRatio - displayAspectRatio) <
similarThreshold
) {
$media.classList.add('has-natural-aspect-ratio');
}
// $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
} }
} }
}} }}

4
src/components/status.css
View file

@ -1070,6 +1070,10 @@
--aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */ --aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */
width: min(var(--aspectWidth), var(--width), 100%); width: min(var(--aspectWidth), var(--width), 100%);
max-height: min(var(--height), 33vh); max-height: min(var(--height), 33vh);
&.has-natural-aspect-ratio {
--media-radius: 4px;
}
} }
.status .media-container.media-eq1 .media[data-orientation='portrait'] { .status .media-container.media-eq1 .media[data-orientation='portrait'] {
/* width: auto; /* width: auto;