mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 01:21:20 -04:00
janky... but if it works?
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -11,8 +11,8 @@
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
|
||||
<title>Multi Roomba Rover</title>
|
||||
<script type="module" crossorigin src="/assets/index-CgsM9v_N.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-q_XWdgDK.css">
|
||||
<script type="module" crossorigin src="/assets/index-Dq4z8Q8u.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-rQdoy40l.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
+3
-3
@@ -58,11 +58,11 @@ function DesktopLayout({ layout }) {
|
||||
<div className="flex h-full gap-0.5 overflow-hidden">
|
||||
<div className="flex min-w-0 flex-[1.8] flex-col gap-0.5 overflow-y-auto pr-0.5">
|
||||
<DriverVideoPanel />
|
||||
<div className="grid grid-cols-2 gap-0.5 h-50">
|
||||
<div className="h-full">
|
||||
<div className="grid grid-cols-2 gap-0.5 h-52 min-h-0">
|
||||
<div className="h-full min-h-0">
|
||||
<UserListPanel fullHeight />
|
||||
</div>
|
||||
<div className="h-full">
|
||||
<div className="h-full min-h-0">
|
||||
<ChatPanel fullHeight />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { SettingsProvider } from '../settings/index.js';
|
||||
import { useSession } from '../context/SessionContext.jsx';
|
||||
import { useSpectatorMode } from '../hooks/useSpectatorMode.js';
|
||||
@@ -85,15 +86,37 @@ function RoverRow({ roster, frames, videoSources, session }) {
|
||||
}
|
||||
|
||||
function SecondaryRow() {
|
||||
const roomRef = useRef(null);
|
||||
const [roomHeight, setRoomHeight] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const target = roomRef.current;
|
||||
if (!target || typeof ResizeObserver === 'undefined') return undefined;
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
const entry = entries[0];
|
||||
if (!entry) return;
|
||||
const nextHeight = entry.contentRect?.height || 0;
|
||||
setRoomHeight(nextHeight);
|
||||
});
|
||||
observer.observe(target);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="grid grid-cols-1 items-stretch gap-0.5 lg:grid-cols-[2fr_1fr_1fr]">
|
||||
<div className="flex h-full flex-col">
|
||||
<div ref={roomRef} className="flex h-full min-h-0 flex-col">
|
||||
<RoomCameraPanel defaultOrientation="horizontal" hideLayoutToggle hideHeader />
|
||||
</div>
|
||||
<div className="flex h-full min-h-0 flex-col">
|
||||
<div
|
||||
className="flex min-h-0 flex-col"
|
||||
style={roomHeight ? { height: roomHeight } : undefined}
|
||||
>
|
||||
<UserListPanel hideNicknameForm hideHeader fullHeight />
|
||||
</div>
|
||||
<div className="flex h-full min-h-0 flex-col">
|
||||
<div
|
||||
className="flex min-h-0 flex-col"
|
||||
style={roomHeight ? { height: roomHeight } : undefined}
|
||||
>
|
||||
<ChatPanel hideInput hideSpectatorNotice fullHeight />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user