mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-18 11:56:01 +02:00
maziggy
62a64006b8
The single-connection barrier from the last round was correct and was being bypassed. shutdown_broadcaster() popped the broadcaster out of the registry and only then awaited its teardown, so while the socket was still closing the slot sat empty: a /camera/stream request landing in that window minted a broadcaster with no predecessor and dialled port 6000 immediately. A page reload fires /camera/stop and the new stream request concurrently, so a P1S ended up holding two connections, kept feeding the orphan, and starved the live viewer until its TCP keepalive reaped the dead one ~20 min later. The stopped broadcaster now stays in the registry so the successor chains behind its socket close. The camera page also rendered the <img> src before the stream token arrived whenever auth was disabled, then swapped it once the token landed — aborting the in-flight request and issuing a second one. With auth off both reached the backend, so every load attached two viewers to a one-socket printer. The src now waits for the token query to settle. Subscribers only checked for client disconnect after yielding a frame or on a 30s idle timeout, so a viewer that left during a black stream stayed counted — and /camera/stop trusts that count to decide whether to tear the upstream down.
862 lines
32 KiB
TypeScript
862 lines
32 KiB
TypeScript
import { useState, useEffect, useRef, useCallback } from 'react';
|
|
import { useParams, useSearchParams } from 'react-router-dom';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { RefreshCw, AlertTriangle, Camera, Maximize, Minimize, WifiOff, ZoomIn, ZoomOut, Stethoscope } from 'lucide-react';
|
|
import { api, getAuthToken, getStreamToken, withStreamToken } from '../api/client';
|
|
import { useToast } from '../contexts/ToastContext';
|
|
import { useAuth } from '../contexts/AuthContext';
|
|
import { useStreamTokenSync } from '../hooks/useCameraStreamToken';
|
|
import { ChamberLight } from '../components/icons/ChamberLight';
|
|
import { SkipObjectsModal, SkipObjectsIcon } from '../components/SkipObjectsModal';
|
|
import { CameraDiagnoseModal } from '../components/CameraDiagnoseModal';
|
|
|
|
const MAX_RECONNECT_ATTEMPTS = 5;
|
|
const INITIAL_RECONNECT_DELAY = 2000; // 2 seconds
|
|
const MAX_RECONNECT_DELAY = 30000; // 30 seconds
|
|
const STALL_CHECK_INTERVAL = 5000; // Check every 5 seconds
|
|
|
|
export function CameraPage() {
|
|
const { t } = useTranslation();
|
|
const queryClient = useQueryClient();
|
|
const { showToast } = useToast();
|
|
const { hasPermission, authEnabled, user } = useAuth();
|
|
const { printerId } = useParams<{ printerId: string }>();
|
|
const id = parseInt(printerId || '0', 10);
|
|
const [searchParams] = useSearchParams();
|
|
const fpsParam = parseInt(searchParams.get('fps') || '15', 10);
|
|
const fps = Math.min(Math.max(isNaN(fpsParam) ? 15 : fpsParam, 1), 30);
|
|
|
|
// Subscribe to the stream-token query so this page re-renders once the token
|
|
// arrives. useStreamTokenSync (mounted in App) already owns the fetch; this
|
|
// useQuery call dedupes via the shared key and just reads the cached value.
|
|
useStreamTokenSync();
|
|
const { data: streamTokenData, isPending: streamTokenPending } = useQuery({
|
|
queryKey: ['camera-stream-token', user?.id ?? null],
|
|
queryFn: () => api.getCameraStreamToken(),
|
|
enabled: authEnabled ? !!user : true,
|
|
staleTime: 50 * 60 * 1000,
|
|
});
|
|
const streamTokenValue = streamTokenData?.token ?? getStreamToken();
|
|
|
|
const [streamMode, setStreamMode] = useState<'stream' | 'snapshot'>('stream');
|
|
const [showSkipObjectsModal, setShowSkipObjectsModal] = useState(false);
|
|
const [showDiagnoseModal, setShowDiagnoseModal] = useState(false);
|
|
const [streamError, setStreamError] = useState(false);
|
|
const [streamLoading, setStreamLoading] = useState(true);
|
|
const [imageKey, setImageKey] = useState(Date.now());
|
|
const [transitioning, setTransitioning] = useState(false);
|
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
const [reconnectAttempts, setReconnectAttempts] = useState(0);
|
|
const [isReconnecting, setIsReconnecting] = useState(false);
|
|
const [reconnectCountdown, setReconnectCountdown] = useState(0);
|
|
const [zoomLevel, setZoomLevel] = useState(1);
|
|
const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
|
|
const [isPanning, setIsPanning] = useState(false);
|
|
const [panStart, setPanStart] = useState({ x: 0, y: 0 });
|
|
const [lastTouchDistance, setLastTouchDistance] = useState<number | null>(null);
|
|
const [lastTouchCenter, setLastTouchCenter] = useState<{ x: number; y: number } | null>(null);
|
|
const imgRef = useRef<HTMLImageElement>(null);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const reconnectTimerRef = useRef<NodeJS.Timeout | null>(null);
|
|
const countdownIntervalRef = useRef<NodeJS.Timeout | null>(null);
|
|
const stallCheckIntervalRef = useRef<NodeJS.Timeout | null>(null);
|
|
// Consecutive "stalled/inactive" status reads. We only reconnect after two
|
|
// in a row (~10s) so a brief blip while the shared fan-out upstream is
|
|
// starting up or handing over between viewers doesn't tear down a stream
|
|
// that's about to deliver frames — the churn that stranded the P1S camera
|
|
// black for ~20 min (#2521).
|
|
const stallStrikesRef = useRef(0);
|
|
|
|
// Fetch printer info for the title
|
|
const { data: printer } = useQuery({
|
|
queryKey: ['printer', id],
|
|
queryFn: () => api.getPrinter(id),
|
|
enabled: id > 0,
|
|
});
|
|
|
|
// Fetch printer status for light toggle and skip objects
|
|
const { data: status } = useQuery({
|
|
queryKey: ['printerStatus', id],
|
|
queryFn: () => api.getPrinterStatus(id),
|
|
refetchInterval: 30000,
|
|
enabled: id > 0,
|
|
});
|
|
|
|
// Chamber light mutation with optimistic update
|
|
const chamberLightMutation = useMutation({
|
|
mutationFn: (on: boolean) => api.setChamberLight(id, on),
|
|
onMutate: async (on) => {
|
|
await queryClient.cancelQueries({ queryKey: ['printerStatus', id] });
|
|
const previousStatus = queryClient.getQueryData(['printerStatus', id]);
|
|
queryClient.setQueryData(['printerStatus', id], (old: typeof status) => ({
|
|
...old,
|
|
chamber_light: on,
|
|
}));
|
|
return { previousStatus };
|
|
},
|
|
onSuccess: (_, on) => {
|
|
showToast(`Chamber light ${on ? 'on' : 'off'}`);
|
|
},
|
|
onError: (error: Error, _, context) => {
|
|
if (context?.previousStatus) {
|
|
queryClient.setQueryData(['printerStatus', id], context.previousStatus);
|
|
}
|
|
showToast(error.message || t('printers.toast.failedToControlChamberLight'), 'error');
|
|
},
|
|
});
|
|
|
|
const isPrintingWithObjects = (status?.state === 'RUNNING' || status?.state === 'PAUSE') && (status?.printable_objects_count ?? 0) >= 2;
|
|
|
|
// Update document title
|
|
useEffect(() => {
|
|
if (printer) {
|
|
document.title = `${printer.name} - Camera`;
|
|
}
|
|
return () => {
|
|
document.title = 'Bambuddy';
|
|
};
|
|
}, [printer]);
|
|
|
|
// Cleanup on unmount - stop the camera stream
|
|
// Track if we've already sent the stop signal to avoid duplicate calls
|
|
const stopSentRef = useRef(false);
|
|
|
|
useEffect(() => {
|
|
const stopUrl = `/api/v1/printers/${id}/camera/stop`;
|
|
stopSentRef.current = false;
|
|
|
|
const sendStopOnce = () => {
|
|
if (id > 0 && !stopSentRef.current) {
|
|
stopSentRef.current = true;
|
|
const headers: Record<string, string> = {};
|
|
const token = getAuthToken();
|
|
if (token) headers['Authorization'] = `Bearer ${token}`;
|
|
fetch(stopUrl, { method: 'POST', keepalive: true, headers }).catch(() => {});
|
|
}
|
|
};
|
|
|
|
// Handle page unload/close with keepalive fetch (more reliable than sendBeacon, supports auth)
|
|
const handleBeforeUnload = () => {
|
|
sendStopOnce();
|
|
};
|
|
|
|
window.addEventListener('beforeunload', handleBeforeUnload);
|
|
|
|
// Store ref value for cleanup - ref may change by cleanup time
|
|
const imgElement = imgRef.current;
|
|
|
|
return () => {
|
|
window.removeEventListener('beforeunload', handleBeforeUnload);
|
|
|
|
// Clear the image source first to stop the stream
|
|
if (imgElement) {
|
|
imgElement.src = '';
|
|
}
|
|
// Send stop signal only once
|
|
sendStopOnce();
|
|
};
|
|
}, [id]);
|
|
|
|
// Auto-hide loading after timeout
|
|
useEffect(() => {
|
|
if (streamLoading && !transitioning) {
|
|
const timeout = streamMode === 'stream' ? 3000 : 20000;
|
|
const timer = setTimeout(() => {
|
|
setStreamLoading(false);
|
|
}, timeout);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [streamMode, streamLoading, imageKey, transitioning]);
|
|
|
|
// Fullscreen change listener - refresh stream after fullscreen transition
|
|
useEffect(() => {
|
|
const handleFullscreenChange = () => {
|
|
const nowFullscreen = !!document.fullscreenElement;
|
|
setIsFullscreen(nowFullscreen);
|
|
// Reset zoom on fullscreen transition
|
|
setZoomLevel(1);
|
|
setPanOffset({ x: 0, y: 0 });
|
|
|
|
// Refresh stream after fullscreen transition to prevent stall
|
|
if (streamMode === 'stream' && !transitioning) {
|
|
// Clear image src first, then set new key after delay
|
|
if (imgRef.current) {
|
|
imgRef.current.src = '';
|
|
}
|
|
setTimeout(() => {
|
|
setStreamLoading(true);
|
|
setImageKey(Date.now());
|
|
}, 200);
|
|
}
|
|
};
|
|
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
|
return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
|
}, [streamMode, transitioning]);
|
|
|
|
// Save window size and position when user resizes or moves
|
|
// Works for both popup windows and standalone camera pages
|
|
useEffect(() => {
|
|
let saveTimeout: NodeJS.Timeout;
|
|
const saveWindowState = () => {
|
|
// Debounce to avoid saving during drag
|
|
clearTimeout(saveTimeout);
|
|
saveTimeout = setTimeout(() => {
|
|
localStorage.setItem('cameraWindowState', JSON.stringify({
|
|
width: window.outerWidth,
|
|
height: window.outerHeight,
|
|
left: window.screenX,
|
|
top: window.screenY,
|
|
}));
|
|
}, 500);
|
|
};
|
|
|
|
window.addEventListener('resize', saveWindowState);
|
|
|
|
return () => {
|
|
clearTimeout(saveTimeout);
|
|
window.removeEventListener('resize', saveWindowState);
|
|
};
|
|
}, []);
|
|
|
|
// Clean up reconnect timers on unmount
|
|
useEffect(() => {
|
|
return () => {
|
|
if (reconnectTimerRef.current) {
|
|
clearTimeout(reconnectTimerRef.current);
|
|
}
|
|
if (countdownIntervalRef.current) {
|
|
clearInterval(countdownIntervalRef.current);
|
|
}
|
|
if (stallCheckIntervalRef.current) {
|
|
clearInterval(stallCheckIntervalRef.current);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
// Auto-reconnect logic
|
|
const attemptReconnect = useCallback(() => {
|
|
if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
|
|
setIsReconnecting(false);
|
|
setStreamError(true);
|
|
return;
|
|
}
|
|
|
|
// Calculate delay with exponential backoff
|
|
const delay = Math.min(
|
|
INITIAL_RECONNECT_DELAY * Math.pow(2, reconnectAttempts),
|
|
MAX_RECONNECT_DELAY
|
|
);
|
|
|
|
setIsReconnecting(true);
|
|
setReconnectCountdown(Math.ceil(delay / 1000));
|
|
|
|
// Countdown timer
|
|
countdownIntervalRef.current = setInterval(() => {
|
|
setReconnectCountdown((prev) => {
|
|
if (prev <= 1) {
|
|
if (countdownIntervalRef.current) {
|
|
clearInterval(countdownIntervalRef.current);
|
|
}
|
|
return 0;
|
|
}
|
|
return prev - 1;
|
|
});
|
|
}, 1000);
|
|
|
|
// Reconnect after delay
|
|
reconnectTimerRef.current = setTimeout(() => {
|
|
setReconnectAttempts((prev) => prev + 1);
|
|
setIsReconnecting(false);
|
|
setStreamLoading(true);
|
|
setStreamError(false);
|
|
if (imgRef.current) {
|
|
imgRef.current.src = '';
|
|
}
|
|
setImageKey(Date.now());
|
|
}, delay);
|
|
}, [reconnectAttempts]);
|
|
|
|
// Stall detection - periodically check if stream is still receiving frames
|
|
useEffect(() => {
|
|
// Only skip stall check during initial load, reconnecting, or transitioning
|
|
// Continue checking even during streamError to detect recovery
|
|
if (streamMode !== 'stream' || streamLoading || isReconnecting || transitioning) {
|
|
if (stallCheckIntervalRef.current) {
|
|
clearInterval(stallCheckIntervalRef.current);
|
|
stallCheckIntervalRef.current = null;
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Start stall detection after stream has loaded. Reset the strike counter
|
|
// so a fresh load doesn't inherit strikes from a previous stall episode.
|
|
stallStrikesRef.current = 0;
|
|
stallCheckIntervalRef.current = setInterval(async () => {
|
|
try {
|
|
const status = await api.getCameraStatus(id);
|
|
// A "bad" read is: backend reports stall (no frames for 10+ seconds),
|
|
// OR the stream is no longer active (process died).
|
|
const bad = status.stalled || (!status.active && !streamError);
|
|
if (!bad) {
|
|
stallStrikesRef.current = 0;
|
|
return;
|
|
}
|
|
stallStrikesRef.current += 1;
|
|
// Require two consecutive bad reads before acting (#2521) — one blip
|
|
// during fan-out startup/handover is not a real stall.
|
|
if (stallStrikesRef.current < 2) {
|
|
return;
|
|
}
|
|
stallStrikesRef.current = 0;
|
|
console.log(`Stream issue detected: stalled=${status.stalled}, active=${status.active}, reconnecting...`);
|
|
if (stallCheckIntervalRef.current) {
|
|
clearInterval(stallCheckIntervalRef.current);
|
|
stallCheckIntervalRef.current = null;
|
|
}
|
|
setStreamLoading(false);
|
|
attemptReconnect();
|
|
} catch {
|
|
// Ignore fetch errors - server might be temporarily unavailable
|
|
}
|
|
}, STALL_CHECK_INTERVAL);
|
|
|
|
return () => {
|
|
if (stallCheckIntervalRef.current) {
|
|
clearInterval(stallCheckIntervalRef.current);
|
|
stallCheckIntervalRef.current = null;
|
|
}
|
|
};
|
|
}, [streamMode, streamLoading, streamError, isReconnecting, transitioning, id, attemptReconnect]);
|
|
|
|
const handleStreamError = () => {
|
|
setStreamLoading(false);
|
|
|
|
// Only auto-reconnect for live stream mode
|
|
if (streamMode === 'stream' && reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
|
|
attemptReconnect();
|
|
} else {
|
|
setStreamError(true);
|
|
}
|
|
};
|
|
|
|
const handleStreamLoad = () => {
|
|
setStreamLoading(false);
|
|
setStreamError(false);
|
|
// Reset reconnect attempts on successful connection
|
|
setReconnectAttempts(0);
|
|
// A frame rendered — clear any accumulated stall strikes (#2521).
|
|
stallStrikesRef.current = 0;
|
|
setIsReconnecting(false);
|
|
if (reconnectTimerRef.current) {
|
|
clearTimeout(reconnectTimerRef.current);
|
|
}
|
|
if (countdownIntervalRef.current) {
|
|
clearInterval(countdownIntervalRef.current);
|
|
}
|
|
|
|
// Auto-resize window to fit video content (only if no saved preference)
|
|
if (imgRef.current && !localStorage.getItem('cameraWindowState')) {
|
|
const img = imgRef.current;
|
|
const videoWidth = img.naturalWidth;
|
|
const videoHeight = img.naturalHeight;
|
|
|
|
if (videoWidth > 0 && videoHeight > 0) {
|
|
// Add space for header bar (~45px) and some padding
|
|
const headerHeight = 45;
|
|
const padding = 16;
|
|
|
|
// Calculate window size (outer size includes chrome)
|
|
const chromeWidth = window.outerWidth - window.innerWidth;
|
|
const chromeHeight = window.outerHeight - window.innerHeight;
|
|
|
|
const targetWidth = videoWidth + padding + chromeWidth;
|
|
const targetHeight = videoHeight + headerHeight + padding + chromeHeight;
|
|
|
|
try {
|
|
window.resizeTo(targetWidth, targetHeight);
|
|
} catch {
|
|
// resizeTo may not be allowed in all contexts
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const stopStream = () => {
|
|
if (id > 0) {
|
|
const headers: Record<string, string> = {};
|
|
const token = getAuthToken();
|
|
if (token) headers['Authorization'] = `Bearer ${token}`;
|
|
fetch(`/api/v1/printers/${id}/camera/stop`, { method: 'POST', headers }).catch(() => {});
|
|
}
|
|
};
|
|
|
|
const switchToMode = (newMode: 'stream' | 'snapshot') => {
|
|
if (streamMode === newMode || transitioning) return;
|
|
setTransitioning(true);
|
|
setStreamLoading(true);
|
|
setStreamError(false);
|
|
// Reset reconnect state on mode switch
|
|
setReconnectAttempts(0);
|
|
setIsReconnecting(false);
|
|
// Reset zoom on mode switch
|
|
setZoomLevel(1);
|
|
setPanOffset({ x: 0, y: 0 });
|
|
if (reconnectTimerRef.current) {
|
|
clearTimeout(reconnectTimerRef.current);
|
|
}
|
|
if (countdownIntervalRef.current) {
|
|
clearInterval(countdownIntervalRef.current);
|
|
}
|
|
|
|
if (imgRef.current) {
|
|
imgRef.current.src = '';
|
|
}
|
|
|
|
// Stop any active streams when switching modes
|
|
if (streamMode === 'stream') {
|
|
stopStream();
|
|
}
|
|
|
|
setTimeout(() => {
|
|
setStreamMode(newMode);
|
|
setImageKey(Date.now());
|
|
setTransitioning(false);
|
|
}, 100);
|
|
};
|
|
|
|
const refresh = () => {
|
|
if (transitioning) return;
|
|
setTransitioning(true);
|
|
setStreamLoading(true);
|
|
setStreamError(false);
|
|
// Reset reconnect state on manual refresh
|
|
setReconnectAttempts(0);
|
|
setIsReconnecting(false);
|
|
if (reconnectTimerRef.current) {
|
|
clearTimeout(reconnectTimerRef.current);
|
|
}
|
|
if (countdownIntervalRef.current) {
|
|
clearInterval(countdownIntervalRef.current);
|
|
}
|
|
|
|
if (imgRef.current) {
|
|
imgRef.current.src = '';
|
|
}
|
|
|
|
// Stop any active streams before refresh
|
|
if (streamMode === 'stream') {
|
|
stopStream();
|
|
}
|
|
|
|
setTimeout(() => {
|
|
setImageKey(Date.now());
|
|
setTransitioning(false);
|
|
}, 100);
|
|
};
|
|
|
|
const toggleFullscreen = () => {
|
|
if (!containerRef.current) return;
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen();
|
|
} else {
|
|
containerRef.current.requestFullscreen();
|
|
}
|
|
};
|
|
|
|
const handleZoomIn = () => {
|
|
setZoomLevel(prev => Math.min(prev + 0.5, 4));
|
|
};
|
|
|
|
const handleZoomOut = () => {
|
|
setZoomLevel(prev => {
|
|
const newZoom = Math.max(prev - 0.5, 1);
|
|
if (newZoom === 1) setPanOffset({ x: 0, y: 0 });
|
|
return newZoom;
|
|
});
|
|
};
|
|
|
|
const handleWheel = (e: React.WheelEvent) => {
|
|
e.preventDefault();
|
|
if (e.deltaY < 0) {
|
|
handleZoomIn();
|
|
} else {
|
|
handleZoomOut();
|
|
}
|
|
};
|
|
|
|
const handleImageMouseDown = (e: React.MouseEvent) => {
|
|
if (zoomLevel > 1) {
|
|
e.preventDefault();
|
|
setIsPanning(true);
|
|
setPanStart({ x: e.clientX - panOffset.x, y: e.clientY - panOffset.y });
|
|
}
|
|
};
|
|
|
|
// Calculate max pan based on container size and zoom level
|
|
const getMaxPan = useCallback(() => {
|
|
if (!containerRef.current) {
|
|
return { x: 300, y: 200 };
|
|
}
|
|
const container = containerRef.current.getBoundingClientRect();
|
|
// Allow panning up to half the zoomed overflow in each direction
|
|
const maxX = (container.width * (zoomLevel - 1)) / 2;
|
|
const maxY = (container.height * (zoomLevel - 1)) / 2;
|
|
return { x: Math.max(50, maxX), y: Math.max(50, maxY) };
|
|
}, [zoomLevel]);
|
|
|
|
const handleImageMouseMove = (e: React.MouseEvent) => {
|
|
if (isPanning && zoomLevel > 1) {
|
|
const newX = e.clientX - panStart.x;
|
|
const newY = e.clientY - panStart.y;
|
|
const maxPan = getMaxPan();
|
|
setPanOffset({
|
|
x: Math.max(-maxPan.x, Math.min(maxPan.x, newX)),
|
|
y: Math.max(-maxPan.y, Math.min(maxPan.y, newY)),
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleImageMouseUp = () => {
|
|
setIsPanning(false);
|
|
};
|
|
|
|
// Touch event handlers for mobile
|
|
const getTouchDistance = (touches: React.TouchList) => {
|
|
if (touches.length < 2) return 0;
|
|
const dx = touches[0].clientX - touches[1].clientX;
|
|
const dy = touches[0].clientY - touches[1].clientY;
|
|
return Math.sqrt(dx * dx + dy * dy);
|
|
};
|
|
|
|
const getTouchCenter = (touches: React.TouchList) => {
|
|
if (touches.length < 2) {
|
|
return { x: touches[0].clientX, y: touches[0].clientY };
|
|
}
|
|
return {
|
|
x: (touches[0].clientX + touches[1].clientX) / 2,
|
|
y: (touches[0].clientY + touches[1].clientY) / 2,
|
|
};
|
|
};
|
|
|
|
const handleTouchStart = (e: React.TouchEvent) => {
|
|
if (e.touches.length === 2) {
|
|
// Pinch gesture start
|
|
e.preventDefault();
|
|
setLastTouchDistance(getTouchDistance(e.touches));
|
|
setLastTouchCenter(getTouchCenter(e.touches));
|
|
} else if (e.touches.length === 1 && zoomLevel > 1) {
|
|
// Single touch pan start
|
|
e.preventDefault();
|
|
setIsPanning(true);
|
|
setPanStart({
|
|
x: e.touches[0].clientX - panOffset.x,
|
|
y: e.touches[0].clientY - panOffset.y,
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleTouchMove = (e: React.TouchEvent) => {
|
|
if (e.touches.length === 2 && lastTouchDistance !== null) {
|
|
// Pinch gesture
|
|
e.preventDefault();
|
|
const newDistance = getTouchDistance(e.touches);
|
|
const scale = newDistance / lastTouchDistance;
|
|
|
|
setZoomLevel(prev => {
|
|
const newZoom = Math.max(1, Math.min(4, prev * scale));
|
|
if (newZoom === 1) {
|
|
setPanOffset({ x: 0, y: 0 });
|
|
}
|
|
return newZoom;
|
|
});
|
|
|
|
setLastTouchDistance(newDistance);
|
|
|
|
// Also handle pan during pinch
|
|
const newCenter = getTouchCenter(e.touches);
|
|
if (lastTouchCenter) {
|
|
const maxPan = getMaxPan();
|
|
setPanOffset(prev => ({
|
|
x: Math.max(-maxPan.x, Math.min(maxPan.x, prev.x + (newCenter.x - lastTouchCenter.x))),
|
|
y: Math.max(-maxPan.y, Math.min(maxPan.y, prev.y + (newCenter.y - lastTouchCenter.y))),
|
|
}));
|
|
}
|
|
setLastTouchCenter(newCenter);
|
|
} else if (e.touches.length === 1 && isPanning && zoomLevel > 1) {
|
|
// Single touch pan
|
|
e.preventDefault();
|
|
const newX = e.touches[0].clientX - panStart.x;
|
|
const newY = e.touches[0].clientY - panStart.y;
|
|
const maxPan = getMaxPan();
|
|
setPanOffset({
|
|
x: Math.max(-maxPan.x, Math.min(maxPan.x, newX)),
|
|
y: Math.max(-maxPan.y, Math.min(maxPan.y, newY)),
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleTouchEnd = (e: React.TouchEvent) => {
|
|
if (e.touches.length < 2) {
|
|
setLastTouchDistance(null);
|
|
setLastTouchCenter(null);
|
|
}
|
|
if (e.touches.length === 0) {
|
|
setIsPanning(false);
|
|
}
|
|
};
|
|
|
|
const resetZoom = () => {
|
|
setZoomLevel(1);
|
|
setPanOffset({ x: 0, y: 0 });
|
|
};
|
|
|
|
// When auth is enabled, wait for the stream token before rendering the <img>
|
|
// src — otherwise the first request fires without ?token= and the backend
|
|
// rejects it with "Valid camera stream token required" (see #979). We append
|
|
// the token directly from the reactive query value instead of relying on the
|
|
// module-level cache in withStreamToken(), because that cache is updated in a
|
|
// useEffect that runs after render.
|
|
//
|
|
// We also wait when auth is *disabled* (#2521). The token query runs either
|
|
// way, and this page subscribes to it — so the first render produced a src
|
|
// with no token, the token landed, and the re-render CHANGED img.src. The
|
|
// browser aborts the in-flight request and issues a second one. With auth off
|
|
// no token is required, so *both* reached the backend and attached to the
|
|
// fan-out: every page load added two viewers and abandoned one of them. Wait
|
|
// for the query to settle and there is one src, one request, one viewer.
|
|
// Falling through once it has settled without a token keeps an auth-disabled
|
|
// install working even if the token endpoint fails — it doesn't need one.
|
|
const waitingForStreamToken = !streamTokenValue && (authEnabled || streamTokenPending);
|
|
const appendToken = (url: string) =>
|
|
streamTokenValue ? `${url}&token=${encodeURIComponent(streamTokenValue)}` : withStreamToken(url);
|
|
const currentUrl = transitioning || waitingForStreamToken
|
|
? ''
|
|
: streamMode === 'stream'
|
|
? appendToken(`/api/v1/printers/${id}/camera/stream?fps=${fps}&t=${imageKey}`)
|
|
: appendToken(`/api/v1/printers/${id}/camera/snapshot?t=${imageKey}`);
|
|
|
|
const isDisabled = streamLoading || transitioning || isReconnecting;
|
|
|
|
if (!id) {
|
|
return (
|
|
<div className="min-h-screen bg-black flex items-center justify-center">
|
|
<p className="text-white">{t('camera.invalidPrinterId')}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div ref={containerRef} className="min-h-screen bg-black flex flex-col">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-4 py-2 bg-bambu-dark-secondary border-b border-bambu-dark-tertiary">
|
|
<h1 className="text-sm font-medium text-white flex items-center gap-2">
|
|
<Camera className="w-4 h-4" />
|
|
{printer?.name || `Printer ${id}`}
|
|
</h1>
|
|
<div className="flex items-center gap-2">
|
|
{/* Mode toggle */}
|
|
<div className="flex bg-bambu-dark rounded p-0.5">
|
|
<button
|
|
onClick={() => switchToMode('stream')}
|
|
disabled={isDisabled}
|
|
className={`px-3 py-1 text-xs rounded transition-colors ${
|
|
streamMode === 'stream'
|
|
? 'bg-bambu-green text-white'
|
|
: 'text-bambu-gray hover:text-white disabled:opacity-50'
|
|
}`}
|
|
>
|
|
{t('camera.live')}
|
|
</button>
|
|
<button
|
|
onClick={() => switchToMode('snapshot')}
|
|
disabled={isDisabled}
|
|
className={`px-3 py-1 text-xs rounded transition-colors ${
|
|
streamMode === 'snapshot'
|
|
? 'bg-bambu-green text-white'
|
|
: 'text-bambu-gray hover:text-white disabled:opacity-50'
|
|
}`}
|
|
>
|
|
{t('camera.snapshot')}
|
|
</button>
|
|
</div>
|
|
<button
|
|
onClick={() => chamberLightMutation.mutate(!status?.chamber_light)}
|
|
disabled={!status?.connected || chamberLightMutation.isPending || !hasPermission('printers:control')}
|
|
className={`p-1.5 rounded disabled:opacity-50 ${status?.chamber_light ? 'bg-yellow-500/20 hover:bg-yellow-500/30' : 'hover:bg-bambu-dark-tertiary'}`}
|
|
title={!hasPermission('printers:control') ? t('printers.permission.noControl') : t('camera.chamberLight')}
|
|
>
|
|
<ChamberLight on={status?.chamber_light ?? false} className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => setShowSkipObjectsModal(true)}
|
|
disabled={!isPrintingWithObjects || !hasPermission('printers:control')}
|
|
className={`p-1.5 rounded disabled:opacity-50 ${isPrintingWithObjects && hasPermission('printers:control') ? 'hover:bg-bambu-dark-tertiary' : ''}`}
|
|
title={
|
|
!hasPermission('printers:control')
|
|
? t('printers.permission.noControl')
|
|
: !isPrintingWithObjects
|
|
? t('printers.skipObjects.onlyWhilePrinting')
|
|
: t('printers.skipObjects.tooltip')
|
|
}
|
|
>
|
|
<SkipObjectsIcon className="w-4 h-4 text-bambu-gray" />
|
|
</button>
|
|
<button
|
|
onClick={refresh}
|
|
disabled={isDisabled}
|
|
className="p-1.5 hover:bg-bambu-dark-tertiary rounded disabled:opacity-50"
|
|
title={streamMode === 'stream' ? t('camera.restartStream') : t('camera.refreshSnapshot')}
|
|
>
|
|
<RefreshCw className={`w-4 h-4 text-bambu-gray ${isDisabled ? 'animate-spin' : ''}`} />
|
|
</button>
|
|
<button
|
|
onClick={() => setShowDiagnoseModal(true)}
|
|
className="p-1.5 hover:bg-bambu-dark-tertiary rounded"
|
|
title={t('camera.diagnose.button')}
|
|
>
|
|
<Stethoscope className="w-4 h-4 text-bambu-gray" />
|
|
</button>
|
|
<button
|
|
onClick={toggleFullscreen}
|
|
className="p-1.5 hover:bg-bambu-dark-tertiary rounded"
|
|
title={isFullscreen ? t('camera.exitFullscreen') : t('camera.fullscreen')}
|
|
>
|
|
{isFullscreen ? (
|
|
<Minimize className="w-4 h-4 text-bambu-gray" />
|
|
) : (
|
|
<Maximize className="w-4 h-4 text-bambu-gray" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Video area */}
|
|
<div
|
|
className="flex-1 flex items-center justify-center p-2 overflow-hidden"
|
|
onWheel={handleWheel}
|
|
onMouseMove={handleImageMouseMove}
|
|
onMouseUp={handleImageMouseUp}
|
|
onMouseLeave={handleImageMouseUp}
|
|
onTouchStart={handleTouchStart}
|
|
onTouchMove={handleTouchMove}
|
|
onTouchEnd={handleTouchEnd}
|
|
style={{ touchAction: 'none' }}
|
|
>
|
|
<div className="relative w-full h-full flex items-center justify-center">
|
|
{(streamLoading || transitioning) && !isReconnecting && (
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black/50 z-10">
|
|
<div className="text-center">
|
|
<RefreshCw className="w-8 h-8 text-bambu-gray animate-spin mx-auto mb-2" />
|
|
<p className="text-sm text-bambu-gray">
|
|
{streamMode === 'stream' ? t('camera.connectingToCamera') : t('camera.capturingSnapshot')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{isReconnecting && (
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black/80 z-10">
|
|
<div className="text-center p-4">
|
|
<WifiOff className="w-10 h-10 text-orange-400 mx-auto mb-3" />
|
|
<p className="text-white mb-2">{t('camera.connectionLost')}</p>
|
|
<p className="text-sm text-bambu-gray mb-3">
|
|
{t('camera.reconnecting', { countdown: reconnectCountdown, attempt: Math.min(reconnectAttempts + 1, MAX_RECONNECT_ATTEMPTS), max: MAX_RECONNECT_ATTEMPTS })}
|
|
</p>
|
|
<button
|
|
onClick={refresh}
|
|
className="px-4 py-2 bg-bambu-green text-white text-sm rounded hover:bg-bambu-green/80 transition-colors"
|
|
>
|
|
{t('camera.reconnectNow')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{streamError && !isReconnecting && (
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black z-10">
|
|
<div className="text-center p-4">
|
|
<AlertTriangle className="w-12 h-12 text-orange-400 mx-auto mb-3" />
|
|
<p className="text-white mb-2">{t('camera.cameraUnavailable')}</p>
|
|
<p className="text-xs text-bambu-gray mb-4 max-w-md">
|
|
{t('camera.cameraUnavailableDesc')}
|
|
</p>
|
|
<div className="flex gap-2 justify-center">
|
|
<button
|
|
onClick={refresh}
|
|
className="px-4 py-2 bg-bambu-green text-white rounded hover:bg-bambu-green/80 transition-colors"
|
|
>
|
|
{t('camera.retry')}
|
|
</button>
|
|
<button
|
|
onClick={() => setShowDiagnoseModal(true)}
|
|
className="px-4 py-2 bg-bambu-dark border border-bambu-dark-tertiary text-bambu-gray hover:text-white rounded transition-colors"
|
|
>
|
|
{t('camera.diagnose.button')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<img
|
|
ref={imgRef}
|
|
key={imageKey}
|
|
src={currentUrl}
|
|
alt={t('camera.cameraStream')}
|
|
className="max-w-full max-h-full object-contain select-none"
|
|
style={{
|
|
transform: `scale(${zoomLevel}) translate(${panOffset.x / zoomLevel}px, ${panOffset.y / zoomLevel}px) rotate(${printer?.camera_rotation || 0}deg)`,
|
|
...(printer?.camera_rotation === 90 || printer?.camera_rotation === 270 ? { maxWidth: '100vh', maxHeight: '100vw' } : {}),
|
|
cursor: zoomLevel > 1 ? (isPanning ? 'grabbing' : 'grab') : 'default',
|
|
}}
|
|
onError={currentUrl ? handleStreamError : undefined}
|
|
onLoad={currentUrl ? handleStreamLoad : undefined}
|
|
onMouseDown={handleImageMouseDown}
|
|
draggable={false}
|
|
/>
|
|
|
|
{/* Zoom controls */}
|
|
<div className="absolute bottom-4 left-4 flex items-center gap-1.5 bg-black/60 rounded-lg px-2 py-1.5">
|
|
<button
|
|
onClick={handleZoomOut}
|
|
disabled={zoomLevel <= 1}
|
|
className="p-1.5 hover:bg-white/10 rounded disabled:opacity-30"
|
|
title={t('camera.zoomOut')}
|
|
>
|
|
<ZoomOut className="w-4 h-4 text-white" />
|
|
</button>
|
|
<button
|
|
onClick={resetZoom}
|
|
className="px-2 py-1 text-sm text-white hover:bg-white/10 rounded min-w-[48px]"
|
|
title={t('camera.resetZoom')}
|
|
>
|
|
{Math.round(zoomLevel * 100)}%
|
|
</button>
|
|
<button
|
|
onClick={handleZoomIn}
|
|
disabled={zoomLevel >= 4}
|
|
className="p-1.5 hover:bg-white/10 rounded disabled:opacity-30"
|
|
title={t('camera.zoomIn')}
|
|
>
|
|
<ZoomIn className="w-4 h-4 text-white" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Skip Objects Modal */}
|
|
<SkipObjectsModal
|
|
printerId={id}
|
|
isOpen={showSkipObjectsModal}
|
|
onClose={() => setShowSkipObjectsModal(false)}
|
|
/>
|
|
{/* Camera diagnostic modal — stethoscope icon + error-state Diagnose button (#1395) */}
|
|
{showDiagnoseModal && (
|
|
<CameraDiagnoseModal
|
|
printerId={id}
|
|
printerName={printer?.name || null}
|
|
onClose={() => setShowDiagnoseModal(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|