From 55af0bc1e0e347012d433fde1bf8fcb53d348cf7 Mon Sep 17 00:00:00 2001
From: Albert Ho <82767499+albho@users.noreply.github.com>
Date: Thu, 30 Nov 2023 14:55:22 -0800
Subject: [PATCH] React v2.0.2 patch (#337)

---
 binding/react/README.md                |  2 +-
 binding/react/package.json             |  2 +-
 binding/react/src/use_leopard.ts       | 14 ++++++-------
 binding/react/test/use_leopard.test.ts | 29 ++++++++++++++++++++++++++
 demo/react/package.json                |  2 +-
 demo/react/yarn.lock                   |  8 +++----
 6 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/binding/react/README.md b/binding/react/README.md
index 1df58f52..c4ec3133 100644
--- a/binding/react/README.md
+++ b/binding/react/README.md
@@ -47,7 +47,7 @@ npm install --save @picovoice/leopard-react @picovoice/web-voice-processor
 
 ## Usage
 
-Leopard requires a model file (`.pv`) at initialization. Use one of the default language models found in [lib/common](../../lib/common), or create a custom Leopard model in the [Picovoice Console](https://console.picovoice.ai/) for the target platform `Web (WASM)`.
+Leopard requires a model file (`.pv`) at initialization. Use one of the default language models found in [lib/common](https://github.com/Picovoice/leopard/tree/master/lib/common), or create a custom Leopard model in the [Picovoice Console](https://console.picovoice.ai/) for the target platform `Web (WASM)`.
 
 There are two methods to initialize Leopard.
 
diff --git a/binding/react/package.json b/binding/react/package.json
index f218be7d..4aff5b28 100644
--- a/binding/react/package.json
+++ b/binding/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@picovoice/leopard-react",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "React hook for Leopard Web SDK",
   "entry": "src/index.ts",
   "module": "dist/esm/index.js",
diff --git a/binding/react/src/use_leopard.ts b/binding/react/src/use_leopard.ts
index ee245a5d..714ef272 100644
--- a/binding/react/src/use_leopard.ts
+++ b/binding/react/src/use_leopard.ts
@@ -149,14 +149,12 @@ export const useLeopard = (): {
 
   const stopRecording = useCallback(async (): Promise<void> => {
     try {
-      if (!isRecording) {
+      if (!timerRef.current) {
         return;
       }
 
-      if (timerRef.current) {
-        clearInterval(timerRef.current);
-        timerRef.current = null;
-      }
+      clearInterval(timerRef.current);
+      timerRef.current = null;
 
       await WebVoiceProcessor.unsubscribe(recorderEngineRef.current);
       setIsRecording(false);
@@ -171,7 +169,7 @@ export const useLeopard = (): {
     } catch (e: any) {
       setError(e);
     }
-  }, [isRecording]);
+  }, []);
 
   const startRecording = useCallback(
     async (maxRecordingSec = DEFAULT_MAX_RECORDING_SEC): Promise<void> => {
@@ -182,7 +180,7 @@ export const useLeopard = (): {
         return;
       }
 
-      if (isRecording) {
+      if (timerRef.current) {
         return;
       }
 
@@ -209,7 +207,7 @@ export const useLeopard = (): {
         setError(e);
       }
     },
-    [isRecording]
+    []
   );
 
   const release = useCallback(async (): Promise<void> => {
diff --git a/binding/react/test/use_leopard.test.ts b/binding/react/test/use_leopard.test.ts
index be204df0..12236293 100644
--- a/binding/react/test/use_leopard.test.ts
+++ b/binding/react/test/use_leopard.test.ts
@@ -191,6 +191,35 @@ describe('Leopard binding', () => {
     });
   });
 
+  it('should be able to stop audio recording if limit reached', () => {
+    const { result } = renderHook(() => useLeopard());
+    const MAX_RECORDING_SEC = 1;
+
+    cy.wrapHook(() =>
+      result.current.init(ACCESS_KEY, {
+        publicPath: '/test/leopard_params.pv',
+        forceWrite: true,
+      })
+    ).then(() => {
+      expect(
+        result.current.isLoaded,
+        `Failed to load 'leopard_params.pv' with ${result.current.error}`
+      ).to.be.true;
+    });
+
+    cy.wrapHook(() => result.current.startRecording(MAX_RECORDING_SEC))
+      .then(() => {
+        expect(result.current.isRecording).to.be.true;
+      })
+      .wait(MAX_RECORDING_SEC * 1000)
+      .then(() => {
+        expect(result.current.isRecording).to.be.false;
+        expect(result.current.error?.toString()).to.contain(
+          'Maximum recording time reached'
+        );
+      });
+  });
+
   for (const testParam of testData.tests.language_tests) {
     const suffix = testParam.language === 'en' ? '' : `_${testParam.language}`;
 
diff --git a/demo/react/package.json b/demo/react/package.json
index 2d2d7e4b..5796dc02 100644
--- a/demo/react/package.json
+++ b/demo/react/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "description": "Leopard React demo (made with Create React App)",
   "dependencies": {
-    "@picovoice/leopard-react": "=2.0.1",
+    "@picovoice/leopard-react": "=2.0.2",
     "@picovoice/web-voice-processor": "~4.0.8",
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.17",
diff --git a/demo/react/yarn.lock b/demo/react/yarn.lock
index aa682e28..a20d0068 100644
--- a/demo/react/yarn.lock
+++ b/demo/react/yarn.lock
@@ -1608,10 +1608,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@picovoice/leopard-react@=2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@picovoice/leopard-react/-/leopard-react-2.0.1.tgz#5b9c3bc49ec708e0993bc9fbd65926de8ed98eda"
-  integrity sha512-pj0Q3xfuBdHfH9WsF1pu5Zo/pN+Yr8IkHE0RxveitTC/7MGMGXB+xWtU4wPiUYuezePNhwc4FOB12xxWGetQcQ==
+"@picovoice/leopard-react@=2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@picovoice/leopard-react/-/leopard-react-2.0.2.tgz#9bd78b85c837039ae17cf14e1a5dbb3b4da25eb6"
+  integrity sha512-UxbgXK49SeJ6jmSGsitFJtG3tiKm7N6v86D2UiWjwDN+RIrAu7pC9DpO5TZtFdl99hiCu7Ju/dCkC11GS6rwGg==
   dependencies:
     "@picovoice/leopard-web" "=2.0.1"