this repo has no description
Sort by density
+37
-6
+37
-6
src/pages/catchup.jsx
+37
-6
src/pages/catchup.jsx
···
22
22
import emojifyText from '../utils/emojify-text';
23
23
import { isFiltered } from '../utils/filters';
24
24
import getHTMLText from '../utils/getHTMLText';
25
+
import htmlContentLength from '../utils/html-content-length';
25
26
import niceDateTime from '../utils/nice-date-time';
26
27
import shortenNumber from '../utils/shorten-number';
27
28
import showToast from '../utils/show-toast';
···
423
424
if (sortBy !== 'createdAt') {
424
425
a = a.reblog || a;
425
426
b = b.reblog || b;
426
-
if (a[sortBy] === b[sortBy]) {
427
+
if (sortBy !== 'density' && a[sortBy] === b[sortBy]) {
427
428
return a.createdAt > b.createdAt ? 1 : -1;
429
+
}
430
+
}
431
+
if (sortBy === 'density') {
432
+
const aDensity = postDensity(a);
433
+
const bDensity = postDensity(b);
434
+
if (sortOrder === 'asc') {
435
+
return aDensity > bDensity ? 1 : -1;
436
+
} else {
437
+
return bDensity > aDensity ? 1 : -1;
428
438
}
429
439
}
430
440
if (sortOrder === 'asc') {
···
489
499
repliesCount: ['fewest replies', 'most replies'],
490
500
favouritesCount: ['fewest likes', 'most likes'],
491
501
reblogsCount: ['fewest boosts', 'most boosts'],
502
+
density: ['least dense', 'most dense'],
492
503
};
493
504
const groupByText = {
494
505
account: 'authors',
···
994
1005
'repliesCount',
995
1006
'favouritesCount',
996
1007
'reblogsCount',
1008
+
'density',
997
1009
// 'account',
998
1010
].map((key) => (
999
1011
<label class="filter-sort" key={key}>
···
1003
1015
checked={sortBy === key}
1004
1016
onChange={() => {
1005
1017
setSortBy(key);
1006
-
const order = /(replies|favourites|reblogs)/.test(
1007
-
key,
1008
-
)
1009
-
? 'desc'
1010
-
: 'asc';
1018
+
const order =
1019
+
/(replies|favourites|reblogs|density)/.test(key)
1020
+
? 'desc'
1021
+
: 'asc';
1011
1022
setSortOrder(order);
1012
1023
}}
1013
1024
// disabled={key === 'account' && selectedAuthor}
···
1018
1029
repliesCount: 'Replies',
1019
1030
favouritesCount: 'Likes',
1020
1031
reblogsCount: 'Boosts',
1032
+
density: 'Density',
1021
1033
}[key]
1022
1034
}
1023
1035
</label>
···
1240
1252
<div ref={ref} style={{ height: '4em' }} />
1241
1253
);
1242
1254
};
1255
+
1256
+
// A media speak a thousand words
1257
+
const MEDIA_DENSITY = 8;
1258
+
const CARD_DENSITY = 8;
1259
+
function postDensity(post) {
1260
+
const { spoilerText, content, poll, mediaAttachments, card } = post;
1261
+
const pollContent = poll?.options?.length
1262
+
? poll.options.reduce((acc, cur) => acc + cur.title, '')
1263
+
: '';
1264
+
const density =
1265
+
(spoilerText.length + htmlContentLength(content) + pollContent.length) /
1266
+
140 +
1267
+
(mediaAttachments?.length
1268
+
? MEDIA_DENSITY * mediaAttachments.length
1269
+
: card?.image
1270
+
? CARD_DENSITY
1271
+
: 0);
1272
+
return density;
1273
+
}
1243
1274
1244
1275
const MEDIA_SIZE = 48;
1245
1276