peworkshop/components/QRScanner.js

"use client";
import { useState, useRef, useEffect } from "react";
import { Html5QrcodeScanner } from "html5-qrcode";

export default function QRScanner({ onScan, width = 300, height = 300 }) {
  const [scanning, setScanning] = useState(false);
  const [error, setError] = useState(null);
  const scannerRef = useRef(null);

  useEffect(() => {
    // Initialize scanner
    if (!scanning && typeof window !== "undefined") {
      try {
        const qrScanner = new Html5QrcodeScanner(
          "qr-reader",
          {
            fps: 10,
            qrbox: { width: width * 0.7, height: height * 0.7 },
            aspectRatio: 1,
            disableFlip: false,
            formatsToSupport: ["QR_CODE"],
          },
          false // don't start scanning immediately
        );

        // Store the scanner instance
        scannerRef.current = qrScanner;

        // If onScan is provided, set up the success callback
        if (onScan) {
          qrScanner.render(
            (decodedText) => {
              if (onScan) {
                onScan(decodedText);
              }
              setScanning(false);
            },
            (errorMessage) => {
              // No need to show decode errors to user as they're expected during scanning
              console.log(errorMessage);
            }
          );
          setScanning(true);
        }
      } catch (err) {
        console.error("QR Scanner initialization error:", err);
        setError(
          "Could not initialize QR scanner. Please make sure you have camera access."
        );
      }
    }

    // Cleanup function
    return () => {
      if (scannerRef.current) {
        try {
          scannerRef.current.clear();
        } catch (err) {
          console.error("Failed to clear QR scanner:", err);
        }
      }
    };
  }, [onScan, width, height, scanning]);

  return (
    <div className="qr-scanner">
      {error && <div className="qr-error">{error}</div>}
      <div id="qr-reader" style={{ width, height }}></div>

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

        .qr-error {
          color: red;
          margin-bottom: 10px;
          text-align: center;
          padding: 8px;
          background-color: #ffebee;
          border-radius: 4px;
          width: 100%;
        }

        #qr-reader {
          border: 2px solid #ddd;
          border-radius: 8px;
          overflow: hidden;
          background-color: #f5f5f5;
        }

        #qr-reader video {
          object-fit: cover;
          border-radius: 6px;
        }
      `}</style>
    </div>
  );
}