Disable answer button on click
GitLab: #190
Change-Id: I91f54ae923c8ee5ac27d02b58ad6db5c536e287d
diff --git a/client/src/components/CallButtons.tsx b/client/src/components/CallButtons.tsx
index d0c2c5e..75f7676 100644
--- a/client/src/components/CallButtons.tsx
+++ b/client/src/components/CallButtons.tsx
@@ -268,10 +268,11 @@
};
export const CallingAnswerAudioButton = (props: IconButtonProps) => {
- const { acceptCall } = useContext(CallContext);
+ const { acceptCall, isAnswerButtonDisabled } = useContext(CallContext);
return (
<ColoredCallButton
+ disabled={isAnswerButtonDisabled}
aria-label="answer call audio"
onClick={() => {
acceptCall(false);
@@ -284,10 +285,10 @@
};
export const CallingAnswerVideoButton = (props: IconButtonProps) => {
- const { acceptCall } = useContext(CallContext);
-
+ const { acceptCall, isAnswerButtonDisabled } = useContext(CallContext);
return (
<ColoredCallButton
+ disabled={isAnswerButtonDisabled}
aria-label="answer call video"
onClick={() => {
acceptCall(true);
diff --git a/client/src/contexts/CallProvider.tsx b/client/src/contexts/CallProvider.tsx
index 31b6673..000a91d 100644
--- a/client/src/contexts/CallProvider.tsx
+++ b/client/src/contexts/CallProvider.tsx
@@ -52,6 +52,7 @@
callRole: CallRole;
callStatus: CallStatus;
callStartTime: Date | undefined;
+ isAnswerButtonDisabled: boolean;
acceptCall: (withVideoOn: boolean) => void;
endCall: () => void;
@@ -69,6 +70,7 @@
callRole: 'caller',
callStatus: CallStatus.Default,
callStartTime: undefined,
+ isAnswerButtonDisabled: false,
acceptCall: (_: boolean) => {},
endCall: () => {},
@@ -104,6 +106,7 @@
const [callStatus, setCallStatus] = useState(routeState?.callStatus);
const [callRole] = useState(routeState?.role);
const [callStartTime, setCallStartTime] = useState<Date | undefined>(undefined);
+ const [isAnswerButtonDisabled, setIsAnswerButtonDisabled] = useState(false);
// TODO: This logic will have to change to support multiple people in a call. Could we move this logic to the server?
// The client could make a single request with the conversationId, and the server would be tasked with sending
@@ -163,7 +166,7 @@
const acceptCall = useCallback(
(withVideoOn: boolean) => {
setCallStatus(CallStatus.Loading);
-
+ setIsAnswerButtonDisabled(true);
getUserMedia()
.then(() => {
const callAccept: CallAction = {
@@ -295,6 +298,7 @@
callRole,
callStatus,
callStartTime,
+ isAnswerButtonDisabled,
acceptCall,
endCall,
}}