Show call length during a call
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
parent
49defd7b5a
commit
c6400c8db3
2 changed files with 25 additions and 8 deletions
|
@ -25,6 +25,7 @@ import defaultDispatcher from "../../dispatcher/dispatcher";
|
||||||
export enum CallEventGrouperEvent {
|
export enum CallEventGrouperEvent {
|
||||||
StateChanged = "state_changed",
|
StateChanged = "state_changed",
|
||||||
SilencedChanged = "silenced_changed",
|
SilencedChanged = "silenced_changed",
|
||||||
|
LengthChanged = "length_changed",
|
||||||
}
|
}
|
||||||
|
|
||||||
const CONNECTING_STATES = [
|
const CONNECTING_STATES = [
|
||||||
|
@ -113,6 +114,10 @@ export default class CallEventGrouper extends EventEmitter {
|
||||||
this.emit(CallEventGrouperEvent.SilencedChanged, newState);
|
this.emit(CallEventGrouperEvent.SilencedChanged, newState);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
private onLengthChanged = (length: number): void => {
|
||||||
|
this.emit(CallEventGrouperEvent.LengthChanged, length);
|
||||||
|
};
|
||||||
|
|
||||||
public answerCall = () => {
|
public answerCall = () => {
|
||||||
this.call?.answer();
|
this.call?.answer();
|
||||||
};
|
};
|
||||||
|
@ -139,6 +144,7 @@ export default class CallEventGrouper extends EventEmitter {
|
||||||
private setCallListeners() {
|
private setCallListeners() {
|
||||||
if (!this.call) return;
|
if (!this.call) return;
|
||||||
this.call.addListener(CallEvent.State, this.setState);
|
this.call.addListener(CallEvent.State, this.setState);
|
||||||
|
this.call.addListener(CallEvent.LengthChanged, this.onLengthChanged);
|
||||||
}
|
}
|
||||||
|
|
||||||
private setState = () => {
|
private setState = () => {
|
||||||
|
|
|
@ -17,7 +17,7 @@ limitations under the License.
|
||||||
import React, { createRef } from 'react';
|
import React, { createRef } from 'react';
|
||||||
|
|
||||||
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||||
import { _t, _td } from '../../../languageHandler';
|
import { _t } from '../../../languageHandler';
|
||||||
import MemberAvatar from '../avatars/MemberAvatar';
|
import MemberAvatar from '../avatars/MemberAvatar';
|
||||||
import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../structures/CallEventGrouper';
|
import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../structures/CallEventGrouper';
|
||||||
import AccessibleButton from '../elements/AccessibleButton';
|
import AccessibleButton from '../elements/AccessibleButton';
|
||||||
|
@ -26,6 +26,7 @@ import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
|
import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
|
||||||
import { formatCallTime } from "../../../DateUtils";
|
import { formatCallTime } from "../../../DateUtils";
|
||||||
|
import Clock from "../audio_messages/Clock";
|
||||||
|
|
||||||
const MAX_NON_NARROW_WIDTH = 450 / 70 * 100;
|
const MAX_NON_NARROW_WIDTH = 450 / 70 * 100;
|
||||||
|
|
||||||
|
@ -38,13 +39,9 @@ interface IState {
|
||||||
callState: CallState | CustomCallState;
|
callState: CallState | CustomCallState;
|
||||||
silenced: boolean;
|
silenced: boolean;
|
||||||
narrow: boolean;
|
narrow: boolean;
|
||||||
|
length: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const TEXTUAL_STATES: Map<CallState | CustomCallState, string> = new Map([
|
|
||||||
[CallState.Connected, _td("Connected")],
|
|
||||||
[CallState.Connecting, _td("Connecting")],
|
|
||||||
]);
|
|
||||||
|
|
||||||
export default class CallEvent extends React.PureComponent<IProps, IState> {
|
export default class CallEvent extends React.PureComponent<IProps, IState> {
|
||||||
private wrapperElement = createRef<HTMLDivElement>();
|
private wrapperElement = createRef<HTMLDivElement>();
|
||||||
private resizeObserver: ResizeObserver;
|
private resizeObserver: ResizeObserver;
|
||||||
|
@ -56,12 +53,14 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
|
||||||
callState: this.props.callEventGrouper.state,
|
callState: this.props.callEventGrouper.state,
|
||||||
silenced: false,
|
silenced: false,
|
||||||
narrow: false,
|
narrow: false,
|
||||||
|
length: 0,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.props.callEventGrouper.addListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
|
this.props.callEventGrouper.addListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
|
||||||
this.props.callEventGrouper.addListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
|
this.props.callEventGrouper.addListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
|
||||||
|
this.props.callEventGrouper.addListener(CallEventGrouperEvent.LengthChanged, this.onLengthChanged);
|
||||||
|
|
||||||
this.resizeObserver = new ResizeObserver(this.resizeObserverCallback);
|
this.resizeObserver = new ResizeObserver(this.resizeObserverCallback);
|
||||||
this.resizeObserver.observe(this.wrapperElement.current);
|
this.resizeObserver.observe(this.wrapperElement.current);
|
||||||
|
@ -70,10 +69,15 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
this.props.callEventGrouper.removeListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
|
this.props.callEventGrouper.removeListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
|
||||||
this.props.callEventGrouper.removeListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
|
this.props.callEventGrouper.removeListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
|
||||||
|
this.props.callEventGrouper.removeListener(CallEventGrouperEvent.LengthChanged, this.onLengthChanged);
|
||||||
|
|
||||||
this.resizeObserver.disconnect();
|
this.resizeObserver.disconnect();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private onLengthChanged = (length: number): void => {
|
||||||
|
this.setState({ length });
|
||||||
|
};
|
||||||
|
|
||||||
private resizeObserverCallback = (entries: ResizeObserverEntry[]): void => {
|
private resizeObserverCallback = (entries: ResizeObserverEntry[]): void => {
|
||||||
const wrapperElementEntry = entries.find((entry) => entry.target === this.wrapperElement.current);
|
const wrapperElementEntry = entries.find((entry) => entry.target === this.wrapperElement.current);
|
||||||
if (!wrapperElementEntry) return;
|
if (!wrapperElementEntry) return;
|
||||||
|
@ -214,10 +218,17 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (Array.from(TEXTUAL_STATES.keys()).includes(state)) {
|
if (state === CallState.Connected) {
|
||||||
return (
|
return (
|
||||||
<div className="mx_CallEvent_content">
|
<div className="mx_CallEvent_content">
|
||||||
{ TEXTUAL_STATES.get(state) }
|
<Clock seconds={this.state.length} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (state === CallState.Connecting) {
|
||||||
|
return (
|
||||||
|
<div className="mx_CallEvent_content">
|
||||||
|
{ _t("Connecting") }
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue