Depile encrypted events to find the most suitable one for preview (#6056)

Author: germain-gg

src/components/views/rooms/RoomTile.tsx

@@ -100,8 +100,10 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             hasUnsentEvents: this.countUnsentEvents() > 0,
 
             // generatePreview() will return nothing if the user has previews disabled
-            messagePreview: this.generatePreview(),
+            messagePreview: "",
         };
+        this.generatePreview();
+
         this.notificationState = RoomNotificationStateStore.instance.getRoomState(this.props.room);
         this.roomProps = EchoChamber.forRoom(this.props.room);
         if (this.props.resizeNotifier) {
@@ -123,7 +125,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
 
     private onResize = () => {
         if (this.showMessagePreview && !this.state.messagePreview) {
-            this.setState({messagePreview: this.generatePreview()});
+            this.generatePreview();
         }
     };
 
@@ -147,7 +149,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
 
     public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>) {
         if (prevProps.showMessagePreview !== this.props.showMessagePreview && this.showMessagePreview) {
-            this.setState({messagePreview: this.generatePreview()});
+            this.generatePreview();
         }
         if (prevProps.room?.roomId !== this.props.room?.roomId) {
             MessagePreviewStore.instance.off(
@@ -236,17 +238,17 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
 
     private onRoomPreviewChanged = (room: Room) => {
         if (this.props.room && room.roomId === this.props.room.roomId) {
-            // generatePreview() will return nothing if the user has previews disabled
-            this.setState({messagePreview: this.generatePreview()});
+            this.generatePreview();
         }
     };
 
-    private generatePreview(): string | null {
+    private async generatePreview() {
         if (!this.showMessagePreview) {
             return null;
         }
 
-        return MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag);
+        const messagePreview = await MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag);
+        this.setState({ messagePreview });
     }
 
     private scrollIntoView = () => {

src/stores/room-list/MessagePreviewStore.ts

@@ -94,10 +94,10 @@ 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 getPreviewForRoom(room: Room, inTagId: TagID): string {
+    public async getPreviewForRoom(room: Room, inTagId: TagID): Promise<string> {
         if (!room) return null; // invalid room, just return nothing
 
-        if (!this.previews.has(room.roomId)) this.generatePreview(room, inTagId);
+        if (!this.previews.has(room.roomId)) await this.generatePreview(room, inTagId);
 
         const previews = this.previews.get(room.roomId);
         if (!previews) return null;
@@ -108,7 +108,7 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
         return previews.get(inTagId);
     }
 
-    private generatePreview(room: Room, tagId?: TagID) {
+    private async generatePreview(room: Room, tagId?: TagID) {
         const events = room.timeline;
         if (!events) return; // should only happen in tests
 
@@ -130,6 +130,9 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
             }
 
             const event = events[i];
+
+            await this.matrixClient.decryptEventIfNeeded(event);
+
             const previewDef = PREVIEWS[event.getType()];
             if (!previewDef) continue;
             if (previewDef.isState && isNullOrUndefined(event.getStateKey())) continue;
@@ -174,7 +177,7 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
         if (payload.action === 'MatrixActions.Room.timeline' || payload.action === 'MatrixActions.Event.decrypted') {
             const event = payload.event; // TODO: Type out the dispatcher
             if (!this.previews.has(event.getRoomId())) return; // not important
-            this.generatePreview(this.matrixClient.getRoom(event.getRoomId()), TAG_ANY);
+            await this.generatePreview(this.matrixClient.getRoom(event.getRoomId()), TAG_ANY);
         }
     }
 }