b630ba0337
- 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
80 lines
3.2 KiB
TypeScript
80 lines
3.2 KiB
TypeScript
import { useEffect, useCallback } from 'react';
|
|
import { useUIStore } from '@/stores/uiStore';
|
|
import { useConfigStore } from '@/stores/configStore';
|
|
import { CameraPlayer } from './CameraPlayer';
|
|
|
|
export function FullscreenView() {
|
|
const { fullscreenCamera, setFullscreenCamera } = useUIStore();
|
|
const cameras = useConfigStore((s) => s.cameras);
|
|
|
|
const currentIdx = cameras.findIndex((c) => c.name === fullscreenCamera);
|
|
const camera = currentIdx >= 0 ? cameras[currentIdx] : null;
|
|
|
|
const navigate = useCallback((dir: 1 | -1) => {
|
|
if (cameras.length === 0) return;
|
|
const next = (currentIdx + dir + cameras.length) % cameras.length;
|
|
setFullscreenCamera(cameras[next].name);
|
|
}, [cameras, currentIdx, setFullscreenCamera]);
|
|
|
|
const close = useCallback(() => setFullscreenCamera(null), [setFullscreenCamera]);
|
|
|
|
useEffect(() => {
|
|
const handleKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') close();
|
|
else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') navigate(1);
|
|
else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') navigate(-1);
|
|
};
|
|
window.addEventListener('keydown', handleKey);
|
|
return () => window.removeEventListener('keydown', handleKey);
|
|
}, [close, navigate]);
|
|
|
|
if (!camera) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 bg-dark-primary flex flex-col">
|
|
{/* Header */}
|
|
<div className="h-12 bg-dark-secondary border-b border-dark-border flex items-center justify-between px-4 shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={() => navigate(-1)}
|
|
className="p-1.5 text-gray-400 hover:text-white hover:bg-dark-hover rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
<h2 className="text-base font-semibold text-white">{camera.display_name}</h2>
|
|
<button
|
|
onClick={() => navigate(1)}
|
|
className="p-1.5 text-gray-400 hover:text-white hover:bg-dark-hover rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
<span className="text-xs text-gray-500 ml-2">{currentIdx + 1} / {cameras.length}</span>
|
|
</div>
|
|
|
|
<button
|
|
onClick={close}
|
|
className="p-2 text-gray-400 hover:text-white hover:bg-dark-hover rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Video */}
|
|
<div className="flex-1 flex items-center justify-center p-4">
|
|
<CameraPlayer
|
|
key={camera.name}
|
|
camera={camera}
|
|
className="w-full h-full rounded-lg"
|
|
showLabel={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|