Allow placing Moveable anywhere
This commit is contained in:
parent
d4b3bc6ce4
commit
adcfdeabfa
@ -146,121 +146,121 @@ const UserList: React.FC<UserListProps> = (props: UserListProps) => {
|
||||
}, [users, sendJsonMessage]);
|
||||
|
||||
return (
|
||||
<Paper
|
||||
className={`UserList ${videoClass}`}
|
||||
sx={{
|
||||
maxWidth: { xs: "100%", sm: 500 },
|
||||
p: { xs: 1, sm: 2 },
|
||||
m: { xs: 0, sm: 2 },
|
||||
maxHeight: "80vh",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<MediaAgent {...{ session, socketUrl, peers, setPeers }} />
|
||||
<List className="UserSelector">
|
||||
{users?.map((user) => (
|
||||
<Box
|
||||
key={user.session_id}
|
||||
sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}
|
||||
className={`UserEntry ${user.local ? "UserSelf" : ""}`}
|
||||
>
|
||||
<Box>
|
||||
<Box style={{ display: "flex-wrap", alignItems: "center", justifyContent: "space-between" }}>
|
||||
<Box style={{ display: "flex-wrap", alignItems: "center" }}>
|
||||
<div className="Name">{user.name ? user.name : user.session_id}</div>
|
||||
{user.protected && (
|
||||
<div
|
||||
style={{ marginLeft: 8, fontSize: "0.8em", color: "#a00" }}
|
||||
title="This name is protected with a password"
|
||||
>
|
||||
🔒
|
||||
</div>
|
||||
)}
|
||||
<Box sx={{ position: "relative", width: "100%" }}>
|
||||
<Paper
|
||||
className={`UserList ${videoClass}`}
|
||||
sx={{
|
||||
maxWidth: { xs: "100%", sm: 500 },
|
||||
p: { xs: 1, sm: 2 },
|
||||
m: { xs: 0, sm: 2 },
|
||||
}}
|
||||
>
|
||||
<MediaAgent {...{ session, socketUrl, peers, setPeers }} />
|
||||
<List className="UserSelector">
|
||||
{users?.map((user) => (
|
||||
<Box
|
||||
key={user.session_id}
|
||||
sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}
|
||||
className={`UserEntry ${user.local ? "UserSelf" : ""}`}
|
||||
>
|
||||
<Box>
|
||||
<Box style={{ display: "flex-wrap", alignItems: "center", justifyContent: "space-between" }}>
|
||||
<Box style={{ display: "flex-wrap", alignItems: "center" }}>
|
||||
<div className="Name">{user.name ? user.name : user.session_id}</div>
|
||||
{user.protected && (
|
||||
<div
|
||||
style={{ marginLeft: 8, fontSize: "0.8em", color: "#a00" }}
|
||||
title="This name is protected with a password"
|
||||
>
|
||||
🔒
|
||||
</div>
|
||||
)}
|
||||
{user.bot_instance_id && (
|
||||
<div style={{ marginLeft: 8, fontSize: "0.8em", color: "#00a" }} title="This is a bot">
|
||||
🤖
|
||||
</div>
|
||||
)}
|
||||
</Box>
|
||||
{user.bot_instance_id && (
|
||||
<div style={{ marginLeft: 8, fontSize: "0.8em", color: "#00a" }} title="This is a bot">
|
||||
🤖
|
||||
</div>
|
||||
<Paper elevation={2} sx={{ display: "flex-wrap", gap: "4px", p: 1 }}>
|
||||
{user.bot_run_id && (
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleOpenBotConfig(user)}
|
||||
style={{ width: "24px", height: "24px", fontSize: "0.7em" }}
|
||||
title="Configure bot"
|
||||
>
|
||||
<SettingsIcon style={{ fontSize: "14px" }} />
|
||||
</IconButton>
|
||||
)}
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
onClick={() => handleBotLeave(user)}
|
||||
disabled={leavingBots.has(user.session_id) || !user.bot_instance_id}
|
||||
style={{ fontSize: "0.7em", minWidth: "50px", height: "24px" }}
|
||||
title={!user.bot_instance_id ? "Bot instance ID not available" : "Remove bot from lobby"}
|
||||
>
|
||||
{leavingBots.has(user.session_id) ? "..." : "Leave"}
|
||||
</Button>
|
||||
</Paper>
|
||||
)}
|
||||
</Box>
|
||||
{user.bot_instance_id && (
|
||||
<Paper elevation={2} sx={{ display: "flex-wrap", gap: "4px", p: 1 }}>
|
||||
{user.bot_run_id && (
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleOpenBotConfig(user)}
|
||||
style={{ width: "24px", height: "24px", fontSize: "0.7em" }}
|
||||
title="Configure bot"
|
||||
>
|
||||
<SettingsIcon style={{ fontSize: "14px" }} />
|
||||
</IconButton>
|
||||
)}
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
onClick={() => handleBotLeave(user)}
|
||||
disabled={leavingBots.has(user.session_id) || !user.bot_instance_id}
|
||||
style={{ fontSize: "0.7em", minWidth: "50px", height: "24px" }}
|
||||
title={!user.bot_instance_id ? "Bot instance ID not available" : "Remove bot from lobby"}
|
||||
>
|
||||
{leavingBots.has(user.session_id) ? "..." : "Leave"}
|
||||
</Button>
|
||||
</Paper>
|
||||
)}
|
||||
{user.name && !user.live && <div className="NoNetwork"></div>}
|
||||
</Box>
|
||||
{user.name && !user.live && <div className="NoNetwork"></div>}
|
||||
{user.name && user.live && peers[user.session_id] && (user.local || user.has_media !== false) ? (
|
||||
<MediaControl
|
||||
className={videoClass}
|
||||
key={user.session_id}
|
||||
peer={peers[user.session_id]}
|
||||
isSelf={user.local}
|
||||
/>
|
||||
) : user.name && user.live && user.has_media === false ? (
|
||||
<div
|
||||
className="Video fade-in"
|
||||
style={{
|
||||
background: "#333",
|
||||
color: "#fff",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
💬 Chat Only
|
||||
</div>
|
||||
) : (
|
||||
<video className="Video"></video>
|
||||
)}
|
||||
</Box>
|
||||
{user.name && user.live && peers[user.session_id] && (user.local || user.has_media !== false) ? (
|
||||
<MediaControl
|
||||
className={videoClass}
|
||||
key={user.session_id}
|
||||
peer={peers[user.session_id]}
|
||||
isSelf={user.local}
|
||||
/>
|
||||
) : user.name && user.live && user.has_media === false ? (
|
||||
<div
|
||||
className="Video fade-in"
|
||||
style={{
|
||||
background: "#333",
|
||||
color: "#fff",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
💬 Chat Only
|
||||
</div>
|
||||
) : (
|
||||
<video className="Video"></video>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</List>
|
||||
))}
|
||||
</List>
|
||||
|
||||
{/* Bot Configuration Dialog */}
|
||||
<Dialog open={botConfigDialogOpen} onClose={handleCloseBotConfig} maxWidth="md" fullWidth>
|
||||
<DialogTitle>Configure Bot</DialogTitle>
|
||||
<DialogContent>
|
||||
{selectedBotForConfig && (
|
||||
<BotConfig
|
||||
botInstanceId={selectedBotForConfig.bot_instance_id || ""}
|
||||
botName={selectedBotForConfig.name?.replace(/-bot$/, "") || "unknown"}
|
||||
lobbyId={lobbyId}
|
||||
onConfigUpdate={(config) => {
|
||||
console.log("Bot configuration updated:", config);
|
||||
// Configuration updates are handled via WebSocket, so we don't need to do anything special here
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleCloseBotConfig}>Close</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Paper>
|
||||
{/* Bot Configuration Dialog */}
|
||||
<Dialog open={botConfigDialogOpen} onClose={handleCloseBotConfig} maxWidth="md" fullWidth>
|
||||
<DialogTitle>Configure Bot</DialogTitle>
|
||||
<DialogContent>
|
||||
{selectedBotForConfig && (
|
||||
<BotConfig
|
||||
botInstanceId={selectedBotForConfig.bot_instance_id || ""}
|
||||
botName={selectedBotForConfig.name?.replace(/-bot$/, "") || "unknown"}
|
||||
lobbyId={lobbyId}
|
||||
onConfigUpdate={(config) => {
|
||||
console.log("Bot configuration updated:", config);
|
||||
// Configuration updates are handled via WebSocket, so we don't need to do anything special here
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleCloseBotConfig}>Close</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user