57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
|
import React from "react";
|
||
|
|
import CustomAvatar from "../users/Avatar";
|
||
|
|
import { useSelectedUserStore } from "../../../store/useCollabStore";
|
||
|
|
import { useCamMode } from "../../../store/store";
|
||
|
|
|
||
|
|
interface CollabUserIconProps {
|
||
|
|
userName: string;
|
||
|
|
userImage?: string;
|
||
|
|
color: string;
|
||
|
|
position?: {
|
||
|
|
x: number;
|
||
|
|
y: number;
|
||
|
|
z: number;
|
||
|
|
};
|
||
|
|
rotation?: {
|
||
|
|
x: number;
|
||
|
|
y: number;
|
||
|
|
z: number;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
const CollabUserIcon: React.FC<CollabUserIconProps> = ({
|
||
|
|
userImage,
|
||
|
|
userName,
|
||
|
|
color,
|
||
|
|
position,
|
||
|
|
rotation,
|
||
|
|
}) => {
|
||
|
|
const { setSelectedUser } = useSelectedUserStore();
|
||
|
|
const { setCamMode } = useCamMode();
|
||
|
|
return (
|
||
|
|
<div className="collab-user-live-container">
|
||
|
|
<button
|
||
|
|
className="user-image-container"
|
||
|
|
onClick={() => {
|
||
|
|
if(!position || !rotation) return;
|
||
|
|
|
||
|
|
// Set the selected user in the store
|
||
|
|
setSelectedUser({ color: color, name: userName, location: { position, rotation } });
|
||
|
|
setCamMode("FollowPerson");
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{userImage ? (
|
||
|
|
<img className="user-image" src={userImage} alt={userName} />
|
||
|
|
) : (
|
||
|
|
<CustomAvatar name={userName} color={color} />
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
<div className="user-name" style={{ backgroundColor: color }}>
|
||
|
|
{userName}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CollabUserIcon;
|