Enable screen sharing
For now, only the video is transmitted.
The camera is turned off when screensharing, just like on the desktop
app.
In CallProvider, replace `isVideoOn` state with `videoStatus` to toggle
between off, on or screenshare.
Add icon for when screenshare is active.
Remove screenshare button menu options, as they are unavailable on the
web.
Change-Id: I95dd1c18efd91ab8b9063f0e7f817839e4f24aba
diff --git a/client/src/components/CallButtons.tsx b/client/src/components/CallButtons.tsx
index b77fd5a..db0f530 100644
--- a/client/src/components/CallButtons.tsx
+++ b/client/src/components/CallButtons.tsx
@@ -19,9 +19,8 @@
import { IconButton, IconButtonProps, PaletteColor } from '@mui/material';
import { styled, Theme } from '@mui/material/styles';
import { ChangeEvent, useContext, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { CallContext, CallStatus } from '../contexts/CallProvider';
+import { CallContext, CallStatus, VideoStatus } from '../contexts/CallProvider';
import {
ExpandableButton,
ExpandableButtonProps,
@@ -33,7 +32,6 @@
CallEndIcon,
ChatBubbleIcon,
ExtensionIcon,
- FileIcon,
FullScreenIcon,
GroupAddIcon,
MicroIcon,
@@ -43,12 +41,10 @@
RecordingIcon,
RoundCloseIcon,
ScreenShareArrowIcon,
- ScreenShareRegularIcon,
- ScreenShareScreenAreaIcon,
+ ScreenShareStopIcon,
VideoCameraIcon,
VideoCameraOffIcon,
VolumeIcon,
- WindowIcon,
} from './SvgIcon';
const CallButton = styled((props: ExpandableButtonProps) => {
@@ -151,30 +147,22 @@
};
export const CallingScreenShareButton = (props: ExpandableButtonProps) => {
- const { t } = useTranslation();
return (
- <CallButton
- aria-label="screen share"
- expandMenuOnClick
- Icon={ScreenShareArrowIcon}
- expandMenuOptions={[
- {
- description: t('share_screen'),
- icon: <ScreenShareRegularIcon />,
- },
- {
- description: t('share_window'),
- icon: <WindowIcon />,
- },
- {
- description: t('share_screen_area'),
- icon: <ScreenShareScreenAreaIcon />,
- },
- {
- description: t('share_file'),
- icon: <FileIcon />,
- },
- ]}
+ <CallButton aria-label="screen share" expandMenuOnClick IconButtonComp={ToggleScreenShareIconButton} {...props} />
+ );
+};
+
+const ToggleScreenShareIconButton = (props: IconButtonProps) => {
+ const { videoStatus, updateVideoStatus } = useContext(CallContext);
+
+ return (
+ <ToggleIconButton
+ IconOff={ScreenShareArrowIcon}
+ IconOn={ScreenShareStopIcon}
+ selected={videoStatus === VideoStatus.ScreenShare}
+ toggle={() => {
+ updateVideoStatus((v) => (v !== VideoStatus.ScreenShare ? VideoStatus.ScreenShare : VideoStatus.Off));
+ }}
{...props}
/>
);
@@ -262,13 +250,15 @@
};
const ToggleVideoCameraIconButton = (props: IconButtonProps) => {
- const { isVideoOn, setIsVideoOn } = useContext(CallContext);
+ const { videoStatus, updateVideoStatus } = useContext(CallContext);
return (
<ToggleIconButton
IconOn={VideoCameraIcon}
IconOff={VideoCameraOffIcon}
- selected={isVideoOn}
- toggle={() => setIsVideoOn((v) => !v)}
+ selected={videoStatus === VideoStatus.Camera}
+ toggle={() => {
+ updateVideoStatus((v) => (v !== VideoStatus.Camera ? VideoStatus.Camera : VideoStatus.Off));
+ }}
{...props}
/>
);
diff --git a/client/src/components/SvgIcon.tsx b/client/src/components/SvgIcon.tsx
index 8f83587..1ef5f9d 100644
--- a/client/src/components/SvgIcon.tsx
+++ b/client/src/components/SvgIcon.tsx
@@ -721,6 +721,40 @@
);
};
+export const ScreenShareStopIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <path id="Path" d="M12.6,8.9V7.8l2.6,2.2l-2.6,2.2V11c-3.4,0.1-4.2,2.6-4.2,2.6C8.5,9.6,11.7,9,12.6,8.9z" />
+ <g id="Icons_Outline">
+ <g id="Laptop_Black_24dp">
+ <g transform="translate(2.000000, 5.000000)">
+ <g id="Shape">
+ <path
+ d="M17,12H2.8c-0.5,0-0.9-0.2-1.2-0.5C1.2,11.1,1,10.7,1,10.2V1.3c0-0.5,0.2-0.9,0.5-1.2s0.8-0.5,1.2-0.5H17
+ c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.5,0.8,0.5,1.2v8.9c0,0.5-0.2,0.9-0.5,1.2S17.5,12,17,12z M2.8,0.9C2.7,0.9,2.6,1,2.5,1
+ c0,0.1-0.1,0.2-0.1,0.3v8.9c0,0.1,0,0.2,0.1,0.3c0,0,0.1,0.1,0.3,0.1H17c0.1,0,0.2-0.1,0.3-0.1c0.1-0.1,0.1-0.2,0.1-0.3V1.3
+ c0-0.1,0-0.2-0.1-0.3c0,0-0.1-0.1-0.3-0.1C17,0.9,2.8,0.9,2.8,0.9z"
+ />
+ </g>
+ <g id="Line-2">
+ <path d="M19.5,14.4h-19c-0.4,0-0.7-0.3-0.7-0.7S0.1,13,0.5,13h19c0.4,0,0.7,0.3,0.7,0.7S19.9,14.4,19.5,14.4z" />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g>
+ <rect
+ x="2.9"
+ y="10.3"
+ transform="matrix(0.8327 -0.5537 0.5537 0.8327 -4.0847 8.3949)"
+ width="17.9"
+ height="1.4"
+ />
+ </g>
+ </SvgIcon>
+ );
+};
+
export const TrashBinIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 15.44 16">