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

feat: updated calls UI 

except for background color, waiting on designs
This commit is contained in:
William Grant 2022-09-16 16:37:46 +10:00
parent cf22b7ad1c
commit 073a41b6aa
8 changed files with 141 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

254
ts/components/calling/CallButtons.tsx
View File

@ -10,6 +10,47 @@ import { DropDownAndToggleButton } from '../icon/DropDownAndToggleButton';
import styled from 'styled-components';
import { SessionContextMenuContainer } from '../SessionContextMenuContainer';
const VideoInputMenu = ({
triggerId,
camerasList,
}: {
triggerId: string;
camerasList: Array<InputItem>;
}) => {
return (
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>
{camerasList.map(m => {
return (
<Item
key={m.deviceId}
onClick={() => {
void CallManager.selectCameraByDeviceId(m.deviceId);
}}
>
{m.label.substr(0, 40)}
</Item>
);
})}
</Menu>
</SessionContextMenuContainer>
);
};
const showVideoInputMenu = (
currentConnectedCameras: Array<InputItem>,
e: React.MouseEvent<HTMLDivElement>
) => {
if (currentConnectedCameras.length === 0) {
ToastUtils.pushNoCameraFound();
return;
}
contextMenu.show({
id: videoTriggerId,
event: e,
});
};
const videoTriggerId = 'video-menu-trigger-id';
const audioTriggerId = 'audio-menu-trigger-id';
const audioOutputTriggerId = 'audio-output-menu-trigger-id';
@ -42,6 +83,47 @@ export const VideoInputButton = ({
);
};
const AudioInputMenu = ({
triggerId,
audioInputsList,
}: {
triggerId: string;
audioInputsList: Array<InputItem>;
}) => {
return (
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>
{audioInputsList.map(m => {
return (
<Item
key={m.deviceId}
onClick={() => {
void CallManager.selectAudioInputByDeviceId(m.deviceId);
}}
>
{m.label.substr(0, 40)}
</Item>
);
})}
</Menu>
</SessionContextMenuContainer>
);
};
const showAudioInputMenu = (
currentConnectedAudioInputs: Array<any>,
e: React.MouseEvent<HTMLDivElement>
) => {
if (currentConnectedAudioInputs.length === 0) {
ToastUtils.pushNoAudioInputFound();
return;
}
contextMenu.show({
id: audioTriggerId,
event: e,
});
};
export const AudioInputButton = ({
currentConnectedAudioInputs,
isAudioMuted,
@ -70,6 +152,47 @@ export const AudioInputButton = ({
);
};
const AudioOutputMenu = ({
triggerId,
audioOutputsList,
}: {
triggerId: string;
audioOutputsList: Array<InputItem>;
}) => {
return (
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>
{audioOutputsList.map(m => {
return (
<Item
key={m.deviceId}
onClick={() => {
void CallManager.selectAudioOutputByDeviceId(m.deviceId);
}}
>
{m.label.substr(0, 40)}
</Item>
);
})}
</Menu>
</SessionContextMenuContainer>
);
};
const showAudioOutputMenu = (
currentConnectedAudioOutputs: Array<any>,
e: React.MouseEvent<HTMLDivElement>
) => {
if (currentConnectedAudioOutputs.length === 0) {
ToastUtils.pushNoAudioOutputFound();
return;
}
contextMenu.show({
id: audioOutputTriggerId,
event: e,
});
};
export const AudioOutputButton = ({
currentConnectedAudioOutputs,
isAudioOutputMuted,
@ -101,87 +224,6 @@ export const AudioOutputButton = ({
);
};
const VideoInputMenu = ({
triggerId,
camerasList,
}: {
triggerId: string;
camerasList: Array<InputItem>;
}) => {
return (
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>
{camerasList.map(m => {
return (
<Item
key={m.deviceId}
onClick={() => {
void CallManager.selectCameraByDeviceId(m.deviceId);
}}
>
{m.label.substr(0, 40)}
</Item>
);
})}
</Menu>
</SessionContextMenuContainer>
);
};
const AudioInputMenu = ({
triggerId,
audioInputsList,
}: {
triggerId: string;
audioInputsList: Array<InputItem>;
}) => {
return (
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>
{audioInputsList.map(m => {
return (
<Item
key={m.deviceId}
onClick={() => {
void CallManager.selectAudioInputByDeviceId(m.deviceId);
}}
>
{m.label.substr(0, 40)}
</Item>
);
})}
</Menu>
</SessionContextMenuContainer>
);
};
const AudioOutputMenu = ({
triggerId,
audioOutputsList,
}: {
triggerId: string;
audioOutputsList: Array<InputItem>;
}) => {
return (
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>
{audioOutputsList.map(m => {
return (
<Item
key={m.deviceId}
onClick={() => {
void CallManager.selectAudioOutputByDeviceId(m.deviceId);
}}
>
{m.label.substr(0, 40)}
</Item>
);
})}
</Menu>
</SessionContextMenuContainer>
);
};
const ShowInFullScreenButton = ({ isFullScreen }: { isFullScreen: boolean }) => {
const dispatch = useDispatch();
@ -198,10 +240,10 @@ const ShowInFullScreenButton = ({ isFullScreen }: { isFullScreen: boolean }) =>
iconSize={60}
iconPadding="20px"
iconType="fullscreen"
backgroundColor="white"
backgroundColor="var(--white-color)"
borderRadius="50%"
onClick={showInFullScreen}
iconColor="black"
iconColor="var(--black-color)"
margin="10px"
/>
);
@ -222,57 +264,15 @@ export const HangUpButton = () => {
iconSize={60}
iconPadding="20px"
iconType="hangup"
backgroundColor="white"
backgroundColor="var(--white-color)"
borderRadius="50%"
onClick={handleEndCall}
iconColor="red"
iconColor="var(--red-color)"
margin="10px"
/>
);
};
const showAudioInputMenu = (
currentConnectedAudioInputs: Array<any>,
e: React.MouseEvent<HTMLDivElement>
) => {
if (currentConnectedAudioInputs.length === 0) {
ToastUtils.pushNoAudioInputFound();
return;
}
contextMenu.show({
id: audioTriggerId,
event: e,
});
};
const showAudioOutputMenu = (
currentConnectedAudioOutputs: Array<any>,
e: React.MouseEvent<HTMLDivElement>
) => {
if (currentConnectedAudioOutputs.length === 0) {
ToastUtils.pushNoAudioOutputFound();
return;
}
contextMenu.show({
id: audioOutputTriggerId,
event: e,
});
};
const showVideoInputMenu = (
currentConnectedCameras: Array<InputItem>,
e: React.MouseEvent<HTMLDivElement>
) => {
if (currentConnectedCameras.length === 0) {
ToastUtils.pushNoCameraFound();
return;
}
contextMenu.show({
id: videoTriggerId,
event: e,
});
};
const handleCameraToggle = async (
currentConnectedCameras: Array<InputItem>,
localStreamVideoIsMuted: boolean

4
ts/components/calling/CallInFullScreenContainer.tsx
View File

@ -21,8 +21,8 @@ const CallInFullScreenVisible = styled.div`
left: 0;
display: flex;
flex-direction: column;
background-color: black;
border: var(--session-border);
background-color: var(--black-color);
border: var(--border-color);
opacity: 1;
`;

6
ts/components/calling/DraggableCallContainer.tsx
View File

@ -15,13 +15,13 @@ import { SectionType } from '../../state/ducks/section';
export const DraggableCallWindow = styled.div`
position: absolute;
z-index: 9;
box-shadow: 0px 0px 10px 0px #000000;
box-shadow: 0px 0px 10px 0px var(--black-color);
max-height: 300px;
width: 12vw;
display: flex;
flex-direction: column;
background-color: var(--color-modal-background);
border: var(--session-border);
background-color: var(--modal-background-color);
border: var(--border-color);
`;
export const StyledVideoElement = styled.video<{ isVideoMuted: boolean }>`

4
ts/components/calling/InConversationCallContainer.tsx
View File

@ -34,6 +34,7 @@ const InConvoCallWindow = styled.div`
padding: 1rem;
display: flex;
/* TODO Theming - Update? */
background-color: hsl(0, 0%, 15.7%);
flex-shrink: 1;
@ -68,7 +69,8 @@ const StyledCenteredLabel = styled.div`
transform: translateX(-50%);
height: min-content;
white-space: nowrap;
color: white;
/* TODO Theming - Update? */
color: var(--white-color);
text-shadow: 0px 0px 8px white;
z-index: 5;
`;

4
ts/components/calling/IncomingCallDialog.tsx
View File

@ -20,8 +20,8 @@ export const CallWindow = styled.div`
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
background-color: var(--color-modal-background);
border: var(--session-border);
background-color: var(--modal-background-color);
border: var(--border-color);
`;
const IncomingCallAvatarContainer = styled.div`

2
ts/components/dialog/SessionConfirm.tsx
View File

@ -140,7 +140,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
{!hideCancel && (
<SessionButton
text={cancelText}
buttonColor={closeTheme}
buttonColor={!okTheme ? closeTheme : undefined}
buttonType={SessionButtonType.Simple}
onClick={onClickCancelHandler}
dataTestId="session-confirm-cancel-button"

4
ts/components/icon/DropDownAndToggleButton.tsx
View File

@ -12,8 +12,8 @@ type SProps = {
};
const StyledRoundedButton = styled.div<{ isMuted: boolean }>`
background-color: ${props => (props.isMuted ? 'hsl(0,0%,40%)' : 'white')};
color: ${props => (props.isMuted ? 'white' : 'black')};
background-color: ${props => (props.isMuted ? 'hsl(0,0%,40%)' : 'var(--white-color)')};
color: ${props => (props.isMuted ? 'var(--white-color)' : 'var(--black-color)')};
border-radius: 50%;
cursor: pointer;

2
ts/components/icon/SessionIcon.tsx
View File

@ -101,7 +101,7 @@ const animation = (props: {
}) => {
if (props.rotateDuration) {
return css`
${rotate} ${props.rotateDuration}s infinite linear;
${rotate} ${props.rotateDuration}s linear infinite;
`;
}
if (props.noScale) {