Merge branch 'main' of github.com:daily-demos/examples into fitness-demo

custom/shared/components/HairCheck/HairCheck.js

@@ -32,8 +32,13 @@ import { useDeepCompareMemo } from 'use-deep-compare';
 export const HairCheck = () => {
   const { callObject, join } = useCallState();
   const { localParticipant } = useParticipants();
-  const { deviceState, camError, micError, isCamMuted, isMicMuted } =
-    useMediaDevices();
+  const {
+    deviceState,
+    camError,
+    micError,
+    isCamMuted,
+    isMicMuted,
+  } = useMediaDevices();
   const { openModal } = useUIState();
   const [waiting, setWaiting] = useState(false);
   const [joining, setJoining] = useState(false);
@@ -95,10 +100,9 @@ export const HairCheck = () => {
     [localParticipant]
   );
 
-  const isLoading = useMemo(
-    () => deviceState === DEVICE_STATE_LOADING,
-    [deviceState]
-  );
+  const isLoading = useMemo(() => deviceState === DEVICE_STATE_LOADING, [
+    deviceState,
+  ]);
 
   const hasError = useMemo(() => {
     if (
@@ -127,6 +131,50 @@ export const HairCheck = () => {
     }
   }, [camError]);
 
+  const showWaitingMessage = useMemo(() => {
+    return (
+      <div className="waiting">
+        <Loader />
+        {denied ? (
+          <span>Call owner denied request</span>
+        ) : (
+          <span>Waiting for host to grant access</span>
+        )}
+        <style jsx>{`
+          .waiting {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+          }
+
+          .waiting span {
+            margin-left: var(--spacing-xxs);
+          }
+        `}</style>
+      </div>
+    );
+  }, [denied]);
+
+  const showUsernameInput = useMemo(() => {
+    return (
+      <>
+        <TextInput
+          placeholder="Enter display name"
+          variant="dark"
+          disabled={joining}
+          value={userName}
+          onChange={(e) => setUserName(e.target.value)}
+        />
+        <Button
+          disabled={joining || userName.length < 3}
+          onClick={() => joinCall(userName)}
+        >
+          Join call
+        </Button>
+      </>
+    );
+  }, [userName, joinCall, joining, setUserName]);
+
   return (
     <>
       <main className="haircheck">
@@ -174,34 +222,7 @@ export const HairCheck = () => {
             </div>
             {tileMemo}
           </div>
-          <footer>
-            {waiting ? (
-              <div className="waiting">
-                <Loader />
-                {denied ? (
-                  <span>Call owner denied request</span>
-                ) : (
-                  <span>Waiting for host to grant access</span>
-                )}
-              </div>
-            ) : (
-              <>
-                <TextInput
-                  placeholder="Enter display name"
-                  variant="dark"
-                  disabled={joining}
-                  value={userName}
-                  onChange={(e) => setUserName(e.target.value)}
-                />
-                <Button
-                  disabled={joining || userName.length < 3}
-                  onClick={() => joinCall(userName)}
-                >
-                  Join call
-                </Button>
-              </>
-            )}
-          </footer>
+          <footer>{waiting ? showWaitingMessage : showUsernameInput}</footer>
         </div>
 
         <style jsx>{`
@@ -319,16 +340,6 @@ export const HairCheck = () => {
             grid-column-gap: var(--spacing-xs);
           }
 
-          .waiting {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-
-          .waiting span {
-            margin-left: var(--spacing-xxs);
-          }
-
           .logo {
             position: absolute;
             top: var(--spacing-sm);

custom/shared/components/WaitingRoom/WaitingRoomNotification.js

@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from 'react';
-
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCallState } from '../../contexts/CallProvider';
 import { useWaitingRoom } from '../../contexts/WaitingRoomProvider';
 import { ReactComponent as IconWaiting } from '../../icons/add-person-lg.svg';
@@ -14,9 +13,70 @@ export const WaitingRoomNotification = () => {
     showModal,
     setShowModal,
     waitingParticipants,
+    multipleWaiting,
   } = useWaitingRoom();
   const [showNotification, setShowNotification] = useState(false);
 
+  /**
+   * Click handlers passed to render functions
+   */
+  const handleViewAllClick = useCallback(() => {
+    setShowModal(true);
+    setShowNotification(false);
+  }, [setShowModal]);
+
+  const handleAllowClick = useCallback(() => {
+    grantAccess(waitingParticipants[0].id);
+  }, [grantAccess, waitingParticipants]);
+
+  const handleDenyClick = useCallback(() => {
+    denyAccess(multipleWaiting ? 'all' : waitingParticipants[0].id);
+  }, [denyAccess, waitingParticipants, multipleWaiting]);
+
+  /**
+   * Render the full participant waiting list
+   */
+  const showMultipleParticipants = useMemo(() => {
+    return (
+      <CardBody>
+        <p>
+          <strong>{waitingParticipants.length}</strong> people would like to
+          join the call
+        </p>
+        <CardFooter>
+          <Button onClick={handleViewAllClick} size="small" variant="success">
+            View all
+          </Button>
+          <Button onClick={handleDenyClick} size="small" variant="warning">
+            Deny all
+          </Button>
+        </CardFooter>
+      </CardBody>
+    );
+  }, [waitingParticipants, handleDenyClick, handleViewAllClick]);
+
+  /**
+   * Render the single waiting participant
+   */
+  const showSingleParticipant = useMemo(() => {
+    return (
+      <CardBody>
+        <p>
+          <strong>{waitingParticipants[0]?.name}</strong> would like to join the
+          call
+        </p>
+        <CardFooter>
+          <Button onClick={handleAllowClick} size="small" variant="success">
+            Allow
+          </Button>
+          <Button onClick={handleDenyClick} size="small" variant="warning">
+            Deny
+          </Button>
+        </CardFooter>
+      </CardBody>
+    );
+  }, [waitingParticipants, handleAllowClick, handleDenyClick]);
+
   /**
    * Show notification when waiting participants change.
    */
@@ -47,48 +107,12 @@ export const WaitingRoomNotification = () => {
 
   if (!showNotification || waitingParticipants.length === 0) return null;
 
-  const hasMultiplePeopleWaiting = waitingParticipants.length > 1;
-
-  const handleViewAllClick = () => {
-    setShowModal(true);
-    setShowNotification(false);
-  };
-  const handleAllowClick = () => {
-    grantAccess(waitingParticipants[0].id);
-  };
-  const handleDenyClick = () => {
-    denyAccess(hasMultiplePeopleWaiting ? 'all' : waitingParticipants[0].id);
-  };
-
   return (
     <Card className="waiting-room-notification">
       <aside>
         <IconWaiting />
       </aside>
-      <CardBody>
-        <strong>
-          {hasMultiplePeopleWaiting
-            ? waitingParticipants.length
-            : waitingParticipants[0].name}
-        </strong>
-        {hasMultiplePeopleWaiting
-          ? ` people would like to join the call`
-          : ` would like to join the call`}
-        <CardFooter>
-          {hasMultiplePeopleWaiting ? (
-            <Button onClick={handleViewAllClick} size="small" variant="success">
-              View all
-            </Button>
-          ) : (
-            <Button onClick={handleAllowClick} size="small" variant="success">
-              Allow
-            </Button>
-          )}
-          <Button onClick={handleDenyClick} size="small" variant="warning">
-            {hasMultiplePeopleWaiting ? 'Deny All' : 'Deny'}
-          </Button>
-        </CardFooter>
-      </CardBody>
+      {multipleWaiting ? showMultipleParticipants : showSingleParticipant}
       <style jsx>{`
         :global(.card.waiting-room-notification) {
           position: absolute;

custom/shared/contexts/WaitingRoomProvider.js

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 import PropTypes from 'prop-types';
@@ -33,6 +34,10 @@ export const WaitingRoomProvider = ({ children }) => {
     );
   }, [callObject]);
 
+  const multipleWaiting = useMemo(() => waitingParticipants.length > 1, [
+    waitingParticipants,
+  ]);
+
   useEffect(() => {
     if (waitingParticipants.length === 0) {
       setShowModal(false);
@@ -97,6 +102,7 @@ export const WaitingRoomProvider = ({ children }) => {
         setShowModal,
         showModal,
         waitingParticipants,
+        multipleWaiting,
       }}
     >
       {children}