simon | 2d3b653 | 2022-11-08 21:01:57 -0500 | [diff] [blame] | 1 | /* |
| 2 | * Copyright (C) 2022 Savoir-faire Linux Inc. |
| 3 | * |
| 4 | * This program is free software; you can redistribute it and/or modify |
| 5 | * it under the terms of the GNU Affero General Public License as |
| 6 | * published by the Free Software Foundation; either version 3 of the |
| 7 | * License, or (at your option) any later version. |
| 8 | * |
| 9 | * This program is distributed in the hope that it will be useful, |
| 10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of |
| 11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| 12 | * GNU Affero General Public License for more details. |
| 13 | * |
| 14 | * You should have received a copy of the GNU Affero General Public |
| 15 | * License along with this program. If not, see |
| 16 | * <https://www.gnu.org/licenses/>. |
| 17 | */ |
| 18 | |
| 19 | import { Box, CircularProgress, Grid, Stack, Typography } from '@mui/material'; |
| 20 | import { Trans } from 'react-i18next'; |
| 21 | |
| 22 | import { |
| 23 | CallingAnswerAudioButton, |
| 24 | CallingAnswerVideoButton, |
| 25 | CallingEndButton, |
| 26 | CallingRefuseButton, |
| 27 | } from '../components/CallButtons'; |
| 28 | |
| 29 | export type CallPendingProps = { |
| 30 | pending: PendingStatus; |
| 31 | caller?: CallerStatus; |
| 32 | medium?: CommunicationMedium; |
| 33 | }; |
| 34 | |
| 35 | type PendingStatus = 'caller' | 'receiver'; |
| 36 | type CallerStatus = 'calling' | 'connecting'; |
| 37 | type CommunicationMedium = 'audio' | 'video'; |
| 38 | |
| 39 | const RECEIVER_BUTTONS = [ |
| 40 | { |
| 41 | ButtonComponent: CallingRefuseButton, |
| 42 | translationKey: 'refuse_call', |
| 43 | }, |
| 44 | { |
| 45 | ButtonComponent: CallingAnswerAudioButton, |
| 46 | translationKey: 'accept_call_audio', |
| 47 | }, |
| 48 | { |
| 49 | ButtonComponent: CallingAnswerVideoButton, |
| 50 | translationKey: 'accept_call_video', |
| 51 | }, |
| 52 | ]; |
| 53 | |
| 54 | export const CallPending = (props: CallPendingProps) => { |
| 55 | return ( |
| 56 | <Stack |
| 57 | direction="column" |
| 58 | justifyContent="center" |
| 59 | alignItems="center" |
| 60 | height="100%" |
| 61 | spacing={4} |
| 62 | sx={{ |
| 63 | backgroundColor: 'black', |
| 64 | }} |
| 65 | > |
| 66 | <Box |
| 67 | sx={{ |
| 68 | position: 'relative', |
| 69 | display: 'flex', |
| 70 | alignItems: 'center', |
| 71 | justifyContent: 'center', |
| 72 | width: '100%', |
| 73 | height: '30%', |
| 74 | }} |
| 75 | > |
| 76 | <Box |
| 77 | sx={{ |
| 78 | aspectRatio: '1', |
| 79 | height: '100%', |
| 80 | position: 'absolute', |
| 81 | }} |
| 82 | > |
| 83 | <CircularProgress |
| 84 | disableShrink |
| 85 | thickness={1} |
| 86 | size="100%" |
| 87 | sx={{ |
| 88 | position: 'absolute', |
| 89 | color: 'white', |
| 90 | zIndex: 1, |
| 91 | }} |
| 92 | /> |
| 93 | <img |
| 94 | // TODO: Insert incoming caller icon here |
| 95 | style={{ |
| 96 | position: 'absolute', |
| 97 | objectFit: 'cover', |
| 98 | width: '100%', |
| 99 | height: '100%', |
| 100 | maxWidth: '100%', |
| 101 | borderRadius: '50%', |
| 102 | aspectRatio: '1', |
| 103 | }} |
| 104 | /> |
| 105 | </Box> |
| 106 | </Box> |
| 107 | {props.pending === 'caller' ? ( |
| 108 | <CallPendingCallerInterface {...props} /> |
| 109 | ) : ( |
| 110 | <CallPendingReceiverInterface {...props} /> |
| 111 | )} |
| 112 | </Stack> |
| 113 | ); |
| 114 | }; |
| 115 | |
| 116 | export const CallPendingCallerInterface = ({ caller }: CallPendingProps) => { |
| 117 | // TODO: Remove the dummy name |
| 118 | const defaultName = 'Alex Thérieur'; |
| 119 | return ( |
| 120 | <Stack textAlign="center" spacing={2}> |
| 121 | <Typography variant="h1" color="white"> |
| 122 | {defaultName} |
| 123 | </Typography> |
| 124 | <Typography variant="h3" color="white"> |
| 125 | {caller === 'calling' ? <Trans i18nKey="calling" /> : <Trans i18nKey="connecting" />} |
| 126 | </Typography> |
| 127 | <CallerButtons /> |
| 128 | </Stack> |
| 129 | ); |
| 130 | }; |
| 131 | |
| 132 | export const CallPendingReceiverInterface = ({ medium }: CallPendingProps) => { |
| 133 | // TODO: Remove the dummy name |
| 134 | const defaultName = 'Alain Thérieur'; |
| 135 | return ( |
| 136 | <Stack textAlign="center" spacing={2}> |
| 137 | <Typography variant="h1" color="white"> |
| 138 | <Trans i18nKey="incoming_call" context={medium} values={{ member0: defaultName }} /> |
| 139 | </Typography> |
| 140 | <ReceiverButtons /> |
| 141 | </Stack> |
| 142 | ); |
| 143 | }; |
| 144 | |
| 145 | const CallerButtons = () => { |
| 146 | return ( |
| 147 | <Stack textAlign="center" spacing={1}> |
| 148 | <CallingEndButton size="large" /> |
| 149 | <Typography variant="body2" color="white"> |
| 150 | <Trans i18nKey="end_call" /> |
| 151 | </Typography> |
| 152 | </Stack> |
| 153 | ); |
| 154 | }; |
| 155 | |
| 156 | const ReceiverButtons = () => { |
| 157 | return ( |
| 158 | <Grid container direction="row" padding={2}> |
| 159 | {RECEIVER_BUTTONS.map(({ ButtonComponent, translationKey }, i) => ( |
| 160 | <Grid item xs={4} key={i}> |
| 161 | <Stack spacing={1}> |
| 162 | <ButtonComponent color="inherit" size="large" /> |
| 163 | <Typography variant="body2" color="white" textAlign="center" sx={{ opacity: 0.75 }}> |
| 164 | <Trans i18nKey={'' + translationKey} /> |
| 165 | </Typography> |
| 166 | </Stack> |
| 167 | </Grid> |
| 168 | ))} |
| 169 | </Grid> |
| 170 | ); |
| 171 | }; |