pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Video conferencing skeleton.

Browse Source
This commit is contained in:
aforge
2023-05-03 22:50:51 -07:00
parent f9e7a71920
commit 0425bd4348
10 changed files with 808 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/widgets/call-message.jsx
+12 -5
View File
@@ -7,11 +7,17 @@ import { secondsToTime } from '../lib/strformat.js';
export default class CallMessage extends React.PureComponent {
render() {
const bigIcon = this.props.vc ? 'video_call' : 'call';
const isCallDropped = ['busy', 'declined', 'disconnected', 'missed'].includes(this.props.callState);
const successClass = 'material-icons medium ' + (isCallDropped ? 'red' : 'green');
const callIcon = this.props.incoming ?
(isCallDropped ? 'call_missed' : 'call_received') :
(isCallDropped ? 'call_missed_outgoing' : 'call_made');
const title = this.props.vc ?
<FormattedMessage id="calls_conference" defaultMessage="Conference call" description="Conference call label" /> :
this.props.incoming ?
<FormattedMessage id="calls_incoming" defaultMessage="Incoming call" description="Incoming call label" /> :
<FormattedMessage id="calls_outgoing" defaultMessage="Outgoing call" description="Outgoing call label" />;
let duration;
if (isCallDropped) {
switch (this.props.callState) {
@@ -33,14 +39,15 @@ export default class CallMessage extends React.PureComponent {
} else {
duration = <span>{secondsToTime(this.props.duration / 1000)}</span>;
}
const allowJoin = this.props.vc && this.props.callState == 'started';
return <div className="call-message">
<div><i className="material-icons big gray">call</i></div>
<div><i className="material-icons big gray">{bigIcon}</i></div>
<div className="flex-column narrow">
<div>{this.props.incoming ?
<FormattedMessage id="calls_incoming" defaultMessage="Incoming call" description="Incoming call label" /> :
<FormattedMessage id="calls_outgoing" defaultMessage="Outgoing call" description="Outgoing call label" />
}</div>
<div>{title}</div>
<div className="duration"><i className={successClass}>{callIcon}</i> {duration}</div>
{allowJoin ?
<a onClick={this.props.onCallJoin}>Join</a>
: null}
</div>
</div>;
}