Add mock preview transition query param

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<HTMLInputElement | null>(null);
   const videoRef = React.useRef<HTMLVideoElement | null>(null);
   const streamRef = React.useRef<MediaStream | null>(null);
+  const mockPreviewTimerRef = React.useRef<number | null>(null);
   const [uploading, setUploading] = React.useState<{ name: string; progress: number } | null>(null);
   const [error, setError] = React.useState<string | null>(null);
   const [uploadDialog, setUploadDialog] = React.useState<UploadErrorDialog | null>(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);