mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-28 04:12:41 +03: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);
}, [width, height]);
const mediaStyles = {
'--width': `${width}px`,
'--height': `${height}px`,
aspectRatio: `${width} / ${height}`,
};
if (isImage) {
// Note: type: unknown might not have width/height
quickPinchZoomProps.containerProps.style.display = 'inherit';
@ -138,13 +144,16 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
ref={parentRef}
class={`media media-image`}
onClick={onClick}
data-orientation={orientation}
style={
showOriginal && {
backgroundImage: `url(${previewUrl})`,
backgroundSize: imageSmallerThanParent
? `${width}px ${height}px`
: undefined,
}
showOriginal
? {
backgroundImage: `url(${previewUrl})`,
backgroundSize: imageSmallerThanParent
? `${width}px ${height}px`
: undefined,
}
: mediaStyles
}
>
{showOriginal ? (
@ -183,6 +192,13 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
backgroundColor:
rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
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) => {
e.target.closest('.media-image').style.backgroundImage = '';
@ -229,12 +245,14 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
class={`media media-${isGIF ? 'gif' : 'video'} ${
autoGIFAnimate ? 'media-contain' : ''
}`}
data-orientation={orientation}
data-formatted-duration={formattedDuration}
data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
// style={{
// backgroundColor:
// rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
// }}
style={!showOriginal && mediaStyles}
onClick={(e) => {
if (hoverAnimate) {
try {
@ -314,6 +332,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
class="media media-audio"
data-formatted-duration={formattedDuration}
onClick={onClick}
style={!showOriginal && mediaStyles}
>
{showOriginal ? (
<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 {
animation: position-object 5s ease-in-out 1s 5;
animation-duration: var(--anim-duration, 5s);
}
.status-card-link:is(:active) .status-card {
background-color: var(--bg-faded-color);
@ -556,11 +557,11 @@
height: auto;
max-height: max(160px, 33vh);
}
/* .status .media-container.media-eq1 {
min-height: 44px;
height: auto;
max-height: 160px;
} */
.status .media-container.media-eq1 {
display: flex;
/* min-height: 0 !important; */
max-height: none !important;
}
.status:not(.large):not(.status-carousel .status)
.media-container.media-eq1:has([data-orientation='portrait']) {
width: 85%;
@ -578,38 +579,76 @@
}
.status .media-container .media {
--media-radius: 16px;
--media-radius-inner: 4px;
border-radius: var(--media-radius);
overflow: hidden;
min-height: 80px;
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 */
.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 {
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 {
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) {
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 {
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 {
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) {
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) {
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 {
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 {
grid-area: span 2 / span 2;
@ -657,6 +696,7 @@
.status .media img:is(:hover, :focus),
a:focus-visible .status .media img {
animation: position-object 5s ease-in-out 1s 5;
animation-duration: var(--anim-duration, 5s);
}
body:has(#modal-container .carousel) .status .media img:hover {
animation: none;
@ -891,6 +931,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
.card:is(:hover, :focus) img,
a:focus-visible .card img {
animation: position-object 5s ease-in-out 1s 5;
animation-duration: var(--anim-duration, 5s);
}
.card p {
margin: 0;