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

Push to the /:room page to join a call

This commit is contained in:
harshithpabbati 2022-01-03 17:32:29 +05:30
parent 7c2a1d56fc
commit d4b50c011c
3 changed files with 93 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
custom/fitness-demo/components/Prejoin/Intro.js
View File

@ -20,7 +20,6 @@ import PropTypes from 'prop-types';
export const Intro = ({
tokenError,
fetching,
room,
error,
onJoin,
}) => {
@ -46,10 +45,6 @@ export const Intro = ({
return () => clearInterval(i);
}, []);
useEffect(() => {
setRoomName(room);
}, [room]);
return (
<div className="intro">
<Card>

66
custom/fitness-demo/pages/[slug].js Normal file
View File

@ -0,0 +1,66 @@
import React from 'react';
import { CallProvider } from '@custom/shared/contexts/CallProvider';
import { MediaDeviceProvider } from '@custom/shared/contexts/MediaDeviceProvider';
import { ParticipantsProvider } from '@custom/shared/contexts/ParticipantsProvider';
import { TracksProvider } from '@custom/shared/contexts/TracksProvider';
import { UIStateProvider } from '@custom/shared/contexts/UIStateProvider';
import { WaitingRoomProvider } from '@custom/shared/contexts/WaitingRoomProvider';
import getDemoProps from '@custom/shared/lib/demoProps';
import { useRouter } from 'next/router';
import App from '../components/App';
import NotConfigured from '../components/Prejoin/NotConfigured';
const Slug = ({
domain,
isConfigured = false,
subscribeToTracksAutomatically = true,
asides,
modals,
customTrayComponent,
customAppComponent,
}) => {
const router = useRouter();
const { slug, t } = router.query;
if (!isConfigured) return <NotConfigured />;
return (
<UIStateProvider
asides={asides}
modals={modals}
customTrayComponent={customTrayComponent}
>
<CallProvider
domain={domain}
room={slug}
token={t}
subscribeToTracksAutomatically={subscribeToTracksAutomatically}
>
<ParticipantsProvider>
<TracksProvider>
<MediaDeviceProvider>
<WaitingRoomProvider>
{customAppComponent || <App />}
</WaitingRoomProvider>
</MediaDeviceProvider>
</TracksProvider>
</ParticipantsProvider>
</CallProvider>
</UIStateProvider>
)
};
export default Slug;
export async function getStaticProps() {
const defaultProps = getDemoProps();
return {
props: defaultProps,
};
}
export async function getStaticPaths() {
return {
paths: [],
fallback: 'blocking',
}
}

99
custom/fitness-demo/pages/index.js
View File

@ -1,13 +1,7 @@
import React, { useState, useCallback } from 'react';
import { CallProvider } from '@custom/shared/contexts/CallProvider';
import { MediaDeviceProvider } from '@custom/shared/contexts/MediaDeviceProvider';
import { ParticipantsProvider } from '@custom/shared/contexts/ParticipantsProvider';
import { TracksProvider } from '@custom/shared/contexts/TracksProvider';
import { UIStateProvider } from '@custom/shared/contexts/UIStateProvider';
import { WaitingRoomProvider } from '@custom/shared/contexts/WaitingRoomProvider';
import getDemoProps from '@custom/shared/lib/demoProps';
import { useRouter } from 'next/router';
import PropTypes from 'prop-types';
import App from '../components/App';
import Intro from '../components/Prejoin/Intro';
import NotConfigured from '../components/Prejoin/NotConfigured';
@ -22,18 +16,12 @@ import NotConfigured from '../components/Prejoin/NotConfigured';
export default function Index({
domain,
isConfigured = false,
subscribeToTracksAutomatically = true,
asides,
modals,
customTrayComponent,
customAppComponent,
}) {
const [roomName, setRoomName] = useState();
const router = useRouter();
const [fetching, setFetching] = useState(false);
const [error, setError] = useState();
const [fetchingToken, setFetchingToken] = useState(false);
const [token, setToken] = useState();
const [tokenError, setTokenError] = useState();
const getMeetingToken = useCallback(async (room, isOwner = false) => {
@ -60,13 +48,10 @@ export default function Index({
console.log(`🪙 Token received`);
setFetchingToken(false);
setToken(resJson.token);
// Setting room name will change ready state
setRoomName(room);
await router.push(`/${room}?t=${resJson.token}`);
return true;
}, []);
}, [router]);
const createRoom = async (room, duration, privacy) => {
setError(false);
@ -99,63 +84,33 @@ export default function Index({
setFetching(false);
}
const isReady = !!(isConfigured && roomName);
if (!isReady) {
return (
<main>
{(() => {
if (!isConfigured) return <NotConfigured />;
return (
<Intro
tokenError={tokenError}
fetching={fetching}
error={error}
room={roomName}
domain={domain}
onJoin={(room, type, duration = 60, privacy = 'public') =>
type === 'join' ? setRoomName(room): createRoom(room, duration, privacy)
}
/>
);
})()}
<style jsx>{`
height: 100vh;
display: grid;
align-items: center;
justify-content: center;
`}</style>
</main>
);
}
/**
* Main call UI
*/
return (
<UIStateProvider
asides={asides}
modals={modals}
customTrayComponent={customTrayComponent}
>
<CallProvider
domain={domain}
room={roomName}
token={token}
subscribeToTracksAutomatically={subscribeToTracksAutomatically}
>
<ParticipantsProvider>
<TracksProvider>
<MediaDeviceProvider>
<WaitingRoomProvider>
{customAppComponent || <App />}
</WaitingRoomProvider>
</MediaDeviceProvider>
</TracksProvider>
</ParticipantsProvider>
</CallProvider>
</UIStateProvider>
<main>
{(() => {
if (!isConfigured) return <NotConfigured />;
return (
<Intro
tokenError={tokenError}
fetching={fetching}
error={error}
domain={domain}
onJoin={(room, type, duration = 60, privacy = 'public') =>
type === 'join' ? router.push(`/${room}`): createRoom(room, duration, privacy)
}
/>
);
})()}
<style jsx>{`
height: 100vh;
display: grid;
align-items: center;
justify-content: center;
`}</style>
</main>
);
}