@speechly/react-ui - npm Package Compare versions

Comparing version 2.4.2 to 2.5.0

lib/components/Notifications.js

@@ -53,3 +53,3 @@ "use strict";
 var Notifications = function (props) {
-    var speechState = (0, react_client_1.useSpeechContext)().speechState;
+    var clientState = (0, react_client_1.useSpeechContext)().clientState;
     var _a = (0, react_1.useState)(null), notification = _a[0], setNotification = _a[1];
@@ -109,8 +109,8 @@ /*
     (0, react_1.useEffect)(function () {
-        switch (speechState) {
-            case react_client_1.SpeechState.Recording: {
+        switch (clientState) {
+            case react_client_1.ClientState.Recording: {
                 hideHints();
             }
         }
-    }, [speechState]);
+    }, [clientState]);
     var hideHints = function () {
@@ -117,0 +117,0 @@ setNotification(function (prev) { return (prev !== null ? __assign(__assign({}, prev), { visible: false }) : null); });

lib/components/PushToTalkButton.js

@@ -73,10 +73,11 @@ "use strict";
 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, _h = _a.fontSize, fontSize = _h === void 0 ? '120%' : _h, showTime = _a.showTime, _j = _a.textColor, textColor = _j === void 0 ? '#ffffff' : _j, backgroundColor = _a.backgroundColor, placement = _a.placement, voffset = _a.voffset, _k = _a.tapToTalkTime, tapToTalkTime = _k === void 0 ? 8000 : _k, _l = _a.silenceToHangupTime, silenceToHangupTime = _l === void 0 ? 1000 : _l;
-    var _m = (0, react_client_1.useSpeechContext)(), clientState = _m.clientState, initialise = _m.initialise, startContext = _m.startContext, stopContext = _m.stopContext, segment = _m.segment;
-    var _o = (0, react_1.useState)(false), loaded = _o[0], setLoaded = _o[1];
-    var _p = (0, react_1.useState)((powerOn ? react_client_1.ClientState.Disconnected : react_client_1.ClientState.Connected)), icon = _p[0], setIcon = _p[1];
-    var _q = (0, react_1.useState)(intro), hintText = _q[0], setHintText = _q[1];
-    var _r = (0, react_1.useState)(true), showHint = _r[0], setShowHint = _r[1];
+    var _b = _a.powerOn, powerOn = _b === void 0 ? false : _b, _c = _a.hide, hide = _c === void 0 ? false : _c, captureKey = _a.captureKey, size = _a.size, _d = _a.gradientStops, gradientStops = _d === void 0 ? ['#15e8b5', '#4fa1f9'] : _d, _e = _a.intro, intro = _e === void 0 ? 'Hold to talk' : _e, _f = _a.hint, hint = _f === void 0 ? 'Hold to talk' : _f, _g = _a.fontSize, fontSize = _g === void 0 ? '100%' : _g, showTime = _a.showTime, _h = _a.textColor, textColor = _h === void 0 ? '#ffffff' : _h, backgroundColor = _a.backgroundColor, placement = _a.placement, voffset = _a.voffset, _j = _a.tapToTalkTime, tapToTalkTime = _j === void 0 ? 8000 : _j, _k = _a.silenceToHangupTime, silenceToHangupTime = _k === void 0 ? 1000 : _k;
+    var _l = (0, react_client_1.useSpeechContext)(), client = _l.client, clientState = _l.clientState, initialize = _l.initialize, startContext = _l.startContext, stopContext = _l.stopContext, segment = _l.segment;
+    var _m = (0, react_1.useState)(false), loaded = _m[0], setLoaded = _m[1];
+    var _o = (0, react_1.useState)((powerOn ? react_client_1.ClientState.Disconnected : react_client_1.ClientState.Connected)), icon = _o[0], setIcon = _o[1];
+    var _p = (0, react_1.useState)(intro), hintText = _p[0], setHintText = _p[1];
+    var _q = (0, react_1.useState)(true), showHint = _q[0], setShowHint = _q[1];
     var buttonStateRef = (0, react_1.useRef)({
         tapListenActive: false,
+        wasListening: false,
         holdListenActive: false,
@@ -131,6 +132,2 @@ tapListenTimeout: null,
         }
-        // Automatically start recording if button held
-        if (!powerOn && (buttonStateRef.current.holdListenActive || buttonStateRef.current.tapListenActive) && clientStateRef.current === react_client_1.ClientState.Connected) {
-            startContext().catch(function (err) { return console.error('Error while starting to record', err); });
-        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -141,3 +138,3 @@ }, [clientState]);
             buttonStateRef.current.tangentPressPromise = (function () { return __awaiter(void 0, void 0, void 0, function () {
-                var _a, initStartTime;
+                var _a, initStartTime, err_1, err_2;
                 return __generator(this, function (_b) {
@@ -156,28 +153,44 @@ switch (_b.label) {
                                 case react_client_1.ClientState.Disconnected: return [3 /*break*/, 1];
-                                case react_client_1.ClientState.Failed: return [3 /*break*/, 1];
                             }
-                            return [3 /*break*/, 3];
+                            return [3 /*break*/, 6];
                         case 1:
                             initStartTime = Date.now();
-                            return [4 /*yield*/, initialise().catch(function (err) { return console.error('Error initiasing Speechly', err); })
-                                // await buttonStateRef.current.initPromise
-                                // Long init time suggests permission dialog --> prevent listening start
-                            ];
+                            _b.label = 2;
                         case 2:
+                            _b.trys.push([2, 4, , 5]);
+                            return [4 /*yield*/, initialize()];
+                        case 3:
                             _b.sent();
+                            return [3 /*break*/, 5];
+                        case 4:
+                            err_1 = _b.sent();
+                            console.error('Error initiasing Speechly', err_1);
+                            return [3 /*break*/, 5];
+                        case 5:
                             // await buttonStateRef.current.initPromise
                             // Long init time suggests permission dialog --> prevent listening start
                             buttonStateRef.current.holdListenActive = !powerOn && Date.now() - initStartTime < PERMISSION_PRE_GRANTED_TRESHOLD_MS;
-                            return [3 /*break*/, 4];
-                        case 3:
+                            return [3 /*break*/, 7];
+                        case 6:
                             buttonStateRef.current.holdListenActive = true;
-                            return [3 /*break*/, 4];
-                        case 4:
-                            if (!buttonStateRef.current.holdListenActive) return [3 /*break*/, 6];
-                            if (!(clientStateRef.current === react_client_1.ClientState.Connected)) return [3 /*break*/, 6];
-                            return [4 /*yield*/, startContext().catch(function (err) { return console.error('Error while starting to record', err); })];
-                        case 5:
+                            return [3 /*break*/, 7];
+                        case 7:
+                            if (!client) return [3 /*break*/, 12];
+                            if (!buttonStateRef.current.holdListenActive) return [3 /*break*/, 11];
+                            buttonStateRef.current.wasListening = client.isListening();
+                            if (!!client.isListening()) return [3 /*break*/, 11];
+                            _b.label = 8;
+                        case 8:
+                            _b.trys.push([8, 10, , 11]);
+                            return [4 /*yield*/, startContext()];
+                        case 9:
                             _b.sent();
-                            _b.label = 6;
-                        case 6: return [2 /*return*/];
+                            return [3 /*break*/, 11];
+                        case 10:
+                            err_2 = _b.sent();
+                            console.error('Error while starting to record', err_2);
+                            return [3 /*break*/, 11];
+                        case 11: return [3 /*break*/, 13];
+                        case 12: throw Error('No Speechly client (are you using Speechly in non-browser environment?)');
+                        case 13: return [2 /*return*/];
                     }
@@ -208,4 +221,8 @@ });
                             else {
-                                // Short press when not recording = schedule "silence based stop"
-                                if (!buttonStateRef.current.tapListenActive) {
+                                // Tap: toggle listening on/off
+                                if (buttonStateRef.current.wasListening) {
+                                    stopListening();
+                                }
+                                else {
+                                    // schedule "silence based stop"
                                     setStopContextTimeout(tapToTalkTime);
@@ -215,3 +232,3 @@ }
                         }
-                        if (!buttonStateRef.current.tapListenTimeout) {
+                        else {
                             stopListening();
@@ -236,4 +253,10 @@ }
         buttonStateRef.current.tapListenActive = false;
-        if (isStoppable(clientStateRef.current)) {
-            stopContext().catch(function (err) { return console.error('Error while stopping recording', err); });
+        if (client === null || client === void 0 ? void 0 : client.isListening()) {
+            try {
+                // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                stopContext();
+            }
+            catch (err) {
+                console.error('Error while stopping recording', err);
+            }
         }
@@ -252,5 +275,2 @@ };
     }, [segment]);
-    var isStoppable = function (s) {
-        return (s === react_client_1.ClientState.Recording);
-    };
     if (!loaded)
@@ -257,0 +277,0 @@ return null;

lib/components/PushToTalkContainer.js

@@ -42,3 +42,3 @@ "use strict";
 var PushToTalkButtonContainer = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? '6rem' : _b, _c = _a.voffset, voffset = _c === void 0 ? '3rem' : _c, children = _a.children;
+    var _b = _a.size, size = _b === void 0 ? '80px' : _b, _c = _a.voffset, voffset = _c === void 0 ? '40px' : _c, children = _a.children;
     return react_1.default.createElement(PushToTalkContainerDiv, { size: size, voffset: voffset }, children);
@@ -45,0 +45,0 @@ };

package.json

 {
   "name": "@speechly/react-ui",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "description": "Speechly UI Components",
@@ -33,4 +33,4 @@ "main": "./lib/index.js",
   "devDependencies": {
-    "@speechly/react-client": "1.2.1",
-    "@speechly/browser-client": "1.3.0",
+    "@speechly/react-client": "2.0.0",
+    "@speechly/browser-client": "1.4.0",
     "@typescript-eslint/eslint-plugin": "^4.4.0",
@@ -55,3 +55,3 @@ "@typescript-eslint/parser": "^4.4.0",
   "peerDependencies": {
-    "@speechly/react-client": "1.2.1",
+    "@speechly/react-client": "2.0.0",
     "react": ">=16.13.1",
@@ -61,3 +61,3 @@ "react-dom": ">=16.13.1"
   "dependencies": {
-    "@speechly/browser-ui": "5.1.1",
+    "@speechly/browser-ui": "5.2.0",
     "pubsub-js": "^1.9.2",
@@ -64,0 +64,0 @@ "react-spring": "^8.0.27",

README.md

@@ -117,11 +117,11 @@ <div align="center" markdown="1">
 
-1. **Offline** (Power-on icon): Pressing the button initialises the Speechly API and may trigger the browser's microphone permission prompt. Shown during `SpeechlyState.Idle`
+1. **Offline** (Power-on icon): Pressing the button initialises the Speechly API and may trigger the browser's microphone permission prompt. Shown during `ClientState.Idle`
 
-2. **Ready** (Mic icon). Waiting for user to press and hold the button to start listening. Shown during `SpeechlyState.Ready`
+2. **Connected** (Mic icon). Waiting for user to press and hold the button to start listening. Shown during `ClientState.Connected`
 
-3. **Listening** (Highlighted mic). This state is displayed when the component is being held down and Speechly listens for audio input. Shown during `SpeechlyState.Recording`
+3. **Listening** (Highlighted mic). This state is displayed when the component is being held down and Speechly listens for audio input. Shown during `ClientState.Recording`
 
-4. **Receiving transcript** (Pulsating mic). This state may be briefly displayed when the button is released and Speechly finalizes the stream of results. Shown during `SpeechlyState.Loading`
+4. **Receiving transcript** (Pulsating mic). This state may be briefly displayed when the button is released and Speechly finalizes the stream of results. Shown during `ClientState.Loading`
 
-5. **Error** (Broken mic icon). In case of an error (usually during initialisation), the button turns into a broken mic symbol. If you have the optional `<ErrorPanel/>` component in your hierarchy, a description of the problem is displayed. Otherwise, you'll need to look into the browser console to discover the reason for the error. Shown in case of `SpeechlyState.Failed`, `SpeechlyState.NoAudioConsent`, `SpeechlyState.NoBrowserSupport`
+5. **Error** (Broken mic icon). In case of an error (usually during initialisation), the button turns into a broken mic symbol. If you have the optional `<ErrorPanel/>` component in your hierarchy, a description of the problem is displayed. Otherwise, you'll need to look into the browser console to discover the reason for the error. Shown in case of `ClientState.Failed`, `ClientState.NoAudioConsent`, `ClientState.NoBrowserSupport`
 
@@ -128,0 +128,0 @@ ## BigTranscript component

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

129399

increased by0.09%

Lines of code

2314

increased by1.49%

Dependency changes

• + Added@speechly/browser-client@1.4.0(transitive)

• + Added@speechly/browser-ui@5.2.0(transitive)

• + Added@speechly/react-client@2.0.0(transitive)

• - Removed@speechly/browser-client@1.3.0(transitive)

• - Removed@speechly/browser-ui@5.1.1(transitive)

• - Removed@speechly/react-client@1.2.1(transitive)

• Updated@speechly/browser-ui@5.2.0