load threads in My Threads menu
This commit is contained in:
Ajay Bura
481
src/app/features/room/threads-menu/ThreadsTimeline.tsx
Normal file
481
src/app/features/room/threads-menu/ThreadsTimeline.tsx
Normal file
@@ -0,0 +1,481 @@
|
||||
/* eslint-disable react/destructuring-assignment */
|
||||
import React, { MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Direction, EventTimeline, MatrixEvent, Room } from 'matrix-js-sdk';
|
||||
import { Avatar, Box, Chip, config, Icon, Icons, Scroll, Text } from 'folds';
|
||||
import { Opts as LinkifyOpts } from 'linkifyjs';
|
||||
import { HTMLReactParserOptions } from 'html-react-parser';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { SequenceCard } from '../../../components/sequence-card';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
import {
|
||||
AvatarBase,
|
||||
ImageContent,
|
||||
MessageNotDecryptedContent,
|
||||
MessageUnsupportedContent,
|
||||
ModernLayout,
|
||||
MSticker,
|
||||
RedactedContent,
|
||||
Reply,
|
||||
Time,
|
||||
Username,
|
||||
UsernameBold,
|
||||
} from '../../../components/message';
|
||||
import { UserAvatar } from '../../../components/user-avatar';
|
||||
import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import {
|
||||
getEditedEvent,
|
||||
getEventThreadDetail,
|
||||
getMemberAvatarMxc,
|
||||
getMemberDisplayName,
|
||||
} from '../../../utils/room';
|
||||
import { GetContentCallback, MessageEvent } from '../../../../types/matrix/room';
|
||||
import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
|
||||
import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
|
||||
import {
|
||||
factoryRenderLinkifyWithMention,
|
||||
getReactCustomHtmlParser,
|
||||
LINKIFY_OPTS,
|
||||
makeMentionCustomProps,
|
||||
renderMatrixMention,
|
||||
} from '../../../plugins/react-custom-html-parser';
|
||||
import { RenderMatrixEvent, useMatrixEventRenderer } from '../../../hooks/useMatrixEventRenderer';
|
||||
import { RenderMessageContent } from '../../../components/RenderMessageContent';
|
||||
import { useSetting } from '../../../state/hooks/settings';
|
||||
import { settingsAtom } from '../../../state/settings';
|
||||
import * as customHtmlCss from '../../../styles/CustomHtml.css';
|
||||
import { EncryptedContent } from '../message';
|
||||
import { Image } from '../../../components/media';
|
||||
import { ImageViewer } from '../../../components/image-viewer';
|
||||
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
|
||||
import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
|
||||
import { usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
|
||||
import { useTheme } from '../../../hooks/useTheme';
|
||||
import { PowerIcon } from '../../../components/power';
|
||||
import colorMXID from '../../../../util/colorMXID';
|
||||
import { useIsDirectRoom, useRoom } from '../../../hooks/useRoom';
|
||||
import { useRoomCreators } from '../../../hooks/useRoomCreators';
|
||||
import {
|
||||
GetMemberPowerTag,
|
||||
getPowerTagIconSrc,
|
||||
useAccessiblePowerTagColors,
|
||||
useGetMemberPowerTag,
|
||||
} from '../../../hooks/useMemberPowerTag';
|
||||
import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
|
||||
import { ThreadSelector, ThreadSelectorContainer } from '../message/thread-selector';
|
||||
import {
|
||||
getTimelineAndBaseIndex,
|
||||
getTimelineEvent,
|
||||
getTimelineRelativeIndex,
|
||||
getTimelinesEventsCount,
|
||||
} from '../utils';
|
||||
import { ThreadsLoading } from './ThreadsLoading';
|
||||
import { VirtualTile } from '../../../components/virtualizer';
|
||||
import { useAlive } from '../../../hooks/useAlive';
|
||||
import * as css from './ThreadsMenu.css';
|
||||
|
||||
type ThreadMessageProps = {
|
||||
room: Room;
|
||||
event: MatrixEvent;
|
||||
renderContent: RenderMatrixEvent<[MatrixEvent, string, GetContentCallback]>;
|
||||
onOpen: (roomId: string, eventId: string) => void;
|
||||
getMemberPowerTag: GetMemberPowerTag;
|
||||
accessibleTagColors: Map<string, string>;
|
||||
legacyUsernameColor: boolean;
|
||||
hour24Clock: boolean;
|
||||
dateFormatString: string;
|
||||
};
|
||||
function ThreadMessage({
|
||||
room,
|
||||
event,
|
||||
renderContent,
|
||||
onOpen,
|
||||
getMemberPowerTag,
|
||||
accessibleTagColors,
|
||||
legacyUsernameColor,
|
||||
hour24Clock,
|
||||
dateFormatString,
|
||||
}: ThreadMessageProps) {
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const mx = useMatrixClient();
|
||||
|
||||
const handleOpenClick: MouseEventHandler = (evt) => {
|
||||
evt.stopPropagation();
|
||||
const evtId = evt.currentTarget.getAttribute('data-event-id');
|
||||
if (!evtId) return;
|
||||
onOpen(room.roomId, evtId);
|
||||
};
|
||||
|
||||
const renderOptions = () => (
|
||||
<Box shrink="No" gap="200" alignItems="Center">
|
||||
<Chip
|
||||
data-event-id={event.getId()}
|
||||
onClick={handleOpenClick}
|
||||
variant="Secondary"
|
||||
radii="Pill"
|
||||
>
|
||||
<Text size="T200">Open</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
);
|
||||
|
||||
const sender = event.getSender()!;
|
||||
const displayName = getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender) ?? sender;
|
||||
const senderAvatarMxc = getMemberAvatarMxc(room, sender);
|
||||
const getContent = (() => event.getContent()) as GetContentCallback;
|
||||
|
||||
const memberPowerTag = getMemberPowerTag(sender);
|
||||
const tagColor = memberPowerTag?.color
|
||||
? accessibleTagColors?.get(memberPowerTag.color)
|
||||
: undefined;
|
||||
const tagIconSrc = memberPowerTag?.icon
|
||||
? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
|
||||
: undefined;
|
||||
|
||||
const usernameColor = legacyUsernameColor ? colorMXID(sender) : tagColor;
|
||||
|
||||
return (
|
||||
<ModernLayout
|
||||
before={
|
||||
<AvatarBase>
|
||||
<Avatar size="300">
|
||||
<UserAvatar
|
||||
userId={sender}
|
||||
src={
|
||||
senderAvatarMxc
|
||||
? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ??
|
||||
undefined
|
||||
: undefined
|
||||
}
|
||||
alt={displayName}
|
||||
renderFallback={() => <Icon size="200" src={Icons.User} filled />}
|
||||
/>
|
||||
</Avatar>
|
||||
</AvatarBase>
|
||||
}
|
||||
>
|
||||
<Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
|
||||
<Box gap="200" alignItems="Baseline">
|
||||
<Box alignItems="Center" gap="200">
|
||||
<Username style={{ color: usernameColor }}>
|
||||
<Text as="span" truncate>
|
||||
<UsernameBold>{displayName}</UsernameBold>
|
||||
</Text>
|
||||
</Username>
|
||||
{tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
|
||||
</Box>
|
||||
<Time ts={event.getTs()} hour24Clock={hour24Clock} dateFormatString={dateFormatString} />
|
||||
</Box>
|
||||
{renderOptions()}
|
||||
</Box>
|
||||
{event.replyEventId && (
|
||||
<Reply
|
||||
room={room}
|
||||
replyEventId={event.replyEventId}
|
||||
threadRootId={event.threadRootId}
|
||||
onClick={handleOpenClick}
|
||||
getMemberPowerTag={getMemberPowerTag}
|
||||
accessibleTagColors={accessibleTagColors}
|
||||
legacyUsernameColor={legacyUsernameColor}
|
||||
/>
|
||||
)}
|
||||
{renderContent(event.getType(), false, event, displayName, getContent)}
|
||||
</ModernLayout>
|
||||
);
|
||||
}
|
||||
|
||||
type ThreadsTimelineProps = {
|
||||
timelines: EventTimeline[];
|
||||
requestClose: () => void;
|
||||
};
|
||||
export function ThreadsTimeline({ timelines, requestClose }: ThreadsTimelineProps) {
|
||||
const mx = useMatrixClient();
|
||||
const { navigateRoom } = useRoomNavigate();
|
||||
const alive = useAlive();
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const room = useRoom();
|
||||
const powerLevels = usePowerLevelsContext();
|
||||
const creators = useRoomCreators(room);
|
||||
|
||||
const creatorsTag = useRoomCreatorsTag();
|
||||
const powerLevelTags = usePowerLevelTags(room, powerLevels);
|
||||
const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
|
||||
|
||||
const theme = useTheme();
|
||||
const accessibleTagColors = useAccessiblePowerTagColors(theme.kind, creatorsTag, powerLevelTags);
|
||||
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
|
||||
const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
|
||||
|
||||
const direct = useIsDirectRoom();
|
||||
const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
|
||||
|
||||
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
|
||||
const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
|
||||
|
||||
const mentionClickHandler = useMentionClickHandler(room.roomId);
|
||||
const spoilerClickHandler = useSpoilerClickHandler();
|
||||
|
||||
const linkifyOpts = useMemo<LinkifyOpts>(
|
||||
() => ({
|
||||
...LINKIFY_OPTS,
|
||||
render: factoryRenderLinkifyWithMention((href) =>
|
||||
renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
|
||||
),
|
||||
}),
|
||||
[mx, room, mentionClickHandler]
|
||||
);
|
||||
const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
|
||||
() =>
|
||||
getReactCustomHtmlParser(mx, room.roomId, {
|
||||
linkifyOpts,
|
||||
useAuthentication,
|
||||
handleSpoilerClick: spoilerClickHandler,
|
||||
handleMentionClick: mentionClickHandler,
|
||||
}),
|
||||
[mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication]
|
||||
);
|
||||
|
||||
const renderMatrixEvent = useMatrixEventRenderer<[MatrixEvent, string, GetContentCallback]>(
|
||||
{
|
||||
[MessageEvent.RoomMessage]: (event, displayName, getContent) => {
|
||||
if (event.isRedacted()) {
|
||||
return <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />;
|
||||
}
|
||||
|
||||
const threadDetail = getEventThreadDetail(event);
|
||||
|
||||
return (
|
||||
<>
|
||||
<RenderMessageContent
|
||||
displayName={displayName}
|
||||
msgType={event.getContent().msgtype ?? ''}
|
||||
ts={event.getTs()}
|
||||
getContent={getContent}
|
||||
edited={!!event.replacingEvent()}
|
||||
mediaAutoLoad={mediaAutoLoad}
|
||||
urlPreview={urlPreview}
|
||||
htmlReactParserOptions={htmlReactParserOptions}
|
||||
linkifyOpts={linkifyOpts}
|
||||
outlineAttachment
|
||||
/>
|
||||
{threadDetail && (
|
||||
<ThreadSelectorContainer>
|
||||
<ThreadSelector
|
||||
room={room}
|
||||
threadDetail={threadDetail}
|
||||
outlined
|
||||
hour24Clock={hour24Clock}
|
||||
dateFormatString={dateFormatString}
|
||||
/>
|
||||
</ThreadSelectorContainer>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
[MessageEvent.RoomMessageEncrypted]: (mEvent, displayName) => {
|
||||
const eventId = mEvent.getId()!;
|
||||
const evtTimeline = room.getTimelineForEvent(eventId);
|
||||
|
||||
return (
|
||||
<EncryptedContent mEvent={mEvent}>
|
||||
{() => {
|
||||
if (mEvent.isRedacted()) return <RedactedContent />;
|
||||
if (mEvent.getType() === MessageEvent.Sticker)
|
||||
return (
|
||||
<MSticker
|
||||
content={mEvent.getContent()}
|
||||
renderImageContent={(props) => (
|
||||
<ImageContent
|
||||
{...props}
|
||||
autoPlay={mediaAutoLoad}
|
||||
renderImage={(p) => <Image {...p} loading="lazy" />}
|
||||
renderViewer={(p) => <ImageViewer {...p} />}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
if (mEvent.getType() === MessageEvent.RoomMessage) {
|
||||
const editedEvent =
|
||||
evtTimeline && getEditedEvent(eventId, mEvent, evtTimeline.getTimelineSet());
|
||||
const getContent = (() =>
|
||||
editedEvent?.getContent()['m.new_content'] ??
|
||||
mEvent.getContent()) as GetContentCallback;
|
||||
|
||||
return (
|
||||
<RenderMessageContent
|
||||
displayName={displayName}
|
||||
msgType={mEvent.getContent().msgtype ?? ''}
|
||||
ts={mEvent.getTs()}
|
||||
edited={!!editedEvent || !!mEvent.replacingEvent()}
|
||||
getContent={getContent}
|
||||
mediaAutoLoad={mediaAutoLoad}
|
||||
urlPreview={urlPreview}
|
||||
htmlReactParserOptions={htmlReactParserOptions}
|
||||
linkifyOpts={linkifyOpts}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (mEvent.getType() === MessageEvent.RoomMessageEncrypted)
|
||||
return (
|
||||
<Text>
|
||||
<MessageNotDecryptedContent />
|
||||
</Text>
|
||||
);
|
||||
return (
|
||||
<Text>
|
||||
<MessageUnsupportedContent />
|
||||
</Text>
|
||||
);
|
||||
}}
|
||||
</EncryptedContent>
|
||||
);
|
||||
},
|
||||
[MessageEvent.Sticker]: (event, displayName, getContent) => {
|
||||
if (event.isRedacted()) {
|
||||
return <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />;
|
||||
}
|
||||
|
||||
const threadDetail = getEventThreadDetail(event);
|
||||
|
||||
return (
|
||||
<>
|
||||
<MSticker
|
||||
content={getContent()}
|
||||
renderImageContent={(props) => (
|
||||
<ImageContent
|
||||
{...props}
|
||||
autoPlay={mediaAutoLoad}
|
||||
renderImage={(p) => <Image {...p} loading="lazy" />}
|
||||
renderViewer={(p) => <ImageViewer {...p} />}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{threadDetail && (
|
||||
<ThreadSelectorContainer>
|
||||
<ThreadSelector
|
||||
room={room}
|
||||
threadDetail={threadDetail}
|
||||
outlined
|
||||
hour24Clock={hour24Clock}
|
||||
dateFormatString={dateFormatString}
|
||||
/>
|
||||
</ThreadSelectorContainer>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
undefined,
|
||||
(event) => {
|
||||
if (event.isRedacted()) {
|
||||
return <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />;
|
||||
}
|
||||
return (
|
||||
<Box grow="Yes" direction="Column">
|
||||
<Text size="T400" priority="300">
|
||||
<code className={customHtmlCss.Code}>{event.getType()}</code>
|
||||
{' event'}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
const handleOpen = (roomId: string, eventId: string) => {
|
||||
navigateRoom(roomId, eventId);
|
||||
requestClose();
|
||||
};
|
||||
|
||||
const eventsLength = getTimelinesEventsCount(timelines);
|
||||
const timelineToPaginate = timelines[timelines.length - 1];
|
||||
const [paginationToken, setPaginationToken] = useState(
|
||||
timelineToPaginate.getPaginationToken(Direction.Backward)
|
||||
);
|
||||
|
||||
const virtualizer = useVirtualizer({
|
||||
count: eventsLength,
|
||||
getScrollElement: () => scrollRef.current,
|
||||
estimateSize: () => 122,
|
||||
overscan: 10,
|
||||
});
|
||||
const vItems = virtualizer.getVirtualItems();
|
||||
|
||||
const paginate = useCallback(async () => {
|
||||
const moreToLoad = await mx.paginateEventTimeline(timelineToPaginate, {
|
||||
backwards: true,
|
||||
limit: 30,
|
||||
});
|
||||
|
||||
if (alive()) {
|
||||
setPaginationToken(
|
||||
moreToLoad ? timelineToPaginate.getPaginationToken(Direction.Backward) : null
|
||||
);
|
||||
}
|
||||
}, [mx, alive, timelineToPaginate]);
|
||||
|
||||
// auto paginate when scroll reach bottom
|
||||
useEffect(() => {
|
||||
const lastVItem = vItems.length > 0 ? vItems[vItems.length - 1] : undefined;
|
||||
if (paginationToken && lastVItem && lastVItem.index === eventsLength - 1) {
|
||||
paginate();
|
||||
}
|
||||
}, [vItems, paginationToken, eventsLength, paginate]);
|
||||
|
||||
return (
|
||||
<Scroll ref={scrollRef} size="300" hideTrack visibility="Hover">
|
||||
<Box className={css.ThreadsMenuContent} direction="Column" gap="100">
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
height: virtualizer.getTotalSize(),
|
||||
}}
|
||||
>
|
||||
{vItems.map((vItem) => {
|
||||
const reverseTimelineIndex = eventsLength - vItem.index - 1;
|
||||
|
||||
const [timeline, baseIndex] = getTimelineAndBaseIndex(timelines, reverseTimelineIndex);
|
||||
if (!timeline) return null;
|
||||
const event = getTimelineEvent(
|
||||
timeline,
|
||||
getTimelineRelativeIndex(reverseTimelineIndex, baseIndex)
|
||||
);
|
||||
|
||||
if (!event?.getId()) return null;
|
||||
|
||||
return (
|
||||
<VirtualTile
|
||||
virtualItem={vItem}
|
||||
style={{ paddingBottom: config.space.S200 }}
|
||||
ref={virtualizer.measureElement}
|
||||
key={vItem.index}
|
||||
>
|
||||
<SequenceCard
|
||||
key={event.getId()}
|
||||
style={{ padding: config.space.S400, borderRadius: config.radii.R300 }}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
>
|
||||
<ThreadMessage
|
||||
room={room}
|
||||
event={event}
|
||||
renderContent={renderMatrixEvent}
|
||||
onOpen={handleOpen}
|
||||
getMemberPowerTag={getMemberPowerTag}
|
||||
accessibleTagColors={accessibleTagColors}
|
||||
legacyUsernameColor={legacyUsernameColor || direct}
|
||||
hour24Clock={hour24Clock}
|
||||
dateFormatString={dateFormatString}
|
||||
/>
|
||||
</SequenceCard>
|
||||
</VirtualTile>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{paginationToken && <ThreadsLoading />}
|
||||
</Box>
|
||||
</Scroll>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user