Display room name in header

custom/fitness-demo/components/Call/Header.js

@@ -1,9 +1,13 @@
 import React, { useMemo } from 'react';
 import HeaderCapsule from '@custom/shared/components/HeaderCapsule';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
 import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
 import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { slugify } from '@custom/shared/lib/slugify';
+import { ReactComponent as IconLock } from '@custom/shared/icons/lock-md.svg';
 
 export const Header = () => {
+  const { roomInfo } = useCallState();
   const { participantCount } = useParticipants();
   const { customCapsule } = useUIState();
 
@@ -18,7 +22,10 @@ export const Header = () => {
           height="32"
         />
 
-        <HeaderCapsule>{process.env.PROJECT_TITLE}</HeaderCapsule>
+        <HeaderCapsule>
+          {roomInfo.privacy === 'private' && <IconLock />}
+          {slugify.revert(roomInfo.name)}
+        </HeaderCapsule>
         <HeaderCapsule>
           {`${participantCount} ${
             participantCount === 1 ? 'participant' : 'participants'

custom/fitness-demo/components/Prejoin/Intro.js

@@ -90,7 +90,7 @@ export const Intro = ({
           <CardBody>
             {error && (
               <Well variant="error">
-                Failed to obtain token <p>{error}</p>
+                Failed to create class <p>{error}</p>
               </Well>
             )}
             {tokenError && (

custom/shared/components/Button/Button.js

@@ -292,7 +292,7 @@ export const Button = forwardRef(
           
           .button.gray {
             background: ${theme.gray.light};
-            color: ${theme.gray.dark};
+            color: var(--text-default);
             border: 0;
           }
           .button.gray:hover,

custom/shared/contexts/CallProvider.js

@@ -32,6 +32,7 @@ export const CallProvider = ({
   token = '',
   subscribeToTracksAutomatically = true,
 }) => {
+  const [roomInfo, setRoomInfo] = useState(null);
   const [enableScreenShare, setEnableScreenShare] = useState(false);
   const [videoQuality, setVideoQuality] = useState(VIDEO_QUALITY_AUTO);
   const [showLocalVideo, setShowLocalVideo] = useState(true);
@@ -58,6 +59,8 @@ export const CallProvider = ({
       const owner = roomConfig.tokenConfig?.is_owner;
       const config = roomConfig?.config;
 
+      setRoomInfo(roomConfig);
+
       const fullUI = !isOob || (isOob && owner);
 
       if (!config) return;
@@ -131,6 +134,8 @@ export const CallProvider = ({
         enableScreenShare,
         videoQuality,
         setVideoQuality,
+        roomInfo,
+        setRoomInfo,
         setBandwidth,
         setRedirectOnLeave,
         setShowLocalVideo,

custom/shared/icons/lock-md.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6H10V4C10 3.46957 9.78929 2.96086 9.41421 2.58579C9.03914 2.21071 8.53043 2 8 2C7.46957 2 6.96086 2.21071 6.58579 2.58579C6.21071 2.96086 6 3.46957 6 4V6H4V4C4 2.93913 4.42143 1.92172 5.17157 1.17157C5.92172 0.421427 6.93913 0 8 0C9.06087 0 10.0783 0.421427 10.8284 1.17157C11.5786 1.92172 12 2.93913 12 4V6Z" fill="white"/>
+<path d="M14 7H2C1.73478 7 1.48043 7.10536 1.29289 7.29289C1.10536 7.48043 1 7.73478 1 8V15C1 15.2652 1.10536 15.5196 1.29289 15.7071C1.48043 15.8946 1.73478 16 2 16H14C14.2652 16 14.5196 15.8946 14.7071 15.7071C14.8946 15.5196 15 15.2652 15 15V8C15 7.73478 14.8946 7.48043 14.7071 7.29289C14.5196 7.10536 14.2652 7 14 7ZM8 13C7.60444 13 7.21776 12.8827 6.88886 12.6629C6.55996 12.4432 6.30362 12.1308 6.15224 11.7654C6.00087 11.3999 5.96126 10.9978 6.03843 10.6098C6.1156 10.2219 6.30608 9.86549 6.58579 9.58579C6.86549 9.30608 7.22186 9.1156 7.60982 9.03843C7.99778 8.96126 8.39991 9.00087 8.76537 9.15224C9.13082 9.30362 9.44318 9.55996 9.66294 9.88886C9.8827 10.2178 10 10.6044 10 11C10 11.5304 9.78929 12.0391 9.41421 12.4142C9.03914 12.7893 8.53043 13 8 13Z" fill="white"/>
+</svg>