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

Merge pull request #6629 from SimonBrandner/feature/voice-messages-replies

Browse source 
Allow playback of replied-to voice message
This commit is contained in:
David Baker 2021-08-23 11:29:41 +01:00 • committed by GitHub
commit e946e39194
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/views/messages/MVoiceOrAudioBody.tsx
View file

@ -19,14 +19,12 @@ import MAudioBody from "./MAudioBody";
import { replaceableComponent } from "../../../utils/replaceableComponent"; import { replaceableComponent } from "../../../utils/replaceableComponent";
import MVoiceMessageBody from "./MVoiceMessageBody"; import MVoiceMessageBody from "./MVoiceMessageBody";
import { IBodyProps } from "./IBodyProps"; import { IBodyProps } from "./IBodyProps";
import { isVoiceMessage } from "../../../utils/EventUtils";
@replaceableComponent("views.messages.MVoiceOrAudioBody") @replaceableComponent("views.messages.MVoiceOrAudioBody")
export default class MVoiceOrAudioBody extends React.PureComponent<IBodyProps> { export default class MVoiceOrAudioBody extends React.PureComponent<IBodyProps> {
public render() { public render() {
// MSC2516 is a legacy identifier. See https://github.com/matrix-org/matrix-doc/pull/3245 if (isVoiceMessage(this.props.mxEvent)) {
const isVoiceMessage = !!this.props.mxEvent.getContent()['org.matrix.msc2516.voice']
|| !!this.props.mxEvent.getContent()['org.matrix.msc3245.voice'];
if (isVoiceMessage) {
return <MVoiceMessageBody {...this.props} />; return <MVoiceMessageBody {...this.props} />;
} else { } else {
return <MAudioBody {...this.props} />; return <MAudioBody {...this.props} />;

17
src/components/views/rooms/ReplyTile.tsx
View file

@ -25,8 +25,9 @@ import MImageReplyBody from "../messages/MImageReplyBody";
import * as sdk from '../../../index'; import * as sdk from '../../../index';
import { EventType, MsgType } from 'matrix-js-sdk/src/@types/event'; import { EventType, MsgType } from 'matrix-js-sdk/src/@types/event';
import { replaceableComponent } from '../../../utils/replaceableComponent'; import { replaceableComponent } from '../../../utils/replaceableComponent';
import { getEventDisplayInfo } from '../../../utils/EventUtils'; import { getEventDisplayInfo, isVoiceMessage } from '../../../utils/EventUtils';
import MFileBody from "../messages/MFileBody"; import MFileBody from "../messages/MFileBody";
import MVoiceMessageBody from "../messages/MVoiceMessageBody";
interface IProps { interface IProps {
mxEvent: MatrixEvent; mxEvent: MatrixEvent;
@ -95,7 +96,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
const msgType = mxEvent.getContent().msgtype; const msgType = mxEvent.getContent().msgtype;
const evType = mxEvent.getType() as EventType; const evType = mxEvent.getType() as EventType;
const { tileHandler, isInfoMessage } = getEventDisplayInfo(this.props.mxEvent); const { tileHandler, isInfoMessage } = getEventDisplayInfo(mxEvent);
// This shouldn't happen: the caller should check we support this type // This shouldn't happen: the caller should check we support this type
// before trying to instantiate us // before trying to instantiate us
if (!tileHandler) { if (!tileHandler) {
@ -109,14 +110,14 @@ export default class ReplyTile extends React.PureComponent<IProps> {
const EventTileType = sdk.getComponent(tileHandler); const EventTileType = sdk.getComponent(tileHandler);
const classes = classNames("mx_ReplyTile", { const classes = classNames("mx_ReplyTile", {
mx_ReplyTile_info: isInfoMessage && !this.props.mxEvent.isRedacted(), mx_ReplyTile_info: isInfoMessage && !mxEvent.isRedacted(),
mx_ReplyTile_audio: msgType === MsgType.Audio, mx_ReplyTile_audio: msgType === MsgType.Audio,
mx_ReplyTile_video: msgType === MsgType.Video, mx_ReplyTile_video: msgType === MsgType.Video,
}); });
let permalink = "#"; let permalink = "#";
if (this.props.permalinkCreator) { if (this.props.permalinkCreator) {
permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId()); permalink = this.props.permalinkCreator.forEvent(mxEvent.getId());
} }
let sender; let sender;
@ -129,7 +130,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
if (needsSenderProfile) { if (needsSenderProfile) {
sender = <SenderProfile sender = <SenderProfile
mxEvent={this.props.mxEvent} mxEvent={mxEvent}
enableFlair={false} enableFlair={false}
/>; />;
} }
@ -137,7 +138,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
const msgtypeOverrides = { const msgtypeOverrides = {
[MsgType.Image]: MImageReplyBody, [MsgType.Image]: MImageReplyBody,
// Override audio and video body with file body. We also hide the download/decrypt button using CSS // Override audio and video body with file body. We also hide the download/decrypt button using CSS
[MsgType.Audio]: MFileBody, [MsgType.Audio]: isVoiceMessage(mxEvent) ? MVoiceMessageBody : MFileBody,
[MsgType.Video]: MFileBody, [MsgType.Video]: MFileBody,
}; };
const evOverrides = { const evOverrides = {
@ -151,14 +152,14 @@ export default class ReplyTile extends React.PureComponent<IProps> {
{ sender } { sender }
<EventTileType <EventTileType
ref="tile" ref="tile"
mxEvent={this.props.mxEvent} mxEvent={mxEvent}
highlights={this.props.highlights} highlights={this.props.highlights}
highlightLink={this.props.highlightLink} highlightLink={this.props.highlightLink}
onHeightChanged={this.props.onHeightChanged} onHeightChanged={this.props.onHeightChanged}
showUrlPreview={false} showUrlPreview={false}
overrideBodyTypes={msgtypeOverrides} overrideBodyTypes={msgtypeOverrides}
overrideEventTypes={evOverrides} overrideEventTypes={evOverrides}
replacingEventId={this.props.mxEvent.replacingEventId()} replacingEventId={mxEvent.replacingEventId()}
maxImageHeight={96} /> maxImageHeight={96} />
</a> </a>
</div> </div>

9
src/utils/EventUtils.ts
View file

@ -144,3 +144,12 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
return { tileHandler, isInfoMessage, isBubbleMessage, isLeftAlignedBubbleMessage }; return { tileHandler, isInfoMessage, isBubbleMessage, isLeftAlignedBubbleMessage };
} }
export function isVoiceMessage(mxEvent: MatrixEvent): boolean {
const content = mxEvent.getContent();
// MSC2516 is a legacy identifier. See https://github.com/matrix-org/matrix-doc/pull/3245
return (
!!content['org.matrix.msc2516.voice'] ||
!!content['org.matrix.msc3245.voice']
);
}