Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Include thread replies to message previews
Browse files Browse the repository at this point in the history
  • Loading branch information
weeman1337 committed Apr 17, 2023
1 parent 568ec77 commit d5751eb
Show file tree
Hide file tree
Showing 7 changed files with 559 additions and 138 deletions.
17 changes: 8 additions & 9 deletions res/css/views/rooms/_RoomTile.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,17 @@ limitations under the License.
flex-direction: column;
justify-content: center;

.mx_RoomTile_title,
.mx_RoomTile_subtitle {
width: 100%;
align-items: center;
color: $secondary-content;
display: flex;
gap: $spacing-4;
line-height: $font-18px;
}

/* Ellipsize any text overflow */
text-overflow: ellipsis;
.mx_RoomTile_subtitle_text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Expand All @@ -74,11 +78,6 @@ limitations under the License.
}
}

.mx_RoomTile_subtitle {
line-height: $font-18px;
color: $secondary-content;
}

.mx_RoomTile_titleWithSubtitle {
margin-top: -3px; /* shift the title up a bit more */
}
Expand Down
3 changes: 3 additions & 0 deletions res/img/compound/thread-16px.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 28 additions & 25 deletions src/components/views/rooms/RoomTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { Action } from "../../../dispatcher/actions";
import { _t } from "../../../languageHandler";
import { ChevronFace, ContextMenuTooltipButton, MenuProps } from "../../structures/ContextMenu";
import { DefaultTagID, TagID } from "../../../stores/room-list/models";
import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
import { MessagePreview, MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
import { RoomNotifState } from "../../../RoomNotifs";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
Expand All @@ -44,11 +44,11 @@ import PosthogTrackers from "../../../PosthogTrackers";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { RoomTileCallSummary } from "./RoomTileCallSummary";
import { RoomGeneralContextMenu } from "../context_menus/RoomGeneralContextMenu";
import { CallStore, CallStoreEvent } from "../../../stores/CallStore";
import { SdkContextClass } from "../../../contexts/SDKContext";
import { useHasRoomLiveVoiceBroadcast, VoiceBroadcastRoomSubtitle } from "../../../voice-broadcast";
import { useHasRoomLiveVoiceBroadcast } from "../../../voice-broadcast";
import { RoomTileSubtitle } from "./RoomTileSubtitle";

interface Props {
room: Room;
Expand All @@ -68,7 +68,7 @@ interface State {
notificationsMenuPosition: PartialDOMRect | null;
generalMenuPosition: PartialDOMRect | null;
call: Call | null;
messagePreview?: string;
messagePreview: MessagePreview | null;
}

const messagePreviewId = (roomId: string): string => `mx_RoomTile_messagePreview_${roomId}`;
Expand Down Expand Up @@ -96,7 +96,7 @@ export class RoomTile extends React.PureComponent<ClassProps, State> {
generalMenuPosition: null,
call: CallStore.instance.getCall(this.props.room.roomId),
// generatePreview() will return nothing if the user has previews disabled
messagePreview: "",
messagePreview: null,
};
this.generatePreview();

Expand Down Expand Up @@ -358,6 +358,20 @@ export class RoomTile extends React.PureComponent<ClassProps, State> {
);
}

/**
* RoomTile has a subtile if one of the following applies:
* - there is a call
* - there is a live voice broadcast
* - message previews are enabled and there is a previewable message
*/
private get shouldRenderSubtitle(): boolean {
return (
!!this.state.call ||
this.props.hasLiveVoiceBroadcast ||
(this.props.showMessagePreview && !!this.state.messagePreview)
);
}

public render(): React.ReactElement {
const classes = classNames({
mx_RoomTile: true,
Expand All @@ -384,26 +398,15 @@ export class RoomTile extends React.PureComponent<ClassProps, State> {
);
}

let subtitle;
if (this.state.call) {
subtitle = (
<div className="mx_RoomTile_subtitle">
<RoomTileCallSummary call={this.state.call} />
</div>
);
} else if (this.props.hasLiveVoiceBroadcast) {
subtitle = <VoiceBroadcastRoomSubtitle />;
} else if (this.showMessagePreview && this.state.messagePreview) {
subtitle = (
<div
className="mx_RoomTile_subtitle"
id={messagePreviewId(this.props.room.roomId)}
title={this.state.messagePreview}
>
{this.state.messagePreview}
</div>
);
}
const subtitle = this.shouldRenderSubtitle ? (
<RoomTileSubtitle
call={this.state.call}
hasLiveVoiceBroadcast={this.props.hasLiveVoiceBroadcast}
messagePreview={this.state.messagePreview}
roomId={this.props.room.roomId}
showMessagePreview={this.props.showMessagePreview}
/>
) : null;

const titleClasses = classNames({
mx_RoomTile_title: true,
Expand Down
71 changes: 71 additions & 0 deletions src/components/views/rooms/RoomTileSubtitle.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import React from "react";
import classNames from "classnames";

import { MessagePreview } from "../../../stores/room-list/MessagePreviewStore";
import { Call } from "../../../models/Call";
import { RoomTileCallSummary } from "./RoomTileCallSummary";
import { VoiceBroadcastRoomSubtitle } from "../../../voice-broadcast";
import { Icon as ThreadIcon } from "../../../../res/img/compound/thread-16px.svg";

interface Props {
call: Call | null;
hasLiveVoiceBroadcast: boolean;
messagePreview: MessagePreview | null;
roomId: string;
showMessagePreview: boolean;
}

const messagePreviewId = (roomId: string): string => `mx_RoomTile_messagePreview_${roomId}`;

export const RoomTileSubtitle: React.FC<Props> = ({
call,
hasLiveVoiceBroadcast,
messagePreview,
roomId,
showMessagePreview,
}) => {
if (call) {
return (
<div className="mx_RoomTile_subtitle">
<RoomTileCallSummary call={call} />
</div>
);
}

if (hasLiveVoiceBroadcast) {
return <VoiceBroadcastRoomSubtitle />;
}

if (showMessagePreview && messagePreview) {
const className = classNames("mx_RoomTile_subtitle", {
"mx_RoomTile_subtitle--thread-reply": messagePreview.isThreadReply,
});

const icon = messagePreview.isThreadReply ? <ThreadIcon className="mx_Icon mx_Icon_16" /> : null;

return (
<div className={className} id={messagePreviewId(roomId)} title={messagePreview.text}>
{icon}
<span className="mx_RoomTile_subtitle_text">{messagePreview.text}</span>
</div>
);
}

return null;
};
51 changes: 38 additions & 13 deletions src/stores/room-list/MessagePreviewStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { M_POLL_START } from "matrix-js-sdk/src/@types/polls";
import { Thread } from "matrix-js-sdk/src/models/thread";

import { ActionPayload } from "../../dispatcher/payloads";
import { AsyncStoreWithClient } from "../AsyncStoreWithClient";
Expand Down Expand Up @@ -95,6 +96,18 @@ interface IState {
// Empty because we don't actually use the state
}

export interface MessagePreview {
isThreadReply: boolean;
text: string;
}

const mkMessagePreview = (text: string, event: MatrixEvent): MessagePreview => {
return {
text,
isThreadReply: !!event.getThread() && !event.isThreadRoot,
};
};

export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
private static readonly internalInstance = (() => {
const instance = new MessagePreviewStore();
Expand All @@ -103,7 +116,7 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
})();

// null indicates the preview is empty / irrelevant
private previews = new Map<string, Map<TagID | TAG_ANY, string | null>>();
private previews = new Map<string, Map<TagID | TAG_ANY, MessagePreview | null>>();

private constructor() {
super(defaultDispatcher, {});
Expand All @@ -123,7 +136,7 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
* @param inTagId The tag ID in which the room resides
* @returns The preview, or null if none present.
*/
public async getPreviewForRoom(room: Room, inTagId: TagID): Promise<string | null> {
public async getPreviewForRoom(room: Room, inTagId: TagID): Promise<MessagePreview | null> {
if (!room) return null; // invalid room, just return nothing

if (!this.previews.has(room.roomId)) await this.generatePreview(room, inTagId);
Expand All @@ -143,12 +156,24 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
}

private async generatePreview(room: Room, tagId?: TagID): Promise<void> {
const events = room.timeline;
const events = [...room.getLiveTimeline().getEvents()];

// add last reply from each thread
room.getThreads().forEach((thread: Thread): void => {
const lastReply = thread.lastReply();
if (lastReply) events.push(lastReply);
});

// sort events from oldest to newest
events.sort((a: MatrixEvent, b: MatrixEvent) => {
return a.getTs() - b.getTs();
});

if (!events) return; // should only happen in tests

let map = this.previews.get(room.roomId);
if (!map) {
map = new Map<TagID | TAG_ANY, string | null>();
map = new Map<TagID | TAG_ANY, MessagePreview | null>();
this.previews.set(room.roomId, map);
}

Expand All @@ -171,22 +196,22 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
if (!previewDef) continue;
if (previewDef.isState && isNullOrUndefined(event.getStateKey())) continue;

const anyPreview = previewDef.previewer.getTextFor(event);
if (!anyPreview) continue; // not previewable for some reason
const anyPreviewText = previewDef.previewer.getTextFor(event);
if (!anyPreviewText) continue; // not previewable for some reason

changed = changed || anyPreview !== map.get(TAG_ANY);
map.set(TAG_ANY, anyPreview);
changed = changed || anyPreviewText !== map.get(TAG_ANY)?.text;
map.set(TAG_ANY, mkMessagePreview(anyPreviewText, event));

const tagsToGenerate = Array.from(map.keys()).filter((t) => t !== TAG_ANY); // we did the any tag above
for (const genTagId of tagsToGenerate) {
const realTagId = genTagId === TAG_ANY ? undefined : genTagId;
const preview = previewDef.previewer.getTextFor(event, realTagId);
if (preview === anyPreview) {
changed = changed || anyPreview !== map.get(genTagId);
if (preview === anyPreviewText) {
changed = changed || anyPreviewText !== map.get(genTagId)?.text;
map.delete(genTagId);
} else {
changed = changed || preview !== map.get(genTagId);
map.set(genTagId, preview);
changed = changed || preview !== map.get(genTagId)?.text;
map.set(genTagId, mkMessagePreview(anyPreviewText, event));
}
}

Expand All @@ -200,7 +225,7 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
}

// At this point, we didn't generate a preview so clear it
this.previews.set(room.roomId, new Map<TagID | TAG_ANY, string | null>());
this.previews.set(room.roomId, new Map<TagID | TAG_ANY, MessagePreview | null>());
this.emit(UPDATE_EVENT, this);
this.emit(MessagePreviewStore.getPreviewChangedEventName(room), room);
}
Expand Down
Loading

0 comments on commit d5751eb

Please sign in to comment.