Add Torch/Flashlight support

src/Components/QrScanner/QrScannerPlugin.tsx

@@ -1,8 +1,9 @@
 // file = QrScannerPlugin.jsx
-import {MutableRefObject, useEffect, useRef} from 'react';
+import {MutableRefObject, useEffect, useRef, useState} from 'react';
 import {ArrowUpTrayIcon} from '@heroicons/react/24/solid';
 import {Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats} from 'html5-qrcode';
 import {checkCameraPermissions} from '../../utils/media';
+import {TorchButton} from './TorchButton';
 import classes from './QrScanner.module.css';
 
 // Id of the HTML element used by the Html5QrcodeScanner.
@@ -51,12 +52,26 @@ export default function QrScannerPlugin({
 }: QrProps) {
   const aspectRatio = calcAspectRatio();
   const html5CustomScanner: MutableRefObject<Html5Qrcode | null> = useRef(null);
+  const [canUseCamera, setCanUseCamera] = useState(true);
+
+  // Turn off the torch (if it is on) when navigating away from the scan page
+  async function switchOffTorch(html5CustomScanner: MutableRefObject<Html5Qrcode | null>) {
+    try {
+      const track = html5CustomScanner?.current?.getRunningTrackCameraCapabilities();
+      if (track && track.torchFeature().value()) {
+        await track.torchFeature().apply(false);
+      }
+    } catch (error) {
+      console.warn('Failed to disable torch:', error);
+    }
+  }
 
   useEffect(() => {
     const showQRCode = async () => {
       const hasCamPerm: boolean = await checkCameraPermissions();
       if (!hasCamPerm) {
         onPermRefused();
+        setCanUseCamera(false);
         return;
       }
 
@@ -83,6 +98,7 @@ export default function QrScannerPlugin({
     return () => {
       const stopQrScanner = async () => {
         if (html5CustomScanner.current?.isScanning) {
+          switchOffTorch(html5CustomScanner);
           await html5CustomScanner.current.stop();
         }
         html5CustomScanner.current?.clear();
@@ -104,10 +120,13 @@ export default function QrScannerPlugin({
   ]);
 
   return (
-    <div className={classes.wrapper}>
-      <ShadedRegion size={qrbox} />
-      <div id={qrcodeRegionId} />
-    </div>
+    <>
+      <div className={classes.wrapper}>
+        <ShadedRegion size={qrbox}></ShadedRegion>
+        <div id={qrcodeRegionId} />
+      </div>
+      <TorchButton html5CustomScanner={html5CustomScanner} canUseCamera={canUseCamera} />
+    </>
   );
 }
 

src/Components/QrScanner/TorchButton.tsx

@@ -0,0 +1,76 @@
+import {MutableRefObject, useState, useEffect} from 'react';
+import {BoltIcon, BoltSlashIcon, ExclamationCircleIcon} from '@heroicons/react/24/solid';
+import {Html5Qrcode} from 'html5-qrcode';
+import PropTypes from 'prop-types';
+
+interface TorchButtonProps {
+  html5CustomScanner: MutableRefObject<Html5Qrcode | null>;
+  canUseCamera: boolean;
+}
+
+export function TorchButton({html5CustomScanner, canUseCamera}: TorchButtonProps) {
+  const [torchOn, setTorchOn] = useState(false);
+  const [torchUnavailable, setTorchUnavailable] = useState(false);
+
+  useEffect(() => {
+    const toggleTorch = async () => {
+      try {
+        const track = html5CustomScanner?.current?.getRunningTrackCameraCapabilities();
+        if (track && track.torchFeature().isSupported()) {
+          await track.torchFeature().apply(torchOn);
+        } else if (track && !track.torchFeature().isSupported()) {
+          setTorchUnavailable(true);
+          console.warn('Torch feature is not supported on this device.');
+        }
+      } catch (error) {
+        setTorchUnavailable(true);
+        console.warn('Failed to toggle torch:', error);
+      }
+    };
+
+    toggleTorch();
+  }, [torchOn, html5CustomScanner]);
+
+  if (!canUseCamera) {
+    return;
+  }
+
+  if (torchUnavailable) {
+    return (
+      <>
+        <div className="fit-content flex justify-center gap-1 bg-yellow-500 py-3 text-center text-amber-900">
+          <span className="flex items-center">
+            <ExclamationCircleIcon className="mr-1 h-6 w-6" />
+            Your device's torch is unavailable
+          </span>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div
+      onClick={() => setTorchOn(prev => !prev)}
+      className="fit-content flex justify-center gap-1 bg-primary py-3 text-center text-white"
+    >
+      <span className="flex items-center">
+        {torchOn ? (
+          <>
+            <BoltSlashIcon className="mr-1 h-6 w-6" />
+            Turn torch off
+          </>
+        ) : (
+          <>
+            <BoltIcon className="mr-1 h-6 w-6" />
+            Turn torch on
+          </>
+        )}
+      </span>
+    </div>
+  );
+}
+
+TorchButton.propTypes = {
+  html5CustomScanner: PropTypes.object.isRequired,
+  canUseCamera: PropTypes.bool.isRequired,
+};