mirror of
https://github.com/element-hq/element-web
synced 2024-10-23 19:25:48 +03:00
IncomingCallBox -> IncomingCallToast
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
parent
07be6dd780
commit
410928745f
6 changed files with 257 additions and 256 deletions
|
@ -263,6 +263,7 @@
|
||||||
@import "./views/spaces/_SpacePublicShare.scss";
|
@import "./views/spaces/_SpacePublicShare.scss";
|
||||||
@import "./views/terms/_InlineTermsAgreement.scss";
|
@import "./views/terms/_InlineTermsAgreement.scss";
|
||||||
@import "./views/toasts/_AnalyticsToast.scss";
|
@import "./views/toasts/_AnalyticsToast.scss";
|
||||||
|
@import "./views/toasts/_IncomingCallToast.scss";
|
||||||
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
|
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
|
||||||
@import "./views/verification/_VerificationShowSas.scss";
|
@import "./views/verification/_VerificationShowSas.scss";
|
||||||
@import "./views/voip/_CallContainer.scss";
|
@import "./views/voip/_CallContainer.scss";
|
||||||
|
|
100
res/css/views/toasts/_IncomingCallToast.scss
Normal file
100
res/css/views/toasts/_IncomingCallToast.scss
Normal file
|
@ -0,0 +1,100 @@
|
||||||
|
/*
|
||||||
|
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||||
|
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.mx_IncomingCallToast {
|
||||||
|
// mx_Toast overrides
|
||||||
|
padding: 8px !important;
|
||||||
|
display: unset !important;
|
||||||
|
top: 8px !important;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
min-width: 250px;
|
||||||
|
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
|
||||||
|
background-color: $voipcall-plinth-color; // To match mx_Toast
|
||||||
|
|
||||||
|
pointer-events: initial; // restore pointer events so the user can accept/decline
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.mx_IncomingCallToast_CallerInfo {
|
||||||
|
display: flex;
|
||||||
|
direction: row;
|
||||||
|
|
||||||
|
img, .mx_BaseAvatar_initial {
|
||||||
|
margin: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, p {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
font-size: $font-14px;
|
||||||
|
line-height: $font-16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_IncomingCallToast_buttons {
|
||||||
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
> .mx_IncomingCallToast_spacer {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-right: 0;
|
||||||
|
font-size: $font-15px;
|
||||||
|
line-height: $font-24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_IncomingCallToast_iconButton {
|
||||||
|
position: absolute;
|
||||||
|
right: 8px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
background-color: $icon-button-color;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
mask-size: contain;
|
||||||
|
mask-position: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_IncomingCallToast_silence::before {
|
||||||
|
mask-image: url('$(res)/img/voip/silence.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_IncomingCallToast_unSilence::before {
|
||||||
|
mask-image: url('$(res)/img/voip/un-silence.svg');
|
||||||
|
}
|
||||||
|
}
|
|
@ -43,84 +43,4 @@ limitations under the License.
|
||||||
.mx_AppTile_persistedWrapper div {
|
.mx_AppTile_persistedWrapper div {
|
||||||
min-width: 350px;
|
min-width: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_IncomingCallBox {
|
|
||||||
min-width: 250px;
|
|
||||||
background-color: $voipcall-plinth-color;
|
|
||||||
padding: 8px;
|
|
||||||
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
pointer-events: initial; // restore pointer events so the user can accept/decline
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.mx_IncomingCallBox_CallerInfo {
|
|
||||||
display: flex;
|
|
||||||
direction: row;
|
|
||||||
|
|
||||||
img, .mx_BaseAvatar_initial {
|
|
||||||
margin: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, p {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
font-size: $font-14px;
|
|
||||||
line-height: $font-16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_IncomingCallBox_buttons {
|
|
||||||
padding: 8px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
> .mx_IncomingCallBox_spacer {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex-shrink: 0;
|
|
||||||
flex-grow: 1;
|
|
||||||
margin-right: 0;
|
|
||||||
font-size: $font-15px;
|
|
||||||
line-height: $font-24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_IncomingCallBox_iconButton {
|
|
||||||
position: absolute;
|
|
||||||
right: 8px;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
background-color: $icon-button-color;
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-size: contain;
|
|
||||||
mask-position: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_IncomingCallBox_silence::before {
|
|
||||||
mask-image: url('$(res)/img/voip/silence.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_IncomingCallBox_unSilence::before {
|
|
||||||
mask-image: url('$(res)/img/voip/un-silence.svg');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -88,6 +88,9 @@ import { randomUppercaseString, randomLowercaseString } from "matrix-js-sdk/src/
|
||||||
import EventEmitter from 'events';
|
import EventEmitter from 'events';
|
||||||
import SdkConfig from './SdkConfig';
|
import SdkConfig from './SdkConfig';
|
||||||
import { ensureDMExists, findDMForUser } from './createRoom';
|
import { ensureDMExists, findDMForUser } from './createRoom';
|
||||||
|
import { getIncomingCallToastKey } from './toasts/IncomingCallToast';
|
||||||
|
import ToastStore from './stores/ToastStore';
|
||||||
|
import IncomingCallToast from "./toasts/IncomingCallToast";
|
||||||
|
|
||||||
export const PROTOCOL_PSTN = 'm.protocol.pstn';
|
export const PROTOCOL_PSTN = 'm.protocol.pstn';
|
||||||
export const PROTOCOL_PSTN_PREFIXED = 'im.vector.protocol.pstn';
|
export const PROTOCOL_PSTN_PREFIXED = 'im.vector.protocol.pstn';
|
||||||
|
@ -641,6 +644,20 @@ export default class CallHandler extends EventEmitter {
|
||||||
`Call state in ${mappedRoomId} changed to ${status}`,
|
`Call state in ${mappedRoomId} changed to ${status}`,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const toastKey = getIncomingCallToastKey(call.callId);
|
||||||
|
if (status === CallState.Ringing) {
|
||||||
|
ToastStore.sharedInstance().addOrReplaceToast({
|
||||||
|
key: toastKey,
|
||||||
|
supplyWholeBody: true,
|
||||||
|
priority: 100,
|
||||||
|
component: IncomingCallToast,
|
||||||
|
className: "mx_IncomingCallToast",
|
||||||
|
props: { call },
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
ToastStore.sharedInstance().dismissToast(toastKey);
|
||||||
|
}
|
||||||
|
|
||||||
dis.dispatch({
|
dis.dispatch({
|
||||||
action: 'call_state',
|
action: 'call_state',
|
||||||
room_id: mappedRoomId,
|
room_id: mappedRoomId,
|
||||||
|
|
|
@ -1,176 +0,0 @@
|
||||||
/*
|
|
||||||
Copyright 2015, 2016 OpenMarket Ltd
|
|
||||||
Copyright 2018 New Vector Ltd
|
|
||||||
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
|
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
you may not use this file except in compliance with the License.
|
|
||||||
You may obtain a copy of the License at
|
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software
|
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
See the License for the specific language governing permissions and
|
|
||||||
limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
|
||||||
import dis from '../../../dispatcher/dispatcher';
|
|
||||||
import { _t } from '../../../languageHandler';
|
|
||||||
import { ActionPayload } from '../../../dispatcher/payloads';
|
|
||||||
import CallHandler, { CallHandlerEvent } from '../../../CallHandler';
|
|
||||||
import RoomAvatar from '../avatars/RoomAvatar';
|
|
||||||
import AccessibleButton from '../elements/AccessibleButton';
|
|
||||||
import { CallState } from 'matrix-js-sdk/src/webrtc/call';
|
|
||||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
|
||||||
import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
|
|
||||||
import classNames from 'classnames';
|
|
||||||
|
|
||||||
interface IProps {
|
|
||||||
}
|
|
||||||
|
|
||||||
interface IState {
|
|
||||||
incomingCall: any;
|
|
||||||
silenced: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
@replaceableComponent("views.voip.IncomingCallBox")
|
|
||||||
export default class IncomingCallBox extends React.Component<IProps, IState> {
|
|
||||||
private dispatcherRef: string;
|
|
||||||
|
|
||||||
constructor(props: IProps) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.dispatcherRef = dis.register(this.onAction);
|
|
||||||
this.state = {
|
|
||||||
incomingCall: null,
|
|
||||||
silenced: false,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount = () => {
|
|
||||||
CallHandler.sharedInstance().addListener(CallHandlerEvent.SilencedCallsChanged, this.onSilencedCallsChanged);
|
|
||||||
};
|
|
||||||
|
|
||||||
public componentWillUnmount() {
|
|
||||||
dis.unregister(this.dispatcherRef);
|
|
||||||
CallHandler.sharedInstance().removeListener(CallHandlerEvent.SilencedCallsChanged, this.onSilencedCallsChanged);
|
|
||||||
}
|
|
||||||
|
|
||||||
private onAction = (payload: ActionPayload) => {
|
|
||||||
switch (payload.action) {
|
|
||||||
case 'call_state': {
|
|
||||||
const call = CallHandler.sharedInstance().getCallForRoom(payload.room_id);
|
|
||||||
if (call && call.state === CallState.Ringing) {
|
|
||||||
this.setState({
|
|
||||||
incomingCall: call,
|
|
||||||
silenced: false, // Reset silenced state for new call
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.setState({
|
|
||||||
incomingCall: null,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
private onSilencedCallsChanged = () => {
|
|
||||||
const callId = this.state.incomingCall?.callId;
|
|
||||||
if (!callId) return;
|
|
||||||
this.setState({ silenced: CallHandler.sharedInstance().isCallSilenced(callId) });
|
|
||||||
};
|
|
||||||
|
|
||||||
private onAnswerClick: React.MouseEventHandler = (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
dis.dispatch({
|
|
||||||
action: 'answer',
|
|
||||||
room_id: CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
private onRejectClick: React.MouseEventHandler = (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
dis.dispatch({
|
|
||||||
action: 'reject',
|
|
||||||
room_id: CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
private onSilenceClick: React.MouseEventHandler = (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
const callId = this.state.incomingCall.callId;
|
|
||||||
this.state.silenced ?
|
|
||||||
CallHandler.sharedInstance().unSilenceCall(callId):
|
|
||||||
CallHandler.sharedInstance().silenceCall(callId);
|
|
||||||
};
|
|
||||||
|
|
||||||
public render() {
|
|
||||||
if (!this.state.incomingCall) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
let room = null;
|
|
||||||
if (this.state.incomingCall) {
|
|
||||||
room = MatrixClientPeg.get().getRoom(CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall));
|
|
||||||
}
|
|
||||||
|
|
||||||
const caller = room ? room.name : _t("Unknown caller");
|
|
||||||
|
|
||||||
let incomingCallText = null;
|
|
||||||
if (this.state.incomingCall) {
|
|
||||||
if (this.state.incomingCall.type === "voice") {
|
|
||||||
incomingCallText = _t("Incoming voice call");
|
|
||||||
} else if (this.state.incomingCall.type === "video") {
|
|
||||||
incomingCallText = _t("Incoming video call");
|
|
||||||
} else {
|
|
||||||
incomingCallText = _t("Incoming call");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const silenceClass = classNames({
|
|
||||||
"mx_IncomingCallBox_iconButton": true,
|
|
||||||
"mx_IncomingCallBox_unSilence": this.state.silenced,
|
|
||||||
"mx_IncomingCallBox_silence": !this.state.silenced,
|
|
||||||
});
|
|
||||||
|
|
||||||
return <div className="mx_IncomingCallBox">
|
|
||||||
<div className="mx_IncomingCallBox_CallerInfo">
|
|
||||||
<RoomAvatar
|
|
||||||
room={room}
|
|
||||||
height={32}
|
|
||||||
width={32}
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<h1>{ caller }</h1>
|
|
||||||
<p>{ incomingCallText }</p>
|
|
||||||
</div>
|
|
||||||
<AccessibleTooltipButton
|
|
||||||
className={silenceClass}
|
|
||||||
onClick={this.onSilenceClick}
|
|
||||||
title={this.state.silenced ? _t("Sound on"): _t("Silence call")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mx_IncomingCallBox_buttons">
|
|
||||||
<AccessibleButton
|
|
||||||
className="mx_IncomingCallBox_decline"
|
|
||||||
onClick={this.onRejectClick}
|
|
||||||
kind="danger"
|
|
||||||
>
|
|
||||||
{ _t("Decline") }
|
|
||||||
</AccessibleButton>
|
|
||||||
<div className="mx_IncomingCallBox_spacer" />
|
|
||||||
<AccessibleButton
|
|
||||||
className="mx_IncomingCallBox_accept"
|
|
||||||
onClick={this.onAnswerClick}
|
|
||||||
kind="primary"
|
|
||||||
>
|
|
||||||
{ _t("Accept") }
|
|
||||||
</AccessibleButton>
|
|
||||||
</div>
|
|
||||||
</div>;
|
|
||||||
}
|
|
||||||
}
|
|
139
src/toasts/IncomingCallToast.tsx
Normal file
139
src/toasts/IncomingCallToast.tsx
Normal file
|
@ -0,0 +1,139 @@
|
||||||
|
/*
|
||||||
|
Copyright 2015, 2016 OpenMarket Ltd
|
||||||
|
Copyright 2018 New Vector Ltd
|
||||||
|
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
|
||||||
|
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { CallType, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { replaceableComponent } from '../utils/replaceableComponent';
|
||||||
|
import CallHandler, { CallHandlerEvent } from '../CallHandler';
|
||||||
|
import dis from '../dispatcher/dispatcher';
|
||||||
|
import { MatrixClientPeg } from '../MatrixClientPeg';
|
||||||
|
import { _t } from '../languageHandler';
|
||||||
|
import RoomAvatar from '../components/views/avatars/RoomAvatar';
|
||||||
|
import AccessibleTooltipButton from '../components/views/elements/AccessibleTooltipButton';
|
||||||
|
import AccessibleButton from '../components/views/elements/AccessibleButton';
|
||||||
|
|
||||||
|
export const getIncomingCallToastKey = (callId: string) => `call_${callId}`;
|
||||||
|
|
||||||
|
interface IProps {
|
||||||
|
call: MatrixCall;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IState {
|
||||||
|
silenced: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
@replaceableComponent("views.voip.IncomingCallToast")
|
||||||
|
export default class IncomingCallToast extends React.Component<IProps, IState> {
|
||||||
|
constructor(props: IProps) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
silenced: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount = () => {
|
||||||
|
CallHandler.sharedInstance().addListener(CallHandlerEvent.SilencedCallsChanged, this.onSilencedCallsChanged);
|
||||||
|
};
|
||||||
|
|
||||||
|
public componentWillUnmount() {
|
||||||
|
CallHandler.sharedInstance().removeListener(CallHandlerEvent.SilencedCallsChanged, this.onSilencedCallsChanged);
|
||||||
|
}
|
||||||
|
|
||||||
|
private onSilencedCallsChanged = () => {
|
||||||
|
this.setState({ silenced: CallHandler.sharedInstance().isCallSilenced(this.props.call.callId) });
|
||||||
|
};
|
||||||
|
|
||||||
|
private onAnswerClick= (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
dis.dispatch({
|
||||||
|
action: 'answer',
|
||||||
|
room_id: CallHandler.sharedInstance().roomIdForCall(this.props.call),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
private onRejectClick= (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
dis.dispatch({
|
||||||
|
action: 'reject',
|
||||||
|
room_id: CallHandler.sharedInstance().roomIdForCall(this.props.call),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
private onSilenceClick = (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
const callId = this.props.call.callId;
|
||||||
|
this.state.silenced ?
|
||||||
|
CallHandler.sharedInstance().unSilenceCall(callId) :
|
||||||
|
CallHandler.sharedInstance().silenceCall(callId);
|
||||||
|
};
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const call = this.props.call;
|
||||||
|
let room = null;
|
||||||
|
room = MatrixClientPeg.get().getRoom(CallHandler.sharedInstance().roomIdForCall(call));
|
||||||
|
|
||||||
|
const caller = room ? room.name : _t("Unknown caller");
|
||||||
|
|
||||||
|
const incomingCallText = call.type === CallType.Voice ? _t("Incoming voice call") : _t("Incoming video call");
|
||||||
|
|
||||||
|
const silenceClass = classNames({
|
||||||
|
"mx_IncomingCallToast_iconButton": true,
|
||||||
|
"mx_IncomingCallToast_unSilence": this.state.silenced,
|
||||||
|
"mx_IncomingCallToast_silence": !this.state.silenced,
|
||||||
|
});
|
||||||
|
|
||||||
|
return <React.Fragment>
|
||||||
|
<div className="mx_IncomingCallToast_CallerInfo">
|
||||||
|
<RoomAvatar
|
||||||
|
room={room}
|
||||||
|
height={32}
|
||||||
|
width={32}
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h1>{ caller }</h1>
|
||||||
|
<p>{ incomingCallText }</p>
|
||||||
|
</div>
|
||||||
|
<AccessibleTooltipButton
|
||||||
|
className={silenceClass}
|
||||||
|
onClick={this.onSilenceClick}
|
||||||
|
title={this.state.silenced ? _t("Sound on") : _t("Silence call")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mx_IncomingCallToast_buttons">
|
||||||
|
<AccessibleButton
|
||||||
|
className="mx_IncomingCallToast_decline"
|
||||||
|
onClick={this.onRejectClick}
|
||||||
|
kind="danger"
|
||||||
|
>
|
||||||
|
{ _t("Decline") }
|
||||||
|
</AccessibleButton>
|
||||||
|
<div className="mx_IncomingCallToast_spacer" />
|
||||||
|
<AccessibleButton
|
||||||
|
className="mx_IncomingCallToast_accept"
|
||||||
|
onClick={this.onAnswerClick}
|
||||||
|
kind="primary"
|
||||||
|
>
|
||||||
|
{ _t("Accept") }
|
||||||
|
</AccessibleButton>
|
||||||
|
</div>
|
||||||
|
</React.Fragment>;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue