- 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
36 lines
852 B
TypeScript
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>
|
|
);
|
|
}
|