104 lines
2.3 KiB
JavaScript
104 lines
2.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
import Button from '@dailyjs/shared/components/Button';
|
|
import PropTypes from 'prop-types';
|
|
|
|
export const Splash = ({ domain, onJoin, isConfigured }) => {
|
|
// const [joinAsInstructor, setJoinAsInstructor] = useState(false);
|
|
const [fetching, setFetching] = useState(false);
|
|
const [error, setError] = useState(false);
|
|
const [room, setRoom] = useState('');
|
|
|
|
async function createRoom() {
|
|
// Create a room
|
|
|
|
setError(false);
|
|
setFetching(true);
|
|
|
|
console.log(`🚪 Creating new demo room...`);
|
|
|
|
// Create a room server side (using Next JS serverless)
|
|
const res = await fetch('/api/createRoom', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
});
|
|
|
|
const resJson = await res.json();
|
|
|
|
if (resJson.name) {
|
|
setFetching(false);
|
|
setRoom(resJson.name);
|
|
return;
|
|
}
|
|
|
|
setError(resJson.error || 'An unknown error occured');
|
|
setFetching(false);
|
|
}
|
|
|
|
return (
|
|
<div className="container">
|
|
<aside />
|
|
|
|
<main>
|
|
<header className="branding">
|
|
<img src="/assets/daily-logo-dark.svg" alt="Daily" />
|
|
</header>
|
|
<div className="inner">
|
|
{!isConfigured ? (
|
|
<div>
|
|
You must set <code>Stuff</code>
|
|
</div>
|
|
) : (
|
|
<Button onClick={() => createRoom()}>
|
|
{fetching ? 'Creating room...' : 'Join'}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</main>
|
|
|
|
<style jsx>
|
|
{`
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: auto 620px;
|
|
height: 100vh;
|
|
}
|
|
|
|
main {
|
|
background: white;
|
|
display: flex;
|
|
flex-flow: column wrap;
|
|
padding: var(--spacing-sm);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
main .inner {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
}
|
|
|
|
.branding {
|
|
flex: 0;
|
|
}
|
|
|
|
aside {
|
|
background: url(/images/fitness-bg.jpg) no-repeat;
|
|
background-size: cover;
|
|
}
|
|
`}
|
|
</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Splash.propTypes = {
|
|
domain: PropTypes.string,
|
|
onJoin: PropTypes.func,
|
|
isConfigured: PropTypes.bool,
|
|
};
|
|
|
|
export default Splash;
|