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

add buttons with popover to choose call src device

Browse Source
pull/1969/head
Audric Ackermann 4 years ago
parent b31b01c97d
commit ce79ce1f8b
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4
3 changed files with 194 additions and 59 deletions
Show Stats Download Patch File Download Diff File

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

@ -16,6 +16,7 @@ import { openConversationWithMessages } from '../../../state/ducks/conversations
import { SessionIconButton } from '../icon';
import { animation, contextMenu, Item, Menu } from 'react-contexify';
import { InputItem } from '../../../session/utils/CallManager';
import { DropDownAndToggleButton } from '../icon/DropDownAndToggleButton';
export const DraggableCallWindow = styled.div`
position: absolute;
@ -67,7 +68,7 @@ const InConvoCallWindowControls = styled.div`
width: fit-content;
padding: 10px;
border-radius: 10px;
height: 45px;
height: 60px;
margin-left: auto;
margin-right: auto;
left: 0;
@ -75,11 +76,10 @@ const InConvoCallWindowControls = styled.div`
transition: all 0.25s ease-in-out;
display: flex;
background-color: white;
align-items: center;
justify-content: center;
opacity: 0.3;
opacity: 0;
&:hover {
opacity: 1;
}
@ -229,6 +229,7 @@ const AudioInputMenu = ({
);
};
// tslint:disable-next-line: max-func-body-length
export const InConversationCallContainer = () => {
const ongoingCallProps = useSelector(getHasOngoingCallWith);
const selectedConversationKey = useSelector(getSelectedConversationKey);
@ -243,6 +244,9 @@ export const InConversationCallContainer = () => {
const videoRefLocal = useRef<any>();
const mountedState = useMountedState();
const [isVideoMuted, setVideoMuted] = useState(true);
const [isAudioMuted, setAudioMuted] = useState(false);
const videoTriggerId = 'video-menu-trigger-id';
const audioTriggerId = 'audio-menu-trigger-id';
@ -280,6 +284,60 @@ export const InConversationCallContainer = () => {
}
};
const handleCameraToggle = async () => {
if (!currentConnectedCameras.length) {
ToastUtils.pushNoCameraFound();
return;
}
if (isVideoMuted) {
// select the first one
await CallManager.selectCameraByDeviceId(currentConnectedCameras[0].deviceId);
} else {
await CallManager.selectCameraByDeviceId(CallManager.INPUT_DISABLED_DEVICE_ID);
}
setVideoMuted(!isVideoMuted);
};
const handleMicrophoneToggle = async () => {
if (!currentConnectedAudioInputs.length) {
ToastUtils.pushNoAudioInputFound();
return;
}
if (isAudioMuted) {
// select the first one
await CallManager.selectAudioInputByDeviceId(currentConnectedAudioInputs[0].deviceId);
} else {
await CallManager.selectAudioInputByDeviceId(CallManager.INPUT_DISABLED_DEVICE_ID);
}
setAudioMuted(!isAudioMuted);
};
const showAudioInputMenu = (e: React.MouseEvent<HTMLDivElement>) => {
if (currentConnectedAudioInputs.length === 0) {
ToastUtils.pushNoAudioInputFound();
return;
}
contextMenu.show({
id: audioTriggerId,
event: e,
});
};
const showVideoInputMenu = (e: React.MouseEvent<HTMLDivElement>) => {
if (currentConnectedCameras.length === 0) {
ToastUtils.pushNoCameraFound();
return;
}
contextMenu.show({
id: videoTriggerId,
event: e,
});
};
if (!hasOngoingCall || !ongoingCallProps || ongoingCallPubkey !== selectedConversationKey) {
return null;
}
@ -296,43 +354,25 @@ export const InConversationCallContainer = () => {
<InConvoCallWindowControls>
<SessionIconButton
iconSize="huge2"
iconPadding="10px"
iconSize={60}
iconPadding="20px"
iconType="hangup"
backgroundColor="var(--color-cell-background)"
borderRadius="50%"
onClick={handleEndCall}
iconColor="red"
/>
<SessionIconButton
iconSize="huge2"
iconPadding="10px"
iconType="videoCamera"
onClick={(e: React.MouseEvent<HTMLDivElement>) => {
if (currentConnectedCameras.length === 0) {
ToastUtils.pushNoCameraFound();
return;
}
contextMenu.show({
id: videoTriggerId,
event: e,
});
}}
iconColor="black"
<DropDownAndToggleButton
iconType="camera"
isMuted={isVideoMuted}
onMainButtonClick={handleCameraToggle}
onArrowClick={showVideoInputMenu}
/>
<SessionIconButton
iconSize="huge2"
iconPadding="10px"
iconType="microphoneFull"
iconColor="black"
onClick={(e: React.MouseEvent<HTMLDivElement>) => {
if (currentConnectedAudioInputs.length === 0) {
ToastUtils.pushNoAudioInputFound();
return;
}
contextMenu.show({
id: audioTriggerId,
event: e,
});
}}
<DropDownAndToggleButton
iconType="microphone"
isMuted={isAudioMuted}
onMainButtonClick={handleMicrophoneToggle}
onArrowClick={showAudioInputMenu}
/>
</InConvoCallWindowControls>
<VideoInputMenu triggerId={videoTriggerId} camerasList={currentConnectedCameras} />

87
ts/components/session/icon/DropDownAndToggleButton.tsx
Unescape Escape View File

@ -0,0 +1,87 @@
import React from 'react';
import _ from 'lodash';
import styled from 'styled-components';
type SProps = {
onArrowClick: (e: React.MouseEvent<HTMLDivElement>) => void;
onMainButtonClick: (e: React.MouseEvent<HTMLDivElement>) => void;
isMuted?: boolean;
hidePopoverArrow?: boolean;
iconType: 'microphone' | 'camera';
};
const StyledRoundedButton = styled.div`
background-color: var(--color-cell-background);
color: var(--color-text);
border-radius: 50%;
box-shadow: var(--color-session-shadow);
cursor: pointer;
transition-duration: 0.25s;
&:hover {
opacity: 1;
}
`;
const StyledContainer = styled(StyledRoundedButton)`
width: 60px;
height: 60px;
margin: 10px;
opacity: 0.4;
&:hover {
opacity: 1;
}
`;
const StyledMainIcon = styled.div`
padding: 20px;
`;
const StyledArrowIcon = styled(StyledRoundedButton)`
width: 35%;
height: 35%;
position: relative;
top: -35%;
right: -65%;
`;
const CameraIcon = (
<svg viewBox="0 0 488.3 488.3" fill="currentColor">
<path d="M488.3,142.5v203.1c0,15.7-17,25.5-30.6,17.7l-84.6-48.8v13.9c0,41.8-33.9,75.7-75.7,75.7H75.7C33.9,404.1,0,370.2,0,328.4 V159.9c0-41.8,33.9-75.7,75.7-75.7h221.8c41.8,0,75.7,33.9,75.7,75.7v13.9l84.6-48.8C471.3,117,488.3,126.9,488.3,142.5Z" />
</svg>
);
const MicrophoneIcon = (
<svg viewBox="0 0 58 58" fill="currentColor">
<path d="M44,28c-0.552,0-1,0.447-1,1v6c0,7.72-6.28,14-14,14s-14-6.28-14-14v-6c0-0.553-0.448-1-1-1s-1,0.447-1,1v6c0,8.485,6.644,15.429,15,15.949V56h-5c-0.552,0-1,0.447-1,1s0.448,1,1,1h12c0.552,0,1-0.447,1-1s-0.448-1-1-1h-5v-5.051c8.356-0.52,15-7.465,15-15.949v-6C45,28.447,44.552,28,44,28zM29,46c6.065,0,11-4.935,11-11V11c0-6.065-4.935-11-11-11S18,4.935,18,11v24C18,41.065,22.935,46,29,46z" />
</svg>
);
export const DropDownAndToggleButton = (props: SProps) => {
const { iconType, hidePopoverArrow, onArrowClick, onMainButtonClick, isMuted } = props;
const arrowClickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
onArrowClick(e);
};
const mainButtonClickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
onMainButtonClick(e);
};
const iconToRender =
iconType === 'microphone' ? MicrophoneIcon : iconType === 'camera' ? CameraIcon : null;
return (
<StyledContainer>
<StyledMainIcon onClick={mainButtonClickHandler}>{iconToRender}</StyledMainIcon>
{!hidePopoverArrow && (
<StyledArrowIcon onClick={arrowClickHandler}>
<svg viewBox="-200 -200 640 640" fill="currentColor">
<path d="M127.5 191.25L255 63.75L0 63.75L127.5 191.25Z" />
</svg>
</StyledArrowIcon>
)}
</StyledContainer>
);
};

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

@ -51,7 +51,7 @@ const callCache = new Map<string, Array<SignalService.CallMessage>>();
let peerConnection: RTCPeerConnection | null;
let remoteStream: MediaStream | null;
let mediaDevices: MediaStream | null;
const INPUT_DISABLED_DEVICE_ID = 'off';
export const INPUT_DISABLED_DEVICE_ID = 'off';
let makingOffer = false;
let ignoreOffer = false;
@ -92,28 +92,23 @@ async function updateInputLists() {
// Get the set of cameras connected
const videoCameras = await getConnectedDevices('videoinput');
camerasList = [{ deviceId: INPUT_DISABLED_DEVICE_ID, label: 'Off' }].concat(
videoCameras.map(m => ({
camerasList = videoCameras.map(m => ({
deviceId: m.deviceId,
label: m.label,
}))
);
}));
// Get the set of audio inputs connected
const audiosInput = await getConnectedDevices('audioinput');
audioInputsList = [{ deviceId: INPUT_DISABLED_DEVICE_ID, label: 'Off' }].concat(
audiosInput.map(m => ({
audioInputsList = audiosInput.map(m => ({
deviceId: m.deviceId,
label: m.label,
}))
);
}));
}
export async function selectCameraByDeviceId(cameraDeviceId: string) {
if (camerasList.some(m => m.deviceId === cameraDeviceId)) {
if (cameraDeviceId === INPUT_DISABLED_DEVICE_ID) {
selectedCameraId = cameraDeviceId;
if (selectedCameraId === INPUT_DISABLED_DEVICE_ID) {
const sender = peerConnection?.getSenders().find(s => {
return s.track?.kind === 'video';
});
@ -122,11 +117,12 @@ export async function selectCameraByDeviceId(cameraDeviceId: string) {
}
return;
}
if (camerasList.some(m => m.deviceId === cameraDeviceId)) {
selectedCameraId = cameraDeviceId;
const devicesConfig = {
video: {
deviceId: selectedCameraId ? { exact: selectedCameraId } : undefined,
// width: VIDEO_WIDTH,
// height: Math.floor(VIDEO_WIDTH * VIDEO_RATIO),
},
};
@ -156,8 +152,20 @@ export async function selectCameraByDeviceId(cameraDeviceId: string) {
}
}
export async function selectAudioInputByDeviceId(audioInputDeviceId: string) {
if (audioInputDeviceId === INPUT_DISABLED_DEVICE_ID) {
selectedAudioInputId = audioInputDeviceId;
const sender = peerConnection?.getSenders().find(s => {
return s.track?.kind === 'audio';
});
if (sender?.track) {
sender.track.enabled = false;
}
return;
}
if (audioInputsList.some(m => m.deviceId === audioInputDeviceId)) {
selectedAudioInputId = audioInputDeviceId;
const devicesConfig = {
audio: {
deviceId: selectedAudioInputId ? { exact: selectedAudioInputId } : undefined,

Write Preview
Loading…
Cancel
Save