Get rid of mediaSrc and avatarSrc props

src/components/views/avatars/MemberAvatar.tsx

@@ -34,10 +34,10 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
     resizeMethod?: ResizeMethod;
     // The onClick to give the avatar
     onClick?: React.MouseEventHandler;
-    // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
+    // Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser`
     viewUserOnClick?: boolean;
     title?: string;
-    avatarSrc?: string;
+    forExport?: boolean;
 }
 
 interface IState {
@@ -68,7 +68,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
     private static getState(props: IProps): IState {
         if (props.member?.name) {
             let imageUrl = null;
-            if (props.avatarSrc) imageUrl = props.avatarSrc;
+            if (props.forExport && props.member.getMxcAvatarUrl()) imageUrl = "AvatarForExport";
             else if (props.member.getMxcAvatarUrl()) {
                 imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
                     props.width,
@@ -95,7 +95,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
         let {member, fallbackUserId, onClick, viewUserOnClick, ...otherProps} = this.props;
         const userId = member ? member.userId : fallbackUserId;
 
-        otherProps = omit(otherProps, "avatarSrc");
+        otherProps = omit(otherProps, "forExport");
 
         if (viewUserOnClick) {
             onClick = () => {

src/components/views/messages/MAudioBody.js

@@ -42,7 +42,7 @@ export default class MAudioBody extends React.Component {
     }
 
     _getContentUrl() {
-        if (this.props.mediaSrc) return this.props.mediaSrc;
+        if (this.props.forExport) return "forExport";
         const media = mediaFromContent(this.props.mxEvent.getContent());
         if (media.isEncrypted) {
             return this.state.decryptedUrl;
@@ -52,7 +52,7 @@ export default class MAudioBody extends React.Component {
     }
 
     getFileBody() {
-        if (this.props.mediaSrc) return null;
+        if (this.props.forExport) return null;
         return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
     }
 
@@ -95,7 +95,7 @@ export default class MAudioBody extends React.Component {
             );
         }
 
-        if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null) {
+        if (!this.props.forExport && 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

@@ -102,8 +102,7 @@ export default class MFileBody extends React.Component {
         tileShape: PropTypes.string,
         /* whether or not to show the default placeholder for the file. Defaults to true. */
         showGenericPlaceholder: PropTypes.bool,
-        /* to set source to local file path during export */
+
-        mediaSrc: PropTypes.string,
         forExport: PropTypes.bool,
     };
 
@@ -152,6 +151,7 @@ export default class MFileBody extends React.Component {
     }
 
     _getContentUrl() {
+        if (this.props.forExport) return null;
         const media = mediaFromContent(this.props.mxEvent.getContent());
         return media.srcHttp;
     }
@@ -185,9 +185,9 @@ export default class MFileBody extends React.Component {
             );
         }
 
-        if (this.props.mediaSrc) {
+        if (this.props.forExport) {
             return <span className="mx_MFileBody">
-                <a href={this.props.mediaSrc}>
+                <a href="forExport">
                     { placeholder }
                 </a>
             </span>;

src/components/views/messages/MImageBody.js

@@ -172,7 +172,7 @@ export default class MImageBody extends React.Component {
     }
 
     _getContentUrl() {
-        if (this.props.mediaSrc) return this.props.mediaSrc;
+        if (this.props.forExport) return "forExport";
         const media = mediaFromContent(this.props.mxEvent.getContent());
         if (media.isEncrypted) {
             return this.state.decryptedUrl;
@@ -370,9 +370,9 @@ export default class MImageBody extends React.Component {
         let gifLabel = null;
 
         // e2e image hasn't been decrypted yet
-        if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null) {
+        if (!this.props.forExport && content.file !== undefined && this.state.decryptedUrl === null) {
             placeholder = <InlineSpinner w={32} h={32} />;
-        } else if (!this.props.mediaSrc && !this.state.imgLoaded) {
+        } else if (!this.props.forExport && !this.state.imgLoaded) {
             // Deliberately, getSpinner is left unimplemented here, MStickerBody overides
             placeholder = this.getPlaceholder();
         }
@@ -418,7 +418,7 @@ export default class MImageBody extends React.Component {
                     </div>
                 }
 
-                <div style={{display: this.props.mediaSrc ? "block" : !showPlaceholder ? undefined : 'none'}}>
+                <div style={{display: showPlaceholder ? 'none' : undefined}}>
                     { img }
                     { gifLabel }
                 </div>
@@ -450,7 +450,7 @@ export default class MImageBody extends React.Component {
 
     // Overidden by MStickerBody
     getFileBody() {
-        if (this.props.mediaSrc) return null;
+        if (this.props.forExport) return null;
         return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
     }
 
@@ -468,7 +468,7 @@ export default class MImageBody extends React.Component {
 
         const contentUrl = this._getContentUrl();
         let thumbUrl;
-        if ((this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) || this.props.mediaSrc) {
+        if (this.props.forExport || (this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos"))) {
             thumbUrl = contentUrl;
         } else {
             thumbUrl = this._getThumbUrl();

src/components/views/messages/MVideoBody.tsx

@@ -30,7 +30,7 @@ interface IProps {
     /* called when the video has loaded */
     onHeightChanged: () => void;
     /* used to refer to the local file while exporting */
-    mediaSrc?: string;
+    forExport?: boolean;
 }
 
 interface IState {
@@ -78,7 +78,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
     }
 
     private getContentUrl(): string|null {
-        if (this.props.mediaSrc) return this.props.mediaSrc;
+        if (this.props.forExport) return "forExport";
         const media = mediaFromContent(this.props.mxEvent.getContent());
         if (media.isEncrypted) {
             return this.state.decryptedUrl;
@@ -94,7 +94,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
 
     private getThumbUrl(): string|null {
         // there's no need of thumbnail when the content is local
-        if (this.props.mediaSrc) return null;
+        if (this.props.forExport) return null;
 
         const content = this.props.mxEvent.getContent();
         const media = mediaFromContent(content);
@@ -191,7 +191,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
     }
 
     private getFileBody = () => {
-        if (this.props.mediaSrc) return null;
+        if (this.props.forExport) return null;
         return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
     }
 
@@ -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 (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
+        if (!this.props.forExport && 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/MVoiceOrAudioBody.tsx

@@ -23,7 +23,7 @@ import MVoiceMessageBody from "./MVoiceMessageBody";
 
 interface IProps {
     mxEvent: MatrixEvent;
-    mediaSrc?: string;
+    forExport?: boolean;
 }
 
 @replaceableComponent("views.messages.MVoiceOrAudioBody")
@@ -31,7 +31,7 @@ export default class MVoiceOrAudioBody extends React.PureComponent<IProps> {
     public render() {
         const isVoiceMessage = !!this.props.mxEvent.getContent()['org.matrix.msc2516.voice'];
         const voiceMessagesEnabled = SettingsStore.getValue("feature_voice_messages");
-        if (isVoiceMessage && voiceMessagesEnabled && !this.props.mediaSrc) {
+        if (!this.props.forExport && isVoiceMessage && voiceMessagesEnabled) {
             return <MVoiceMessageBody {...this.props} />;
         } else {
             return <MAudioBody {...this.props} />;

src/components/views/messages/MessageEvent.js

@@ -44,9 +44,6 @@ export default class MessageEvent extends React.Component {
         /* the shape of the tile, used */
         tileShape: PropTypes.string,
 
-        /* to set source to local file path during export */
-        mediaSrc: PropTypes.string,
-
         /* to set source to local file path during export */
         forExport: PropTypes.bool,
 
@@ -126,7 +123,6 @@ export default class MessageEvent extends React.Component {
             highlightLink={this.props.highlightLink}
             showUrlPreview={this.props.showUrlPreview}
             tileShape={this.props.tileShape}
-            mediaSrc={this.props.mediaSrc}
             forExport={this.props.forExport}
             maxImageHeight={this.props.maxImageHeight}
             replacingEventId={this.props.replacingEventId}

src/components/views/rooms/EventTile.tsx

@@ -251,12 +251,6 @@ interface IProps {
 
     forExport?: boolean;
 
-    // Used while exporting to refer to the local source rather than the online one
-    mediaSrc?: string;
-
-    // Used while exporting to refer to the local avatar rather than the online one
-    avatarSrc?: string;
-
     // show twelve hour timestamps
     isTwelveHour?: boolean;
 
@@ -963,7 +957,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             avatar = (
                 <div className="mx_EventTile_avatar">
                     <MemberAvatar
-                        avatarSrc={this.props.avatarSrc}
+                        forExport={this.props.forExport}
                         member={member}
                         width={avatarSize}
                         height={avatarSize}
@@ -1190,7 +1184,6 @@ export default class EventTile extends React.Component<IProps, IState> {
                                 forExport={this.props.forExport}
                                 replacingEventId={this.props.replacingEventId}
                                 editState={this.props.editState}
-                                mediaSrc={this.props.mediaSrc}
                                 highlights={this.props.highlights}
                                 highlightLink={this.props.highlightLink}
                                 showUrlPreview={this.props.showUrlPreview}

src/utils/exportUtils/HtmlExport.tsx

@@ -257,11 +257,10 @@ export default class HTMLExporter extends Exporter {
     }
 
 
-    protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, mediaSrc?: string) {
+    protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
         const hasAvatar = this.hasAvatar(mxEv);
         if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
-
+        const eventTile = <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
-        return <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
             <MatrixClientContext.Provider value = {this.matrixClient}>
                 <EventTile
                     mxEvent={mxEv}
@@ -275,8 +274,6 @@ export default class HTMLExporter extends Exporter {
                     checkUnmounting={() => false}
                     isTwelveHour={false}
                     last={false}
-                    mediaSrc={mediaSrc}
-                    avatarSrc={hasAvatar ? `users/${mxEv.sender.userId}` : null}
                     lastInSection={false}
                     permalinkCreator={this.permalinkCreator}
                     lastSuccessful={false}
@@ -289,10 +286,16 @@ export default class HTMLExporter extends Exporter {
                 />
             </MatrixClientContext.Provider>
         </li>
+        let eventTileMarkup = renderToStaticMarkup(eventTile);
+        if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/, `$1"${filePath}"`);
+        if (hasAvatar) {
+            eventTileMarkup = eventTileMarkup.replace(/src="AvatarForExport"/, `src="users/${mxEv.sender.userId}"`);
+        }
+        return eventTileMarkup;
     }
 
     protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
-        let eventTile: JSX.Element;
+        let eventTile: string;
         const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"]
 
         if (mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype)) {
@@ -302,7 +305,7 @@ export default class HTMLExporter extends Exporter {
             this.zip.file(filePath, blob);
         } else eventTile = await this.getEventTile(mxEv, joined);
 
-        return renderToStaticMarkup(eventTile);
+        return eventTile;
     }
 
     protected async createHTML(events: MatrixEvent[]) {