this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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
··· 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}?${