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

Updating imports and first pass at Timer component fix

This commit is contained in:
Kimberlee Johnson 2021-09-16 14:53:54 -07:00
parent 59224abf68
commit 72c278a155
4 changed files with 70 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
prebuilt-ui/basic-embed/components/Call.js
View File

@ -1,15 +1,15 @@
import DailyIframe from '@daily-co/daily-js'; import DailyIframe from '@daily-co/daily-js';
import React, { useCallback, useEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import { writeText } from 'clipboard-polyfill'; import { writeText } from 'clipboard-polyfill';
import { Button } from '@dailyjs/shared/components/Button'; import Button from '@dailyjs/shared/components/Button';
import { import {
Card, Card,
CardBody, CardBody,
CardHeader, CardHeader,
CardFooter, CardFooter,
} from '@dailyjs/shared/components/Card'; } from '@dailyjs/shared/components/Card';
import { ExpiryTimer } from '@dailyjs/shared/components/ExpiryTimer'; import ExpiryTimer from '@dailyjs/shared/components/ExpiryTimer';
import { TextInput } from '@dailyjs/shared/components/Input'; import TextInput from '@dailyjs/shared/components/Input';
const CALL_OPTIONS = { const CALL_OPTIONS = {
showLeaveButton: true, showLeaveButton: true,
@ -24,13 +24,7 @@ const CALL_OPTIONS = {
}, },
}; };
export default function Call({ export const Call = ({ room, setRoom, callFrame, setCallFrame, expiry }) => {
room,
setRoom,
callFrame,
setCallFrame,
expiry,
}) {
const callRef = useRef(null); const callRef = useRef(null);
const [isLinkCopied, setIsLinkCopied] = useState(false); const [isLinkCopied, setIsLinkCopied] = useState(false);
@ -69,6 +63,7 @@ export default function Call({
}, [callFrame, createAndJoinCall]); }, [callFrame, createAndJoinCall]);
return ( return (
<div>
<div className="call-container"> <div className="call-container">
{/* Daily iframe container */} {/* Daily iframe container */}
<div ref={callRef} className="call" /> <div ref={callRef} className="call" />
@ -87,7 +82,14 @@ export default function Call({
{isLinkCopied ? 'Copied!' : `Copy room URL`} {isLinkCopied ? 'Copied!' : `Copy room URL`}
</Button> </Button>
</CardBody> </CardBody>
<CardFooter>{expiry && <ExpiryTimer expiry={expiry} />}</CardFooter> <CardFooter>
{expiry && (
<CardFooter>
Room expires in:
<ExpiryTimer expiry={expiry} />
</CardFooter>
)}
</CardFooter>
</Card> </Card>
<style jsx>{` <style jsx>{`
.call-container { .call-container {
@ -98,16 +100,21 @@ export default function Call({
.call-container :global(.call) { .call-container :global(.call) {
width: 100%; width: 100%;
} }
.call-container :global(.button) { .call-container :global(.button) {
margin-top: var(--spacing-md); margin-top: var(--spacing-md);
} }
.call-container :global(.card) { .call-container :global(.card) {
max-width: 300px; max-width: 300px;
max-height: 300px; max-height: 400px;
}
.call-container :global(.card-footer) {
align-items: center;
gap: var(--spacing-xxs);
}
.call-container :global(.countdown) {
position: static;
border-radius: var(--radius-sm);
} }
@media only screen and (max-width: 750px) { @media only screen and (max-width: 750px) {
.call-container { .call-container {
flex-direction: column; flex-direction: column;
@ -115,5 +122,8 @@ export default function Call({
} }
`}</style> `}</style>
</div> </div>
</div>
); );
} };
export default Call;

4
prebuilt-ui/basic-embed/components/CreateRoom.js
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Well } from '@dailyjs/shared/components/Well'; import Well from '@dailyjs/shared/components/Well';
import { Button } from '@dailyjs/shared/components/Button'; import Button from '@dailyjs/shared/components/Button';
export function CreateRoom({ isConfigured, isValidRoom, setRoom, setExpiry }) { export function CreateRoom({ isConfigured, isValidRoom, setRoom, setExpiry }) {
const [isError, setIsError] = useState(false); const [isError, setIsError] = useState(false);

6
prebuilt-ui/basic-embed/components/Home.js
View File

@ -1,5 +1,5 @@
import React, { useCallback, useRef, useState } from 'react'; import React, { useCallback, useRef, useState } from 'react';
import { Button } from '@dailyjs/shared/components/Button'; import Button from '@dailyjs/shared/components/Button';
import { import {
Card, Card,
CardBody, CardBody,
@ -7,8 +7,8 @@ import {
CardHeader, CardHeader,
} from '@dailyjs/shared/components/Card'; } from '@dailyjs/shared/components/Card';
import { CreateRoom } from '../components/CreateRoom'; import { CreateRoom } from '../components/CreateRoom';
import { Field } from '@dailyjs/shared/components/Field'; import Field from '@dailyjs/shared/components/Field';
import { TextInput } from '@dailyjs/shared/components/Input'; import TextInput from '@dailyjs/shared/components/Input';
export default function Home({ setRoom, setExpiry, isConfigured }) { export default function Home({ setRoom, setExpiry, isConfigured }) {
const roomRef = useRef(null); const roomRef = useRef(null);

2
prebuilt-ui/basic-embed/pages/api/room/index.js
View File

@ -17,7 +17,7 @@ export default async function handler(req, res) {
enable_network_ui: true, enable_network_ui: true,
enable_screenshare: true, enable_screenshare: true,
enable_chat: true, enable_chat: true,
exp: Math.round(Date.now() / 1000) + 5 * 60, exp: Math.round(Date.now() / 1000) + 300,
eject_at_room_exp: true, eject_at_room_exp: true,
}, },
}), }),