Little adjustments, show more captions

This commit is contained in:
Lim Chee Aun 2023-10-01 13:18:31 +08:00
parent 6a16b25722
commit 359fd92ae0
3 changed files with 163 additions and 133 deletions

View file

@ -59,6 +59,7 @@ function Media({
lang,
showOriginal,
autoAnimate,
showCaption,
onClick = () => {},
}) {
const {
@ -169,6 +170,48 @@ function Media({
aspectRatio: `${width} / ${height}`,
};
const multilineDesc =
!!description && description.trim().split('\n').length > 2;
const longDesc = description?.length > MEDIA_CAPTION_LIMIT || multilineDesc;
const showInlineDesc =
!!showCaption &&
!showOriginal &&
!!description &&
!longDesc &&
!multilineDesc;
const Figure = !showInlineDesc
? Fragment
: (props) => {
const { children, ...restProps } = props;
return (
<figure {...restProps}>
{children}
<figcaption
class={`media-caption media-caption-${
longDesc ? 'long' : 'short'
}`}
lang={lang}
dir="auto"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
states.showMediaAlt = {
alt: description,
lang,
};
}}
title={
description.length > MEDIA_CAPTION_LIMIT
? description
: undefined
}
>
{description}
</figcaption>
</figure>
);
};
if (isImage) {
// Note: type: unknown might not have width/height
quickPinchZoomProps.containerProps.style.display = 'inherit';
@ -187,12 +230,13 @@ function Media({
}, [mediaURL]);
return (
<Figure>
<Parent
ref={parentRef}
class={`media media-image`}
onClick={onClick}
data-orientation={orientation}
data-has-alt={!!description || undefined}
data-has-alt={!showInlineDesc}
style={
showOriginal
? {
@ -232,7 +276,7 @@ function Media({
<>
<img
src={mediaURL}
alt={description}
alt={showInlineDesc ? '' : description}
width={width}
height={height}
data-orientation={orientation}
@ -260,10 +304,11 @@ function Media({
}
}}
/>
<AltBadge alt={description} lang={lang} />
{!showInlineDesc && <AltBadge alt={description} lang={lang} />}
</>
)}
</Parent>
</Figure>
);
} else if (type === 'gifv' || type === 'video' || isVideoMaybe) {
const shortDuration = original.duration < 31;
@ -291,11 +336,8 @@ function Media({
></video>
`;
const showInlineDesc = !showOriginal && !isGIF && !!description;
const Container = showInlineDesc ? 'figure' : Fragment;
return (
<Container>
<Figure>
<Parent
class={`media media-${isGIF ? 'gif' : 'video'} ${
autoGIFAnimate ? 'media-contain' : ''
@ -303,7 +345,7 @@ function Media({
data-orientation={orientation}
data-formatted-duration={formattedDuration}
data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
data-has-alt={!!description || undefined}
data-has-alt={!showInlineDesc}
// style={{
// backgroundColor:
// rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
@ -391,43 +433,23 @@ function Media({
<div class="media-play">
<Icon icon="play" size="xl" />
</div>
{!showInlineDesc && <AltBadge alt={description} lang={lang} />}
</>
)}
{!showOriginal && !showInlineDesc && (
<AltBadge alt={description} lang={lang} />
)}
</Parent>
{showInlineDesc && (
<figcaption
class={`media-caption media-caption-${
description.length <= MEDIA_CAPTION_LIMIT ? 'short' : 'long'
}`}
lang={lang}
dir="auto"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
states.showMediaAlt = {
alt: description,
lang,
};
}}
title={
description.length > MEDIA_CAPTION_LIMIT ? description : undefined
}
>
{description}
</figcaption>
)}
</Container>
</Figure>
);
} else if (type === 'audio') {
const formattedDuration = formatDuration(original.duration);
return (
<Figure>
<Parent
class="media media-audio"
data-formatted-duration={formattedDuration}
data-has-alt={!!description || undefined}
data-has-alt={!showInlineDesc}
onClick={onClick}
style={!showOriginal && mediaStyles}
>
@ -436,7 +458,7 @@ function Media({
) : previewUrl ? (
<img
src={previewUrl}
alt={description}
alt={showInlineDesc ? '' : description}
width={width}
height={height}
data-orientation={orientation}
@ -448,10 +470,11 @@ function Media({
<div class="media-play">
<Icon icon="play" size="xl" />
</div>
<AltBadge alt={description} lang={lang} />
{!showInlineDesc && <AltBadge alt={description} lang={lang} />}
</>
)}
</Parent>
</Figure>
);
}
}

View file

@ -719,6 +719,7 @@
color: var(--text-insignificant-color);
line-height: 1.2;
cursor: pointer;
white-space: pre-line;
&.media-caption-long {
overflow: hidden;
@ -1027,6 +1028,11 @@ body:has(#modal-container .carousel) .status .media img:hover {
z-index: 1;
text-shadow: 0 var(--hairline-width) var(--bg-color);
mix-blend-mode: luminosity;
white-space: pre-line;
&:is(:hover, :focus) {
mix-blend-mode: normal;
}
}
.carousel-item button.media-alt .media-alt-desc {
overflow: hidden;
@ -1684,7 +1690,7 @@ a.card:is(:hover, :focus):visited {
transition: 0.15s ease-out;
transition-property: transform, opacity, mix-blend-mode;
transform: scale(1.15);
opacity: 0.8;
opacity: 0.9;
mix-blend-mode: normal;
}
}

View file

@ -1269,6 +1269,7 @@ function Status({
key={media.id}
media={media}
autoAnimate={isSizeLarge}
showCaption={mediaAttachments.length === 1}
lang={language}
to={`/${instance}/s/${id}?${
withinContext ? 'media' : 'media-only'