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);
}
.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 {
0% {
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'}
</button>
)}
{!!mediaAttachments.length && (
<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
}
/>
{!!mediaAttachments.length &&
(mediaAttachments.length > 1 &&
(isSizeLarge || (withinContext && size === 'm')) ? (
<div class="media-large-container">
{mediaAttachments.map((media, i) => (
<div key={media.id} class={`media-container media-eq1`}>
<Media
media={media}
autoAnimate
showCaption
allowLongerCaption={!content}
lang={language}
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 &&
/^https/i.test(card?.url) &&
!sensitive &&