78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import UserCamera from "./ui/UserCamera";
|
|
import UserDevicesControls from "./ui/UserDevicesControls";
|
|
import DraggableContainer from "./DraggableContainer";
|
|
import { useWebRTC } from "../hooks/useWebRTC";
|
|
|
|
interface SessionUsersPanel2Props {
|
|
roomId: string;
|
|
autoJoin?: boolean;
|
|
}
|
|
|
|
function SessionUsersPanel2({
|
|
roomId,
|
|
autoJoin = false,
|
|
}: SessionUsersPanel2Props) {
|
|
const {
|
|
localStream,
|
|
participants,
|
|
isAudioMuted: isLocalAudioMuted,
|
|
isVideoMuted: isLocalVideoMuted,
|
|
toggleAudio,
|
|
toggleVideo,
|
|
} = useWebRTC(roomId, autoJoin);
|
|
|
|
const hasLocalStream = localStream !== null;
|
|
|
|
return (
|
|
<DraggableContainer
|
|
enableSnapping={true}
|
|
autoAlign={true}
|
|
initialCorner={innerWidth >= 640 ? "bottom-right" : "top-right"}
|
|
padding="1.111vw"
|
|
className="flex gap-4 z-[999]"
|
|
>
|
|
{/* Локальная камера пользователя */}
|
|
<UserCamera
|
|
name="Вы"
|
|
isSpeaking={false}
|
|
isMuted={isLocalAudioMuted}
|
|
isVideoOff={isLocalVideoMuted}
|
|
isControlDisabled={false}
|
|
isAdmin={true}
|
|
isLocal={true}
|
|
mediaStream={localStream}
|
|
onMute={toggleAudio}
|
|
onVideoOff={toggleVideo}
|
|
onCanControl={() => console.log("Toggle control")}
|
|
/>
|
|
|
|
{/* Камеры удаленных участников */}
|
|
{participants.map((participant) => (
|
|
<UserCamera
|
|
key={participant.id}
|
|
name={participant.id}
|
|
isSpeaking={false}
|
|
isMuted={false}
|
|
isVideoOff={false}
|
|
isControlDisabled={true}
|
|
isAdmin={true} // Локальный пользователь - админ своей сессии
|
|
mediaStream={participant.stream}
|
|
onMute={() => console.log(`Mute user ${participant.id}`)}
|
|
onVideoOff={() => console.log(`Video off user ${participant.id}`)}
|
|
onCanControl={() => console.log(`Can control user ${participant.id}`)}
|
|
/>
|
|
))}
|
|
|
|
<UserDevicesControls
|
|
toggleAudio={toggleAudio}
|
|
toggleVideo={toggleVideo}
|
|
isAudioMuted={isLocalAudioMuted}
|
|
isVideoMuted={isLocalVideoMuted}
|
|
hasLocalStream={hasLocalStream}
|
|
/>
|
|
</DraggableContainer>
|
|
);
|
|
}
|
|
|
|
export default SessionUsersPanel2;
|