diff --git a/src/pages/catchup.jsx b/src/pages/catchup.jsx index e3ae25ec..0e2e1e4b 100644 --- a/src/pages/catchup.jsx +++ b/src/pages/catchup.jsx @@ -22,6 +22,7 @@ import db from '../utils/db'; import emojifyText from '../utils/emojify-text'; import { isFiltered } from '../utils/filters'; import getHTMLText from '../utils/getHTMLText'; +import htmlContentLength from '../utils/html-content-length'; import niceDateTime from '../utils/nice-date-time'; import shortenNumber from '../utils/shorten-number'; import showToast from '../utils/show-toast'; @@ -423,10 +424,19 @@ function Catchup() { if (sortBy !== 'createdAt') { a = a.reblog || a; b = b.reblog || b; - if (a[sortBy] === b[sortBy]) { + if (sortBy !== 'density' && a[sortBy] === b[sortBy]) { return a.createdAt > b.createdAt ? 1 : -1; } } + if (sortBy === 'density') { + const aDensity = postDensity(a); + const bDensity = postDensity(b); + if (sortOrder === 'asc') { + return aDensity > bDensity ? 1 : -1; + } else { + return bDensity > aDensity ? 1 : -1; + } + } if (sortOrder === 'asc') { return a[sortBy] > b[sortBy] ? 1 : -1; } else { @@ -489,6 +499,7 @@ function Catchup() { repliesCount: ['fewest replies', 'most replies'], favouritesCount: ['fewest likes', 'most likes'], reblogsCount: ['fewest boosts', 'most boosts'], + density: ['least dense', 'most dense'], }; const groupByText = { account: 'authors', @@ -994,6 +1005,7 @@ function Catchup() { 'repliesCount', 'favouritesCount', 'reblogsCount', + 'density', // 'account', ].map((key) => ( @@ -1241,6 +1253,25 @@ const IntersectionPostLine = ({ root, ...props }) => { ); }; +// A media speak a thousand words +const MEDIA_DENSITY = 8; +const CARD_DENSITY = 8; +function postDensity(post) { + const { spoilerText, content, poll, mediaAttachments, card } = post; + const pollContent = poll?.options?.length + ? poll.options.reduce((acc, cur) => acc + cur.title, '') + : ''; + const density = + (spoilerText.length + htmlContentLength(content) + pollContent.length) / + 140 + + (mediaAttachments?.length + ? MEDIA_DENSITY * mediaAttachments.length + : card?.image + ? CARD_DENSITY + : 0); + return density; +} + const MEDIA_SIZE = 48; function PostPeek({ post, filterInfo }) {