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

118
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,51 +63,67 @@ export default function Call({
}, [callFrame, createAndJoinCall]); }, [callFrame, createAndJoinCall]);
return ( return (
<div className="call-container"> <div>
{/* Daily iframe container */} <div className="call-container">
<div ref={callRef} className="call" /> {/* Daily iframe container */}
<Card> <div ref={callRef} className="call" />
<CardHeader>Copy and share the URL to invite others</CardHeader> <Card>
<CardBody> <CardHeader>Copy and share the URL to invite others</CardHeader>
<label htmlFor="copy-url"></label> <CardBody>
<TextInput <label htmlFor="copy-url"></label>
type="text" <TextInput
id="copy-url" type="text"
placeholder="Copy this room URL" id="copy-url"
value={room} placeholder="Copy this room URL"
pattern="^(https:\/\/)?[\w.-]+(\.(daily\.(co)))+[\/\/]+[\w.-]+$" value={room}
/> pattern="^(https:\/\/)?[\w.-]+(\.(daily\.(co)))+[\/\/]+[\w.-]+$"
<Button onClick={handleCopyClick}> />
{isLinkCopied ? 'Copied!' : `Copy room URL`} <Button onClick={handleCopyClick}>
</Button> {isLinkCopied ? 'Copied!' : `Copy room URL`}
</CardBody> </Button>
<CardFooter>{expiry && <ExpiryTimer expiry={expiry} />}</CardFooter> </CardBody>
</Card> <CardFooter>
<style jsx>{` {expiry && (
.call-container { <CardFooter>
display: flex; Room expires in:
align-items: center; <ExpiryTimer expiry={expiry} />
gap: var(--spacing-md); </CardFooter>
} )}
.call-container :global(.call) { </CardFooter>
width: 100%; </Card>
} <style jsx>{`
.call-container :global(.button) {
margin-top: var(--spacing-md);
}
.call-container :global(.card) {
max-width: 300px;
max-height: 300px;
}
@media only screen and (max-width: 750px) {
.call-container { .call-container {
flex-direction: column; display: flex;
align-items: center;
gap: var(--spacing-md);
} }
} .call-container :global(.call) {
`}</style> width: 100%;
}
.call-container :global(.button) {
margin-top: var(--spacing-md);
}
.call-container :global(.card) {
max-width: 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) {
.call-container {
flex-direction: column;
}
}
`}</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,
}, },
}), }),