Don't show replaced calls in the timeline (#7452)

* Don't show replaced calls in the timeline

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Revert changes to CallEvent

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Add option to force hide event

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Hide replaced calls

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/components/views/messages/CallEvent.tsx

@@ -64,7 +64,7 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
         this.props.callEventGrouper.addListener(CallEventGrouperEvent.LengthChanged, this.onLengthChanged);
 
         this.resizeObserver = new ResizeObserver(this.resizeObserverCallback);
-        this.resizeObserver.observe(this.wrapperElement.current);
+        this.wrapperElement.current && this.resizeObserver.observe(this.wrapperElement.current);
     }
 
     componentWillUnmount() {
@@ -258,7 +258,7 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
         );
     }
 
-    render() {
+    public render(): JSX.Element {
         const event = this.props.mxEvent;
         const sender = event.sender ? event.sender.name : event.getSender();
         const isVoice = this.props.callEventGrouper.isVoice;

src/components/views/rooms/EventTile.tsx

@@ -24,6 +24,7 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
 import { logger } from "matrix-js-sdk/src/logger";
 import { NotificationCountType, Room } from 'matrix-js-sdk/src/models/room';
+import { CallErrorCode } from "matrix-js-sdk/src/webrtc/call";
 import { M_POLL_START } from "matrix-events-sdk";
 
 import ReplyChain from "../elements/ReplyChain";
@@ -1097,10 +1098,21 @@ export default class EventTile extends React.Component<IProps, IState> {
         });
     };
 
+    /**
+     * In some cases we can't use shouldHideEvent() since whether or not we hide
+     * an event depends on other things that the event itself
+     * @returns {boolean} true if event should be hidden
+     */
+    private shouldHideEvent(): boolean {
+        // If the call was replaced we don't render anything since we render the other call
+        if (this.props.callEventGrouper?.hangupReason === CallErrorCode.Replaced) return true;
+
+        return false;
+    }
+
     render() {
         const msgtype = this.props.mxEvent.getContent().msgtype;
         const eventType = this.props.mxEvent.getType() as EventType;
-        const eventDisplayInfo = getEventDisplayInfo(this.props.mxEvent);
         const {
             tileHandler,
             isBubbleMessage,
@@ -1108,7 +1120,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             isLeftAlignedBubbleMessage,
             noBubbleEvent,
             isSeeingThroughMessageHiddenForModeration,
-        } = eventDisplayInfo;
+        } = getEventDisplayInfo(this.props.mxEvent, this.shouldHideEvent());
         const { isQuoteExpanded } = this.state;
 
         // This shouldn't happen: the caller should check we support this type

src/utils/EventUtils.ts

@@ -177,7 +177,7 @@ export function getMessageModerationState(mxEvent: MatrixEvent): MessageModerati
     return MessageModerationState.HIDDEN_TO_CURRENT_USER;
 }
 
-export function getEventDisplayInfo(mxEvent: MatrixEvent): {
+export function getEventDisplayInfo(mxEvent: MatrixEvent, hideEvent?: boolean): {
     isInfoMessage: boolean;
     tileHandler: string;
     isBubbleMessage: boolean;
@@ -245,7 +245,7 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
     // source tile when there's no regular tile for an event and also for
     // replace relations (which otherwise would display as a confusing
     // duplicate of the thing they are replacing).
-    if (SettingsStore.getValue("showHiddenEventsInTimeline") && !haveTileForEvent(mxEvent)) {
+    if ((hideEvent || !haveTileForEvent(mxEvent)) && SettingsStore.getValue("showHiddenEventsInTimeline")) {
         tileHandler = "messages.ViewSourceEvent";
         isBubbleMessage = false;
         // Reuse info message avatar and sender profile styling