58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
import UserCamera from "./ui/UserCamera";
|
|
import UserDevicesControls from "./ui/UserDevicesControls";
|
|
import DraggableContainer from "./DraggableContainer";
|
|
|
|
const users = [
|
|
{
|
|
id: 1,
|
|
name: "John Doe",
|
|
isSpeaking: true,
|
|
isMuted: false,
|
|
isVideoOff: false,
|
|
isControlDisabled: false,
|
|
isAdmin: true,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Jane Doe",
|
|
isSpeaking: false,
|
|
isMuted: true,
|
|
isVideoOff: true,
|
|
isControlDisabled: true,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Jim Doe",
|
|
isSpeaking: false,
|
|
isMuted: false,
|
|
isVideoOff: false,
|
|
isControlDisabled: false,
|
|
},
|
|
];
|
|
|
|
function SessionUsersPanel2() {
|
|
return (
|
|
<DraggableContainer
|
|
enableSnapping={true}
|
|
autoAlign={true}
|
|
initialCorner={innerWidth >= 640 ? "bottom-right" : "top-right"}
|
|
padding="1.111vw"
|
|
className="flex gap-4"
|
|
>
|
|
{users.map((user) => (
|
|
<UserCamera
|
|
key={user.id}
|
|
onMute={() => console.log(`Mute user ${user.id}`)}
|
|
onVideoOff={() => console.log(`Video off user ${user.id}`)}
|
|
onCanControl={() => console.log(`Can control user ${user.id}`)}
|
|
{...user}
|
|
/>
|
|
))}
|
|
|
|
<UserDevicesControls />
|
|
</DraggableContainer>
|
|
);
|
|
}
|
|
|
|
export default SessionUsersPanel2;
|