peworkshop/components/EnhancedQRScanner.js

"use client";
import { useState, useEffect, useRef } from "react";
import { Scanner } from "@yudiel/react-qr-scanner";

export default function EnhancedQRScanner({
  onScan,
  width = 300,
  height = 300,
}) {
  const [error, setError] = useState(null);
  const [isSecureContext, setIsSecureContext] = useState(true);
  const [initialized, setInitialized] = useState(false);
  const [cameraActive, setCameraActive] = useState(false);
  const [hasCameras, setHasCameras] = useState(true);
  const [retryCount, setRetryCount] = useState(0);
  const maxRetries = 3;
  const scannerRef = useRef(null);

  // Check if we're in a secure context
  useEffect(() => {
    // Check if we're in a secure context (https or localhost)
    const secure = window.isSecureContext;
    setIsSecureContext(secure);

    // Check if camera can be accessed
    async function checkCameraAccess() {
      try {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter(
          (device) => device.kind === "videoinput"
        );

        if (videoDevices.length === 0) {
          setError(
            "No camera detected. Please make sure your device has a camera."
          );
          setHasCameras(false);
        } else {
          setHasCameras(true);
        }

        setInitialized(true);
      } catch (err) {
        console.error("Error checking camera devices:", err);
        setError(`Camera initialization error: ${err.message}`);
        setInitialized(true);
      }
    }

    checkCameraAccess();
  }, []);

  // Handle successful scan
  const handleDecode = (result) => {
    if (onScan && result) {
      onScan(result);
    }
  };

  // Try to restart the camera
  const retryCamera = () => {
    if (retryCount < maxRetries) {
      setError(null);
      setRetryCount((prev) => prev + 1);
      // Force re-render of scanner component
      setCameraActive(false);
      setTimeout(() => setCameraActive(true), 500);
    } else {
      setError(
        "Could not access camera after multiple attempts. Please refresh the page or try another device."
      );
    }
  };

  // Handle camera errors
  const handleError = (error) => {
    console.error("QR Scanner error:", error);
    setCameraActive(false);

    // More descriptive error messages
    let errorMessage = "Camera access error. ";

    if (!isSecureContext) {
      errorMessage +=
        "Your browser requires HTTPS for camera access. When running locally, use http://localhost instead of your IP address.";
    } else if (
      error.name === "NotAllowedError" ||
      error.name === "PermissionDeniedError"
    ) {
      errorMessage +=
        "Camera permission denied. Please allow camera access in your browser settings.";
    } else if (
      error.name === "NotFoundError" ||
      error.name === "DevicesNotFoundError"
    ) {
      errorMessage +=
        "No camera found. Please ensure your device has a working camera.";
    } else if (
      error.name === "NotReadableError" ||
      error.name === "TrackStartError"
    ) {
      errorMessage +=
        "Camera is already in use by another application or encountered a hardware error.";
    } else {
      errorMessage += `${
        error.message ||
        "Please check your camera permissions and refresh the page."
      }`;
    }

    setError(errorMessage);
  };

  // When initialized, activate camera
  useEffect(() => {
    if (initialized && hasCameras && isSecureContext && !error) {
      setCameraActive(true);
    }
  }, [initialized, hasCameras, isSecureContext, error]);

  // Handle secure context warning
  if (!isSecureContext) {
    return (
      <div className="enhanced-qr-scanner">
        <div className="scanner-error">
          <p>Camera access requires a secure context (HTTPS or localhost).</p>
          <p>
            When running locally, use http://localhost:3000 instead of your
            network IP.
          </p>
        </div>
      </div>
    );
  }

  // Handle initialization state
  if (!initialized) {
    return (
      <div className="enhanced-qr-scanner">
        <div className="scanner-loading">Initializing camera...</div>
      </div>
    );
  }

  return (
    <div className="enhanced-qr-scanner">
      {error && (
        <div className="scanner-error">
          <p>{error}</p>
          {retryCount < maxRetries && (
            <button className="retry-button" onClick={retryCamera}>
              Retry Camera Access
            </button>
          )}
        </div>
      )}

      {cameraActive && !error && (
        <div
          className="scanner-container"
          style={{ width, height }}
          ref={scannerRef}
        >
          <Scanner
            onResult={handleDecode}
            onError={handleError}
            constraints={{
              facingMode: "environment",
              width: { min: 640, ideal: 1280, max: 1920 },
              height: { min: 480, ideal: 720, max: 1080 },
              aspectRatio: { ideal: 1 },
            }}
            containerStyle={{
              width: "100%",
              height: "100%",
              borderRadius: "8px",
              overflow: "hidden",
            }}
            videoStyle={{
              objectFit: "cover",
              width: "100%",
              height: "100%",
            }}
            scanDelay={500}
          />
        </div>
      )}

      {/* Text input fallback when camera fails */}
      {(!cameraActive || error) && (
        <div className="manual-input-container">
          <p className="fallback-text">
            Having trouble with the camera? Try entering a code manually:
          </p>
          <div className="input-container">
            <input
              type="text"
              placeholder="Enter QR code (e.g. QR1)"
              className="manual-input"
              onKeyDown={(e) => {
                if (e.key === "Enter" && e.target.value) {
                  onScan(e.target.value);
                  e.target.value = "";
                }
              }}
            />
            <button
              className="submit-button"
              onClick={(e) => {
                const input = e.target.previousSibling;
                if (input.value) {
                  onScan(input.value);
                  input.value = "";
                }
              }}
            >
              Submit
            </button>
          </div>
        </div>
      )}

      <style jsx>{`
        .enhanced-qr-scanner {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
        }

        .scanner-error {
          color: #d32f2f;
          margin-bottom: 15px;
          text-align: center;
          padding: 12px;
          background-color: #ffebee;
          border-radius: 8px;
          width: 100%;
        }

        .retry-button {
          margin-top: 10px;
          padding: 8px 16px;
          background-color: #2196f3;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          font-weight: bold;
        }

        .retry-button:hover {
          background-color: #1976d2;
        }

        .scanner-loading {
          text-align: center;
          padding: 12px;
          background-color: #e8f5e9;
          border-radius: 8px;
          width: 100%;
          margin-bottom: 15px;
        }

        .scanner-container {
          position: relative;
          width: 100%;
          max-width: ${width}px;
          height: ${height}px;
          border-radius: 8px;
          overflow: hidden;
          border: 2px solid #ddd;
          background-color: #f5f5f5;
        }

        .manual-input-container {
          margin-top: 15px;
          width: 100%;
          max-width: ${width}px;
          text-align: center;
        }

        .fallback-text {
          margin-bottom: 10px;
          color: #555;
        }

        .input-container {
          display: flex;
          width: 100%;
        }

        .manual-input {
          flex: 1;
          padding: 10px;
          border: 1px solid #ddd;
          border-radius: 4px 0 0 4px;
          font-size: 16px;
        }

        .submit-button {
          padding: 10px 15px;
          background-color: #68543c;
          color: white;
          border: none;
          border-radius: 0 4px 4px 0;
          cursor: pointer;
          font-weight: bold;
        }

        .submit-button:hover {
          background-color: #4a3c2a;
        }
      `}</style>
    </div>
  );
}