abstracted tray

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 }) => {
       <div className="app">
         {componentForState()}
         <Modals />
-        <Asides asides={asides} />
+        <Asides />
         <style jsx>{`
           color: white;
           height: 100vh;
@@ -35,7 +35,7 @@ export const App = ({ asides }) => {
         `}</style>
       </div>
     ),
-    [componentForState, asides]
+    [componentForState]
   );
 };
 

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) => (
-      <A key={A.name} />
-    ))}
-  </>
-);
+export const Asides = () => {
+  const { asides } = useUIState();
 
-Asides.propTypes = {
-  asides: PropTypes.arrayOf(PropTypes.func),
+  return (
+    <>
+      <PeopleAside />
+      {asides.map((AsideComponent) => (
+        <AsideComponent key={AsideComponent.name} />
+      ))}
+    </>
+  );
 };
 
 export default Asides;

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();

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"
   }
 }

dailyjs/basic-call/pages/_app.js

@@ -12,7 +12,7 @@ function App({ Component, pageProps }) {
       </Head>
       <GlobalHead />
       <GlobalStyle />
-      <Component {...pageProps} />
+      <Component asides={App.asides} {...pageProps} />
     </>
   );
 }
@@ -27,4 +27,6 @@ App.propTypes = {
   pageProps: PropTypes.object,
 };
 
+App.asides = [];
+
 export default App;

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 (
-    <UIStateProvider>
+    <UIStateProvider asides={asides}>
       <CallProvider domain={domain} room={roomName} token={token}>
         <ParticipantsProvider>
           <TracksProvider>
             <MediaDeviceProvider>
               <WaitingRoomProvider>
-                <App asides={Index.asides} />
+                <App />
               </WaitingRoomProvider>
             </MediaDeviceProvider>
           </TracksProvider>
@@ -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 =

dailyjs/shared/components/Tray/index.js

@@ -0,0 +1,2 @@
+export { Tray as default } from './Tray';
+export { Tray, TrayButton } from './Tray';

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 (
     <UIStateContext.Provider
       value={{
+        asides,
         showDeviceModal,
         setShowDeviceModal,
         showAside,
@@ -23,6 +24,7 @@ export const UIStateProvider = ({ children }) => {
 
 UIStateProvider.propTypes = {
   children: PropTypes.node,
+  asides: PropTypes.arrayOf(PropTypes.func),
 };
 
 export const useUIState = () => useContext(UIStateContext);

dailyjs/text-chat/pages/_app.js

@@ -1,3 +1,5 @@
 import App from '@dailyjs/basic-call/pages/_app';
 
+App.asides = [];
+
 export default App;

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",