diff --git a/public/favicon.ico b/public/favicon.ico index bcd5dfd..3fb8ff0 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index b863281..1fc5dbd 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Daily React Demo + Daily call object React demo diff --git a/src/api.js b/src/api.js index 504f05f..260a90f 100644 --- a/src/api.js +++ b/src/api.js @@ -1,5 +1,4 @@ -const newRoomEndpoint = - `${window.location.origin}/api/rooms`; +const newRoomEndpoint = `${window.location.origin}/api/rooms`; /** * Create a short-lived room for demo purposes. @@ -9,10 +8,9 @@ const newRoomEndpoint = * in README.md * * See https://docs.daily.co/reference#create-room for more information on how - * to use the Daily REST API to create rooms and what options are available. + * to use the Daily REST API to create rooms and what options are available. */ async function createRoom() { - const exp = Math.round(Date.now() / 1000) + 60 * 30; const options = { properties: { @@ -20,10 +18,10 @@ async function createRoom() { }, }; let response = await fetch(newRoomEndpoint, { - method: "POST", - body: JSON.stringify(options), - mode: 'cors', - }), + method: 'POST', + body: JSON.stringify(options), + mode: 'cors', + }), room = await response.json(); return room; diff --git a/src/components/App/App.css b/src/components/App/App.css index f4c883a..98d1423 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -1,6 +1,87 @@ +:root { + --fontFamily: GraphikRegular, 'Helvetica Neue', Sans-Serif; + --white: #ffffff; + --grey: #c8d1dc; + --darkblue: #121a24; + --lightgreen: #72cc18; +} + .app { - background-color: #4a4a4a; + font-family: var(--fontFamily); + color: var(--white); + background-color: var(--darkblue); position: absolute; height: 100%; width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 auto; +} + +.wrapper { + display: flex; + flex-direction: column; +} + +.header { + display: flex; + position: relative; + bottom: 80%; + justify-content: space-between; + align-items: center; + margin: 1rem; +} + +.introInstructions { + position: relative; + bottom: 100px; +} + +.dailyLogo { + width: 70px; +} + +.title { + margin-bottom: 0; + text-align: center; +} + +.instructions { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + margin-bottom: 8px; + width: 100%; +} + +.roomURL { + width: 300px; + line-height: 18px; + padding-top: 7px; + padding-bottom: 7px; + padding-left: 7px; + border-radius: 8px; +} + +.startButton, +.startButtonReady, +.createRoomButton { + padding: 8px 16px; + margin-top: 8px; + margin-bottom: 8px; + font-weight: 700; + text-align: center; + border-radius: 8px; + background-color: var(--white); + border-width: 1px; + border-color: var(--grey); + color: var(--darkblue); + cursor: pointer; + width: 250px; +} + +.startButtonReady { + background-color: var(--lightgreen); } diff --git a/src/components/App/App.js b/src/components/App/App.js index 64b9c67..a833241 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -8,30 +8,39 @@ import CallObjectContext from '../../CallObjectContext'; import { roomUrlFromPageUrl, pageUrlFromRoomUrl } from '../../urlUtils'; import DailyIframe from '@daily-co/daily-js'; import { logDailyEvent } from '../../logUtils'; +import dailyLogo from '../../images/logo@2x.png'; +import gitHubLogo from '../../images/github@icons8.png'; const STATE_IDLE = 'STATE_IDLE'; const STATE_CREATING = 'STATE_CREATING'; const STATE_JOINING = 'STATE_JOINING'; +const STATE_ROOM_READY = 'STATE_ROOM_CREATED'; const STATE_JOINED = 'STATE_JOINED'; const STATE_LEAVING = 'STATE_LEAVING'; const STATE_ERROR = 'STATE_ERROR'; export default function App() { const [appState, setAppState] = useState(STATE_IDLE); - const [roomUrl, setRoomUrl] = useState(null); + const [roomUrl, setRoomUrl] = useState(''); + const [roomUrlFieldValue, setRoomUrlFieldValue] = useState(''); const [callObject, setCallObject] = useState(null); /** * Creates a new call room. */ - const createCall = useCallback(() => { + const createRoom = useCallback(() => { setAppState(STATE_CREATING); return api .createRoom() - .then((room) => room.url) + .then((room) => { + setRoomUrl(room.url); + setRoomUrlFieldValue(room.url); + setAppState(STATE_ROOM_READY); + }) .catch((error) => { console.log('Error creating room', error); setRoomUrl(null); + setRoomUrlFieldValue(undefined); setAppState(STATE_IDLE); }); }, []); @@ -203,7 +212,7 @@ export default function App() { * Disabling the start button until then avoids that scenario. * !!! */ - const enableStartButton = appState === STATE_IDLE; + const enableStartButton = appState === STATE_ROOM_READY; return (
@@ -220,12 +229,47 @@ export default function App() { /> ) : ( - { - createCall().then((url) => startJoiningCall(url)); - }} - /> +
+
+ + +
+
+

Daily call object React demo

+
+

+ To get started, enter an existing room URL or create a temporary + demo room +

+ + { + setRoomUrl(event.target.value); + setRoomUrlFieldValue(event.target.value); + setAppState(STATE_ROOM_READY); + }} + /> + + startJoiningCall(roomUrl)} + /> +
+
+
)}
); diff --git a/src/components/Call/Call.css b/src/components/Call/Call.css index cc9bb55..66f280d 100644 --- a/src/components/Call/Call.css +++ b/src/components/Call/Call.css @@ -20,3 +20,18 @@ display: flex; align-items: center; } + +.banner { + width: auto; + padding: 20px 30px; + top: 5%; + left: 50%; + position: absolute; + transform: translate(-50%, -50%); + text-align: center; + border: 1px solid #2b3f56; +} + +/* .docsLink { + text-decoration: none; +} */ diff --git a/src/components/Call/Call.js b/src/components/Call/Call.js index 1ef9f40..87282af 100644 --- a/src/components/Call/Call.js +++ b/src/components/Call/Call.js @@ -167,6 +167,9 @@ export default function Call() { const message = getMessage(callState); return (
+
+ Explore more ways to customize this call in the Daily docs. +
{ !message diff --git a/src/components/CallMessage/CallMessage.css b/src/components/CallMessage/CallMessage.css index b22db0a..0f59c95 100644 --- a/src/components/CallMessage/CallMessage.css +++ b/src/components/CallMessage/CallMessage.css @@ -5,7 +5,7 @@ left: 50%; position: absolute; transform: translate(-50%, -50%); - color: #ffffff; + color: var(--white); text-align: center; font-size: 14px; line-height: 17px; @@ -13,7 +13,7 @@ .call-message.error { color: #d81a1a; - background-color: #ffffff; + background-color: var(--white); } .call-message-header { diff --git a/src/components/Chat/Chat.css b/src/components/Chat/Chat.css index be04c67..da07cd4 100644 --- a/src/components/Chat/Chat.css +++ b/src/components/Chat/Chat.css @@ -1,7 +1,8 @@ .chat { position: absolute; - right: 10px; - bottom: 75px; + left: 150px; + bottom: 0px; + top: 350px; width: 250px; height: calc(100% - 150px); background-color: #f2f2f2; diff --git a/src/components/StartButton/StartButton.css b/src/components/StartButton/StartButton.css index 0e61fef..98edbb9 100644 --- a/src/components/StartButton/StartButton.css +++ b/src/components/StartButton/StartButton.css @@ -1,16 +1,16 @@ -.start-button { - padding: 20px 30px; - position: absolute; - background: #ffffff; - font-family: Helvetica Neue; - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 17px; - text-align: center; - color: #4a4a4a; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: #ffffff; -} +/* .start-button { + padding: 20px 30px; + position: absolute; + background: #ffffff; + font-family: Helvetica Neue; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 17px; + text-align: center; + color: #4a4a4a; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #ffffff; +} */ diff --git a/src/components/StartButton/StartButton.js b/src/components/StartButton/StartButton.js index 8521e65..fcc3b51 100644 --- a/src/components/StartButton/StartButton.js +++ b/src/components/StartButton/StartButton.js @@ -1,5 +1,5 @@ import React from 'react'; -import './StartButton.css'; +// import './StartButton.css'; /** * Props: @@ -9,11 +9,11 @@ import './StartButton.css'; export default function StartButton(props) { return ( ); } diff --git a/src/components/Tray/Tray.css b/src/components/Tray/Tray.css index 7629a0a..ecdfbe1 100644 --- a/src/components/Tray/Tray.css +++ b/src/components/Tray/Tray.css @@ -1,8 +1,20 @@ .tray { - flex: none; + /* flex: none; height: 60px; background-color: #f2f2f2; padding: 0 10px; display: flex; + width: 100%; + align-items: center; */ + + flex: none; + height: 55%; + top: 105px; + width: 40px; + background-color: #f2f2f2; + padding: 0 10px; + display: flex; + position: absolute; + flex-direction: column; align-items: center; } diff --git a/src/images/github@icons8.png b/src/images/github@icons8.png new file mode 100644 index 0000000..4b2cb5c Binary files /dev/null and b/src/images/github@icons8.png differ diff --git a/src/images/logo@2x.png b/src/images/logo@2x.png new file mode 100644 index 0000000..584b84d Binary files /dev/null and b/src/images/logo@2x.png differ diff --git a/src/index.css b/src/index.css index ec2585e..63e550d 100644 --- a/src/index.css +++ b/src/index.css @@ -1,8 +1,9 @@ +:root { + --fontFamily: GraphikRegular, 'Helvetica Neue', Sans-Serif; +} + body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }