adding pinning/zapping on the side panel

This commit is contained in:
talksik
2022-06-25 12:21:46 -05:00
parent 521b8bff41
commit 6f8766cc22
2 changed files with 24 additions and 13 deletions
+24 -1
View File
@@ -26,6 +26,8 @@ import {
FiVideo, FiVideo,
FiVideoOff, FiVideoOff,
FiX, FiX,
FiZap,
FiZapOff,
} from 'react-icons/fi'; } from 'react-icons/fi';
import React, { useCallback, useMemo, useState } from 'react'; import React, { useCallback, useMemo, useState } from 'react';
@@ -182,6 +184,17 @@ function OverlayConversation({
} }
}, [masterConversation, selectConversation, isSelected]); }, [masterConversation, selectConversation, isSelected]);
const isPriority = useMemo(() => {
const personalConvoMember = masterConversation.members.find(
(mem) => mem._id.toString() === user._id.toString(),
);
if (personalConvoMember && personalConvoMember.memberState === 'priority') {
return true;
}
return false;
}, [masterConversation, user]);
return ( return (
<Stack <Stack
direction={'column'} direction={'column'}
@@ -248,8 +261,18 @@ function OverlayConversation({
{isSelected && ( {isSelected && (
<> <>
<Divider orientation="horizontal" flexItem /> <Divider orientation="horizontal" flexItem />
{/* todo: not speaking mode, speaking mode, locked in mode */} {/* todo: not speaking mode, speaking mode, locked in mode */}
<Tooltip title="pinned">
<IconButton
sx={{
color: 'white',
}}
size="small"
aria-selected={isPriority ? true : false}
>
{isPriority ? <FiZap /> : <FiZapOff />}
</IconButton>
</Tooltip>
<Tooltip title="hit escape!"> <Tooltip title="hit escape!">
<IconButton <IconButton
-12
View File
@@ -116,18 +116,6 @@ function ConversationDetails({ masterConversation }: { masterConversation: Maste
<Divider orientation={'vertical'} flexItem /> <Divider orientation={'vertical'} flexItem />
<Tooltip title="Add to priority panel!">
{isPriority ? (
<Fab size="small" color="primary">
<FiZap />
</Fab>
) : (
<IconButton size="small">
<FiZap />
</IconButton>
)}
</Tooltip>
<Tooltip title="Add people to the conversation"> <Tooltip title="Add people to the conversation">
<IconButton size="small"> <IconButton size="small">
<FiUserPlus /> <FiUserPlus />