Handle icons and skip decryption checks during export

src/components/views/messages/MAudioBody.js

@@ -95,7 +95,7 @@ export default class MAudioBody extends React.Component {
             );
         }
 
-        if (content.file !== undefined && this.state.decryptedUrl === null) {
+        if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null) {
             // Need to decrypt the attachment
             // The attachment is decrypted in componentDidMount.
             // For now add an img tag with a 16x16 spinner.

src/components/views/messages/MFileBody.js

@@ -104,6 +104,7 @@ export default class MFileBody extends React.Component {
         showGenericPlaceholder: PropTypes.bool,
         /* to set source to local file path during export */
         mediaSrc: PropTypes.string,
+        isExporting: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -174,7 +175,9 @@ export default class MFileBody extends React.Component {
         if (this.props.showGenericPlaceholder) {
             placeholder = (
                 <div className="mx_MFileBody_info">
-                    <span className="mx_MFileBody_info_icon" />
+                    <span className="mx_MFileBody_info_icon" >
+                        {this.props.isExporting ? <img class="mx_export_attach_icon" src="icons/attach.svg" /> : null}
+                    </span>
                     <span className="mx_MFileBody_info_filename">{this.presentableTextForFile(content, false)}</span>
                 </div>
             );

src/components/views/messages/MImageBody.js

@@ -370,9 +370,9 @@ export default class MImageBody extends React.Component {
         let gifLabel = null;
 
         // e2e image hasn't been decrypted yet
-        if (content.file !== undefined && this.state.decryptedUrl === null) {
+        if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null) {
             placeholder = <InlineSpinner w={32} h={32} />;
-        } else if (!this.state.imgLoaded) {
+        } else if (!this.props.mediaSrc && !this.state.imgLoaded) {
             // Deliberately, getSpinner is left unimplemented here, MStickerBody overides
             placeholder = this.getPlaceholder();
         }
@@ -407,7 +407,7 @@ export default class MImageBody extends React.Component {
             <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px" }} >
                 { /* Calculate aspect ratio, using %padding will size _container correctly */ }
                 <div style={{ paddingBottom: (100 * infoHeight / infoWidth) + '%' }} />
-                { !this.props.mediaSrc && showPlaceholder &&
+                {showPlaceholder &&
                     <div className="mx_MImageBody_thumbnail" style={{
                         // Constrain width here so that spinner appears central to the loaded thumbnail
                         maxWidth: infoWidth + "px",

src/components/views/messages/MVideoBody.tsx

@@ -209,7 +209,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
         }
 
         // Important: If we aren't autoplaying and we haven't decrypted it yet, show a video with a poster.
-        if (content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
+        if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
             // Need to decrypt the attachment
             // The attachment is decrypted in componentDidMount.
             // For now add an img tag with a spinner.

src/components/views/messages/MessageEvent.js

@@ -47,6 +47,9 @@ export default class MessageEvent extends React.Component {
         /* to set source to local file path during export */
         mediaSrc: PropTypes.string,
 
+        /* to set source to local file path during export */
+        isExporting: PropTypes.bool,
+
         /* the maximum image height to use, if the event is an image */
         maxImageHeight: PropTypes.number,
 
@@ -124,6 +127,7 @@ export default class MessageEvent extends React.Component {
             showUrlPreview={this.props.showUrlPreview}
             tileShape={this.props.tileShape}
             mediaSrc={this.props.mediaSrc}
+            isExporting={this.props.isExporting}
             maxImageHeight={this.props.maxImageHeight}
             replacingEventId={this.props.replacingEventId}
             editState={this.props.editState}

src/components/views/messages/RedactedBody.tsx

@@ -24,9 +24,10 @@ import SettingsStore from "../../../settings/SettingsStore";
 
 interface IProps {
     mxEvent: MatrixEvent;
+    isExporting: boolean;
 }
 
-const RedactedBody = React.forwardRef<any, IProps>(({mxEvent}, ref) => {
+const RedactedBody = React.forwardRef<any, IProps>(({mxEvent, isExporting}, ref) => {
     const cli: MatrixClient = useContext(MatrixClientContext);
 
     let text = _t("Message deleted");
@@ -44,6 +45,7 @@ const RedactedBody = React.forwardRef<any, IProps>(({mxEvent}, ref) => {
 
     return (
         <span className="mx_RedactedBody" ref={ref} title={titleText}>
+            { isExporting ? <img className="mx_export_trash_icon" src="icons/trash.svg" title="Redacted" /> : null }
             { text }
         </span>
     );

src/components/views/rooms/EventTile.tsx

@@ -311,6 +311,7 @@ export default class EventTile extends React.Component<IProps, IState> {
     static defaultProps = {
         // no-op function because onHeightChanged is optional yet some sub-components assume its existence
         onHeightChanged: function() {},
+        isExporting: false,
     };
 
     static contextType = MatrixClientContext;
@@ -1150,6 +1151,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                             { thread }
                             <EventTileType ref={this.tile}
                                 mxEvent={this.props.mxEvent}
+                                isExporting={this.props.isExporting}
                                 replacingEventId={this.props.replacingEventId}
                                 editState={this.props.editState}
                                 mediaSrc={this.props.mediaSrc}

src/utils/exportUtils/exportCSS.ts

@@ -58,5 +58,26 @@ a.mx_reply_anchor:hover{
   from {bottom: 30px; opacity: 1;}
   to {bottom: 0; opacity: 0;}
 }
+
+.mx_MFileBody_info .mx_MFileBody_info_icon img.mx_export_attach_icon {
+  content: '';
+  background-color: #ffffff;
+  width: 13px;
+  height: 15px;
+  position: absolute;
+  top: 8px;
+  left: 9px;
+}
+
+.mx_RedactedBody img.mx_export_trash_icon {
+  height: 14px;
+  width: 14px;
+  background-color: #ffffff;
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 0;
+}
+
 `
 export default lightCSS + snackbarCSS;