128 lines
4.2 KiB
TypeScript
128 lines
4.2 KiB
TypeScript
import React, { useState } from "react";
|
|
import orgImg from "../../../assets/image/orgTemp.png";
|
|
import { useActiveUsers, useCamMode } from "../../../store/builder/store";
|
|
import { ActiveUser } from "../../../types/users";
|
|
import CollaborationPopup from "../../templates/CollaborationPopup";
|
|
import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
|
|
import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
|
|
import { useToggleStore } from "../../../store/useUIToggleStore";
|
|
import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
|
|
import useModuleStore from "../../../store/useModuleStore";
|
|
|
|
const Header: React.FC = () => {
|
|
const { activeUsers } = useActiveUsers();
|
|
const userName = localStorage.getItem("userName") ?? "Anonymous";
|
|
const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
|
|
const { activeModule } = useModuleStore();
|
|
|
|
const guestUsers: ActiveUser[] = activeUsers.filter(
|
|
(user: ActiveUser) => user.userName !== userName
|
|
);
|
|
|
|
const [userManagement, setUserManagement] = useState(false);
|
|
const { setSelectedUser } = useSelectedUserStore();
|
|
const { setCamMode } = useCamMode();
|
|
|
|
function handleUserFollow(user: any, index: number) {
|
|
const position = {
|
|
x: user.position?.x!,
|
|
y: user.position?.y!,
|
|
z: user.position?.z!,
|
|
};
|
|
const target = {
|
|
x: user.target?.x!,
|
|
y: user.target?.y!,
|
|
z: user.target?.z!,
|
|
};
|
|
const rotation = {
|
|
x: user.rotation?.x!,
|
|
y: user.rotation?.y!,
|
|
z: user.rotation?.z!,
|
|
};
|
|
|
|
// retun on no data
|
|
if (!position || !target || !rotation) return;
|
|
|
|
// Set the selected user in the store
|
|
setSelectedUser({
|
|
color: getAvatarColor(index, user.userName),
|
|
name: user.userName,
|
|
id: user.id,
|
|
location: { position, rotation, target },
|
|
});
|
|
setCamMode("FollowPerson");
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{userManagement && (
|
|
<CollaborationPopup setUserManagement={setUserManagement} />
|
|
)}
|
|
<div className="header-container">
|
|
<div className="options-container">
|
|
<button
|
|
id="toggle-rightSidebar-ui-button"
|
|
className={`toggle-sidebar-ui-button ${!toggleUIRight ? "active" : ""
|
|
}`}
|
|
onClick={() => {
|
|
if (activeModule !== "market") {
|
|
setToggleUI(toggleUILeft, !toggleUIRight);
|
|
localStorage.setItem(
|
|
"navBarUiRight",
|
|
JSON.stringify(!toggleUIRight)
|
|
);
|
|
}
|
|
}}
|
|
>
|
|
<div className="tooltip">
|
|
{toggleUIRight ? "Hide" : "Show"} sidebar (ctrl + ])
|
|
</div>
|
|
<ToggleSidebarIcon />
|
|
</button>
|
|
<button
|
|
id="share-button"
|
|
className="share-button"
|
|
onClick={() => {
|
|
setUserManagement(true);
|
|
}}
|
|
>
|
|
Share
|
|
</button>
|
|
{/* <div className="app-docker-button">
|
|
<AppDockIcon />
|
|
</div> */}
|
|
</div>
|
|
<div className="split"></div>
|
|
<div className="users-container">
|
|
<div className="guest-users-container">
|
|
{guestUsers.length > 3 && (
|
|
<div className="other-guest">+{guestUsers.length - 3}</div>
|
|
)}
|
|
{guestUsers.slice(0, 3).map((user, index) => (
|
|
<button
|
|
id="user-profile-button"
|
|
key={`${index}-${user.userName}`}
|
|
className="user-profile"
|
|
style={{ background: getAvatarColor(index, user.userName) }}
|
|
onClick={() => {
|
|
handleUserFollow(user, index);
|
|
}}
|
|
>
|
|
{user.userName[0]}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="user-profile-container">
|
|
<div className="user-profile">{userName[0]}</div>
|
|
<div className="user-organization">
|
|
<img src={orgImg} alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Header;
|