Collapse message bubbles when applicable

This commit is contained in:
Evan Hahn 2022-03-08 08:32:42 -06:00 committed by GitHub
parent 16cd115530
commit c527de0a8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 707 additions and 383 deletions

View file

@ -1,7 +1,64 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { TimelineItemType } from '../components/conversation/TimelineItem';
import { WidthBreakpoint } from '../components/_util';
import { MINUTE } from './durations';
import { isSameDay } from './timestamp';
const COLLAPSE_WITHIN = 3 * MINUTE;
export enum UnreadIndicatorPlacement {
JustAbove,
JustBelow,
}
type MessageTimelineItemDataType = Readonly<{
author: { id: string };
reactions?: ReadonlyArray<unknown>;
timestamp: number;
}>;
// This lets us avoid passing a full `MessageType`. That's useful for tests and for
// documentation.
type MaybeMessageTimelineItemType = Readonly<
| undefined
| TimelineItemType
| { type: 'message'; data: MessageTimelineItemDataType }
>;
const getMessageTimelineItemData = (
timelineItem: MaybeMessageTimelineItemType
): undefined | MessageTimelineItemDataType =>
timelineItem?.type === 'message' ? timelineItem.data : undefined;
export function areMessagesInSameGroup(
olderTimelineItem: MaybeMessageTimelineItemType,
unreadIndicator: boolean,
newerTimelineItem: MaybeMessageTimelineItemType
): boolean {
if (unreadIndicator) {
return false;
}
const olderMessage = getMessageTimelineItemData(olderTimelineItem);
if (!olderMessage) {
return false;
}
const newerMessage = getMessageTimelineItemData(newerTimelineItem);
if (!newerMessage) {
return false;
}
return Boolean(
!olderMessage.reactions?.length &&
olderMessage.author.id === newerMessage.author.id &&
newerMessage.timestamp >= olderMessage.timestamp &&
newerMessage.timestamp - olderMessage.timestamp < COLLAPSE_WITHIN &&
isSameDay(olderMessage.timestamp, newerMessage.timestamp)
);
}
export function getWidthBreakpoint(width: number): WidthBreakpoint {
if (width > 606) {