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

Few changes to how media rendering

Browse source 
1. Try respect aspect when only 1 media
2. Distance-based image inner-scroll animation
3. Small inner radius between media when >=2 media
This commit is contained in:
Lim Chee Aun 2023-07-30 21:28:17 +08:00
parent fad286e617
commit c003724108
2 changed files with 80 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/media.jsx
View file

@ -116,6 +116,12 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
if (smaller) setImageSmallerThanParent(smaller); if (smaller) setImageSmallerThanParent(smaller);
}, [width, height]); }, [width, height]);
const mediaStyles = {
'--width': `${width}px`,
'--height': `${height}px`,
aspectRatio: `${width} / ${height}`,
};
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';
@ -138,13 +144,16 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
ref={parentRef} ref={parentRef}
class={`media media-image`} class={`media media-image`}
onClick={onClick} onClick={onClick}
data-orientation={orientation}
style={ style={
showOriginal && { showOriginal
backgroundImage: `url(${previewUrl})`, ? {
backgroundSize: imageSmallerThanParent backgroundImage: `url(${previewUrl})`,
? `${width}px ${height}px` backgroundSize: imageSmallerThanParent
: undefined, ? `${width}px ${height}px`
} : undefined,
}
: mediaStyles
} }
> >
{showOriginal ? ( {showOriginal ? (
@ -183,6 +192,13 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
backgroundColor: backgroundColor:
rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`, rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
backgroundPosition: focalBackgroundPosition || 'center', backgroundPosition: focalBackgroundPosition || 'center',
// Duration based on width or height in pixels
// 100px per second (rough estimate)
// Clamp between 5s and 120s
'--anim-duration': `${Math.min(
Math.max(Math.max(width, height) / 100, 5),
120,
)}s`,
}} }}
onLoad={(e) => { onLoad={(e) => {
e.target.closest('.media-image').style.backgroundImage = ''; e.target.closest('.media-image').style.backgroundImage = '';
@ -229,12 +245,14 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
class={`media media-${isGIF ? 'gif' : 'video'} ${ class={`media media-${isGIF ? 'gif' : 'video'} ${
autoGIFAnimate ? 'media-contain' : '' autoGIFAnimate ? 'media-contain' : ''
}`} }`}
data-orientation={orientation}
data-formatted-duration={formattedDuration} data-formatted-duration={formattedDuration}
data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''} data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
// style={{ // style={{
// backgroundColor: // backgroundColor:
// rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`, // rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
// }} // }}
style={!showOriginal && mediaStyles}
onClick={(e) => { onClick={(e) => {
if (hoverAnimate) { if (hoverAnimate) {
try { try {
@ -314,6 +332,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
class="media media-audio" class="media media-audio"
data-formatted-duration={formattedDuration} data-formatted-duration={formattedDuration}
onClick={onClick} onClick={onClick}
style={!showOriginal && mediaStyles}
> >
{showOriginal ? ( {showOriginal ? (
<audio src={remoteUrl || url} preload="none" controls autoplay /> <audio src={remoteUrl || url} preload="none" controls autoplay />

69
src/components/status.css
View file

@ -87,6 +87,7 @@
} }
.status-card-link:is(:hover, :focus) .status-card img { .status-card-link:is(:hover, :focus) .status-card img {
animation: position-object 5s ease-in-out 1s 5; animation: position-object 5s ease-in-out 1s 5;
animation-duration: var(--anim-duration, 5s);
} }
.status-card-link:is(:active) .status-card { .status-card-link:is(:active) .status-card {
background-color: var(--bg-faded-color); background-color: var(--bg-faded-color);
@ -556,11 +557,11 @@
height: auto; height: auto;
max-height: max(160px, 33vh); max-height: max(160px, 33vh);
} }
/* .status .media-container.media-eq1 { .status .media-container.media-eq1 {
min-height: 44px; display: flex;
height: auto; /* min-height: 0 !important; */
max-height: 160px; max-height: none !important;
} */ }
.status:not(.large):not(.status-carousel .status) .status:not(.large):not(.status-carousel .status)
.media-container.media-eq1:has([data-orientation='portrait']) { .media-container.media-eq1:has([data-orientation='portrait']) {
width: 85%; width: 85%;
@ -578,38 +579,76 @@
} }
.status .media-container .media { .status .media-container .media {
--media-radius: 16px; --media-radius: 16px;
--media-radius-inner: 4px;
border-radius: var(--media-radius); border-radius: var(--media-radius);
overflow: hidden; overflow: hidden;
min-height: 80px; min-height: 80px;
border: 1px solid var(--outline-color); border: 1px solid var(--outline-color);
} }
.status .media-container:not(.media-eq1) .media {
aspect-ratio: auto !important;
}
.status .media-container.media-eq1 .media {
display: block;
max-width: 100% !important;
min-width: 44px;
width: auto;
min-height: 44px;
/* width: min(var(--width), 100%); */
max-height: min(var(--height), 33vh);
}
.status .media-container.media-eq1 .media[data-orientation='portrait'] {
width: auto;
height: min(var(--height), 45vh);
max-height: none;
}
.status.large .media-container.media-eq1 {
max-height: min(var(--height), 60vh);
}
.status.large .media-container.media-eq1 .media[data-orientation='portrait'] {
height: min(var(--height), 60vh);
}
.status-carousel .status .media-container.media-eq1 .media {
width: min(var(--width), 100%);
height: auto;
max-height: 60vh;
}
/* Special media borders */ /* Special media borders */
.status .media-container.media-eq2 .media:first-of-type { .status .media-container.media-eq2 .media:first-of-type {
border-radius: var(--media-radius) 0 0 var(--media-radius); border-radius: var(--media-radius) var(--media-radius-inner)
var(--media-radius-inner) var(--media-radius);
} }
.status .media-container.media-eq2 .media:last-of-type { .status .media-container.media-eq2 .media:last-of-type {
border-radius: 0 var(--media-radius) var(--media-radius) 0; border-radius: var(--media-radius-inner) var(--media-radius)
var(--media-radius) var(--media-radius-inner);
} }
.status .media-container.media-eq3 .media:first-of-type { .status .media-container.media-eq3 .media:first-of-type {
border-radius: var(--media-radius) 0 0 var(--media-radius); border-radius: var(--media-radius) var(--media-radius-inner)
var(--media-radius-inner) var(--media-radius);
} }
.status .media-container.media-eq3 .media:nth-of-type(2) { .status .media-container.media-eq3 .media:nth-of-type(2) {
border-radius: 0 var(--media-radius) 0 0; border-radius: var(--media-radius-inner) var(--media-radius)
var(--media-radius-inner) var(--media-radius-inner);
} }
.status .media-container.media-eq3 .media:last-of-type { .status .media-container.media-eq3 .media:last-of-type {
border-radius: 0 0 var(--media-radius) 0; border-radius: var(--media-radius-inner) var(--media-radius-inner)
var(--media-radius) var(--media-radius-inner);
} }
.status .media-container.media-eq4 .media:first-of-type { .status .media-container.media-eq4 .media:first-of-type {
border-radius: var(--media-radius) 0 0 0; border-radius: var(--media-radius) var(--media-radius-inner)
var(--media-radius-inner) var(--media-radius-inner);
} }
.status .media-container.media-eq4 .media:nth-of-type(2) { .status .media-container.media-eq4 .media:nth-of-type(2) {
border-radius: 0 var(--media-radius) 0 0; border-radius: var(--media-radius-inner) var(--media-radius)
var(--media-radius-inner) var(--media-radius-inner);
} }
.status .media-container.media-eq4 .media:nth-of-type(3) { .status .media-container.media-eq4 .media:nth-of-type(3) {
border-radius: 0 0 0 var(--media-radius); border-radius: var(--media-radius-inner) var(--media-radius-inner)
var(--media-radius-inner) var(--media-radius);
} }
.status .media-container.media-eq4 .media:last-of-type { .status .media-container.media-eq4 .media:last-of-type {
border-radius: 0 0 var(--media-radius) 0; border-radius: var(--media-radius-inner) var(--media-radius-inner)
var(--media-radius) var(--media-radius-inner);
} }
.status .media:only-child { .status .media:only-child {
grid-area: span 2 / span 2; grid-area: span 2 / span 2;
@ -657,6 +696,7 @@
.status .media img:is(:hover, :focus), .status .media img:is(:hover, :focus),
a:focus-visible .status .media img { a:focus-visible .status .media img {
animation: position-object 5s ease-in-out 1s 5; animation: position-object 5s ease-in-out 1s 5;
animation-duration: var(--anim-duration, 5s);
} }
body:has(#modal-container .carousel) .status .media img:hover { body:has(#modal-container .carousel) .status .media img:hover {
animation: none; animation: none;
@ -891,6 +931,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
.card:is(:hover, :focus) img, .card:is(:hover, :focus) img,
a:focus-visible .card img { a:focus-visible .card img {
animation: position-object 5s ease-in-out 1s 5; animation: position-object 5s ease-in-out 1s 5;
animation-duration: var(--anim-duration, 5s);
} }
.card p { .card p {
margin: 0; margin: 0;