Add aside header for chat and people

custom/fitness-demo/components/App/AsideHeader.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { PEOPLE_ASIDE } from '@custom/shared/components/Aside/PeopleAside';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { CHAT_ASIDE } from '../Call/ChatAside';
+
+export const AsideHeader = () => {
+  const { showAside, setShowAside } = useUIState();
+
+  return (
+    <>
+      <div className="aside-header">
+        <div
+          className={`header ${showAside === PEOPLE_ASIDE && 'active'}`}
+          onClick={() => setShowAside(PEOPLE_ASIDE)}
+        >
+          People
+        </div>
+        <div
+          className={`header ${showAside === CHAT_ASIDE && 'active'}`}
+          onClick={() => setShowAside(CHAT_ASIDE)}
+        >
+          Chat
+        </div>
+      </div>
+      <style jsx>{`
+        .aside-header {
+          display: flex;
+          width: 100%;
+          height: 5vh;
+          text-align: center;
+        }
+        .aside-header .header {
+          height: 100%;
+          width: 50%;
+          background: var(--gray-wash);
+          color: var(--gray-dark);
+          cursor: pointer;
+        }
+        
+        .header.active {
+          background: var(--reverse)!important;
+          color: var(--text-default)!important;
+          font-weight: 900;
+        }
+      `}</style>
+    </>
+  )
+};
+
+export default AsideHeader;

custom/fitness-demo/components/App/Asides.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NetworkAside } from '@custom/shared/components/Aside';
-import { PeopleAside } from '@custom/shared/components/Aside';
 import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { PeopleAside } from '../Call/PeopleAside';
 
 export const Asides = () => {
   const { asides } = useUIState();

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

@@ -7,6 +7,7 @@ import { useUIState } from '@custom/shared/contexts/UIStateProvider';
 import { ReactComponent as IconEmoji } from '@custom/shared/icons/emoji-sm.svg';
 import { useChat } from '../../contexts/ChatProvider';
 import { useMessageSound } from '../../hooks/useMessageSound';
+import AsideHeader from '../App/AsideHeader';
 
 export const CHAT_ASIDE = 'chat';
 
@@ -46,6 +47,7 @@ export const ChatAside = () => {
 
   return (
     <Aside onClose={() => setShowAside(false)}>
+      <AsideHeader />
       <div className="messages-container" ref={chatWindowRef}>
         {chatHistory?.map((chatItem) => (
           <div

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

@@ -0,0 +1,165 @@
+import React from 'react';
+import { Aside } from '@custom/shared/components/Aside';
+import Button from '@custom/shared/components/Button';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { ReactComponent as IconCamOff } from '@custom/shared/icons/camera-off-sm.svg';
+import { ReactComponent as IconCamOn } from '@custom/shared/icons/camera-on-sm.svg';
+import { ReactComponent as IconMicOff } from '@custom/shared/icons/mic-off-sm.svg';
+import { ReactComponent as IconMicOn } from '@custom/shared/icons/mic-on-sm.svg';
+import PropTypes from 'prop-types';
+import AsideHeader from '../App/AsideHeader';
+
+export const PEOPLE_ASIDE = 'people';
+
+const PersonRow = ({ participant, isOwner = false }) => (
+  <div className="person-row">
+    <div className="name">
+      {participant.name} {participant.isLocal && '(You)'}
+    </div>
+    <div className="actions">
+      {!isOwner ? (
+        <>
+          <span
+            className={participant.isCamMuted ? 'state error' : 'state success'}
+          >
+            {participant.isCamMuted ? <IconCamOff /> : <IconCamOn />}
+          </span>
+          <span
+            className={participant.isMicMuted ? 'state error' : 'state success'}
+          >
+            {participant.isMicMuted ? <IconMicOff /> : <IconMicOn />}
+          </span>
+        </>
+      ) : (
+        <>
+          <Button
+            size="tiny-square"
+            disabled={participant.isCamMuted}
+            variant={participant.isCamMuted ? 'error-light' : 'success-light'}
+          >
+            {participant.isCamMuted ? <IconCamOff /> : <IconCamOn />}
+          </Button>
+          <Button
+            size="tiny-square"
+            disabled={participant.isMicMuted}
+            variant={participant.isMicMuted ? 'error-light' : 'success-light'}
+          >
+            {participant.isMicMuted ? <IconMicOff /> : <IconMicOn />}
+          </Button>
+        </>
+      )}
+    </div>
+    <style jsx>{`
+      .person-row {
+        display: flex;
+        border-bottom: 1px solid var(--gray-light);
+        padding-bottom: var(--spacing-xxxs);
+        margin-bottom: var(--spacing-xxxs);
+        justify-content: space-between;
+        align-items: center;
+        flex: 1;
+      }
+
+      .person-row .name {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .person-row .actions {
+        display: flex;
+        gap: var(--spacing-xxxs);
+        margin-left: var(--spacing-xs);
+      }
+
+      .mute-state {
+        display: flex;
+        width: 24px;
+        height: 24px;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .state.error {
+        color: var(--red-default);
+      }
+      .state.success {
+        color: var(--green-default);
+      }
+    `}</style>
+  </div>
+);
+PersonRow.propTypes = {
+  participant: PropTypes.object,
+  isOwner: PropTypes.bool,
+};
+
+export const PeopleAside = () => {
+  const { callObject } = useCallState();
+  const { showAside, setShowAside } = useUIState();
+  const { participants, isOwner } = useParticipants();
+
+  if (!showAside || showAside !== PEOPLE_ASIDE) {
+    return null;
+  }
+
+  return (
+    <Aside onClose={() => setShowAside(false)}>
+      <AsideHeader />
+      <div className="people-aside">
+        {isOwner && (
+          <div className="owner-actions">
+            <Button
+              fullWidth
+              size="tiny"
+              variant="outline-gray"
+              onClick={() =>
+                callObject.updateParticipants({ '*': { setAudio: false } })
+              }
+            >
+              Mute all mics
+            </Button>
+            <Button
+              fullWidth
+              size="tiny"
+              variant="outline-gray"
+              onClick={() =>
+                callObject.updateParticipants({ '*': { setVideo: false } })
+              }
+            >
+              Mute all cams
+            </Button>
+          </div>
+        )}
+        <div className="rows">
+          {participants.map((p) => (
+            <PersonRow participant={p} key={p.id} isOwner={isOwner} />
+          ))}
+        </div>
+        <style jsx>
+          {`
+            .people-aside {
+              display: block;
+            }
+
+            .owner-actions {
+              display: flex;
+              align-items: center;
+              gap: var(--spacing-xxxs);
+              margin: var(--spacing-xs) var(--spacing-xxs);
+              flex: 1;
+            }
+
+            .rows {
+              margin: var(--spacing-xxs);
+              flex: 1;
+            }
+          `}
+        </style>
+      </div>
+    </Aside>
+  );
+};
+
+export default PeopleAside;