Add aside header for chat and people
This commit is contained in:
harshithpabbati
parent
c79afff162
commit
8f7a7a8b70
|
|
@ -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;
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue