diff --git a/resources/js/guest-v2/screens/UploadScreen.tsx b/resources/js/guest-v2/screens/UploadScreen.tsx index fd224a10..f0f5ab2d 100644 --- a/resources/js/guest-v2/screens/UploadScreen.tsx +++ b/resources/js/guest-v2/screens/UploadScreen.tsx @@ -34,11 +34,13 @@ export default function UploadScreen() { const { items, add } = useUploadQueue(); const navigate = useNavigate(); const [searchParams] = useSearchParams(); + const mockPreviewEnabled = import.meta.env.DEV && ['1', 'true', 'yes'].includes((searchParams.get('mockPreview') ?? '').toLowerCase()); const { t, locale } = useTranslation(); const { markCompleted } = useGuestTaskProgress(token ?? undefined); const inputRef = React.useRef(null); const videoRef = React.useRef(null); const streamRef = React.useRef(null); + const mockPreviewTimerRef = React.useRef(null); const [uploading, setUploading] = React.useState<{ name: string; progress: number } | null>(null); const [error, setError] = React.useState(null); const [uploadDialog, setUploadDialog] = React.useState(null); @@ -234,6 +236,10 @@ export default function UploadScreen() { }, []); const stopCamera = React.useCallback(() => { + if (mockPreviewTimerRef.current) { + window.clearTimeout(mockPreviewTimerRef.current); + mockPreviewTimerRef.current = null; + } if (streamRef.current) { streamRef.current.getTracks().forEach((track) => track.stop()); streamRef.current = null; @@ -246,6 +252,19 @@ export default function UploadScreen() { const startCamera = React.useCallback( async (modeOverride?: 'user' | 'environment') => { + if (mockPreviewEnabled) { + const mode = modeOverride ?? facingMode; + if (mockPreviewTimerRef.current) { + window.clearTimeout(mockPreviewTimerRef.current); + } + setFacingMode(mode); + setCameraState('starting'); + mockPreviewTimerRef.current = window.setTimeout(() => { + setCameraState('ready'); + }, 420); + return; + } + if (!navigator.mediaDevices?.getUserMedia) { setCameraState('unsupported'); return; @@ -278,7 +297,7 @@ export default function UploadScreen() { } } }, - [facingMode] + [facingMode, mockPreviewEnabled] ); const handleCapture = React.useCallback(async () => { @@ -321,6 +340,17 @@ export default function UploadScreen() { setCameraState('preview'); }, [cameraState, facingMode, mirror, startCamera, stopCamera, t]); + React.useEffect(() => { + if (!mockPreviewEnabled) return; + void startCamera(); + return () => { + if (mockPreviewTimerRef.current) { + window.clearTimeout(mockPreviewTimerRef.current); + mockPreviewTimerRef.current = null; + } + }; + }, [mockPreviewEnabled, startCamera]); + const handleRetake = React.useCallback(async () => { if (previewUrl) { URL.revokeObjectURL(previewUrl);