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

Experiment figcaption for *multiple* media's

Browse source
This commit is contained in:
Lim Chee Aun 2023-10-02 12:21:26 +08:00
parent 9f6236762d
commit 348efe0069
3 changed files with 132 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/media.jsx
View file

@ -29,7 +29,7 @@ audio = Audio track
const dataAltLabel = 'ALT';
const AltBadge = (props) => {
const { alt, lang, ...rest } = props;
const { alt, lang, index, ...rest } = props;
if (!alt || !alt.trim()) return null;
return (
<button
@ -47,6 +47,7 @@ const AltBadge = (props) => {
title="Media description"
>
{dataAltLabel}
{!!index && <sup>{index}</sup>}
</button>
);
};
@ -60,6 +61,7 @@ function Media({
showOriginal,
autoAnimate,
showCaption,
altIndex,
onClick = () => {},
}) {
const {
@ -304,7 +306,9 @@ function Media({
}
}}
/>
{!showInlineDesc && <AltBadge alt={description} lang={lang} />}
{!showInlineDesc && (
<AltBadge alt={description} lang={lang} index={altIndex} />
)}
</>
)}
</Parent>
@ -433,11 +437,13 @@ function Media({
<div class="media-play">
<Icon icon="play" size="xl" />
</div>
{!showInlineDesc && <AltBadge alt={description} lang={lang} />}
{!showInlineDesc && (
<AltBadge alt={description} lang={lang} index={altIndex} />
)}
</>
)}
{!showOriginal && !showInlineDesc && (
<AltBadge alt={description} lang={lang} />
<AltBadge alt={description} lang={lang} index={altIndex} />
)}
</Parent>
</Figure>
@ -470,7 +476,9 @@ function Media({
<div class="media-play">
<Icon icon="play" size="xl" />
</div>
{!showInlineDesc && <AltBadge alt={description} lang={lang} />}
{!showInlineDesc && (
<AltBadge alt={description} lang={lang} index={altIndex} />
)}
</>
)}
</Parent>

44
src/components/status.css
View file

@ -460,7 +460,7 @@
.status
.content-container.has-spoiler:not(.show-spoiler)
.spoiler
~ *:not(.media-container, .card),
~ *:not(.media-container, .card, .media-figure-multiple),
.status
.content-container.has-spoiler:not(.show-spoiler)
.spoiler
@ -469,7 +469,7 @@
.status
.content-container.has-spoiler:not(.show-spoiler)
.spoiler
~ .media-container
~ :is(.media-container, .media-figure-multiple)
figcaption {
filter: blur(5px) invert(0.5);
image-rendering: crisp-edges;
@ -483,7 +483,7 @@
.status
.content-container.has-spoiler:not(.show-spoiler)
.spoiler
~ .media-container
~ :is(.media-container, .media-figure-multiple)
.media
> *,
.status
@ -1008,6 +1008,37 @@ body:has(#modal-container .carousel) .status .media img:hover {
white-space: normal;
}
.media-figure-multiple {
margin: 0;
padding: 0;
figcaption {
padding: 4px;
font-size: 90%;
color: var(--text-insignificant-color);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
& > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
color: var(--text-color);
cursor: pointer;
}
}
sup {
opacity: 0.75;
font-variant-numeric: tabular-nums;
}
}
}
.carousel-item {
position: relative;
}
@ -1687,6 +1718,13 @@ a.card:is(:hover, :focus):visited {
padding: 4px;
opacity: 0.65;
sup {
vertical-align: super;
font-weight: normal;
line-height: 0;
padding-left: 2px;
}
&.clickable {
opacity: 0.75;
border-width: 2px;

105
src/components/status.jsx
View file

@ -1265,34 +1265,72 @@ function Status({
</button>
)}
{!!mediaAttachments.length && (
<div
ref={mediaContainerRef}
class={`media-container media-eq${mediaAttachments.length} ${
mediaAttachments.length > 2 ? 'media-gt2' : ''
} ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
<MultipleMediaFigure
lang={language}
enabled={
mediaAttachments.length > 1 &&
mediaAttachments.some((media) => !!media.description)
}
captionChildren={() => {
return mediaAttachments.map(
(media, i) =>
!!media.description && (
<div
key={media.id}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
states.showMediaAlt = {
alt: media.description,
lang: language,
};
}}
title={
media.description
? `Media ${i + 1}: ${media.description}`
: undefined
}
>
<sup>{i + 1}</sup> {media.description}
</div>
),
);
}}
>
{mediaAttachments
.slice(0, isSizeLarge ? undefined : 4)
.map((media, i) => (
<Media
key={media.id}
media={media}
autoAnimate={isSizeLarge}
showCaption={mediaAttachments.length === 1}
lang={language}
to={`/${instance}/s/${id}?${
withinContext ? 'media' : 'media-only'
}=${i + 1}`}
onClick={
onMediaClick
? (e) => {
onMediaClick(e, i, media, status);
}
: undefined
}
/>
))}
</div>
<div
ref={mediaContainerRef}
class={`media-container media-eq${mediaAttachments.length} ${
mediaAttachments.length > 2 ? 'media-gt2' : ''
} ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
>
{mediaAttachments
.slice(0, isSizeLarge ? undefined : 4)
.map((media, i) => (
<Media
key={media.id}
media={media}
autoAnimate={isSizeLarge}
showCaption={mediaAttachments.length === 1}
lang={language}
altIndex={
mediaAttachments.length > 1 &&
!!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?.url !== status.url &&
@ -1489,6 +1527,19 @@ function Status({
);
}
function MultipleMediaFigure(props) {
const { enabled, children, lang, captionChildren } = props;
if (!enabled || !captionChildren) return children;
return (
<figure class="media-figure-multiple">
{children}
<figcaption lang={lang} dir="auto">
{captionChildren?.()}
</figcaption>
</figure>
);
}
function Card({ card, instance }) {
const snapStates = useSnapshot(states);
const {