Add navigation persistence for embedded camera viewers

Embedded camera viewers now stay open when navigating away from the
Printers page and back. Previously, users had to reopen each camera
view manually after navigation.
This commit is contained in:
maziggy
2026-01-21 07:00:52 +01:00
parent 00fbc87309
commit c6ad12e4af
4 changed files with 67 additions and 36 deletions
+31 -1
View File
@@ -3803,7 +3803,30 @@ export function PrintersPage() {
const viewMode: ViewMode = cardSize === 1 ? 'compact' : 'expanded';
const queryClient = useQueryClient();
// Embedded camera viewer state - supports multiple simultaneous viewers
const [embeddedCameraPrinters, setEmbeddedCameraPrinters] = useState<Map<number, { id: number; name: string }>>(new Map());
// Persisted to localStorage so cameras reopen after navigation
const [embeddedCameraPrinters, setEmbeddedCameraPrinters] = useState<Map<number, { id: number; name: string }>>(() => {
// Initialize from localStorage if camera_view_mode is embedded
const saved = localStorage.getItem('openEmbeddedCameras');
if (saved) {
try {
const cameras = JSON.parse(saved) as Array<{ id: number; name: string }>;
return new Map(cameras.map(c => [c.id, c]));
} catch {
return new Map();
}
}
return new Map();
});
// Persist open cameras to localStorage when they change
useEffect(() => {
const cameras = Array.from(embeddedCameraPrinters.values());
if (cameras.length > 0) {
localStorage.setItem('openEmbeddedCameras', JSON.stringify(cameras));
} else {
localStorage.removeItem('openEmbeddedCameras');
}
}, [embeddedCameraPrinters]);
const { data: printers, isLoading } = useQuery({
queryKey: ['printers'],
@@ -3816,6 +3839,13 @@ export function PrintersPage() {
queryFn: api.getSettings,
});
// Close embedded cameras if mode changes to 'window'
useEffect(() => {
if (settings?.camera_view_mode === 'window' && embeddedCameraPrinters.size > 0) {
setEmbeddedCameraPrinters(new Map());
}
}, [settings?.camera_view_mode, embeddedCameraPrinters.size]);
// Fetch all smart plugs to know which printers have them
const { data: smartPlugs } = useQuery({
queryKey: ['smart-plugs'],