this repo has no description
More conditions for show/hide captions
- Remove unused code
- Refactor and memoize the long/short calculation too
+19
-29
+10
-16
src/components/media.jsx
+10
-16
src/components/media.jsx
···
1
1
import { getBlurHashAverageColor } from 'fast-blurhash';
2
+
import mem from 'mem';
2
3
import { Fragment } from 'preact';
3
4
import {
4
5
useCallback,
···
53
54
};
54
55
55
56
const MEDIA_CAPTION_LIMIT = 140;
57
+
export const isMediaCaptionLong = mem((caption) =>
58
+
caption?.length
59
+
? caption.length > MEDIA_CAPTION_LIMIT ||
60
+
/[\n\r].*[\n\r]/.test(caption.trim())
61
+
: false,
62
+
);
56
63
57
64
function Media({
58
65
media,
···
172
179
aspectRatio: `${width} / ${height}`,
173
180
};
174
181
175
-
const multilineDesc =
176
-
!!description && description.trim().split('\n').length > 2;
177
-
const longDesc = description?.length > MEDIA_CAPTION_LIMIT || multilineDesc;
182
+
const longDesc = isMediaCaptionLong(description);
178
183
const showInlineDesc =
179
-
!!showCaption &&
180
-
!showOriginal &&
181
-
!!description &&
182
-
!longDesc &&
183
-
!multilineDesc;
184
+
!!showCaption && !showOriginal && !!description && !longDesc;
184
185
const Figure = !showInlineDesc
185
186
? Fragment
186
187
: (props) => {
···
189
190
<figure {...restProps}>
190
191
{children}
191
192
<figcaption
192
-
class={`media-caption media-caption-${
193
-
longDesc ? 'long' : 'short'
194
-
}`}
193
+
class="media-caption"
195
194
lang={lang}
196
195
dir="auto"
197
196
onClick={(e) => {
···
202
201
lang,
203
202
};
204
203
}}
205
-
title={
206
-
description.length > MEDIA_CAPTION_LIMIT
207
-
? description
208
-
: undefined
209
-
}
210
204
>
211
205
{description}
212
206
</figcaption>
-11
src/components/status.css
-11
src/components/status.css
···
725
725
white-space: pre-line;
726
726
flex-basis: 15em;
727
727
flex-grow: 1;
728
-
729
-
&.media-caption-long {
730
-
overflow: hidden;
731
-
white-space: normal;
732
-
display: -webkit-box;
733
-
display: box;
734
-
-webkit-box-orient: vertical;
735
-
box-orient: vertical;
736
-
-webkit-line-clamp: 3;
737
-
line-clamp: 3;
738
-
}
739
728
}
740
729
}
741
730
+9
-2
src/components/status.jsx
+9
-2
src/components/status.jsx
···
55
55
import Icon from './icon';
56
56
import Link from './link';
57
57
import Media from './media';
58
+
import { isMediaCaptionLong } from './media';
58
59
import MenuLink from './menu-link';
59
60
import RelativeTime from './relative-time';
60
61
import TranslationBlock from './translation-block';
···
1269
1270
lang={language}
1270
1271
enabled={
1271
1272
mediaAttachments.length > 1 &&
1272
-
mediaAttachments.some((media) => !!media.description)
1273
+
mediaAttachments.some(
1274
+
(media) =>
1275
+
!!media.description &&
1276
+
!isMediaCaptionLong(media.description),
1277
+
)
1273
1278
}
1274
1279
captionChildren={() => {
1275
1280
return mediaAttachments.map(
1276
1281
(media, i) =>
1277
-
!!media.description && (
1282
+
!!media.description &&
1283
+
!isMediaCaptionLong(media.description) && (
1278
1284
<div
1279
1285
key={media.id}
1280
1286
onClick={(e) => {
···
1315
1321
altIndex={
1316
1322
mediaAttachments.length > 1 &&
1317
1323
!!media.description &&
1324
+
!isMediaCaptionLong(media.description) &&
1318
1325
i + 1
1319
1326
}
1320
1327
to={`/${instance}/s/${id}?${