diff --git a/dailyjs/basic-call/components/App/App.js b/dailyjs/basic-call/components/App/App.js index 8210988..b07c5ab 100644 --- a/dailyjs/basic-call/components/App/App.js +++ b/dailyjs/basic-call/components/App/App.js @@ -7,7 +7,7 @@ import Room from '../Room'; import { Asides } from './Asides'; import { Modals } from './Modals'; -export const App = ({ asides }) => { +export const App = () => { const { state, leave } = useCallState(); const componentForState = useCallUI({ @@ -21,7 +21,7 @@ export const App = ({ asides }) => {
{componentForState()} - +
), - [componentForState, asides] + [componentForState] ); }; diff --git a/dailyjs/basic-call/components/App/Asides.js b/dailyjs/basic-call/components/App/Asides.js index 81f0ad6..f78b4c8 100644 --- a/dailyjs/basic-call/components/App/Asides.js +++ b/dailyjs/basic-call/components/App/Asides.js @@ -1,16 +1,18 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { PeopleAside } from '@dailyjs/shared/components/Aside/PeopleAside'; +import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider'; -export const Asides = ({ asides }) => ( - <> - {asides.map((A) => ( - - ))} - -); +export const Asides = () => { + const { asides } = useUIState(); -Asides.propTypes = { - asides: PropTypes.arrayOf(PropTypes.func), + return ( + <> + + {asides.map((AsideComponent) => ( + + ))} + + ); }; export default Asides; diff --git a/dailyjs/basic-call/components/Room/Room.js b/dailyjs/basic-call/components/Room/Room.js index 130ac8f..0f9019c 100644 --- a/dailyjs/basic-call/components/Room/Room.js +++ b/dailyjs/basic-call/components/Room/Room.js @@ -1,5 +1,6 @@ import React from 'react'; import { Audio } from '@dailyjs/shared/components/Audio'; +import { Tray, TrayButton } from '@dailyjs/shared/components/Tray'; import { WaitingRoomModal, WaitingRoomNotification, @@ -22,7 +23,6 @@ import PropTypes from 'prop-types'; import { PEOPLE_ASIDE } from '../../../shared/components/Aside/PeopleAside'; import { VideoGrid } from '../VideoGrid'; import { Header } from './Header'; -import { Tray, TrayButton } from './Tray'; export const Room = ({ onLeave }) => { const { callObject } = useCallState(); diff --git a/dailyjs/basic-call/package.json b/dailyjs/basic-call/package.json index 4865d38..0bd5ae6 100644 --- a/dailyjs/basic-call/package.json +++ b/dailyjs/basic-call/package.json @@ -19,5 +19,8 @@ "babel-plugin-module-resolver": "^4.1.0", "next-compose-plugins": "^2.2.1", "next-transpile-modules": "^8.0.0" + }, + "engines": { + "node": ">=0.12" } } diff --git a/dailyjs/basic-call/pages/_app.js b/dailyjs/basic-call/pages/_app.js index 0ee1a00..9d813a8 100644 --- a/dailyjs/basic-call/pages/_app.js +++ b/dailyjs/basic-call/pages/_app.js @@ -12,7 +12,7 @@ function App({ Component, pageProps }) { - + ); } @@ -27,4 +27,6 @@ App.propTypes = { pageProps: PropTypes.object, }; +App.asides = []; + export default App; diff --git a/dailyjs/basic-call/pages/index.js b/dailyjs/basic-call/pages/index.js index 0c6ad6b..e8adc8a 100644 --- a/dailyjs/basic-call/pages/index.js +++ b/dailyjs/basic-call/pages/index.js @@ -1,5 +1,4 @@ import React, { useState, useCallback } from 'react'; -import { PeopleAside } from '@dailyjs/shared/components/Aside'; import { CallProvider } from '@dailyjs/shared/contexts/CallProvider'; import { MediaDeviceProvider } from '@dailyjs/shared/contexts/MediaDeviceProvider'; import { ParticipantsProvider } from '@dailyjs/shared/contexts/ParticipantsProvider'; @@ -18,7 +17,7 @@ import { Intro, NotConfigured } from '../components/Intro'; * - Set call owner status * - Finally, renders the main application loop */ -export default function Index({ domain, isConfigured = false }) { +export default function Index({ domain, isConfigured = false, asides }) { const [roomName, setRoomName] = useState(''); const [fetchingToken, setFetchingToken] = useState(false); const [token, setToken] = useState(); @@ -93,13 +92,13 @@ export default function Index({ domain, isConfigured = false }) { * Main call UI */ return ( - + - + @@ -112,10 +111,9 @@ export default function Index({ domain, isConfigured = false }) { Index.propTypes = { isConfigured: PropTypes.bool.isRequired, domain: PropTypes.string, + asides: PropTypes.arrayOf(PropTypes.func), }; -Index.asides = [PeopleAside]; - export async function getStaticProps() { // Check that both domain and key env vars are set const isConfigured = diff --git a/dailyjs/basic-call/components/Room/Tray.js b/dailyjs/shared/components/Tray/Tray.js similarity index 100% rename from dailyjs/basic-call/components/Room/Tray.js rename to dailyjs/shared/components/Tray/Tray.js diff --git a/dailyjs/shared/components/Tray/index.js b/dailyjs/shared/components/Tray/index.js new file mode 100644 index 0000000..786c464 --- /dev/null +++ b/dailyjs/shared/components/Tray/index.js @@ -0,0 +1,2 @@ +export { Tray as default } from './Tray'; +export { Tray, TrayButton } from './Tray'; diff --git a/dailyjs/shared/contexts/UIStateProvider.js b/dailyjs/shared/contexts/UIStateProvider.js index 9dccfe7..0b355d5 100644 --- a/dailyjs/shared/contexts/UIStateProvider.js +++ b/dailyjs/shared/contexts/UIStateProvider.js @@ -3,13 +3,14 @@ import PropTypes from 'prop-types'; export const UIStateContext = createContext(); -export const UIStateProvider = ({ children }) => { +export const UIStateProvider = ({ asides, children }) => { const [showDeviceModal, setShowDeviceModal] = useState(false); const [showAside, setShowAside] = useState(); return ( { UIStateProvider.propTypes = { children: PropTypes.node, + asides: PropTypes.arrayOf(PropTypes.func), }; export const useUIState = () => useContext(UIStateContext); diff --git a/dailyjs/text-chat/pages/_app.js b/dailyjs/text-chat/pages/_app.js index c9a5152..a341874 100644 --- a/dailyjs/text-chat/pages/_app.js +++ b/dailyjs/text-chat/pages/_app.js @@ -1,3 +1,5 @@ import App from '@dailyjs/basic-call/pages/_app'; +App.asides = []; + export default App; diff --git a/package.json b/package.json index 5d0fd89..376328d 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,9 @@ "dailyjs/*", "prebuilt-ui/*" ], + "engines": { + "node": ">=0.12" + }, "devDependencies": { "babel-eslint": "^10.1.0", "babel-plugin-inline-react-svg": "^2.0.1",