Update call header title and disable hair check mute button when they are not found

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

@@ -18,7 +18,7 @@ export const Header = () => {
           height="32"
         />
 
-        <HeaderCapsule>Basic call demo</HeaderCapsule>
+        <HeaderCapsule>{process.env.PROJECT_TITLE}</HeaderCapsule>
         <HeaderCapsule>
           {`${participantCount} ${
             participantCount === 1 ? 'participant' : 'participants'

custom/shared/components/HairCheck/HairCheck.js

@@ -166,8 +166,8 @@ export const HairCheck = () => {
               )}
             </div>
             <div className="mute-buttons">
-              <MuteButton isMuted={isCamMuted} />
+              <MuteButton isMuted={isCamMuted} disabled={!!camError} />
-              <MuteButton mic isMuted={isMicMuted} />
+              <MuteButton mic isMuted={isMicMuted} disabled={!!micError} />
             </div>
             {tileMemo}
           </div>

custom/shared/components/MuteButton/MuteButton.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { useCallState } from '../../contexts/CallProvider';
 import Button from '../Button';
 
-export const MuteButton = ({ isMuted, mic = false, className, ...props }) => {
+export const MuteButton = ({ isMuted, mic = false, className, disabled = false, ...props }) => {
   const { callObject } = useCallState();
   const [muted, setMuted] = useState(!isMuted);
 
@@ -28,17 +28,18 @@ export const MuteButton = ({ isMuted, mic = false, className, ...props }) => {
 
   if (!callObject) return null;
 
-  const cx = classNames(className, { muted: !muted });
+  const cx = classNames(className, { muted: disabled || !muted });
 
   return (
     <Button
       size="large-circle"
       variant="blur"
       className={cx}
+      disabled={disabled}
       {...props}
       onClick={() => toggleDevice(!muted)}
     >
-      {Icon[+muted]}
+      {disabled ? Icon[0] : Icon[+muted]}
     </Button>
   );
 };