keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

link accept/decline and endcall buttons to the webrtc background

Browse Source
pull/1939/head
Audric Ackermann 4 years ago
parent 893294a2cd
commit 6c50ec4bf1
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4
2 changed files with 150 additions and 125 deletions
Show Stats Download Patch File Download Diff File

238
ts/components/session/calling/CallContainer.tsx
Unescape Escape View File

@ -1,9 +1,8 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import _ from 'underscore'; import _ from 'underscore';
import { ConversationModel } from '../../../models/conversation';
// tslint:disable-next-line: no-submodule-imports
import { getConversationController } from '../../../session/conversations/ConversationController'; import { getConversationController } from '../../../session/conversations/ConversationController';
import { CallManager } from '../../../session/utils';
import { SessionButton, SessionButtonColor } from '../SessionButton'; import { SessionButton, SessionButtonColor } from '../SessionButton';
import { SessionWrapperModal } from '../SessionWrapperModal'; import { SessionWrapperModal } from '../SessionWrapperModal';
@ -20,24 +19,24 @@ export const CallWindow = styled.div`
// similar styling to modal header // similar styling to modal header
const CallWindowHeader = styled.div` const CallWindowHeader = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: $session-margin-lg; padding: $session-margin-lg;
font-family: $session-font-default; font-family: $session-font-default;
text-align: center; text-align: center;
line-height: 18px; line-height: 18px;
font-size: $session-font-md; font-size: $session-font-md;
font-weight: 700; font-weight: 700;
`; `;
// TODO: Add proper styling for this // TODO: Add proper styling for this
const VideoContainer = styled.div` const VideoContainer = styled.video`
width: 200px; width: 200px;
height: 200px; height: 200px;
`; `;
const CallWindowInner = styled.div` const CallWindowInner = styled.div`
@ -51,13 +50,13 @@ const CallWindowInner = styled.div`
`; `;
const CallWindowControls = styled.div` const CallWindowControls = styled.div`
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
/* background: green; */ /* background: green; */
padding: 5px; padding: 5px;
transform: translateY(-100%); transform: translateY(-100%);
`; `;
// type WindowPositionType = { // type WindowPositionType = {
@ -65,104 +64,103 @@ const CallWindowControls = styled.div`
// left: string; // left: string;
// } | null; // } | null;
type CallStateType = 'connecting' | 'ongoing' | 'incoming' | null type CallStateType = 'connecting' | 'ongoing' | 'incoming' | null;
export const CallContainer = () => {
const conversations = getConversationController().getConversations();
// TODO:
/**
* Add mute input, deafen, end call, possibly add person to call
* duration - look at how duration calculated for recording.
*/
const [connectionState, setConnectionState] = useState<CallStateType>('incoming');
// const [callWindowPosition, setCallWindowPosition] = useState<WindowPositionType>(null)
// picking a conversation at random to test with
let randConvo = _.sample(conversations) as ConversationModel;
randConvo.callState = 'incoming';
console.warn({ randConvo });
const firstCallingConvo = _.first(conversations.filter(convo => convo.callState !== undefined)); const fakeCaller = '054774a456f15c7aca42fe8d245983549000311aaebcf58ce246250c41fe227676';
//#region input handlers export const CallContainer = () => {
const handleAcceptIncomingCall = () => { const conversations = getConversationController().getConversations();
console.warn('accept call');
// TODO:
if (firstCallingConvo) { /**
setConnectionState('connecting'); * Add mute input, deafen, end call, possibly add person to call
firstCallingConvo.callState = 'connecting'; * duration - look at how duration calculated for recording.
*/
// some delay
setConnectionState('ongoing'); const [connectionState, setConnectionState] = useState<CallStateType>('incoming');
firstCallingConvo.callState = 'ongoing'; // const [callWindowPosition, setCallWindowPosition] = useState<WindowPositionType>(null)
}
// set conversationState = setting up // picking a conversation at random to test with
} const foundConvo = conversations.find(convo => convo.id === fakeCaller);
const handleDeclineIncomingCall = () => { if (!foundConvo) {
// set conversation.callState = null or undefined throw new Error('fakeconvo not found');
// close the modal }
if (firstCallingConvo) { foundConvo.callState = 'incoming';
firstCallingConvo.callState = undefined; console.warn('foundConvo: ', foundConvo);
}
console.warn('declined call'); const firstCallingConvo = _.first(conversations.filter(convo => convo.callState !== undefined));
}
//#region input handlers
const handleEndCall = () => { const handleAcceptIncomingCall = async () => {
// call method to end call connection console.warn('accept call');
console.warn("ending the call");
if (firstCallingConvo) {
setConnectionState('connecting');
firstCallingConvo.callState = 'connecting';
await CallManager.USER_acceptIncomingCallRequest(fakeCaller);
// some delay
setConnectionState('ongoing');
firstCallingConvo.callState = 'ongoing';
} }
// set conversationState = setting up
const handleMouseDown = () => { };
// reposition call window
const handleDeclineIncomingCall = async () => {
// set conversation.callState = null or undefined
// close the modal
if (firstCallingConvo) {
firstCallingConvo.callState = undefined;
} }
//#endregion console.warn('declined call');
await CallManager.USER_rejectIncomingCallRequest(fakeCaller);
return ( };
<>
{connectionState === 'connecting' ? const handleEndCall = async () => {
'connecting...' // call method to end call connection
: null console.warn('ending the call');
} await CallManager.USER_rejectIncomingCallRequest(fakeCaller);
{connectionState === 'ongoing' ? };
<CallWindow onMouseDown={handleMouseDown}>
<CallWindowInner> const handleMouseDown = () => {
<CallWindowHeader> // reposition call window
{ firstCallingConvo ? firstCallingConvo.getName() : 'Group name not found'} };
</CallWindowHeader> //#endregion
<VideoContainer></VideoContainer>
<CallWindowControls> return (
<SessionButton text={'end call'} onClick={handleEndCall} /> <>
<SessionButton text={'end call'} onClick={handleEndCall} /> {connectionState === 'connecting' ? 'connecting...' : null}
</CallWindowControls> {connectionState === 'ongoing' ? (
</CallWindowInner> <CallWindow onMouseDown={handleMouseDown}>
</CallWindow> <CallWindowInner>
: null <CallWindowHeader>
} {firstCallingConvo ? firstCallingConvo.getName() : 'Group name not found'}
</CallWindowHeader>
{!connectionState ? <VideoContainer />
<SessionWrapperModal title={'incoming call'}> <CallWindowControls>
'none' <SessionButton text={'end call'} onClick={handleEndCall} />
</SessionWrapperModal> <SessionButton text={'end call'} onClick={handleEndCall} />
: null </CallWindowControls>
} </CallWindowInner>
</CallWindow>
{connectionState === 'incoming' ? ) : null}
<SessionWrapperModal title={'incoming call'}>
<div className="session-modal__button-group"> {!connectionState ? (
<SessionButton text={'decline'} onClick={handleDeclineIncomingCall} /> <SessionWrapperModal title={'incoming call'}>'none'</SessionWrapperModal>
<SessionButton ) : null}
text={'accept'}
onClick={handleAcceptIncomingCall} {connectionState === 'incoming' ? (
buttonColor={SessionButtonColor.Green} <SessionWrapperModal title={'incoming call'}>
/> <div className="session-modal__button-group">
</div> <SessionButton text={'decline'} onClick={handleDeclineIncomingCall} />
</SessionWrapperModal> <SessionButton
: null text={'accept'}
} onClick={handleAcceptIncomingCall}
</> buttonColor={SessionButtonColor.Green}
); />
</div>
</SessionWrapperModal>
) : null}
</>
);
}; };

37
ts/session/utils/CallManager.ts
Unescape Escape View File

@ -138,6 +138,19 @@ const openMediaDevices = async () => {
}); });
}; };
const findLastMessageTypeFromSender = (sender: string, msgType: SignalService.CallMessage.Type) => {
const msgCacheFromSender = callCache.get(sender);
if (!msgCacheFromSender) {
return undefined;
}
const lastOfferMessage = _.findLast(msgCacheFromSender, m => m.type === msgType);
if (!lastOfferMessage) {
return undefined;
}
return lastOfferMessage;
};
// tslint:disable-next-line: function-name // tslint:disable-next-line: function-name
export async function USER_acceptIncomingCallRequest(fromSender: string) { export async function USER_acceptIncomingCallRequest(fromSender: string) {
const msgCacheFromSender = callCache.get(fromSender); const msgCacheFromSender = callCache.get(fromSender);
@ -147,9 +160,9 @@ export async function USER_acceptIncomingCallRequest(fromSender: string) {
); );
return; return;
} }
const lastOfferMessage = _.findLast( const lastOfferMessage = findLastMessageTypeFromSender(
msgCacheFromSender, fromSender,
m => m.type === SignalService.CallMessage.Type.OFFER SignalService.CallMessage.Type.OFFER
); );
if (!lastOfferMessage) { if (!lastOfferMessage) {
@ -217,6 +230,22 @@ export async function USER_acceptIncomingCallRequest(fromSender: string) {
type: SignalService.CallMessage.Type.ANSWER, type: SignalService.CallMessage.Type.ANSWER,
sdps: [answerSdp], sdps: [answerSdp],
}); });
const lastCandidatesFromSender = findLastMessageTypeFromSender(
fromSender,
SignalService.CallMessage.Type.ICE_CANDIDATES
);
if (lastCandidatesFromSender) {
console.warn('found sender ice candicate message already sent. Using it');
for (let index = 0; index < lastCandidatesFromSender.sdps.length; index++) {
const sdp = lastCandidatesFromSender.sdps[index];
const sdpMLineIndex = lastCandidatesFromSender.sdpMLineIndexes[index];
const sdpMid = lastCandidatesFromSender.sdpMids[index];
const candicate = new RTCIceCandidate({ sdpMid, sdpMLineIndex, candidate: sdp });
await peerConnection.addIceCandidate(candicate);
}
}
window.log.info('sending ANSWER MESSAGE'); window.log.info('sending ANSWER MESSAGE');
await getMessageQueue().sendToPubKeyNonDurably(PubKey.cast(fromSender), callAnswerMessage); await getMessageQueue().sendToPubKeyNonDurably(PubKey.cast(fromSender), callAnswerMessage);
@ -254,8 +283,6 @@ export async function handleOfferCallMessage(
} }
callCache.get(sender)?.push(callMessage); callCache.get(sender)?.push(callMessage);
window.inboxStore?.dispatch(incomingCall({ sender })); window.inboxStore?.dispatch(incomingCall({ sender }));
//FIXME audric. thiis should not be auto accepted here
await USER_acceptIncomingCallRequest(sender);
} }
export async function handleCallAnsweredMessage( export async function handleCallAnsweredMessage(

Write Preview
Loading…
Cancel
Save