diff --git a/src/components/event/QRCodeScanner.tsx b/src/components/event/QRCodeScanner.tsx index 9b3d174..0c97a52 100644 --- a/src/components/event/QRCodeScanner.tsx +++ b/src/components/event/QRCodeScanner.tsx @@ -11,9 +11,14 @@ export function QRCodeScanner({ onScan, onError }: QRCodeScannerProps) { const [error, setError] = useState(null); const [showManualInput, setShowManualInput] = useState(false); const [manualInput, setManualInput] = useState(''); + const [showTroubleshooting, setShowTroubleshooting] = useState(false); const scannerRef = useRef(null); const scannerIdRef = useRef('qr-reader'); + // Detect if user is on iOS + const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent); + const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); + useEffect(() => { return () => { // Cleanup on unmount @@ -269,6 +274,100 @@ export function QRCodeScanner({ onScan, onError }: QRCodeScannerProps) { )} + + {/* Troubleshooting Button */} + + + {/* Troubleshooting Guide */} + {showTroubleshooting && ( +
+
+

+ + + + Camera Troubleshooting +

+
+ + {/* iOS/iPhone Instructions */} + {isIOS && ( +
+

+ 📱 iPhone/iPad Camera Permissions +

+
    +
  1. Open your iPhone Settings app
  2. +
  3. Scroll down and tap Safari (or Chrome if using Chrome)
  4. +
  5. Tap Camera
  6. +
  7. Select "Ask" or "Allow"
  8. +
  9. Close Settings and return to this page
  10. +
  11. Refresh the page and try scanning again
  12. +
+
+

+ Note: If you previously denied camera access, you must change it in Settings. The browser won't ask again until you do. +

+
+
+ )} + + {/* Safari-specific */} + {isSafari && !isIOS && ( +
+

+ 🧭 Safari Camera Permissions +

+
    +
  1. Click Safari in the menu bar
  2. +
  3. Select Settings for This Website
  4. +
  5. Find Camera and set to "Allow"
  6. +
  7. Refresh the page and try again
  8. +
+
+ )} + + {/* Chrome/General */} + {!isSafari && ( +
+

+ 🌐 Chrome/Browser Camera Permissions +

+
    +
  1. Look for a camera icon in your browser's address bar
  2. +
  3. Click it and select "Allow"
  4. +
  5. Or click the lock/info icon next to the URL
  6. +
  7. Find Camera permissions and set to "Allow"
  8. +
  9. Refresh the page and try scanning again
  10. +
+
+ )} + + {/* General Tips */} +
+

💡 Other Common Issues

+
    +
  • Camera in use: Close other apps/tabs using your camera
  • +
  • No camera found: Make sure your device has a working camera
  • +
  • HTTPS required: Camera access only works on secure (https://) sites
  • +
  • Still not working? Use the "Manual Input" option or click "Check In" buttons in the attendee list below
  • +
+
+ + {/* Quick Alternative */} +
+

✅ Easy Alternative

+

+ Skip the camera entirely! Just scroll down to the attendee list and click the "Check In" button next to each person's name. +

+
+
+ )} ); }