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

Experiment immersive media render on large-size post

Browse source
This commit is contained in:
Lim Chee Aun 2024-06-10 20:42:38 +08:00
parent 17230fc690
commit 8a10a81fec
2 changed files with 86 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/status.css
View file

@ -1349,6 +1349,26 @@ body:has(#modal-container .carousel) .status .media img:hover {
background-color: var(--outline-color); background-color: var(--outline-color);
} }
.status.large .media-large-container {
width: 100%;
max-width: 100%;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
column-gap: 8px;
flex-wrap: wrap;
text-align: center;
figure {
justify-content: center;
figcaption {
text-align: center;
}
}
}
@keyframes media-carousel-slide { @keyframes media-carousel-slide {
0% { 0% {
transform: translateX(calc(var(--dots-count, 1) * 2.5px)); transform: translateX(calc(var(--dots-count, 1) * 2.5px));

108
src/components/status.jsx
View file

@ -1990,50 +1990,74 @@ function Status({
{showSpoilerMedia ? 'Show less' : 'Show media'} {showSpoilerMedia ? 'Show less' : 'Show media'}
</button> </button>
)} )}
{!!mediaAttachments.length && ( {!!mediaAttachments.length &&
<MultipleMediaFigure (mediaAttachments.length > 1 &&
lang={language} (isSizeLarge || (withinContext && size === 'm')) ? (
enabled={showMultipleMediaCaptions} <div class="media-large-container">
captionChildren={captionChildren} {mediaAttachments.map((media, i) => (
> <div key={media.id} class={`media-container media-eq1`}>
<div <Media
ref={mediaContainerRef} media={media}
class={`media-container media-eq${ autoAnimate
mediaAttachments.length showCaption
} ${mediaAttachments.length > 2 ? 'media-gt2' : ''} ${ allowLongerCaption={!content}
mediaAttachments.length > 4 ? 'media-gt4' : '' lang={language}
}`} to={`/${instance}/s/${id}?${
> withinContext ? 'media' : 'media-only'
{displayedMediaAttachments.map((media, i) => ( }=${i + 1}`}
<Media onClick={
key={media.id} onMediaClick
media={media} ? (e) => onMediaClick(e, i, media, status)
autoAnimate={isSizeLarge} : undefined
showCaption={mediaAttachments.length === 1} }
allowLongerCaption={ />
!content && mediaAttachments.length === 1 </div>
}
lang={language}
altIndex={
showMultipleMediaCaptions &&
!!media.description &&
i + 1
}
to={`/${instance}/s/${id}?${
withinContext ? 'media' : 'media-only'
}=${i + 1}`}
onClick={
onMediaClick
? (e) => {
onMediaClick(e, i, media, status);
}
: undefined
}
/>
))} ))}
</div> </div>
</MultipleMediaFigure> ) : (
)} <MultipleMediaFigure
lang={language}
enabled={showMultipleMediaCaptions}
captionChildren={captionChildren}
>
<div
ref={mediaContainerRef}
class={`media-container media-eq${
mediaAttachments.length
} ${mediaAttachments.length > 2 ? 'media-gt2' : ''} ${
mediaAttachments.length > 4 ? 'media-gt4' : ''
}`}
>
{displayedMediaAttachments.map((media, i) => (
<Media
key={media.id}
media={media}
autoAnimate={isSizeLarge}
showCaption={mediaAttachments.length === 1}
allowLongerCaption={
!content && mediaAttachments.length === 1
}
lang={language}
altIndex={
showMultipleMediaCaptions &&
!!media.description &&
i + 1
}
to={`/${instance}/s/${id}?${
withinContext ? 'media' : 'media-only'
}=${i + 1}`}
onClick={
onMediaClick
? (e) => {
onMediaClick(e, i, media, status);
}
: undefined
}
/>
))}
</div>
</MultipleMediaFigure>
))}
{!!card && {!!card &&
/^https/i.test(card?.url) && /^https/i.test(card?.url) &&
!sensitive && !sensitive &&