Merge pull request #739 from matrix-org/luke/visible-redactions

Show message redactions as black event tiles

src/TextForEvent.js

@@ -116,7 +116,6 @@ function textForRoomNameEvent(ev) {
 
 function textForMessageEvent(ev) {
     var senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
-
     var message = senderDisplayName + ': ' + ev.getContent().body;
     if (ev.getContent().msgtype === "m.emote") {
         message = "* " + senderDisplayName + " " + message;

src/components/structures/MessagePanel.js

@@ -295,7 +295,10 @@ module.exports = React.createClass({
             var last = (i == lastShownEventIndex);
 
             // Wrap consecutive member events in a ListSummary, ignore if redacted
-            if (isMembershipChange(mxEv) && EventTile.haveTileForEvent(mxEv)) {
+            if (isMembershipChange(mxEv) &&
+                EventTile.haveTileForEvent(mxEv) &&
+                !mxEv.isRedacted()
+            ) {
                 let ts1 = mxEv.getTs();
                 // Ensure that the key of the MemberEventListSummary does not change with new
                 // member events. This will prevent it from being re-created unnecessarily, and
@@ -408,7 +411,9 @@ module.exports = React.createClass({
 
         // is this a continuation of the previous message?
         var continuation = false;
-        if (prevEvent !== null && prevEvent.sender && mxEv.sender
+
+        if (prevEvent !== null
+                && !prevEvent.isRedacted() && prevEvent.sender && mxEv.sender
                 && mxEv.sender.userId === prevEvent.sender.userId
                 && mxEv.getType() == prevEvent.getType()) {
             continuation = true;
@@ -461,6 +466,7 @@ module.exports = React.createClass({
                         ref={this._collectEventNode.bind(this, eventId)}
                         data-scroll-token={scrollToken}>
                     <EventTile mxEvent={mxEv} continuation={continuation}
+                        isRedacted={mxEv.isRedacted()}
                         onWidgetLoad={this._onWidgetLoad}
                         readReceipts={readReceipts}
                         readReceiptMap={this._readReceiptMap}
@@ -481,13 +487,17 @@ module.exports = React.createClass({
             // here.
             return !this.props.suppressFirstDateSeparator;
         }
+        const prevEventDate = prevEvent.getDate();
+        if (!nextEventDate || !prevEventDate) {
+            return false;
+        }
         // Return early for events that are > 24h apart
         if (Math.abs(prevEvent.getTs() - nextEventDate.getTime()) > MILLIS_IN_DAY) {
             return true;
         }
 
         // Compare weekdays
-        return prevEvent.getDate().getDay() !== nextEventDate.getDay();
+        return prevEventDate.getDay() !== nextEventDate.getDay();
     },
 
     // get a list of read receipts that should be shown next to this event

src/components/views/messages/UnknownBody.js

@@ -22,10 +22,10 @@ module.exports = React.createClass({
     displayName: 'UnknownBody',
 
     render: function() {
-        var content = this.props.mxEvent.getContent();
+        const text = this.props.mxEvent.getContent().body;
         return (
             <span className="mx_UnknownBody">
-                {content.body}
+                {text}
             </span>
         );
     },

src/components/views/rooms/EventTile.js

@@ -29,14 +29,6 @@ var dispatcher = require("../../../dispatcher");
 
 var ObjectUtils = require('../../../ObjectUtils');
 
-var bounce = false;
-try {
-    if (global.localStorage) {
-        bounce = global.localStorage.getItem('avatar_bounce') == 'true';
-    }
-} catch (e) {
-}
-
 var eventTileTypes = {
     'm.room.message': 'messages.MessageEvent',
     'm.room.member' : 'messages.TextualEvent',
@@ -73,6 +65,12 @@ module.exports = WithMatrixClient(React.createClass({
         /* the MatrixEvent to show */
         mxEvent: React.PropTypes.object.isRequired,
 
+        /* true if mxEvent is redacted. This is a prop because using mxEvent.isRedacted()
+         * might not be enough when deciding shouldComponentUpdate - prevProps.mxEvent
+         * references the same this.props.mxEvent.
+         */
+        isRedacted: React.PropTypes.bool,
+
         /* true if this is a continuation of the previous event (which has the
          * effect of not showing another avatar/displayname
          */
@@ -396,6 +394,7 @@ module.exports = WithMatrixClient(React.createClass({
 
         var e2eEnabled = this.props.matrixClient.isRoomEncrypted(this.props.mxEvent.getRoomId());
         var isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1);
+        const isRedacted = (eventType === 'm.room.message') && this.props.isRedacted;
 
         var classes = classNames({
             mx_EventTile: true,
@@ -412,6 +411,7 @@ module.exports = WithMatrixClient(React.createClass({
             mx_EventTile_verified: this.state.verified == true,
             mx_EventTile_unverified: this.state.verified == false,
             mx_EventTile_bad: this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted',
+            mx_EventTile_redacted: isRedacted,
         });
         var permalink = "https://matrix.to/#/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId();
 
@@ -421,7 +421,10 @@ module.exports = WithMatrixClient(React.createClass({
         let avatarSize;
         let needsSenderProfile;
 
-        if (this.props.tileShape === "notif") {
+        if (isRedacted) {
+            avatarSize = 0;
+            needsSenderProfile = false;
+        } else if (this.props.tileShape === "notif") {
             avatarSize = 24;
             needsSenderProfile = true;
         } else if (isInfoMessage) {
@@ -486,6 +489,8 @@ module.exports = WithMatrixClient(React.createClass({
         else if (e2eEnabled) {
             e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-unencrypted.svg" width="12" height="12"/>;
         }
+        const timestamp = this.props.mxEvent.isRedacted() ?
+            null : <MessageTimestamp ts={this.props.mxEvent.getTs()} />;
 
         if (this.props.tileShape === "notif") {
             var room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId());
@@ -501,7 +506,7 @@ module.exports = WithMatrixClient(React.createClass({
                         { avatar }
                         <a href={ permalink }>
                             { sender }
-                            <MessageTimestamp ts={this.props.mxEvent.getTs()} />
+                            { timestamp }
                         </a>
                     </div>
                     <div className="mx_EventTile_line" >
@@ -530,7 +535,7 @@ module.exports = WithMatrixClient(React.createClass({
                     <a className="mx_EventTile_senderDetailsLink" href={ permalink }>
                         <div className="mx_EventTile_senderDetails">
                                 { sender }
-                                <MessageTimestamp ts={this.props.mxEvent.getTs()} />
+                                { timestamp }
                         </div>
                     </a>
                 </div>
@@ -546,7 +551,7 @@ module.exports = WithMatrixClient(React.createClass({
                     { sender }
                     <div className="mx_EventTile_line">
                         <a href={ permalink }>
-                            <MessageTimestamp ts={this.props.mxEvent.getTs()} />
+                            { timestamp }
                         </a>
                         { e2e }
                         <EventTileType ref="tile"
@@ -564,7 +569,8 @@ module.exports = WithMatrixClient(React.createClass({
 }));
 
 module.exports.haveTileForEvent = function(e) {
-    if (e.isRedacted()) return false;
+    // Only messages have a tile (black-rectangle) if redacted
+    if (e.isRedacted() && e.getType() !== 'm.room.message') return false;
     if (eventTileTypes[e.getType()] == undefined) return false;
     if (eventTileTypes[e.getType()] == 'messages.TextualEvent') {
         return TextForEvent.textForEvent(e) !== '';