Files
camera-viewer/frontend/src/components/grid/CameraGrid.tsx
root b630ba0337 Fix streaming: MSE-first with go2rtc init protocol
- Switch from WebRTC-first to MSE-first streaming (more reliable
  across all camera types including high-res IP cameras)
- Send required {"type":"mse"} init message to go2rtc WebSocket
- Fix infinite re-render loop in configStore (pre-compute enabled
  cameras instead of deriving in selector)
- Fix mqtt_bridge global variable scope in broadcast()
- Add React ErrorBoundary for visible crash reporting
- Remove unused go2rtcUrl dependency from useStream hook
2026-02-25 22:36:13 -06:00

36 lines
852 B
TypeScript

import { useConfigStore } from '@/stores/configStore';
import { CameraGridCell } from './CameraGridCell';
const STAGGER_MS = 200;
export function CameraGrid() {
const cameras = useConfigStore((s) => s.cameras);
const gridConfig = useConfigStore((s) => s.config?.grid);
const count = cameras.length;
const cols = gridConfig?.columns ?? (
count <= 4 ? 2 :
count <= 9 ? 3 :
4
);
const rows = Math.ceil(count / cols);
const gap = gridConfig?.gap ?? 4;
return (
<div
className="h-full p-2"
style={{
display: 'grid',
gridTemplateColumns: `repeat(${cols}, 1fr)`,
gridTemplateRows: `repeat(${rows}, 1fr)`,
gap: `${gap}px`,
}}
>
{cameras.map((cam, i) => (
<CameraGridCell key={cam.name} camera={cam} delayMs={i * STAGGER_MS} />
))}
</div>
);
}