From 52d10c4e2419a01d124be607a22e5977930e6aa8 Mon Sep 17 00:00:00 2001
From: harshithpabbati <pabbatiharshith@gmail.com>
Date: Thu, 30 Dec 2021 15:59:02 +0530
Subject: [PATCH] Display room name in header

---
 custom/fitness-demo/components/Call/Header.js   | 9 ++++++++-
 custom/fitness-demo/components/Prejoin/Intro.js | 2 +-
 custom/shared/components/Button/Button.js       | 2 +-
 custom/shared/contexts/CallProvider.js          | 5 +++++
 custom/shared/icons/lock-md.svg                 | 4 ++++
 5 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 custom/shared/icons/lock-md.svg

diff --git a/custom/fitness-demo/components/Call/Header.js b/custom/fitness-demo/components/Call/Header.js
index c5e3c13..640604a 100644
--- a/custom/fitness-demo/components/Call/Header.js
+++ b/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'
diff --git a/custom/fitness-demo/components/Prejoin/Intro.js b/custom/fitness-demo/components/Prejoin/Intro.js
index 657e236..889ab71 100644
--- a/custom/fitness-demo/components/Prejoin/Intro.js
+++ b/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 && (
diff --git a/custom/shared/components/Button/Button.js b/custom/shared/components/Button/Button.js
index 65114c1..2b5785b 100644
--- a/custom/shared/components/Button/Button.js
+++ b/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,
diff --git a/custom/shared/contexts/CallProvider.js b/custom/shared/contexts/CallProvider.js
index fb01eda..1f372ab 100644
--- a/custom/shared/contexts/CallProvider.js
+++ b/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,
diff --git a/custom/shared/icons/lock-md.svg b/custom/shared/icons/lock-md.svg
new file mode 100644
index 0000000..0588a7c
--- /dev/null
+++ b/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>