Skip to content

Commit

Permalink
Show message type prefix in thread reply preview
Browse files Browse the repository at this point in the history 
Signed-off-by: Michael Telatynski <[email protected]>
  • Loading branch information
@t3chguy
t3chguy committed Nov 1, 2024
1 parent 5f9181e commit f2f18b8
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 38 deletions.
65 changes: 55 additions & 10 deletions src/components/views/rooms/EventPreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,15 @@
* Please see LICENSE files in the repository root for full details.
*/

import React, { HTMLProps, JSX, useMemo } from "react";
import { M_POLL_START, MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
import React, { HTMLProps, JSX, useContext, useState } from "react";
import { IContent, M_POLL_START, MatrixEvent, MatrixEventEvent, MsgType } from "matrix-js-sdk/src/matrix";
import classNames from "classnames";

import { _t } from "../../../languageHandler";
import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { useTypedEventEmitter } from "../../../hooks/useEventEmitter.ts";

/**
* The props for the {@link EventPreview} component.
Expand All @@ -25,16 +28,39 @@ interface Props extends HTMLProps<HTMLSpanElement> {

/**
* A component that displays a preview for the pinned event.
* Wraps both `useEventPreview` & `EventPreviewTile`.
*/
function EventPreview({ mxEvent, className, ...props }: Props): JSX.Element | null {
const preview = useEventPreview(mxEvent);
if (!preview) return null;

return <EventPreviewTile {...props} preview={preview} className={className} />;
}

export default EventPreview;

/**
* The props for the {@link EventPreviewTile} component.
*/
interface EventPreviewTileProps extends HTMLProps<HTMLSpanElement> {
/**
* The preview to display
*/
preview: Preview;
}

/**
* A component that displays a preview given the output from `useEventPreview`.
*/
export function EventPreviewTile({
preview: [preview, prefix],
className,
...props
}: EventPreviewTileProps): JSX.Element | null {
const classes = classNames("mx_EventPreview", className);
const prefix = getPreviewPrefix(mxEvent.getType(), mxEvent.getContent().msgtype as MsgType);
if (!prefix)
return (
<span {...props} className={classes}>
<span {...props} className={classes} title={preview}>
{preview}
</span>
);
Expand All @@ -55,17 +81,36 @@ function EventPreview({ mxEvent, className, ...props }: Props): JSX.Element | nu
);
}

export default EventPreview;
type Preview = [preview: string, prefix: string | null];

/**
* Hooks to generate a preview for the event.
* @param mxEvent
*/
function useEventPreview(mxEvent: MatrixEvent | null): string | null {
return useMemo(() => {
if (!mxEvent || mxEvent.isRedacted() || mxEvent.isDecryptionFailure()) return null;
return MessagePreviewStore.instance.generatePreviewForEvent(mxEvent);
}, [mxEvent]);
export function useEventPreview(mxEvent: MatrixEvent | undefined): Preview | null {
const cli = useContext(MatrixClientContext);
// track the content as a means to regenerate the preview upon edits & decryption
const [content, setContent] = useState<IContent | undefined>(mxEvent?.getContent());
useTypedEventEmitter(mxEvent ?? undefined, MatrixEventEvent.Replaced, () => {
setContent(mxEvent!.getContent());
});
const awaitDecryption = mxEvent?.shouldAttemptDecryption() || mxEvent?.isBeingDecrypted();
useTypedEventEmitter(awaitDecryption ? (mxEvent ?? undefined) : undefined, MatrixEventEvent.Decrypted, () => {
setContent(mxEvent!.getContent());
});

return useAsyncMemo(
async () => {
if (!mxEvent || mxEvent.isRedacted() || mxEvent.isDecryptionFailure()) return null;
await cli.decryptEventIfNeeded(mxEvent);
return [
MessagePreviewStore.instance.generatePreviewForEvent(mxEvent),
getPreviewPrefix(mxEvent.getType(), content?.msgtype as MsgType),
];
},
[mxEvent, content],
null,
);
}

/**
Expand Down
35 changes: 7 additions & 28 deletions src/components/views/rooms/ThreadSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,24 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/

import React, { useContext, useState } from "react";
import { Thread, ThreadEvent, IContent, MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
import React, { useContext } from "react";
import { Thread, ThreadEvent, MatrixEvent } from "matrix-js-sdk/src/matrix";
import { IndicatorIcon } from "@vector-im/compound-web";
import ThreadIconSolid from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";

import { _t } from "../../../languageHandler";
import { CardContext } from "../right_panel/context";
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
import PosthogTrackers from "../../../PosthogTrackers";
import { useTypedEventEmitter, useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
import RoomContext from "../../../contexts/RoomContext";
import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
import MemberAvatar from "../avatars/MemberAvatar";
import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { Action } from "../../../dispatcher/actions";
import { ShowThreadPayload } from "../../../dispatcher/payloads/ShowThreadPayload";
import defaultDispatcher from "../../../dispatcher/dispatcher";
import { useUnreadNotifications } from "../../../hooks/useUnreadNotifications";
import { notificationLevelToIndicator } from "../../../utils/notifications";
import { EventPreviewTile, useEventPreview } from "./EventPreview.tsx";

interface IProps {
mxEvent: MatrixEvent;
Expand Down Expand Up @@ -75,24 +73,9 @@ interface IPreviewProps {
}

export const ThreadMessagePreview: React.FC<IPreviewProps> = ({ thread, showDisplayname = false }) => {
const cli = useContext(MatrixClientContext);

const lastReply = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.replyToEvent) ?? undefined;
// track the content as a means to regenerate the thread message preview upon edits & decryption
const [content, setContent] = useState<IContent | undefined>(lastReply?.getContent());
useTypedEventEmitter(lastReply, MatrixEventEvent.Replaced, () => {
setContent(lastReply!.getContent());
});
const awaitDecryption = lastReply?.shouldAttemptDecryption() || lastReply?.isBeingDecrypted();
useTypedEventEmitter(awaitDecryption ? lastReply : undefined, MatrixEventEvent.Decrypted, () => {
setContent(lastReply!.getContent());
});
const preview = useEventPreview(lastReply);

const preview = useAsyncMemo(async (): Promise<string | undefined> => {
if (!lastReply) return;
await cli.decryptEventIfNeeded(lastReply);
return MessagePreviewStore.instance.generatePreviewForEvent(lastReply);
}, [lastReply, content]);
if (!preview || !lastReply) {
return null;
}
Expand All @@ -114,14 +97,10 @@ export const ThreadMessagePreview: React.FC<IPreviewProps> = ({ thread, showDisp
className="mx_ThreadSummary_content mx_DecryptionFailureBody"
title={_t("timeline|decryption_failure|unable_to_decrypt")}
>
<span className="mx_ThreadSummary_message-preview">
{_t("timeline|decryption_failure|unable_to_decrypt")}
</span>
{_t("timeline|decryption_failure|unable_to_decrypt")}
</div>
) : (
<div className="mx_ThreadSummary_content" title={preview}>
<span className="mx_ThreadSummary_message-preview">{preview}</span>
</div>
<EventPreviewTile preview={preview} className="mx_ThreadSummary_content" />
)}
</>
);
Expand Down

0 comments on commit f2f18b8

Please sign in to comment.