updated each demo

custom/basic-call/components/App/App.js

@@ -13,7 +13,7 @@ export const App = ({ customComponentForState }) => {
 
   const componentForState = useCallUI({
     state,
-    room: () => <Room />,
+    room: <Room />,
     ...customComponentForState,
   });
 

custom/basic-call/components/Call/Header.js

@@ -37,7 +37,8 @@ export const Header = () => {
             flex: 0 0 auto;
             column-gap: var(--spacing-xxs);
             box-sizing: border-box;
-            padding: var(--spacing-sm);
+            padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xxs)
+              var(--spacing-sm);
             align-items: center;
             width: 100%;
           }

custom/basic-call/components/Prejoin/CreatingRoom.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Card, CardHeader, CardBody } from '@custom/shared/components/Card';
 import Loader from '@custom/shared/components/Loader';
-import { Well } from '@custom/shared/components/Well';
+import Well from '@custom/shared/components/Well';
 import PropTypes from 'prop-types';
 
 export const CreatingRoom = ({ onCreated }) => {

custom/basic-call/pages/api/createRoom.js

@@ -1,5 +1,5 @@
 export default async function handler(req, res) {
-  const { privacy, expiryMinutes } = req.body;
+  const { privacy, expiryMinutes, ...rest } = req.body;
 
   if (req.method === 'POST') {
     console.log(`Creating room on domain ${process.env.DAILY_DOMAIN}`);
@@ -16,7 +16,7 @@ export default async function handler(req, res) {
           exp: Math.round(Date.now() / 1000) + (expiryMinutes || 5) * 60, // expire in x minutes
           eject_at_room_exp: true,
           enable_knocking: privacy !== 'public',
-          enable_recording: 'local',
+          ...rest,
         },
       }),
     };

custom/flying-emojis/components/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import App from '@custom/basic-call/components/App';
-import FlyingEmojiOverlay from '../FlyingEmojis/FlyingEmojisOverlay';
+import FlyingEmojiOverlay from './FlyingEmojisOverlay';
 
 export const AppWithEmojis = () => (
   <>

custom/flying-emojis/components/App/index.js

@@ -1 +0,0 @@
-export { AppWithEmojis as default } from './App';

custom/flying-emojis/components/FlyingEmojis/index.js

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

custom/flying-emojis/components/Tray/index.js

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

custom/flying-emojis/pages/_document.js

@@ -0,0 +1,3 @@
+import Doc from '@custom/basic-call/pages/_document';
+
+export default Doc;

custom/pagination/components/App.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import App from '@custom/basic-call/components/App';
+import Room from '@custom/basic-call/components/Call/Room';
+import PaginatedVideoGrid from './PaginatedVideoGrid';
+
+export const AppWithPagination = () => (
+  <App
+    customComponentForState={{
+      room: <Room MainComponent={PaginatedVideoGrid} />,
+    }}
+  />
+);
+
+export default AppWithPagination;

custom/pagination/components/App/index.js

@@ -1 +0,0 @@
-export { AppWithPagination as default } from './App';

custom/pagination/components/PaginatedVideoGrid/index.js

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

custom/pagination/components/Tray/index.js

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

custom/pagination/pages/_document.js

@@ -0,0 +1,3 @@
+import Doc from '@custom/basic-call/pages/_document';
+
+export default Doc;

custom/recording/components/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import App from '@custom/basic-call/components/App';
-import { RecordingProvider } from '../../contexts/RecordingProvider';
+import { RecordingProvider } from '../contexts/RecordingProvider';
 
 // Extend our basic call app component with the recording context
 export const AppWithRecording = () => (

custom/recording/components/App/index.js

@@ -1 +0,0 @@
-export { AppWithRecording as default } from './App';

custom/recording/components/RecordingModal.js

@@ -15,7 +15,7 @@ import {
   RECORDING_TYPE_CLOUD,
   RECORDING_UPLOADING,
   useRecording,
-} from '../../contexts/RecordingProvider';
+} from '../contexts/RecordingProvider';
 
 export const RECORDING_MODAL = 'recording';
 
@@ -75,12 +75,13 @@ export const RecordingModal = () => {
       isOpen={currentModals[RECORDING_MODAL]}
       onClose={() => closeModal(RECORDING_MODAL)}
       actions={[
-        <Button fullWidth variant="outline">
+        <Button key="close" fullWidth variant="outline">
           Close
         </Button>,
         <Button
           fullWidth
           disabled={!disabled}
+          key="record"
           onClick={() => handleRecordingClick()}
         >
           {renderButtonLabel()}

custom/recording/components/RecordingModal/index.js

@@ -1,3 +0,0 @@
-export { RecordingModal as default } from './RecordingModal';
-export { RecordingModal } from './RecordingModal';
-export { RECORDING_MODAL } from './RecordingModal';

custom/recording/components/Tray.js

@@ -10,8 +10,8 @@ import {
   RECORDING_SAVED,
   RECORDING_UPLOADING,
   useRecording,
-} from '../../contexts/RecordingProvider';
+} from '../contexts/RecordingProvider';
-import { RECORDING_MODAL } from '../RecordingModal';
+import { RECORDING_MODAL } from './RecordingModal';
 
 export const Tray = () => {
   const { openModal } = useUIState();

custom/recording/components/Tray/index.js

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

custom/recording/pages/_document.js

@@ -0,0 +1,3 @@
+import Doc from '@custom/basic-call/pages/_document';
+
+export default Doc;

custom/shared/hooks/useCallUI.js

@@ -66,7 +66,7 @@ export const useCallUI = ({
         return haircheck ? haircheck() : <HairCheck />;
       case CALL_STATE_JOINED:
         return room ? (
-          room()
+          room
         ) : (
           <MessageCard error header="No room component declared" />
         );

custom/text-chat/components/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import App from '@custom/basic-call/components/App';
-import { ChatProvider } from '../../contexts/ChatProvider';
+import { ChatProvider } from '../contexts/ChatProvider';
 
 // Extend our basic call app component with the chat context
 export const AppWithChat = () => (

custom/text-chat/components/App/index.js

@@ -1 +0,0 @@
-export { AppWithChat as default } from './App';

custom/text-chat/components/ChatAside.js

@@ -3,8 +3,8 @@ import { Aside } from '@custom/shared/components/Aside';
 import Button from '@custom/shared/components/Button';
 import { TextInput } from '@custom/shared/components/Input';
 import { useUIState } from '@custom/shared/contexts/UIStateProvider';
-import { useChat } from '../../contexts/ChatProvider';
+import { useChat } from '../contexts/ChatProvider';
-import { useMessageSound } from '../../hooks/useMessageSound';
+import { useMessageSound } from '../hooks/useMessageSound';
 
 export const CHAT_ASIDE = 'chat';
 

custom/text-chat/components/ChatAside/index.js

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

custom/text-chat/components/Tray.js

@@ -3,8 +3,8 @@ import React from 'react';
 import { TrayButton } from '@custom/shared/components/Tray';
 import { useUIState } from '@custom/shared/contexts/UIStateProvider';
 import { ReactComponent as IconChat } from '@custom/shared/icons/chat-md.svg';
-import { useChat } from '../../contexts/ChatProvider';
+import { useChat } from '../contexts/ChatProvider';
-import { CHAT_ASIDE } from '../ChatAside/ChatAside';
+import { CHAT_ASIDE } from './ChatAside';
 
 export const Tray = () => {
   const { toggleAside } = useUIState();

custom/text-chat/components/Tray/index.js

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

custom/text-chat/pages/_document.js

@@ -0,0 +1,3 @@
+import Doc from '@custom/basic-call/pages/_document';
+
+export default Doc;