fix: update based on review feedbacks

Author: gjulivan

packages/pluggableWidgets/barcode-scanner-web/src/helpers/utils.tsx

@@ -28,7 +28,7 @@ export type ReaderProps = {
     canvasMiddleRef: RefObject<HTMLDivElement>;
 };
 
-export type UseReaderHook = (args: ReaderProps) => RefObject<HTMLVideoElement>;
+export type UseReaderHook = (args: ReaderProps) => { ref: RefObject<HTMLVideoElement>; useBrowserAPI: boolean };
 
 export const returnVideoWidthHeight = (
     curVideoRef: HTMLVideoElement,

packages/pluggableWidgets/barcode-scanner-web/src/hooks/nativeReader.ts

@@ -33,13 +33,13 @@ export class Reader implements MxBarcodeReader {
             return;
         }
 
-        const stream = await navigator.mediaDevices.getUserMedia(mediaStreamConstraints);
+        this.stream = await navigator.mediaDevices.getUserMedia(mediaStreamConstraints);
 
         this.videoRef.current.autofocus = true;
         this.videoRef.current.playsInline = true; // Fix error in Safari
         this.videoRef.current.muted = true;
         this.videoRef.current.autoplay = true;
-        this.videoRef.current.srcObject = stream;
+        this.videoRef.current.srcObject = this.stream;
         this.decodeInterval = setTimeout(this.decodeStream, 50, onSuccess, onError);
     };
 

packages/pluggableWidgets/barcode-scanner-web/src/hooks/useReader.ts

@@ -1,20 +1,11 @@
 import { useEventCallback } from "@mendix/widget-plugin-hooks/useEventCallback";
-import { RefObject, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { MxBarcodeReader } from "src/helpers/barcode-detector";
-import { BarcodeFormatsType } from "../../typings/BarcodeScannerProps";
 import { isBarcodeDetectorSupported } from "../helpers/barcode-detector-utils";
+import { UseReaderHook } from "../helpers/utils";
 import { Reader as NativeReader } from "./nativeReader";
 import { Reader as ZxReader } from "./zxReader";
 
-type UseReaderHook = (args: {
-    onSuccess?: (data: string) => void;
-    onError?: (e: Error) => void;
-    useCrop: boolean;
-    barcodeFormats?: BarcodeFormatsType[];
-    useAllFormats: boolean;
-    canvasMiddleRef: RefObject<HTMLDivElement>;
-}) => { ref: RefObject<HTMLVideoElement>; useBrowserAPI: boolean };
-
 export const useReader: UseReaderHook = args => {
     const videoRef = useRef<HTMLVideoElement>(null);
     const onSuccess = useEventCallback(args.onSuccess);
@@ -23,14 +14,14 @@ export const useReader: UseReaderHook = args => {
 
     const reader: MxBarcodeReader = useMemo(() => {
         return enableBrowserAPI ? new NativeReader(args, videoRef) : new ZxReader(args, videoRef);
-    }, [enableBrowserAPI, args, videoRef]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enableBrowserAPI, args.barcodeFormats, args.useAllFormats, args.useCrop, videoRef]);
 
     useEffect(() => {
         reader.start(onSuccess, onError);
 
         return reader.stop;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [onSuccess, onError, reader]);
 
     return { ref: videoRef, useBrowserAPI: enableBrowserAPI };
 };

packages/pluggableWidgets/barcode-scanner-web/src/hooks/zxReader.ts

@@ -62,7 +62,7 @@ export class Reader implements MxBarcodeReader {
                 }
             }
         } finally {
-            stop();
+            this.stop();
             stream?.getVideoTracks().forEach(track => track.stop());
         }
     };