@speechly/react-ui - npm Package Compare versions

Comparing version 2.1.3 to 2.2.0

lib/components/PushToTalkButton.d.ts

@@ -74,10 +74,11 @@ import React from 'react';
     voffset?: string;
+    /**
+     * Optional time in milliseconds to listen after tap. Set to 0 to disable tap-to-talk. Default: "8000" (ms)
+     */
+    tapToTalkTime?: number;
+    /**
+     * Optional milliseconds of silence to listen before hangup. Only used in tap-to-talk mode. Default: "1000" (ms)
+     */
+    silenceToHangupTime?: number;
 };
-/**
- * A React component that renders a push-to-talk microphone button.
- *
- * Make sure to place this component inside your `SpeechProvider` component imported from `@speechly/react-client`.
- *
- * @public
- */
 export declare const PushToTalkButton: React.FC<PushToTalkButtonProps>;

lib/components/PushToTalkButton.js

@@ -33,18 +33,15 @@ "use strict";
 var __1 = require("..");
-/**
- * A React component that renders a push-to-talk microphone button.
- *
- * Make sure to place this component inside your `SpeechProvider` component imported from `@speechly/react-client`.
- *
- * @public
- */
 var PushToTalkButton = function (_a) {
-    var _b = _a.powerOn, powerOn = _b === void 0 ? false : _b, _c = _a.hide, hide = _c === void 0 ? false : _c, captureKey = _a.captureKey, _d = _a.size, size = _d === void 0 ? '6.0rem' : _d, _e = _a.gradientStops, gradientStops = _e === void 0 ? ['#15e8b5', '#4fa1f9'] : _e, _f = _a.intro, intro = _f === void 0 ? 'Hold to talk' : _f, _g = _a.hint, hint = _g === void 0 ? 'Hold to talk' : _g, fontSize = _a.fontSize, showTime = _a.showTime, textColor = _a.textColor, backgroundColor = _a.backgroundColor, placement = _a.placement, voffset = _a.voffset;
-    var _h = (0, react_client_1.useSpeechContext)(), speechState = _h.speechState, toggleRecording = _h.toggleRecording, initialise = _h.initialise;
-    var _j = (0, react_1.useState)((powerOn ? react_client_1.SpeechState.Idle : react_client_1.SpeechState.Ready)), icon = _j[0], setIcon = _j[1];
-    var _k = (0, react_1.useState)(intro), hintText = _k[0], setHintText = _k[1];
-    var _l = (0, react_1.useState)(true), showHint = _l[0], setShowHint = _l[1];
+    var _b = _a.powerOn, powerOn = _b === void 0 ? false : _b, _c = _a.hide, hide = _c === void 0 ? false : _c, captureKey = _a.captureKey, _d = _a.size, size = _d === void 0 ? '6.0rem' : _d, _e = _a.gradientStops, gradientStops = _e === void 0 ? ['#15e8b5', '#4fa1f9'] : _e, _f = _a.intro, intro = _f === void 0 ? 'Hold to talk' : _f, _g = _a.hint, hint = _g === void 0 ? 'Hold to talk' : _g, fontSize = _a.fontSize, showTime = _a.showTime, textColor = _a.textColor, backgroundColor = _a.backgroundColor, placement = _a.placement, voffset = _a.voffset, _h = _a.tapToTalkTime, tapToTalkTime = _h === void 0 ? 8000 : _h, _j = _a.silenceToHangupTime, silenceToHangupTime = _j === void 0 ? 1000 : _j;
+    var _k = (0, react_client_1.useSpeechContext)(), speechState = _k.speechState, toggleRecording = _k.toggleRecording, initialise = _k.initialise, segment = _k.segment;
+    var _l = (0, react_1.useState)((powerOn ? react_client_1.SpeechState.Idle : react_client_1.SpeechState.Ready)), icon = _l[0], setIcon = _l[1];
+    var _m = (0, react_1.useState)(intro), hintText = _m[0], setHintText = _m[1];
+    var _o = (0, react_1.useState)(true), showHint = _o[0], setShowHint = _o[1];
+    var buttonStateRef = (0, react_1.useRef)({
+        holdListening: false,
+        stopContextTimeout: null,
+    });
     var buttonRef = (0, react_1.useRef)();
     var speechStateRef = (0, react_1.useRef)();
-    var SHORT_PRESS_TRESHOLD_MS = 600;
+    var TAP_TRESHOLD_MS = 600;
     // make stateRef always have the current count
@@ -71,6 +68,7 @@ // your "fixed" callbacks can refer to this object whenever
         else {
+            console.log(speechState);
             setIcon(speechState);
         }
         // Automatically start recording if button held
-        if (!powerOn && ((_a = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _a === void 0 ? void 0 : _a.isbuttonpressed()) === true && speechState === react_client_1.SpeechState.Ready) {
+        if (!powerOn && (((_a = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _a === void 0 ? void 0 : _a.isbuttonpressed()) === true || buttonStateRef.current.holdListening) && speechState === react_client_1.SpeechState.Ready) {
             toggleRecording().catch(function (err) { return console.error('Error while starting to record', err); });
@@ -84,2 +82,6 @@ }
         setShowHint(false);
+        if (buttonStateRef.current.stopContextTimeout) {
+            window.clearTimeout(buttonStateRef.current.stopContextTimeout);
+            buttonStateRef.current.stopContextTimeout = null;
+        }
         switch (speechStateRef.current) {
@@ -102,21 +104,48 @@ case react_client_1.SpeechState.Idle:
         window.postMessage({ type: 'holdend' }, '*');
-        switch (speechStateRef === null || speechStateRef === void 0 ? void 0 : speechStateRef.current) {
-            case react_client_1.SpeechState.Ready:
-            case react_client_1.SpeechState.Recording:
-            case react_client_1.SpeechState.Connecting:
-            case react_client_1.SpeechState.Loading:
-                if (event.timeMs < SHORT_PRESS_TRESHOLD_MS) {
-                    setHintText(hint);
-                    setShowHint(true);
+        if (event.timeMs < TAP_TRESHOLD_MS) {
+            if (tapToTalkTime === 0) {
+                setHintText(hint);
+                setShowHint(true);
+            }
+            else {
+                // Short press when not recording = schedule "silence based stop"
+                if (!buttonStateRef.current.holdListening) {
+                    setStopContextTimeout(tapToTalkTime);
                 }
-                break;
+            }
         }
-        switch (speechStateRef.current) {
-            case react_client_1.SpeechState.Recording:
-                toggleRecording().catch(function (err) { return console.error('Error while stopping recording', err); });
-                break;
-            default:
-                break;
+        if (!buttonStateRef.current.stopContextTimeout) {
+            stopListening();
         }
     };
+    var setStopContextTimeout = function (timeoutMs) {
+        buttonStateRef.current.holdListening = true;
+        if (buttonStateRef.current.stopContextTimeout) {
+            window.clearTimeout(buttonStateRef.current.stopContextTimeout);
+        }
+        buttonStateRef.current.stopContextTimeout = window.setTimeout(function () {
+            buttonStateRef.current.stopContextTimeout = null;
+            stopListening();
+        }, timeoutMs);
+    };
+    var stopListening = function () {
+        buttonStateRef.current.holdListening = false;
+        if (isStoppable(speechStateRef.current)) {
+            toggleRecording().catch(function (err) { return console.error('Error while stopping recording', err); });
+        }
+    };
+    /**
+     * Extend listening time if segment updates received
+     */
+    (0, react_1.useEffect)(function () {
+        if (segment) {
+            if (buttonStateRef.current.stopContextTimeout) {
+                setStopContextTimeout(silenceToHangupTime);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [segment]);
+    var isStoppable = function (s) {
+        return (s === react_client_1.SpeechState.Recording);
+    };
     return (react_1.default.createElement("div", null,
@@ -123,0 +152,0 @@ (placement === 'bottom') && (react_1.default.createElement(__1.PushToTalkButtonContainer, { size: size, voffset: voffset },

package.json

 {
   "name": "@speechly/react-ui",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "Speechly UI Components",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
+  "scripts": {
+    "getdeps": "pnpm install && rm -rf 'node_modules/@types/react-native' && rm -rf 'node_modules/.pnpm/@types/react-native@0.63.34/'",
+    "build": "pnpm run lint && rm -rf ./lib/ && pnpx tsc",
+    "build:watch": "rm -rf ./lib/ && pnpx tsc",
+    "lint": "pnpx eslint --cache --max-warnings 0 'src/**/*.{ts,tsx}'",
+    "test": "echo 'Pending...'",
+    "docs": "pnpx typedoc --readme none --excludeExternals --excludePrivate --excludeProtected --out ./docs/ --entryPointStrategy expand --sort required-first --disableSources ./src/",
+    "precommit": "pnpx prettier --write src/**/*.ts && pnpm run build && pnpm run docs",
+    "prerelease": "pnpm run build",
+    "watch": "rm -rf ./lib/ && mkdir lib && pnpx tsc-watch"
+  },
   "keywords": [
@@ -38,3 +49,5 @@ "speechly",
     "@types/react-dom": ">=16.13.1",
-    "@types/styled-components": "^5.1.7"
+    "@types/styled-components": "^5.1.7",
+    "typedoc": "^0.22.6",
+    "typedoc-plugin-markdown": "^3.11.3"
   },
@@ -47,3 +60,3 @@ "peerDependencies": {
   "dependencies": {
-    "@speechly/browser-ui": ">=5.0.1",
+    "@speechly/browser-ui": ">=5.0.2",
     "pubsub-js": "^1.9.2",
@@ -58,15 +71,3 @@ "react-spring": "^8.0.27",
     "access": "public"
-  },
-  "scripts": {
-    "getdeps": "pnpm install && rm -rf 'node_modules/@types/react-native' && rm -rf 'node_modules/.pnpm/@types/react-native@0.63.34/'",
-    "build": "pnpm run lint && rm -rf ./lib/ && pnpx tsc",
-    "build:watch": "rm -rf ./lib/ && pnpx tsc",
-    "lint": "pnpx eslint --cache --max-warnings 0 'src/**/*.{ts,tsx}'",
-    "test": "echo 'Pending...'",
-    "docs": "pnpm run prepdist && pnpx typedoc --readme none --excludeExternals --excludePrivate --excludeProtected --out ./docs/ --plugin typedoc-plugin-markdown --entryPointStrategy expand ./src/",
-    "prepdist": "node ./prepare_dist.js",
-    "precommit": "pnpx prettier --write src/**/*.ts && pnpm run build && pnpm run docs",
-    "prerelease": "pnpm run build && pnpm run prepdist",
-    "watch": "rm -rf ./lib/ && mkdir lib && pnpm run prepdist && pnpx tsc-watch"
   }
-}
+}

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

87634

increased by2.94%

Lines of code

1102

increased by2.89%

Worsened metrics

Dev dependency count

19

increased by11.76%

Dependency changes

• Updated@speechly/browser-ui@>=5.0.2