OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Get rid of mediaSrc and avatarSrc props

pull/21833/head
Jaiwanth 2021-06-09 15:23:47 +05:30
parent dbb3614374
commit 573ababb8c
9 changed files with 35 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/views/avatars/MemberAvatar.tsx
View File

@ -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 = () => {

6
src/components/views/messages/MAudioBody.js
View File

@ -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.

8
src/components/views/messages/MFileBody.js
View File

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

12
src/components/views/messages/MImageBody.js
View File

@ -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();

10
src/components/views/messages/MVideoBody.tsx
View File

@ -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.

4
src/components/views/messages/MVoiceOrAudioBody.tsx
View File

@ -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} />;

4
src/components/views/messages/MessageEvent.js
View File

@ -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}

9
src/components/views/rooms/EventTile.tsx
View File

@ -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}

17
src/utils/exportUtils/HtmlExport.tsx
View File

@ -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);
return <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
const eventTile = <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[]) {