PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Fix html export not including images (#9260)

Browse source 
* Fix html export not including images

* Respect showPlaceholder

* Add tests
This commit is contained in:
Michael Telatynski 2022-09-08 11:00:58 +01:00 committed by GitHub
parent 638175b7d7
commit 52fc8ff255
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 68 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/components/views/messages/MImageBody.tsx
View file

@ -391,7 +391,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
// By doing this, the image "pops" into the timeline, but is still restricted
// by the same width and height logic below.
if (!this.state.loadedImageDimensions) {
let imageElement;
let imageElement: JSX.Element;
if (!this.state.showImage) {
imageElement = <HiddenImagePlaceholder />;
} else {
@ -425,7 +425,13 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
let gifLabel: JSX.Element;
if (!this.props.forExport && !this.state.imgLoaded) {
placeholder = this.getPlaceholder(maxWidth, maxHeight);
const classes = classNames('mx_MImageBody_placeholder', {
'mx_MImageBody_placeholder--blurhash': this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
});
placeholder = <div className={classes}>
{ this.getPlaceholder(maxWidth, maxHeight) }
</div>;
}
let showPlaceholder = Boolean(placeholder);
@ -463,29 +469,26 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
banner = this.getBanner(content);
}
const classes = classNames({
'mx_MImageBody_placeholder': true,
'mx_MImageBody_placeholder--blurhash': this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
});
// many SVGs don't have an intrinsic size if used in <img> elements.
// due to this we have to set our desired width directly.
// this way if the image is forced to shrink, the height adapts appropriately.
const sizing = infoSvg ? { maxHeight, maxWidth, width: maxWidth } : { maxHeight, maxWidth };
if (!this.props.forExport) {
placeholder = <SwitchTransition mode="out-in">
<CSSTransition
classNames="mx_rtg--fade"
key={`img-${showPlaceholder}`}
timeout={300}
>
{ showPlaceholder ? placeholder : <></> /* Transition always expects a child */ }
</CSSTransition>
</SwitchTransition>;
}
const thumbnail = (
<div className="mx_MImageBody_thumbnail_container" style={{ maxHeight, maxWidth, aspectRatio: `${infoWidth}/${infoHeight}` }}>
<SwitchTransition mode="out-in">
<CSSTransition
classNames="mx_rtg--fade"
key={`img-${showPlaceholder}`}
timeout={300}
>
{ showPlaceholder ? <div className={classes}>
{ placeholder }
</div> : <></> /* Transition always expects a child */ }
</CSSTransition>
</SwitchTransition>
{ placeholder }
<div style={sizing}>
{ img }
@ -494,7 +497,9 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
</div>
{ /* HACK: This div fills out space while the image loads, to prevent scroll jumps */ }
{ !this.state.imgLoaded && <div style={{ height: maxHeight, width: maxWidth }} /> }
{ !this.props.forExport && !this.state.imgLoaded && (
<div style={{ height: maxHeight, width: maxWidth }} />
) }
{ this.state.hover && this.getTooltip() }
</div>
@ -559,9 +564,12 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
);
}
const contentUrl = this.state.contentUrl;
let contentUrl = this.state.contentUrl;
let thumbUrl: string;
if (this.props.forExport || (this.state.isAnimated && SettingsStore.getValue("autoplayGifs"))) {
if (this.props.forExport) {
contentUrl = this.props.mxEvent.getContent().url ?? this.props.mxEvent.getContent().file?.url;
thumbUrl = contentUrl;
} else if (this.state.isAnimated && SettingsStore.getValue("autoplayGifs")) {
thumbUrl = contentUrl;
} else {
thumbUrl = this.state.thumbUrl ?? this.state.contentUrl;

6
src/utils/exportUtils/HtmlExport.tsx
View file

@ -316,7 +316,7 @@ export default class HTMLExporter extends Exporter {
}
if (filePath) {
const mxc = mxEv.getContent().url || mxEv.getContent().file?.url;
const mxc = mxEv.getContent().url ?? mxEv.getContent().file?.url;
eventTileMarkup = eventTileMarkup.split(mxc).join(filePath);
}
eventTileMarkup = eventTileMarkup.replace(/<span class="mx_MFileBody_info_icon".*?>.*?<\/span>/, '');
@ -382,7 +382,9 @@ export default class HTMLExporter extends Exporter {
joined,
);
}
} else eventTile = await this.getEventTileMarkup(mxEv, joined);
} else {
eventTile = await this.getEventTileMarkup(mxEv, joined);
}
} catch (e) {
// TODO: Handle callEvent errors
logger.error(e);

35
test/utils/export-test.tsx
View file

@ -115,6 +115,29 @@ describe('export', function() {
});
}
function mkImageEvent() {
return new MatrixEvent({
"content": {
"body": "image.png",
"info": {
"mimetype": "image/png",
"size": 31613,
},
"msgtype": "m.image",
"url": "mxc://test.org",
},
"origin_server_ts": 1628872988364,
"sender": MY_USER_ID,
"type": "m.room.message",
"unsigned": {
"age": 266,
"transaction_id": "m99999999.2",
},
"event_id": "$99999999999999999999",
"room_id": mockRoom.roomId,
});
}
function mkEvents() {
const matrixEvents = [];
let i: number;
@ -204,6 +227,18 @@ describe('export', function() {
).toBeTruthy();
});
it("should export images if attachments are enabled", () => {
const exporter = new HTMLExporter(mockRoom, ExportType.Beginning, {
numberOfMessages: 5,
maxSize: 100 * 1024 * 1024,
attachmentsIncluded: true,
}, null);
const imageRegex = /<img.+ src="mxc:\/\/test.org" alt="image.png"\/>/;
expect(imageRegex.test(
renderToString(exporter.getEventTile(mkImageEvent(), true))),
).toBeTruthy();
});
const invalidExportOptions: [string, IExportOptions][] = [
['numberOfMessages exceeds max', {
numberOfMessages: 10 ** 9,