this repo has no description
Experiment immersive media render on large-size post
+86
-42
+20
src/components/status.css
+20
src/components/status.css
···
1349
1349
background-color: var(--outline-color);
1350
1350
}
1351
1351
1352
+
.status.large .media-large-container {
1353
+
width: 100%;
1354
+
max-width: 100%;
1355
+
display: inline-flex;
1356
+
flex-direction: column;
1357
+
align-items: center;
1358
+
justify-content: center;
1359
+
column-gap: 8px;
1360
+
flex-wrap: wrap;
1361
+
text-align: center;
1362
+
1363
+
figure {
1364
+
justify-content: center;
1365
+
1366
+
figcaption {
1367
+
text-align: center;
1368
+
}
1369
+
}
1370
+
}
1371
+
1352
1372
@keyframes media-carousel-slide {
1353
1373
0% {
1354
1374
transform: translateX(calc(var(--dots-count, 1) * 2.5px));
+66
-42
src/components/status.jsx
+66
-42
src/components/status.jsx
···
1990
1990
{showSpoilerMedia ? 'Show less' : 'Show media'}
1991
1991
</button>
1992
1992
)}
1993
-
{!!mediaAttachments.length && (
1994
-
<MultipleMediaFigure
1995
-
lang={language}
1996
-
enabled={showMultipleMediaCaptions}
1997
-
captionChildren={captionChildren}
1998
-
>
1999
-
<div
2000
-
ref={mediaContainerRef}
2001
-
class={`media-container media-eq${
2002
-
mediaAttachments.length
2003
-
} ${mediaAttachments.length > 2 ? 'media-gt2' : ''} ${
2004
-
mediaAttachments.length > 4 ? 'media-gt4' : ''
2005
-
}`}
2006
-
>
2007
-
{displayedMediaAttachments.map((media, i) => (
2008
-
<Media
2009
-
key={media.id}
2010
-
media={media}
2011
-
autoAnimate={isSizeLarge}
2012
-
showCaption={mediaAttachments.length === 1}
2013
-
allowLongerCaption={
2014
-
!content && mediaAttachments.length === 1
2015
-
}
2016
-
lang={language}
2017
-
altIndex={
2018
-
showMultipleMediaCaptions &&
2019
-
!!media.description &&
2020
-
i + 1
2021
-
}
2022
-
to={`/${instance}/s/${id}?${
2023
-
withinContext ? 'media' : 'media-only'
2024
-
}=${i + 1}`}
2025
-
onClick={
2026
-
onMediaClick
2027
-
? (e) => {
2028
-
onMediaClick(e, i, media, status);
2029
-
}
2030
-
: undefined
2031
-
}
2032
-
/>
1993
+
{!!mediaAttachments.length &&
1994
+
(mediaAttachments.length > 1 &&
1995
+
(isSizeLarge || (withinContext && size === 'm')) ? (
1996
+
<div class="media-large-container">
1997
+
{mediaAttachments.map((media, i) => (
1998
+
<div key={media.id} class={`media-container media-eq1`}>
1999
+
<Media
2000
+
media={media}
2001
+
autoAnimate
2002
+
showCaption
2003
+
allowLongerCaption={!content}
2004
+
lang={language}
2005
+
to={`/${instance}/s/${id}?${
2006
+
withinContext ? 'media' : 'media-only'
2007
+
}=${i + 1}`}
2008
+
onClick={
2009
+
onMediaClick
2010
+
? (e) => onMediaClick(e, i, media, status)
2011
+
: undefined
2012
+
}
2013
+
/>
2014
+
</div>
2033
2015
))}
2034
2016
</div>
2035
-
</MultipleMediaFigure>
2036
-
)}
2017
+
) : (
2018
+
<MultipleMediaFigure
2019
+
lang={language}
2020
+
enabled={showMultipleMediaCaptions}
2021
+
captionChildren={captionChildren}
2022
+
>
2023
+
<div
2024
+
ref={mediaContainerRef}
2025
+
class={`media-container media-eq${
2026
+
mediaAttachments.length
2027
+
} ${mediaAttachments.length > 2 ? 'media-gt2' : ''} ${
2028
+
mediaAttachments.length > 4 ? 'media-gt4' : ''
2029
+
}`}
2030
+
>
2031
+
{displayedMediaAttachments.map((media, i) => (
2032
+
<Media
2033
+
key={media.id}
2034
+
media={media}
2035
+
autoAnimate={isSizeLarge}
2036
+
showCaption={mediaAttachments.length === 1}
2037
+
allowLongerCaption={
2038
+
!content && mediaAttachments.length === 1
2039
+
}
2040
+
lang={language}
2041
+
altIndex={
2042
+
showMultipleMediaCaptions &&
2043
+
!!media.description &&
2044
+
i + 1
2045
+
}
2046
+
to={`/${instance}/s/${id}?${
2047
+
withinContext ? 'media' : 'media-only'
2048
+
}=${i + 1}`}
2049
+
onClick={
2050
+
onMediaClick
2051
+
? (e) => {
2052
+
onMediaClick(e, i, media, status);
2053
+
}
2054
+
: undefined
2055
+
}
2056
+
/>
2057
+
))}
2058
+
</div>
2059
+
</MultipleMediaFigure>
2060
+
))}
2037
2061
{!!card &&
2038
2062
/^https/i.test(card?.url) &&
2039
2063
!sensitive &&