Add MCS

customisations.json

@@ -3,5 +3,19 @@
   "src/components/views/dialogs/CreateRoomDialog.tsx": "src/components/views/dialogs/TchapCreateRoomDialog.tsx",
   "src/components/views/elements/TchapRoomTypeSelector.tsx": "src/components/views/elements/TchapRoomTypeSelector.tsx",
   "src/components/views/dialogs/ServerPickerDialog.tsx": "src/components/views/dialogs/TchapServerPickerDialog.tsx",
-  "src/customisations/ComponentVisibility.ts": "src/customisations/TchapComponentVisibility.ts"
+  "src/customisations/ComponentVisibility.ts": "src/customisations/TchapComponentVisibility.ts",
+  "src/customisations/Media.ts": "src/customisations/ContentScanningMedia.ts",
+  "src/components/views/messages/DownloadActionButton.tsx": "src/customisations/components/views/messages/ContentScanningDownloadActionButton.tsx",
+  "src/components/views/messages/MAudioBody.tsx": "src/customisations/components/views/messages/ContentScanningAudioBody.tsx",
+  "src/components/views/messages/MFileBody.tsx": "src/customisations/components/views/messages/ContentScanningFileBody.tsx",
+  "src/components/views/messages/MImageBody.tsx": "src/customisations/components/views/messages/ContentScanningImageBody.tsx",
+  "src/components/views/messages/MStickerBody.tsx": "src/customisations/components/views/messages/ContentScanningStickerBody.tsx",
+  "src/components/views/messages/MVideoBody.tsx": "src/customisations/components/views/messages/ContentScanningVideoBody.tsx",
+  "src/components/views/messages/MVoiceMessageBody.tsx": "src/customisations/components/views/messages/ContentScanningVoiceMessageBody.tsx",
+  "src/components/views/messages/OriginalAudioBody.tsx": "node_modules/matrix-react-sdk/src/components/views/messages/MAudioBody.tsx",
+  "src/components/views/messages/OriginalFileBody.tsx": "node_modules/matrix-react-sdk/src/components/views/messages/MFileBody.tsx",
+  "src/components/views/messages/OriginalImageBody.tsx": "node_modules/matrix-react-sdk/src/components/views/messages/MImageBody.tsx",
+  "src/components/views/messages/OriginalStickerBody.tsx": "node_modules/matrix-react-sdk/src/components/views/messages/MStickerBody.tsx",
+  "src/components/views/messages/OriginalVideoBody.tsx": "node_modules/matrix-react-sdk/src/components/views/messages/MVideoBody.tsx",
+  "src/components/views/messages/OriginalVoiceMessageBody.tsx": "node_modules/matrix-react-sdk/src/components/views/messages/MVoiceMessageBody.tsx"
 }

package.json

@@ -54,7 +54,8 @@
     "lint:types": "tsc --noEmit --jsx react",
     "lint:style": "stylelint \"res/css/**/*.scss\"",
     "test": "jest",
-    "coverage": "yarn test --coverage"
+    "coverage": "yarn test --coverage",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
@@ -136,6 +137,7 @@
     "modernizr": "^3.12.0",
     "node-fetch": "^2.6.7",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "patch-package": "^6.4.7",
     "postcss-easings": "^2.0.0",
     "postcss-hexrgba": "^2.0.1",
     "postcss-import": "^12.0.1",
@@ -146,6 +148,7 @@
     "postcss-scss": "^2.1.1",
     "postcss-simple-vars": "^5.0.2",
     "postcss-strip-inline-comments": "^0.1.5",
+    "postinstall-postinstall": "^2.1.0",
     "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",
     "shell-escape": "^0.2.0",

patches/matrix-react-sdk+3.46.0.patch

@@ -0,0 +1,67 @@
+diff --git a/node_modules/matrix-react-sdk/src/components/views/messages/MAudioBody.tsx b/node_modules/matrix-react-sdk/src/components/views/messages/MAudioBody.tsx
+index 9d20c66..1682ef2 100644
+--- a/node_modules/matrix-react-sdk/src/components/views/messages/MAudioBody.tsx
++++ b/node_modules/matrix-react-sdk/src/components/views/messages/MAudioBody.tsx
+@@ -22,7 +22,7 @@ import InlineSpinner from '../elements/InlineSpinner';
+ import { _t } from "../../../languageHandler";
+ import AudioPlayer from "../audio_messages/AudioPlayer";
+ import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
+-import MFileBody from "./MFileBody";
++import MFileBody from "../../../../../../src/components/views/messages/OriginalFileBody";
+ import { IBodyProps } from "./IBodyProps";
+ import { PlaybackManager } from "../../../audio/PlaybackManager";
+ import { isVoiceMessage } from "../../../utils/EventUtils";
+diff --git a/node_modules/matrix-react-sdk/src/components/views/messages/MImageBody.tsx b/node_modules/matrix-react-sdk/src/components/views/messages/MImageBody.tsx
+index a22137b..a68ba2b 100644
+--- a/node_modules/matrix-react-sdk/src/components/views/messages/MImageBody.tsx
++++ b/node_modules/matrix-react-sdk/src/components/views/messages/MImageBody.tsx
+@@ -23,7 +23,7 @@ import { CSSTransition, SwitchTransition } from 'react-transition-group';
+ import { logger } from "matrix-js-sdk/src/logger";
+ import { ClientEvent } from "matrix-js-sdk/src/client";
+
+-import MFileBody from './MFileBody';
++import MFileBody from "../../../../../../src/components/views/messages/OriginalFileBody";
+ import Modal from '../../../Modal';
+ import { _t } from '../../../languageHandler';
+ import SettingsStore from "../../../settings/SettingsStore";
+diff --git a/node_modules/matrix-react-sdk/src/components/views/messages/MStickerBody.tsx b/node_modules/matrix-react-sdk/src/components/views/messages/MStickerBody.tsx
+index 18d8e4d..695662a 100644
+--- a/node_modules/matrix-react-sdk/src/components/views/messages/MStickerBody.tsx
++++ b/node_modules/matrix-react-sdk/src/components/views/messages/MStickerBody.tsx
+@@ -16,7 +16,7 @@ limitations under the License.
+
+ import React from 'react';
+
+-import MImageBody from './MImageBody';
++import MImageBody from "../../../../../../src/components/views/messages/OriginalImageBody";
+ import { BLURHASH_FIELD } from "../../../utils/image-media";
+ import Tooltip from "../elements/Tooltip";
+ import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
+diff --git a/node_modules/matrix-react-sdk/src/components/views/messages/MVideoBody.tsx b/node_modules/matrix-react-sdk/src/components/views/messages/MVideoBody.tsx
+index 1ac389a..33ed8f3 100644
+--- a/node_modules/matrix-react-sdk/src/components/views/messages/MVideoBody.tsx
++++ b/node_modules/matrix-react-sdk/src/components/views/messages/MVideoBody.tsx
+@@ -25,7 +25,7 @@ import { mediaFromContent } from "../../../customisations/Media";
+ import { BLURHASH_FIELD } from "../../../utils/image-media";
+ import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
+ import { IBodyProps } from "./IBodyProps";
+-import MFileBody from "./MFileBody";
++import MFileBody from "../../../../../../src/components/views/messages/OriginalFileBody";
+ import { ImageSize, suggestedSize as suggestedVideoSize } from "../../../settings/enums/ImageSize";
+ import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
+
+diff --git a/node_modules/matrix-react-sdk/src/components/views/messages/MVoiceMessageBody.tsx b/node_modules/matrix-react-sdk/src/components/views/messages/MVoiceMessageBody.tsx
+index 6552122..2391b5f 100644
+--- a/node_modules/matrix-react-sdk/src/components/views/messages/MVoiceMessageBody.tsx
++++ b/node_modules/matrix-react-sdk/src/components/views/messages/MVoiceMessageBody.tsx
+@@ -19,8 +19,8 @@ import React from "react";
+ import InlineSpinner from '../elements/InlineSpinner';
+ import { _t } from "../../../languageHandler";
+ import RecordingPlayback from "../audio_messages/RecordingPlayback";
+-import MAudioBody from "./MAudioBody";
+-import MFileBody from "./MFileBody";
++import MAudioBody from "../../../../../../src/components/views/messages/OriginalAudioBody";
++import MFileBody from "../../../../../../src/components/views/messages/OriginalFileBody";
+
+ export default class MVoiceMessageBody extends MAudioBody {
+     // A voice message is an audio file but rendered in a special way.

res/css/views/elements/BlockedIcon.scss

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2022 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.mx_BlockedIcon {
+    background-color: #f07a12;
+    border-radius: 4px;
+    content: '';
+    display: inline-block;
+    height: 40px;
+    position: relative;
+    width: 40px;
+
+    &::after {
+        background-color: #fff;
+        content: '';
+        height: 20px;
+        left: 10px;
+        mask-image: url('../../../img/blocked.svg');
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        position: absolute;
+        top: 10px;
+        width: 20px;
+    }
+}
+
+.mx_BlockedIcon_messageContext {
+    height: 28px;
+    width: 28px;
+    z-index: 1;
+
+    &::after {
+        height: 24px;
+        left: 2px;
+        top: 2px;
+        width: 24px;
+    }
+}

res/css/views/elements/ContentScanningStatus.scss

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2022 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.mx_ContentScanningStatus_scanning--light,
+.mx_ContentScanningStatus_done--light {
+    color: #61708b;
+}
+
+.mx_ContentScanningStatus_scanning--dark,
+.mx_ContentScanningStatus_done--dark {
+    color: #b9bec6;
+}
+
+.mx_ContentScanningStatus_scanning--custom-Tchap,
+.mx_ContentScanningStatus_done--custom-Tchap {
+    color: var(--timeline-text-color-50pct);
+}
+
+.mx_ContentScanningStatus_unsafe,
+.mx_ContentScanningStatus_error {
+    color: #f07a12;
+}

res/css/views/messages/ContentScanningFileBody.scss

@@ -0,0 +1,80 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+
+.mx_EventTile[data-layout="bubble"] {
+    .mx_EventTile_mediaLine > a:first-child {
+        bottom: 18px; // Scan result line
+    }
+
+    .mx_EventTile_image > a:first-child {
+        bottom: 23px; // Scan result line + 5px image flex gap
+    }
+}
+
+.mx_MFileBody_download_icon.mx_MFileBody_download_icon {
+    mask-image: url("~matrix-react-sdk/res/img/element-icons/roomlist/checkmark.svg");
+    height: 10px;
+    mask-size: 18px;
+    margin-right: 4px;
+}
+
+.mx_MFileBody_info {
+    .mx_InlineSpinner {
+        height: 32px;
+
+        .mx_InlineSpinner_icon {
+            margin: 6px;
+        }
+    }
+}
+
+.mx_MFileBody_scanning {
+    .mx_MFileBody_info.mx_MFileBody_info .mx_MFileBody_info_icon::before {
+        content: unset;
+    }
+}
+
+.mx_MFileBody_unsafe_icon {
+    background-color: #f07a12;
+    border-radius: 4px;
+    display: inline-block;
+    height: 32px;
+    margin-right: 12px;
+    position: relative;
+    vertical-align: middle;
+    width: 32px;
+
+    &::before {
+        background-color: #fff; // hardcoded
+        content: '';
+        height: 17px;
+        left: 7px;
+        mask-image: url('../../../img/blocked.svg');
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        position: absolute;
+        top: 7px;
+        width: 17px;
+    }
+}
+
+.mx_MFileBody_download {
+    .mx_AccessibleButton {
+        display: inline-block;
+    }
+}

res/css/views/messages/ContentScanningImageBody.scss

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2022 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.mx_MImageBody {
+    position: relative;
+}
+
+.mx_EventTile_image,
+.mx_EventTile_sticker,
+.mx_EventTile_mediaLine {
+    flex-direction: column;
+}
+
+.mx_EventTile .mx_EventTile_line.mx_EventTile_mediaLine {
+    .mx_MImageBody_pending,
+    .mx_MImageBody_error,
+    .mx_MImageBody_unsafe {
+        background-color: rgba(141, 151, 165, 0.2);
+        border-radius: 8px;
+        display: inline-block;
+    }
+}
+
+.mx_MImageBody_BlockedIcon {
+    left: calc(50% - 20px);
+    position: absolute;
+    top: calc(50% - 20px);
+    z-index: 1;
+}

res/css/views/messages/ContentScanningVideoBody.scss

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2022 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.mx_MVideoBody {
+    position: relative;
+}
+
+.mx_EventTile_image {
+    flex-direction: column;
+}
+
+.mx_EventTile .mx_EventTile_line.mx_EventTile_mediaLine {
+    .mx_MVideoBody_pending,
+    .mx_MVideoBody_error,
+    .mx_MVideoBody_unsafe {
+        background-color: rgba(141, 151, 165, 0.2);
+        border-radius: 8px;
+        display: inline-block;
+    }
+}
+
+.mx_MVideoBody_BlockedIcon {
+    left: calc(50% - 20px);
+    position: absolute;
+    top: calc(50% - 20px);
+    z-index: 1;
+}