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