Add basic call interface UI
GitLab: #25
Change-Id: I1d1eda0947dcdc40195dbdd7c9f8548cf4062b76
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index 3c147d6..25ddf39 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -25,19 +25,29 @@
Arrow2Icon,
Arrow3Icon,
ArrowIcon,
+ CallEndIcon,
CameraIcon,
CameraInBubbleIcon,
CancelIcon,
+ ChatBubbleIcon,
CrossedEyeIcon,
CrossIcon,
EmojiIcon,
+ ExtensionIcon,
EyeIcon,
FolderIcon,
+ FullscreenIcon,
+ GroupAddIcon,
InfoIcon,
+ MicroIcon,
MicroInBubbleIcon,
PaperClipIcon,
PenIcon,
+ RecordingIcon,
SaltireIcon,
+ ScreenShareIcon,
+ VideoCameraIcon,
+ VolumeIcon,
} from './SvgIcon';
type ShapedButtonProps = IconButtonProps & {
@@ -135,6 +145,85 @@
},
}));
+export const CallingChatButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="chat" sx={{ color: 'white' }}>
+ <ChatBubbleIcon />
+ </IconButton>
+ );
+};
+
+export const CallingEndButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="end call" sx={{ color: 'white', backgroundColor: 'red' }}>
+ <CallEndIcon />
+ </IconButton>
+ );
+};
+
+export const CallingExtensionButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="extensions" sx={{ color: 'white' }}>
+ <ExtensionIcon />
+ </IconButton>
+ );
+};
+
+export const CallingFullscreenButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="fullscreen" sx={{ color: 'white' }}>
+ <FullscreenIcon />
+ </IconButton>
+ );
+};
+
+export const CallingGroupButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="group options" sx={{ color: 'white' }}>
+ <GroupAddIcon />
+ </IconButton>
+ );
+};
+
+export const CallingMicButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="microphone options" sx={{ color: 'white' }}>
+ <MicroIcon />
+ </IconButton>
+ );
+};
+
+export const CallingRecordButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="recording options" sx={{ color: 'white' }}>
+ <RecordingIcon />
+ </IconButton>
+ );
+};
+
+export const CallingScreenShareButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="screen share" sx={{ color: 'white' }}>
+ <ScreenShareIcon />
+ </IconButton>
+ );
+};
+
+export const CallingVideoCameraButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="camera options" sx={{ color: 'white' }}>
+ <VideoCameraIcon />
+ </IconButton>
+ );
+};
+export const CallingVolumeButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="volume options" sx={{ color: 'white' }}>
+ <VolumeIcon />
+ </IconButton>
+ );
+};
+
export const CloseButton = styled((props: IconButtonProps) => {
return (
<IconButton {...props} disableRipple={true} aria-label="close">
diff --git a/client/src/components/SvgIcon.tsx b/client/src/components/SvgIcon.tsx
index b554d71..bfcb0a8 100644
--- a/client/src/components/SvgIcon.tsx
+++ b/client/src/components/SvgIcon.tsx
@@ -64,6 +64,68 @@
);
};
+export const AudioCallIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 15.338 16">
+ {/* <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="15.338"
+ height="16"
+ viewBox="0 0 15.338 16"
+ >
+ <defs>
+ <style>.a{"fill:#005699;"}</style>
+ </defs> */}
+ <g transform="translate(-2.404 -1.956)">
+ <g transform="translate(2.404 1.956)">
+ <g transform="translate(0)">
+ <path
+ className="a"
+ d="M10.417,14.956a6.077,6.077,0,0,1-1.676-.239C4.669,13.6.359,9.049-.44,4.9A5.052,5.052,0,0,1,1.237-.37h0a2.456,2.456,0,0,1,2.075-.639A1.767,1.767,0,0,1,4.51.109a7.417,7.417,0,0,0,.4.8c.718,1.357,1.2,2.395.4,3.273h-.08l-.4.319c-1.118.718-1.118.8-.958,1.038a9.647,9.647,0,0,0,4.39,4.869c.239.16.319.16,1.038-.8.16-.16.239-.319.4-.479l.08-.08c.958-.8,1.916-.16,3.432.718l.559.319a1.849,1.849,0,0,1,.958,1.277,2.7,2.7,0,0,1-.718,2A4.721,4.721,0,0,1,10.417,14.956ZM1.875.508A3.893,3.893,0,0,0,.6,4.659c.718,3.752,4.79,7.983,8.382,9.02a3.72,3.72,0,0,0,4.151-1.038,1.254,1.254,0,0,0,.479-1.118.761.761,0,0,0-.479-.559l-.479-.319c-1.277-.8-1.756-1.038-2.075-.8a1.741,1.741,0,0,1-.319.4c-.639.8-1.357,1.756-2.475,1.118A10.6,10.6,0,0,1,2.913,6.016C2.195,4.9,3.232,4.18,4.19,3.541L4.51,3.3c.239-.319,0-.8-.639-1.916a7.417,7.417,0,0,1-.4-.8A.72.72,0,0,0,2.993.109c-.239-.08-.639.08-1.118.4Z"
+ transform="translate(0.596 1.044)"
+ />
+ </g>
+ </g>
+ </g>
+ {/* </svg> */}
+ </SvgIcon>
+ );
+};
+
+export const BlockContactIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 16 15.52">
+ {/* <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.52">
+ <defs>
+ <style>.a{"fill:#005699;"}</style>
+ </defs> */}
+ <g transform="translate(-2 -2.3)">
+ <path
+ className="a"
+ d="M15.88,11.5a4.08,4.08,0,1,0,4.08,4.08A4.1,4.1,0,0,0,15.88,11.5Zm0,.96a3.282,3.282,0,0,1,1.76.56l-4.48,4a3.309,3.309,0,0,1-.4-1.52A3.22,3.22,0,0,1,15.88,12.46Zm0,6.24a3.091,3.091,0,0,1-2.16-.88l4.56-4.08a2.852,2.852,0,0,1,.64,1.84A3.007,3.007,0,0,1,15.88,18.7Z"
+ transform="translate(-1.96 -1.84)"
+ />
+ <path
+ className="a"
+ d="M12,10.94l.56-.32A6.445,6.445,0,0,0,9.92,9.5a3.626,3.626,0,0,0,2.56-3.52A3.555,3.555,0,0,0,8.88,2.3,3.735,3.735,0,0,0,7.76,9.58,7.327,7.327,0,0,0,2,17.02a.547.547,0,0,0,.56.56.547.547,0,0,0,.56-.56c0-3.6,2.64-6.56,5.92-6.56a5.3,5.3,0,0,1,2.88.88A.971.971,0,0,1,12,10.94ZM8.88,8.7A2.68,2.68,0,1,1,11.6,6.06,2.631,2.631,0,0,1,8.88,8.7Z"
+ />
+ </g>
+ {/* </svg> */}
+ </SvgIcon>
+ );
+};
+
+export const CallEndIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z" />
+ </svg>
+ </SvgIcon>
+ );
+};
+
export const CameraIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="2 3 20 19">
@@ -89,6 +151,27 @@
);
};
+export const ChatBubbleIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <g id="Icons_Outline">
+ <g id="Chat_Black_24dp">
+ <g id="Shape" transform="translate(3.000000, 4.000000)">
+ <g>
+ <path
+ d="M4.6,17c-0.2,0-0.4,0-0.6-0.1c-0.6-0.3-0.9-0.8-0.9-1.5V13H2.3C0.5,13-1,11.5-1,9.6V2.3C-1,0.5,0.5-1,2.3-1h13.3
+ C17.5-1,19,0.5,19,2.3v7.3c0,1.8-1.5,3.3-3.3,3.3H9.5l-3.8,3.6C5.4,16.8,5,17,4.6,17z M2.3,0.4c-1.1,0-1.9,0.9-1.9,2v7.3
+ c0,1,0.8,1.9,1.9,1.9h2.2v3.9c0,0,0,0.1,0.1,0.1s0.1,0,0.2,0l4.2-4h6.7c1,0,1.9-0.8,1.9-1.9V2.3c0-1-0.8-1.9-1.9-1.9H2.3
+ L2.3,0.4z"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </SvgIcon>
+ );
+};
+
export const CheckedIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 16 16">
@@ -98,6 +181,28 @@
);
};
+export const ContactDetailsIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 14.647 16">
+ {/* <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="14.647"
+ height="16"
+ viewBox="0 0 14.647 16"
+ >
+ <defs>
+ <style>.a{"fill:#005699;"}</style>
+ </defs> */}
+ <path
+ className="a"
+ d="M11.258,9.562A3.774,3.774,0,0,0,13.965,5.9,3.79,3.79,0,0,0,10.144,2,3.871,3.871,0,0,0,8.95,9.562,7.806,7.806,0,0,0,2.9,17.443a.557.557,0,1,0,1.114,0c0-3.821,2.786-6.925,6.209-6.925s6.209,3.1,6.209,6.925a.557.557,0,0,0,1.114,0C17.388,13.463,14.681,10.119,11.258,9.562ZM7.278,5.9a2.866,2.866,0,1,1,5.731,0,2.787,2.787,0,0,1-2.866,2.786A2.838,2.838,0,0,1,7.278,5.9Z"
+ transform="translate(-2.9 -2)"
+ />
+ {/* </svg> */}
+ </SvgIcon>
+ );
+};
+
export const CrossedEyeIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 15.931 12.145">
@@ -118,10 +223,15 @@
);
};
-export const SaltireIcon = (props: SvgIconProps) => {
+export const ExtensionIcon = (props: SvgIconProps) => {
return (
- <SvgIcon {...props} viewBox="5 5 14 14">
- <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <path
+ stroke="#ffffff"
+ strokeWidth="1.5"
+ fill="none"
+ d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7s2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
+ />
</SvgIcon>
);
};
@@ -156,6 +266,42 @@
);
};
+export const FullscreenIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <g>
+ <polygon points="2,9.4 3.8,9.4 3.8,3.8 9.7,3.8 9.7,2 2,2 " />
+ <polygon points="3.8,14.3 2,14.3 2,22 9.4,22 9.4,20.2 3.8,20.2 " />
+ <polygon points="20.2,20.2 14.3,20.2 14.3,22 22,22 22,14.6 20.2,14.6 " />
+ <polygon points="14.6,2 14.6,3.8 20.2,3.8 20.2,9.7 22,9.7 22,2 " />
+ </g>
+ </SvgIcon>
+ );
+};
+
+export const GroupAddIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <path
+ d="M16.1,11.3c1.1-0.7,1.8-2,1.8-3.3c0-2.2-1.8-4-4-4c-2.2,0-4,1.8-4,4c0,1.3,0.7,2.6,1.8,3.3c-0.6,0.3-1.2,0.6-1.8,1.1
+ c-0.3-0.3-0.6-0.5-1-0.7c0.6-0.6,1-1.4,1-2.3c0-1.8-1.4-3.2-3.2-3.2c-1.8,0-3.2,1.4-3.2,3.2c0,0.9,0.4,1.7,1,2.3
+ c-1.5,0.8-2.5,2.4-2.5,4.2c0,0.6,0.5,1.1,1.1,1.1h4.7c0,0.6,0.5,1.1,1.1,1.1h6.5l-0.3-0.2c-0.3-0.2-0.5-0.6-0.7-1l0-0.1H9.1
+ c0-0.3,0.1-0.7,0.1-1c0.1-0.6,0.4-1.1,0.7-1.6c0.2-0.3,0.4-0.6,0.7-0.8c0.9-0.8,2.1-1.3,3.3-1.3c1.1,0,2.1,0.4,3,1l0.1,0.1l0.1-0.1
+ c0.1-0.2,0.2-0.4,0.4-0.6c0.1-0.1,0.1-0.1,0.2-0.2l0.1-0.1l-0.1-0.1C17.2,11.8,16.6,11.5,16.1,11.3z M16.6,7.9
+ c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7C15.4,5.2,16.6,6.4,16.6,7.9z M6.6,11.3c-1.1,0-2-0.9-2-2
+ c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2C8.6,10.4,7.7,11.3,6.6,11.3z M9,13.3c-0.5,0.7-0.9,1.5-1.1,2.4H3.2c0.1-1.8,1.6-3.3,3.4-3.3
+ C7.5,12.4,8.4,12.7,9,13.3z"
+ />
+ <path
+ d="M21.2,15.6l-1.7,0l0-1.7c0-0.4-0.3-0.7-0.7-0.7c-0.2,0-0.4,0.1-0.5,0.2c-0.1,0.1-0.2,0.3-0.2,0.5l0,1.7l-1.7,0
+ c-0.2,0-0.4,0.1-0.5,0.2c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.4,0.3,0.7,0.7,0.7l1.7,0l0,1.7c0,0.4,0.3,0.7,0.7,0.7h0
+ c0.2,0,0.4-0.1,0.5-0.2c0.1-0.1,0.2-0.3,0.2-0.5l0-1.7l1.7,0c0.2,0,0.4-0.1,0.5-0.2c0.1-0.1,0.2-0.3,0.2-0.5
+ C21.9,16,21.6,15.7,21.2,15.6z"
+ />
+ </SvgIcon>
+ );
+};
+
export const InfoIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="2 2 20 20">
@@ -174,6 +320,54 @@
);
};
+export const MessageIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 16 14.554">
+ {/* <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="14.554"
+ viewBox="0 0 16 14.554"
+ >
+ <defs>
+ <style>.a{"fill:#005699;"}</style>
+ </defs> */}
+ <g transform="translate(-3.7 -4.4)">
+ <g transform="translate(3.7 4.4)">
+ <g transform="translate(0 0)">
+ <path
+ className="a"
+ d="M5.134,14.954a.869.869,0,0,1-.482-.1A1.252,1.252,0,0,1,3.881,13.7V11.773H3.3a2.614,2.614,0,0,1-2.6-2.7V3.1A2.675,2.675,0,0,1,3.3.4H14a2.635,2.635,0,0,1,2.7,2.7v5.88a2.694,2.694,0,0,1-2.7,2.7H9.086L6,14.569A1.222,1.222,0,0,1,5.134,14.954ZM3.3,1.653A1.547,1.547,0,0,0,1.76,3.292v5.88A1.585,1.585,0,0,0,3.3,10.713H5.037V13.8a.094.094,0,0,0,.1.1h.193L8.7,10.617h5.4A1.585,1.585,0,0,0,15.64,9.075V3.1A1.585,1.585,0,0,0,14.1,1.557H3.3Z"
+ transform="translate(-0.7 -0.4)"
+ />
+ </g>
+ </g>
+ </g>
+ {/* </svg> */}
+ </SvgIcon>
+ );
+};
+
+export const MicroIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <g>
+ <path
+ d="M12,16.2c1.1,0,2.1-0.4,2.8-1.2c0.8-0.8,1.2-1.9,1.2-2.8V6c0-1.1-0.4-2.1-1.2-2.8C13.3,1.6,10.7,1.6,9,3C8.4,3.8,8,4.8,8,6
+ v6c0,1.1,0.4,2.1,1.2,2.8C9.9,15.8,10.9,16.2,12,16.2z M9.3,6c0-0.7,0.3-1.3,0.8-1.9c0.5-0.5,1.2-0.8,1.9-0.8s1.3,0.3,1.9,0.8
+ s0.8,1.1,0.8,1.9v6c0,0.7-0.3,1.3-0.8,1.9c-1.1,1.1-2.7,1.1-3.6,0c-0.5-0.5-0.9-1.1-0.9-1.9V6z"
+ />
+ <path
+ d="M18.7,8.8c-0.3-0.3-0.7-0.3-1.1,0c-0.1,0.1-0.3,0.3-0.3,0.5V12c0,3.1-2.4,5.5-5.5,5.5S6.5,15.1,6.5,12V9.2
+ c0-0.4-0.3-0.7-0.7-0.7l0,0c-0.1,0-0.4,0.1-0.5,0.3c-0.1,0-0.1,0.3-0.1,0.4V12c0,3.5,2.7,6.4,6.2,6.8v1.7H9.2
+ c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7h5.6c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7h-2.1v-1.7
+ c3.5-0.4,6.2-3.4,6.2-6.8V9.2C18.8,9.1,18.8,8.9,18.7,8.8z"
+ />
+ </g>
+ </SvgIcon>
+ );
+};
+
export const MicroInBubbleIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 25 25">
@@ -236,6 +430,42 @@
);
};
+export const RecordingIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <path
+ d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20.3c-4.6,0-8.3-3.7-8.3-8.3S7.4,3.7,12,3.7
+ s8.3,3.7,8.3,8.3S16.6,20.3,12,20.3z"
+ />
+ </SvgIcon>
+ );
+};
+
+export const RemoveContactIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 16 16">
+ {/* <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="16"
+ viewBox="0 0 16 16"
+ >
+ <defs>
+ <style>.a{"fill:#005699;"}</style>
+ </defs> */}
+ <g transform="translate(-2 -2)">
+ <g transform="translate(2 2)">
+ <path
+ className="a"
+ d="M8,0a8,8,0,1,0,8,8A8.024,8.024,0,0,0,8,0ZM8,1.04a6.5,6.5,0,0,1,4.48,1.68L2.72,12.48A6.9,6.9,0,0,1,1.68,5.12,7.081,7.081,0,0,1,8,1.04ZM8,14.96a7.274,7.274,0,0,1-4.56-1.68l9.84-9.76a6.9,6.9,0,0,1,1.04,7.36A7.032,7.032,0,0,1,8,14.96Z"
+ />
+ </g>
+ </g>
+ {/* </svg> */}
+ </SvgIcon>
+ );
+};
+
export const RoundCrossIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 16 16">
@@ -245,58 +475,65 @@
);
};
-export const MessageIcon = (props: SvgIconProps) => {
+export const RoundSaltireIcon = (props: SvgIconProps) => {
return (
- <SvgIcon {...props} viewBox="0 0 16 14.554">
- {/* <svg
- xmlns="http://www.w3.org/2000/svg"
- width="16"
- height="14.554"
- viewBox="0 0 16 14.554"
- >
- <defs>
- <style>.a{"fill:#005699;"}</style>
- </defs> */}
- <g transform="translate(-3.7 -4.4)">
- <g transform="translate(3.7 4.4)">
- <g transform="translate(0 0)">
- <path
- className="a"
- d="M5.134,14.954a.869.869,0,0,1-.482-.1A1.252,1.252,0,0,1,3.881,13.7V11.773H3.3a2.614,2.614,0,0,1-2.6-2.7V3.1A2.675,2.675,0,0,1,3.3.4H14a2.635,2.635,0,0,1,2.7,2.7v5.88a2.694,2.694,0,0,1-2.7,2.7H9.086L6,14.569A1.222,1.222,0,0,1,5.134,14.954ZM3.3,1.653A1.547,1.547,0,0,0,1.76,3.292v5.88A1.585,1.585,0,0,0,3.3,10.713H5.037V13.8a.094.094,0,0,0,.1.1h.193L8.7,10.617h5.4A1.585,1.585,0,0,0,15.64,9.075V3.1A1.585,1.585,0,0,0,14.1,1.557H3.3Z"
- transform="translate(-0.7 -0.4)"
- />
- </g>
- </g>
- </g>
- {/* </svg> */}
+ <SvgIcon {...props} viewBox="0 0 16 16">
+ <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z" />
+ <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z" />
</SvgIcon>
);
};
-export const AudioCallIcon = (props: SvgIconProps) => {
+export const SaltireIcon = (props: SvgIconProps) => {
return (
- <SvgIcon {...props} viewBox="0 0 15.338 16">
- {/* <svg
- xmlns="http://www.w3.org/2000/svg"
- width="15.338"
- height="16"
- viewBox="0 0 15.338 16"
- >
- <defs>
- <style>.a{"fill:#005699;"}</style>
- </defs> */}
- <g transform="translate(-2.404 -1.956)">
- <g transform="translate(2.404 1.956)">
- <g transform="translate(0)">
- <path
- className="a"
- d="M10.417,14.956a6.077,6.077,0,0,1-1.676-.239C4.669,13.6.359,9.049-.44,4.9A5.052,5.052,0,0,1,1.237-.37h0a2.456,2.456,0,0,1,2.075-.639A1.767,1.767,0,0,1,4.51.109a7.417,7.417,0,0,0,.4.8c.718,1.357,1.2,2.395.4,3.273h-.08l-.4.319c-1.118.718-1.118.8-.958,1.038a9.647,9.647,0,0,0,4.39,4.869c.239.16.319.16,1.038-.8.16-.16.239-.319.4-.479l.08-.08c.958-.8,1.916-.16,3.432.718l.559.319a1.849,1.849,0,0,1,.958,1.277,2.7,2.7,0,0,1-.718,2A4.721,4.721,0,0,1,10.417,14.956ZM1.875.508A3.893,3.893,0,0,0,.6,4.659c.718,3.752,4.79,7.983,8.382,9.02a3.72,3.72,0,0,0,4.151-1.038,1.254,1.254,0,0,0,.479-1.118.761.761,0,0,0-.479-.559l-.479-.319c-1.277-.8-1.756-1.038-2.075-.8a1.741,1.741,0,0,1-.319.4c-.639.8-1.357,1.756-2.475,1.118A10.6,10.6,0,0,1,2.913,6.016C2.195,4.9,3.232,4.18,4.19,3.541L4.51,3.3c.239-.319,0-.8-.639-1.916a7.417,7.417,0,0,1-.4-.8A.72.72,0,0,0,2.993.109c-.239-.08-.639.08-1.118.4Z"
- transform="translate(0.596 1.044)"
- />
+ <SvgIcon {...props} viewBox="5 5 14 14">
+ <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+ </SvgIcon>
+ );
+};
+
+export const ScreenShareIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <g id="Icons_Outline">
+ <g id="Laptop_Black_24dp">
+ <g transform="translate(2.000000, 5.000000)">
+ <g id="Shape">
+ <path
+ d="M17.1,12.1H2.7c-0.5,0-0.9-0.2-1.2-0.5c-0.4-0.4-0.6-0.8-0.6-1.3v-9c0-0.5,0.2-0.9,0.5-1.2s0.8-0.5,1.2-0.5h14.5
+ c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.5,0.8,0.5,1.2v9c0,0.5-0.2,0.9-0.5,1.2C18,11.8,17.6,12.1,17.1,12.1z M2.7,0.8
+ c-0.1,0-0.2,0.1-0.3,0.1c0,0.1-0.1,0.2-0.1,0.3v9c0,0.1,0,0.2,0.1,0.3c0,0,0.1,0.1,0.3,0.1h14.4c0.1,0,0.2-0.1,0.3-0.1
+ c0.1-0.1,0.1-0.2,0.1-0.3v-9c0-0.1,0-0.2-0.1-0.3c0,0-0.1-0.1-0.3-0.1C17.1,0.8,2.7,0.8,2.7,0.8z"
+ />
+ </g>
+ <g id="Line-2">
+ <path d="M19.6,14.5H0.4c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h19.3c0.4,0,0.7,0.3,0.7,0.7S20,14.5,19.6,14.5z" />
+ </g>
</g>
</g>
</g>
- {/* </svg> */}
+ </SvgIcon>
+ );
+};
+
+export const TrashBinIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 15.44 16">
+ <path
+ d="M17.2 4.08h-4.72v-.32A1.776 1.776 0 0 0 10.72 2H9.44a1.776 1.776 0 0 0-1.76 1.76V4H2.96a.56.56 0 1 0 0 1.12h1.12l.56 11.04A1.879 1.879 0 0 0 6.56 18h7.12a1.879 1.879 0 0 0 1.92-1.84l.56-11.04h1.12a.547.547 0 0 0 .56-.56c0-.32-.32-.48-.64-.48Zm-8.48 0v-.32a.631.631 0 0 1 .64-.64h1.28a.631.631 0 0 1 .64.64V4H8.72Zm6.24 1.04-.56 10.96a.8.8 0 0 1-.8.8H6.56a.756.756 0 0 1-.8-.8L5.12 5.12Z"
+ transform="translate(-2.4 -2)"
+ />
+ </SvgIcon>
+ );
+};
+
+export const TwoSheetsIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 16 15.68">
+ <path
+ d="M16.72 2.2H7.2a1.264 1.264 0 0 0-1.28 1.28V5.8H3.28A1.264 1.264 0 0 0 2 7.08v9.52a1.264 1.264 0 0 0 1.28 1.28h9.52a1.264 1.264 0 0 0 1.28-1.28v-2.32h2.64A1.264 1.264 0 0 0 18 13V3.48a1.264 1.264 0 0 0-1.28-1.28Zm-3.68 14.4a.212.212 0 0 1-.24.24H3.28a.212.212 0 0 1-.24-.24V7.08a.255.255 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24Zm3.92-3.6a.212.212 0 0 1-.24.24h-2.64V7.08A1.264 1.264 0 0 0 12.8 5.8H6.96V3.48a.212.212 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24V13Z"
+ transform="translate(-2 -2.2)"
+ />
</SvgIcon>
);
};
@@ -327,102 +564,41 @@
);
};
-export const ContactDetailsIcon = (props: SvgIconProps) => {
+export const VideoCameraIcon = (props: SvgIconProps) => {
return (
- <SvgIcon {...props} viewBox="0 0 14.647 16">
- {/* <svg
- xmlns="http://www.w3.org/2000/svg"
- width="14.647"
- height="16"
- viewBox="0 0 14.647 16"
- >
- <defs>
- <style>.a{"fill:#005699;"}</style>
- </defs> */}
- <path
- className="a"
- d="M11.258,9.562A3.774,3.774,0,0,0,13.965,5.9,3.79,3.79,0,0,0,10.144,2,3.871,3.871,0,0,0,8.95,9.562,7.806,7.806,0,0,0,2.9,17.443a.557.557,0,1,0,1.114,0c0-3.821,2.786-6.925,6.209-6.925s6.209,3.1,6.209,6.925a.557.557,0,0,0,1.114,0C17.388,13.463,14.681,10.119,11.258,9.562ZM7.278,5.9a2.866,2.866,0,1,1,5.731,0,2.787,2.787,0,0,1-2.866,2.786A2.838,2.838,0,0,1,7.278,5.9Z"
- transform="translate(-2.9 -2)"
- />
- {/* </svg> */}
- </SvgIcon>
- );
-};
-
-export const BlockContactIcon = (props: SvgIconProps) => {
- return (
- <SvgIcon {...props} viewBox="0 0 16 15.52">
- {/* <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.52">
- <defs>
- <style>.a{"fill:#005699;"}</style>
- </defs> */}
- <g transform="translate(-2 -2.3)">
- <path
- className="a"
- d="M15.88,11.5a4.08,4.08,0,1,0,4.08,4.08A4.1,4.1,0,0,0,15.88,11.5Zm0,.96a3.282,3.282,0,0,1,1.76.56l-4.48,4a3.309,3.309,0,0,1-.4-1.52A3.22,3.22,0,0,1,15.88,12.46Zm0,6.24a3.091,3.091,0,0,1-2.16-.88l4.56-4.08a2.852,2.852,0,0,1,.64,1.84A3.007,3.007,0,0,1,15.88,18.7Z"
- transform="translate(-1.96 -1.84)"
- />
- <path
- className="a"
- d="M12,10.94l.56-.32A6.445,6.445,0,0,0,9.92,9.5a3.626,3.626,0,0,0,2.56-3.52A3.555,3.555,0,0,0,8.88,2.3,3.735,3.735,0,0,0,7.76,9.58,7.327,7.327,0,0,0,2,17.02a.547.547,0,0,0,.56.56.547.547,0,0,0,.56-.56c0-3.6,2.64-6.56,5.92-6.56a5.3,5.3,0,0,1,2.88.88A.971.971,0,0,1,12,10.94ZM8.88,8.7A2.68,2.68,0,1,1,11.6,6.06,2.631,2.631,0,0,1,8.88,8.7Z"
- />
- </g>
- {/* </svg> */}
- </SvgIcon>
- );
-};
-
-export const RemoveContactIcon = (props: SvgIconProps) => {
- return (
- <SvgIcon {...props} viewBox="0 0 16 16">
- {/* <svg
- xmlns="http://www.w3.org/2000/svg"
- width="16"
- height="16"
- viewBox="0 0 16 16"
- >
- <defs>
- <style>.a{"fill:#005699;"}</style>
- </defs> */}
- <g transform="translate(-2 -2)">
- <g transform="translate(2 2)">
- <path
- className="a"
- d="M8,0a8,8,0,1,0,8,8A8.024,8.024,0,0,0,8,0ZM8,1.04a6.5,6.5,0,0,1,4.48,1.68L2.72,12.48A6.9,6.9,0,0,1,1.68,5.12,7.081,7.081,0,0,1,8,1.04ZM8,14.96a7.274,7.274,0,0,1-4.56-1.68l9.84-9.76a6.9,6.9,0,0,1,1.04,7.36A7.032,7.032,0,0,1,8,14.96Z"
- />
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <g id="Icons_Outline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinejoin="round">
+ <g id="Camera" fillRule="nonzero" stroke="#ffffff" strokeWidth="1.5">
+ <g id="Ico_Camera" transform="translate(3.000000, 5.000000)">
+ <path
+ d="M17.739656,2.05124654 C17.62808,1.97368421 17.4421199,1.93490305 17.1817759,2.0900277 L13.4997675,4.41689751 L13.4997675,1.15927978 C13.4997675,0.849030471 13.3138075,0.5 12.7187355,0.5 L0.929800093,0.5 C0.371920037,0.538781163 0,0.810249307 0,1.19806094 L0,13.8407202 C0,14.2285319 0.371920037,14.5 0.929800093,14.5 L12.7559275,14.5 C13.3138075,14.5 13.5369596,14.1509695 13.5369596,13.8407202 L13.5369596,10.5831025 L17.2189679,12.9487535 C17.4421199,13.1038781 17.62808,13.065097 17.739656,12.9875346 C18,12.83241 18,12.5221607 18,12.4058172 L18,2.63296399 C18,2.5166205 18,2.20637119 17.739656,2.05124654 Z"
+ id="Path"
+ ></path>
+ </g>
</g>
</g>
- {/* </svg> */}
- </SvgIcon>
- );
-};
-export const RoundSaltireIcon = (props: SvgIconProps) => {
- return (
- <SvgIcon {...props} viewBox="0 0 16 16">
- <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z" />
- <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z" />
</SvgIcon>
);
};
-export const TrashBinIcon = (props: SvgIconProps) => {
+export const VolumeIcon = (props: SvgIconProps) => {
return (
- <SvgIcon {...props} viewBox="0 0 15.44 16">
- <path
- d="M17.2 4.08h-4.72v-.32A1.776 1.776 0 0 0 10.72 2H9.44a1.776 1.776 0 0 0-1.76 1.76V4H2.96a.56.56 0 1 0 0 1.12h1.12l.56 11.04A1.879 1.879 0 0 0 6.56 18h7.12a1.879 1.879 0 0 0 1.92-1.84l.56-11.04h1.12a.547.547 0 0 0 .56-.56c0-.32-.32-.48-.64-.48Zm-8.48 0v-.32a.631.631 0 0 1 .64-.64h1.28a.631.631 0 0 1 .64.64V4H8.72Zm6.24 1.04-.56 10.96a.8.8 0 0 1-.8.8H6.56a.756.756 0 0 1-.8-.8L5.12 5.12Z"
- transform="translate(-2.4 -2)"
- />
- </SvgIcon>
- );
-};
-
-export const TwoSheetsIcon = (props: SvgIconProps) => {
- return (
- <SvgIcon {...props} viewBox="0 0 16 15.68">
- <path
- d="M16.72 2.2H7.2a1.264 1.264 0 0 0-1.28 1.28V5.8H3.28A1.264 1.264 0 0 0 2 7.08v9.52a1.264 1.264 0 0 0 1.28 1.28h9.52a1.264 1.264 0 0 0 1.28-1.28v-2.32h2.64A1.264 1.264 0 0 0 18 13V3.48a1.264 1.264 0 0 0-1.28-1.28Zm-3.68 14.4a.212.212 0 0 1-.24.24H3.28a.212.212 0 0 1-.24-.24V7.08a.255.255 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24Zm3.92-3.6a.212.212 0 0 1-.24.24h-2.64V7.08A1.264 1.264 0 0 0 12.8 5.8H6.96V3.48a.212.212 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24V13Z"
- transform="translate(-2 -2.2)"
- />
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <g>
+ <path
+ d="M14.6,4c-0.4-0.7-1.3-0.8-2-0.4L6.8,7.7H4.1C3,7.7,2,8.7,2,9.9v4.3c0,1.2,1,2.1,2.1,2.1h2.6l5.8,4.1
+ c0.2,0.2,0.5,0.2,0.8,0.2c0.8,0,1.4-0.6,1.5-1.4V4.8C14.9,4.5,14.8,4.2,14.6,4z M13.4,19.2L13.4,19.2l-5.7-4l-0.4-0.3h-1H6.1h-2
+ c-0.4,0-0.7-0.3-0.7-0.7V9.9c0-0.4,0.3-0.7,0.7-0.7H6h0.2h1l0.4-0.3l5.7-4L13.4,19.2L13.4,19.2z"
+ />
+ <path
+ d="M19.1,12c0,1.5-0.6,2.9-1.6,4c-0.3,0.3-0.7,0.3-1,0c-0.3-0.3-0.3-0.7,0-1c1.6-1.7,1.6-4.3,0-6c-0.3-0.3-0.3-0.7,0-1
+ c0.3-0.3,0.7-0.3,1,0C18.6,9.1,19.1,10.5,19.1,12z"
+ />
+ <path
+ d="M18.9,5.1c-0.3-0.3-0.7-0.2-1,0c-0.3,0.3-0.2,0.7,0,1c3.3,2.9,3.5,8,0.6,11.2c-0.2,0.2-0.4,0.4-0.6,0.6
+ c-0.3,0.3-0.3,0.7,0,1c0.3,0.3,0.7,0.3,1,0c3.8-3.5,4.1-9.4,0.7-13.2C19.4,5.5,19.1,5.3,18.9,5.1L18.9,5.1z"
+ />
+ </g>
</SvgIcon>
);
};
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
new file mode 100644
index 0000000..61c90bb
--- /dev/null
+++ b/client/src/pages/CallInterface.tsx
@@ -0,0 +1,117 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program. If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { Box, Card, Grid, Stack, Typography } from '@mui/material';
+
+import {
+ CallingChatButton,
+ CallingEndButton,
+ CallingExtensionButton,
+ CallingFullscreenButton,
+ CallingGroupButton,
+ CallingMicButton,
+ CallingRecordButton,
+ CallingScreenShareButton,
+ CallingVideoCameraButton,
+ CallingVolumeButton,
+} from '../components/Button';
+
+export default function CallInterface() {
+ return (
+ <>
+ <Box sx={{ backgroundColor: 'blue', width: '100%', height: '100%', position: 'absolute' }}>
+ {/* Host video will be shown here */}
+ </Box>
+ <Stack
+ position="absolute"
+ direction="column"
+ spacing={1}
+ margin={2}
+ sx={{ left: 0, right: 0, top: 0, bottom: 0 }}
+ >
+ {/* Top panel with guest information */}
+ <Box>
+ <CallInterfaceInformation />
+ </Box>
+ {/* Guest video, with empty space to be moved around and stickied to walls */}
+ <Box height="100%">
+ <Box
+ sx={{
+ aspectRatio: '16/9',
+ position: 'absolute',
+ right: 0,
+ zIndex: 2,
+ backgroundColor: 'white',
+ borderRadius: '12px',
+ minWidth: '25%',
+ minHeight: '25%',
+ maxWidth: '50%',
+ maxHeight: '50%',
+ }}
+ />
+ </Box>
+ {/* Bottom panel with calling buttons */}
+ <Grid container justifyContent="space-between">
+ <Grid item xs />
+ <Grid item>
+ <CallInterfacePrimaryButtons />
+ </Grid>
+ <Grid item xs sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+ <CallInterfaceSecondaryButtons />
+ </Grid>
+ </Grid>
+ </Stack>
+ </>
+ );
+}
+
+const CallInterfaceInformation = () => {
+ return (
+ <Stack direction="row" justifyContent="space-between" alignItems="center">
+ <Typography color="white" component="p">
+ Alain Thérieur
+ </Typography>
+ <Typography color="white" component="p">
+ 01:23
+ </Typography>
+ </Stack>
+ );
+};
+
+const CallInterfacePrimaryButtons = () => {
+ return (
+ <Card sx={{ backgroundColor: 'black', textAlign: 'center' }}>
+ <CallingMicButton />
+ <CallingEndButton />
+ <CallingVideoCameraButton />
+ </Card>
+ );
+};
+
+const CallInterfaceSecondaryButtons = () => {
+ return (
+ <Card style={{ backgroundColor: 'black' }}>
+ <CallingVolumeButton />
+ <CallingGroupButton />
+ <CallingChatButton />
+ <CallingScreenShareButton />
+ <CallingRecordButton />
+ <CallingExtensionButton />
+ <CallingFullscreenButton />
+ </Card>
+ );
+};