jeffemmett
/
daily-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update the invite others screen to match with the design

This commit is contained in:
harshithpabbati 2022-01-17 14:07:22 +05:30
parent 623c15f2d3
commit f4564acca1
1 changed files with 59 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
custom/fitness-demo/components/Call/InviteOthers.js
View File

@ -3,64 +3,72 @@ import Button from '@custom/shared/components/Button';
import { Card, CardBody, CardHeader } from '@custom/shared/components/Card'; import { Card, CardBody, CardHeader } from '@custom/shared/components/Card';
import { TextInput } from '@custom/shared/components/Input'; import { TextInput } from '@custom/shared/components/Input';
import Tile from '@custom/shared/components/Tile'; import Tile from '@custom/shared/components/Tile';
import VideoContainer from '@custom/shared/components/VideoContainer';
import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants'; import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants';
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider'; import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
import Container from './Container';
import Header from './Header';
export const InviteOthers = () => { export const InviteOthers = () => {
const { localParticipant } = useParticipants(); const { localParticipant } = useParticipants();
return ( return (
<div className="invite-wrapper"> <Container>
<div className="invite-others"> <Header />
<Card variant="dark"> <VideoContainer>
<CardHeader> <div className="invite-wrapper">
Waiting for others to join! <div className="invite-others">
</CardHeader> <Card variant="dark">
<CardBody> <CardHeader>Waiting for others to join?</CardHeader>
<div className="link"> <CardBody>
<TextInput <h3>Copy the link and invite them to the call!</h3>
variant="border" <div className="link">
value={window.location.href} <TextInput
disabled variant="border"
/> value={window.location.href}
<Button disabled
onClick={() => navigator.clipboard.writeText(window.location.href)} />
> <Button
Copy link onClick={() => navigator.clipboard.writeText(window.location.href)}
</Button> >
</div> Copy link
</CardBody> </Button>
</Card> </div>
</div> </CardBody>
<div className="preview"> </Card>
<Tile participant={localParticipant} mirrored aspectRatio={DEFAULT_ASPECT_RATIO} /> </div>
</div> <div className="preview">
<style jsx>{` <Tile participant={localParticipant} mirrored aspectRatio={DEFAULT_ASPECT_RATIO} />
.invite-wrapper { </div>
display: flex; <style jsx>{`
height: 100%; .invite-wrapper {
width: 100%; display: flex;
position: relative; height: 100%;
} width: 100%;
position: relative;
.invite-others { }
width: 50%;
margin: auto; .invite-others {
text-align: center; width: 50%;
} margin: auto;
text-align: center;
.link { }
display: flex;
justify-content: center; .link {
gap: 10px; display: flex;
} justify-content: center;
gap: 10px;
.preview { }
width: 186px;
} .preview {
`} position: absolute;
</style> bottom: 0;
</div> width: 186px;
}
`}</style>
</div>
</VideoContainer>
</Container>
) )
} }