From d2d0ba952aba4999fd1f145c6632f45ad9267d06 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 2 Jun 2017 04:23:07 +0100
Subject: [PATCH 1/2] allow hiding redactions. no point onAccountData as it'd
 cause a full refresh, this may need to be handled differently in the future.
 Currently handling same as the new timestamp stuff

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/MessagePanel.js  |  5 +++
 src/components/structures/TimelinePanel.js | 52 ++++++++++++----------
 src/components/structures/UserSettings.js  |  4 ++
 src/i18n/strings/en_EN.json                |  1 +
 4 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 6f49e425fd..5c68d4d206 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -90,6 +90,9 @@ module.exports = React.createClass({
 
         // show timestamps always
         alwaysShowTimestamps: React.PropTypes.bool,
+
+        // hide redacted events as per old behaviour
+        hideRedactions: React.PropTypes.bool,
     },
 
     componentWillMount: function() {
@@ -419,6 +422,8 @@ module.exports = React.createClass({
     },
 
     _getTilesForEvent: function(prevEvent, mxEv, last) {
+        if (mxEv.isRedacted() && this.props.hideRedactions) return [];
+
         const EventTile = sdk.getComponent('rooms.EventTile');
         const DateSeparator = sdk.getComponent('messages.DateSeparator');
         var ret = [];
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 76004ebbac..aecb468f71 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -131,6 +131,8 @@ var TimelinePanel = React.createClass({
             }
         }
 
+        const syncedSettings = UserSettingsStore.getSyncedSettings();
+
         return {
             events: [],
             timelineLoading: true, // track whether our room timeline is loading
@@ -175,10 +177,13 @@ var TimelinePanel = React.createClass({
             clientSyncState: MatrixClientPeg.get().getSyncState(),
 
             // should the event tiles have twelve hour times
-            isTwelveHour: UserSettingsStore.getSyncedSetting('showTwelveHourTimestamps'),
+            isTwelveHour: syncedSettings.showTwelveHourTimestamps,
 
             // always show timestamps on event tiles?
-            alwaysShowTimestamps: UserSettingsStore.getSyncedSetting('alwaysShowTimestamps'),
+            alwaysShowTimestamps: syncedSettings.alwaysShowTimestamps,
+
+            // hide redacted events as per old behaviour
+            hideRedactions: syncedSettings.hideRedactions,
         };
     },
 
@@ -915,7 +920,7 @@ var TimelinePanel = React.createClass({
                     });
                 };
             }
-            var message = (error.errcode == 'M_FORBIDDEN') 
+            var message = (error.errcode == 'M_FORBIDDEN')
             	? _t("Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question") + "."
                 : _t("Tried to load a specific point in this room's timeline, but was unable to find it") + ".";
             Modal.createDialog(ErrorDialog, {
@@ -1113,26 +1118,27 @@ var TimelinePanel = React.createClass({
         );
         return (
             <MessagePanel ref="messagePanel"
-                    hidden={ this.props.hidden }
-                    backPaginating={ this.state.backPaginating }
-                    forwardPaginating={ forwardPaginating }
-                    events={ this.state.events }
-                    highlightedEventId={ this.props.highlightedEventId }
-                    readMarkerEventId={ this.state.readMarkerEventId }
-                    readMarkerVisible={ this.state.readMarkerVisible }
-                    suppressFirstDateSeparator={ this.state.canBackPaginate }
-                    showUrlPreview = { this.props.showUrlPreview }
-                    manageReadReceipts = { this.props.manageReadReceipts }
-                    ourUserId={ MatrixClientPeg.get().credentials.userId }
-                    stickyBottom={ stickyBottom }
-                    onScroll={ this.onMessageListScroll }
-                    onFillRequest={ this.onMessageListFillRequest }
-                    onUnfillRequest={ this.onMessageListUnfillRequest }
-                    opacity={ this.props.opacity }
-                    isTwelveHour={ this.state.isTwelveHour }
-                    alwaysShowTimestamps={ this.state.alwaysShowTimestamps }
-                    className={ this.props.className }
-                    tileShape={ this.props.tileShape }
+                          hidden={ this.props.hidden }
+                          hideRedactions={ this.state.hideRedactions }
+                          backPaginating={ this.state.backPaginating }
+                          forwardPaginating={ forwardPaginating }
+                          events={ this.state.events }
+                          highlightedEventId={ this.props.highlightedEventId }
+                          readMarkerEventId={ this.state.readMarkerEventId }
+                          readMarkerVisible={ this.state.readMarkerVisible }
+                          suppressFirstDateSeparator={ this.state.canBackPaginate }
+                          showUrlPreview = { this.props.showUrlPreview }
+                          manageReadReceipts = { this.props.manageReadReceipts }
+                          ourUserId={ MatrixClientPeg.get().credentials.userId }
+                          stickyBottom={ stickyBottom }
+                          onScroll={ this.onMessageListScroll }
+                          onFillRequest={ this.onMessageListFillRequest }
+                          onUnfillRequest={ this.onMessageListUnfillRequest }
+                          opacity={ this.props.opacity }
+                          isTwelveHour={ this.state.isTwelveHour }
+                          alwaysShowTimestamps={ this.state.alwaysShowTimestamps }
+                          className={ this.props.className }
+                          tileShape={ this.props.tileShape }
             />
         );
     },
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 7300d82541..40ef4522c5 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -84,6 +84,10 @@ const SETTINGS_LABELS = [
         id: 'useCompactLayout',
         label: 'Use compact timeline layout',
     },
+    {
+        id: 'hideRedactions',
+        label: 'Hide removed messages',
+    },
 /*
     {
         id: 'useFixedWidthFont',
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 0cfd62f7ea..3dc9ae4e3b 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -140,6 +140,7 @@
   "Camera": "Camera",
   "Advanced": "Advanced",
   "Algorithm": "Algorithm",
+  "Hide removed messages": "Hide removed messages",
   "Always show message timestamps": "Always show message timestamps",
   "Authentication": "Authentication",
   "all room members": "all room members",

From 5e2e550bf9e4736ff26b14317b022a299b7ce004 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 2 Jun 2017 04:39:44 +0100
Subject: [PATCH 2/2] don't lose date seperator when the first event of the new
 day is redacted

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/MessagePanel.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 5c68d4d206..9251ff2bdb 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -422,8 +422,6 @@ module.exports = React.createClass({
     },
 
     _getTilesForEvent: function(prevEvent, mxEv, last) {
-        if (mxEv.isRedacted() && this.props.hideRedactions) return [];
-
         const EventTile = sdk.getComponent('rooms.EventTile');
         const DateSeparator = sdk.getComponent('messages.DateSeparator');
         var ret = [];
@@ -468,6 +466,8 @@ module.exports = React.createClass({
             continuation = false;
         }
 
+        if (mxEv.isRedacted() && this.props.hideRedactions) return ret;
+
         var eventId = mxEv.getId();
         var highlight = (eventId == this.props.highlightedEventId);