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

Merge pull request #4075 from MarcoZehe/SuppressSpeechWhenSending

Browse source 
Don't speak the outgoing message if it is in the Sending state.
This commit is contained in:
J. Ryan Stinnett 2020-07-28 16:24:28 +01:00 committed by GitHub
commit 79348b44cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/structures/MessagePanel.js
View file

@ -346,9 +346,9 @@ export default class MessagePanel extends React.Component {
} }
} }
_isUnmounting() { _isUnmounting = () => {
return !this._isMounted; return !this._isMounted;
} };
// TODO: Implement granular (per-room) hide options // TODO: Implement granular (per-room) hide options
_shouldShowEvent(mxEv) { _shouldShowEvent(mxEv) {
@ -571,12 +571,10 @@ export default class MessagePanel extends React.Component {
const readReceipts = this._readReceiptsByEvent[eventId]; const readReceipts = this._readReceiptsByEvent[eventId];
// Dev note: `this._isUnmounting.bind(this)` is important - it ensures that // use txnId as key if available so that we don't remount during sending
// the function is run in the context of this class and not EventTile, therefore
// ensuring the right `this._mounted` variable is used by read receipts (which
// don't update their position if we, the MessagePanel, is unmounting).
ret.push( ret.push(
<li key={eventId} <li
key={mxEv.getTxnId() || eventId}
ref={this._collectEventNode.bind(this, eventId)} ref={this._collectEventNode.bind(this, eventId)}
data-scroll-tokens={scrollToken} data-scroll-tokens={scrollToken}
> >
@ -590,7 +588,7 @@ export default class MessagePanel extends React.Component {
readReceipts={readReceipts} readReceipts={readReceipts}
readReceiptMap={this._readReceiptMap} readReceiptMap={this._readReceiptMap}
showUrlPreview={this.props.showUrlPreview} showUrlPreview={this.props.showUrlPreview}
checkUnmounting={this._isUnmounting.bind(this)} checkUnmounting={this._isUnmounting}
eventSendStatus={mxEv.getAssociatedStatus()} eventSendStatus={mxEv.getAssociatedStatus()}
tileShape={this.props.tileShape} tileShape={this.props.tileShape}
isTwelveHour={this.props.isTwelveHour} isTwelveHour={this.props.isTwelveHour}

11
src/components/views/rooms/EventTile.js
View file

@ -685,6 +685,9 @@ export default createReactClass({
mx_EventTile_emote: msgtype === 'm.emote', mx_EventTile_emote: msgtype === 'm.emote',
}); });
// If the tile is in the Sending state, don't speak the message.
const ariaLive = (this.props.eventSendStatus !== null) ? 'off' : undefined;
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(this.props.mxEvent.getId());
@ -819,7 +822,7 @@ export default createReactClass({
case 'notif': { case 'notif': {
const room = this.context.getRoom(this.props.mxEvent.getRoomId()); const room = this.context.getRoom(this.props.mxEvent.getRoomId());
return ( return (
<div className={classes}> <div className={classes} aria-live={ariaLive} aria-atomic="true">
<div className="mx_EventTile_roomName"> <div className="mx_EventTile_roomName">
<a href={permalink} onClick={this.onPermalinkClicked}> <a href={permalink} onClick={this.onPermalinkClicked}>
{ room ? room.name : '' } { room ? room.name : '' }
@ -845,7 +848,7 @@ export default createReactClass({
} }
case 'file_grid': { case 'file_grid': {
return ( return (
<div className={classes}> <div className={classes} aria-live={ariaLive} aria-atomic="true">
<div className="mx_EventTile_line"> <div className="mx_EventTile_line">
<EventTileType ref={this._tile} <EventTileType ref={this._tile}
mxEvent={this.props.mxEvent} mxEvent={this.props.mxEvent}
@ -881,7 +884,7 @@ export default createReactClass({
); );
} }
return ( return (
<div className={classes}> <div className={classes} aria-live={ariaLive} aria-atomic="true">
{ ircTimestamp } { ircTimestamp }
{ avatar } { avatar }
{ sender } { sender }
@ -911,7 +914,7 @@ export default createReactClass({
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
return ( return (
<div className={classes} tabIndex={-1}> <div className={classes} tabIndex={-1} aria-live={ariaLive} aria-atomic="true">
{ ircTimestamp } { ircTimestamp }
<div className="mx_EventTile_msgOption"> <div className="mx_EventTile_msgOption">
{ readAvatars } { readAvatars }