imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
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;