hide no-op m.room.encryption events and better word param changes

src/components/views/messages/EncryptionEvent.tsx

@@ -16,26 +16,38 @@ limitations under the License.
 
 import React, { forwardRef, useContext } from 'react';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { IRoomEncryption } from "matrix-js-sdk/src/crypto/RoomList";
 
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import EventTileBubble from "./EventTileBubble";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import DMRoomMap from "../../../utils/DMRoomMap";
+import { objectHasDiff } from "../../../utils/objects";
 
 interface IProps {
     mxEvent: MatrixEvent;
 }
 
+const ALGORITHM = "m.megolm.v1.aes-sha2";
+
 const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent }, ref) => {
     const cli = useContext(MatrixClientContext);
     const roomId = mxEvent.getRoomId();
     const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId);
 
-    if (mxEvent.getContent().algorithm === 'm.megolm.v1.aes-sha2' && isRoomEncrypted) {
+    const prevContent = mxEvent.getPrevContent() as IRoomEncryption;
+    const content = mxEvent.getContent<IRoomEncryption>();
+
+    // if no change happened then skip rendering this, a shallow check is enough as all known fields are top-level.
+    if (!objectHasDiff(prevContent, content)) return null; // nop
+
+    if (content.algorithm === ALGORITHM && isRoomEncrypted) {
         let subtitle: string;
         const dmPartner = DMRoomMap.shared().getUserIdForRoomId(roomId);
-        if (dmPartner) {
+        if (prevContent.algorithm === ALGORITHM) {
+            subtitle = _t("Some encryption parameters have been changed.");
+        } else if (dmPartner) {
             const displayName = cli?.getRoom(roomId)?.getMember(dmPartner)?.rawDisplayName || dmPartner;
             subtitle = _t("Messages here are end-to-end encrypted. " +
                 "Verify %(displayName)s in their profile - tap on their avatar.", { displayName });
@@ -49,7 +61,9 @@ const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent }, ref) =>
             title={_t("Encryption enabled")}
             subtitle={subtitle}
         />;
-    } else if (isRoomEncrypted) {
+    }
+
+    if (isRoomEncrypted) {
         return <EventTileBubble
             className="mx_cryptoEvent mx_cryptoEvent_icon"
             title={_t("Encryption enabled")}

src/i18n/strings/en_EN.json

@@ -1922,6 +1922,7 @@
     "Decrypting": "Decrypting",
     "Download": "Download",
     "View Source": "View Source",
+    "Some encryption parameters have been changed.": "Some encryption parameters have been changed.",
     "Messages here are end-to-end encrypted. Verify %(displayName)s in their profile - tap on their avatar.": "Messages here are end-to-end encrypted. Verify %(displayName)s in their profile - tap on their avatar.",
     "Messages in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their avatar.": "Messages in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their avatar.",
     "Encryption enabled": "Encryption enabled",