Collapse message bubbles when applicable
This commit is contained in:
parent
16cd115530
commit
c527de0a8d
19 changed files with 707 additions and 383 deletions
|
@ -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) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue