diff --git a/resources/js/guest-v2/screens/UploadScreen.tsx b/resources/js/guest-v2/screens/UploadScreen.tsx index 9dc88c7..c37cc18 100644 --- a/resources/js/guest-v2/screens/UploadScreen.tsx +++ b/resources/js/guest-v2/screens/UploadScreen.tsx @@ -316,6 +316,39 @@ export default function UploadScreen() { }, []); const handleCapture = React.useCallback(async () => { + if (mockPreviewEnabled) { + const canvas = document.createElement('canvas'); + const width = 1400; + const height = 1000; + canvas.width = width; + canvas.height = height; + const ctx = canvas.getContext('2d'); + if (!ctx) return; + const gradient = ctx.createLinearGradient(0, 0, width, height); + gradient.addColorStop(0, '#ff6ad5'); + gradient.addColorStop(0.5, '#8b5cf6'); + gradient.addColorStop(1, '#38bdf8'); + ctx.fillStyle = gradient; + ctx.fillRect(0, 0, width, height); + ctx.fillStyle = 'rgba(255,255,255,0.18)'; + ctx.fillRect(80, 80, width - 160, height - 160); + ctx.strokeStyle = 'rgba(255,255,255,0.5)'; + ctx.lineWidth = 6; + ctx.strokeRect(80, 80, width - 160, height - 160); + ctx.fillStyle = 'rgba(15, 23, 42, 0.7)'; + ctx.font = '700 64px system-ui, sans-serif'; + ctx.fillText('Mock Capture', 120, height - 140); + const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.92)); + if (!blob) return; + const file = new File([blob], `mock-${Date.now()}.jpg`, { type: blob.type }); + const url = URL.createObjectURL(file); + setPreviewFile(file); + setPreviewUrl(url); + stopCamera(); + setCameraState('preview'); + return; + } + const video = videoRef.current; if (!video) return; if (cameraState !== 'ready') { @@ -353,7 +386,7 @@ export default function UploadScreen() { setPreviewUrl(url); stopCamera(); setCameraState('preview'); - }, [cameraState, facingMode, mirror, startCamera, stopCamera, t]); + }, [cameraState, facingMode, mirror, mockPreviewEnabled, startCamera, stopCamera, t]); React.useEffect(() => { if (!mockPreviewEnabled) return;