@speechly/react-ui - npm Package Compare versions

Comparing version 2.4.0 to 2.4.1

lib/components/BigTranscript.js

@@ -61,3 +61,2 @@ "use strict";
 var react_client_1 = require("@speechly/react-client");
-var types_1 = require("../types");
 /**
@@ -72,3 +71,3 @@ * A React component that renders the transcript and entities received from Speechly SLU API.
     var placement = _a.placement, formatText = _a.formatText, fontSize = _a.fontSize, color = _a.color, highlightColor = _a.highlightColor, backgroundColor = _a.backgroundColor, _b = _a.marginBottom, marginBottom = _b === void 0 ? '2rem' : _b, mockSegment = _a.mockSegment;
-    var _c = (0, react_client_1.useSpeechContext)(), segment = _c.segment, speechState = _c.speechState;
+    var _c = (0, react_client_1.useSpeechContext)(), segment = _c.segment, clientState = _c.clientState;
     var refElement = (0, react_1.useRef)();
@@ -94,6 +93,6 @@ var _d = (0, react_1.useState)(false), loaded = _d[0], setLoaded = _d[1];
     (0, react_1.useEffect)(function () {
-        if ((refElement === null || refElement === void 0 ? void 0 : refElement.current) !== undefined && speechState !== undefined) {
-            refElement.current.speechstate((0, types_1.mapSpeechStateToClientState)(speechState));
+        if ((refElement === null || refElement === void 0 ? void 0 : refElement.current) !== undefined && clientState !== undefined) {
+            refElement.current.speechstate(clientState);
         }
-    }, [speechState]);
+    }, [clientState]);
     (0, react_1.useEffect)(function () {
@@ -100,0 +99,0 @@ if ((refElement === null || refElement === void 0 ? void 0 : refElement.current) !== undefined && segment !== undefined) {

lib/components/PushToTalkButton.js

 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
@@ -67,16 +71,20 @@ if (k2 === undefined) k2 = k;
 var __1 = require("..");
+var styled_components_1 = __importDefault(require("styled-components"));
 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, _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)(false), loaded = _l[0], setLoaded = _l[1];
-    var _m = (0, react_1.useState)((powerOn ? react_client_1.SpeechState.Idle : react_client_1.SpeechState.Ready)), icon = _m[0], setIcon = _m[1];
-    var _o = (0, react_1.useState)(intro), hintText = _o[0], setHintText = _o[1];
-    var _p = (0, react_1.useState)(true), showHint = _p[0], setShowHint = _p[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, _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 buttonStateRef = (0, react_1.useRef)({
         tapListenActive: false,
+        holdListenActive: false,
         tapListenTimeout: null,
+        tangentPressPromise: null,
     });
     var buttonRef = (0, react_1.useRef)();
-    var speechStateRef = (0, react_1.useRef)();
+    var clientStateRef = (0, react_1.useRef)();
     var TAP_TRESHOLD_MS = 600;
+    var PERMISSION_PRE_GRANTED_TRESHOLD_MS = 1500;
     // make stateRef always have the current count
@@ -87,3 +95,3 @@ // your "fixed" callbacks can refer to this object whenever
     // but they *will* see the current value whenever they do run
-    speechStateRef.current = speechState;
+    clientStateRef.current = clientState;
     // Dynamic import of HTML custom element to play nice with Next.js SSR
@@ -117,73 +125,111 @@ (0, react_1.useEffect)(function () {
     (0, react_1.useEffect)(function () {
-        var _a;
         // Change button face according to Speechly states
-        if (!powerOn && speechState === react_client_1.SpeechState.Idle) {
-            setIcon(react_client_1.SpeechState.Ready);
+        if (!powerOn && clientState === react_client_1.ClientState.Disconnected) {
+            setIcon(react_client_1.ClientState.Connected);
         }
         else {
-            setIcon(speechState);
+            setIcon(clientState);
         }
         // 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 || buttonStateRef.current.tapListenActive) && speechState === react_client_1.SpeechState.Ready) {
-            toggleRecording().catch(function (err) { return console.error('Error while starting to record', err); });
+        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
-    }, [speechState]);
-    var tangentPressAction = function () {
-        pubsub_js_1.default.publish(types_1.SpeechlyUiEvents.TangentPress, { state: speechStateRef.current });
-        window.postMessage({ type: 'holdstart', state: (0, types_1.mapSpeechStateToClientState)(speechStateRef.current !== undefined ? speechStateRef.current : react_client_1.SpeechState.Idle) }, '*');
-        setShowHint(false);
+    }, [clientState]);
+    var tangentPressAction = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            buttonStateRef.current.tangentPressPromise = (function () { return __awaiter(void 0, void 0, void 0, function () {
+                var _a, initStartTime;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            pubsub_js_1.default.publish(types_1.SpeechlyUiEvents.TangentPress, { state: clientStateRef.current });
+                            window.postMessage({ type: 'holdstart', state: clientStateRef.current }, '*');
+                            setShowHint(false);
+                            if (buttonStateRef.current.tapListenTimeout) {
+                                window.clearTimeout(buttonStateRef.current.tapListenTimeout);
+                                buttonStateRef.current.tapListenTimeout = null;
+                            }
+                            _a = clientStateRef.current;
+                            switch (_a) {
+                                case react_client_1.ClientState.Disconnected: return [3 /*break*/, 1];
+                                case react_client_1.ClientState.Failed: return [3 /*break*/, 1];
+                            }
+                            return [3 /*break*/, 3];
+                        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
+                            ];
+                        case 2:
+                            _b.sent();
+                            // 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:
+                            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:
+                            _b.sent();
+                            _b.label = 6;
+                        case 6: return [2 /*return*/];
+                    }
+                });
+            }); })();
+            return [2 /*return*/];
+        });
+    }); };
+    var tangentReleaseAction = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: 
+                // Ensure async tangentPress and Release are run in appropriate order
+                return [4 /*yield*/, buttonStateRef.current.tangentPressPromise];
+                case 1:
+                    // Ensure async tangentPress and Release are run in appropriate order
+                    _a.sent();
+                    pubsub_js_1.default.publish(types_1.SpeechlyUiEvents.TangentRelease, { state: clientStateRef.current, timeMs: event.timeMs });
+                    window.postMessage({ type: 'holdend' }, '*');
+                    if (buttonStateRef.current.holdListenActive) {
+                        buttonStateRef.current.holdListenActive = false;
+                        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.tapListenActive) {
+                                    setStopContextTimeout(tapToTalkTime);
+                                }
+                            }
+                        }
+                        if (!buttonStateRef.current.tapListenTimeout) {
+                            stopListening();
+                        }
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var setStopContextTimeout = function (timeoutMs) {
+        buttonStateRef.current.tapListenActive = true;
         if (buttonStateRef.current.tapListenTimeout) {
             window.clearTimeout(buttonStateRef.current.tapListenTimeout);
+        }
+        buttonStateRef.current.tapListenTimeout = window.setTimeout(function () {
             buttonStateRef.current.tapListenTimeout = null;
-        }
-        switch (speechStateRef.current) {
-            case react_client_1.SpeechState.Idle:
-            case react_client_1.SpeechState.Failed:
-                // Speechly & Mic initialise needs to be in a function triggered by event handler
-                // otherwise it won't work reliably on Safari iOS as of 11/2020
-                initialise().catch(function (err) { return console.error('Error initiasing Speechly', err); });
-                break;
-            case react_client_1.SpeechState.Ready:
-                toggleRecording().catch(function (err) { return console.error('Error while starting to record', err); });
-                break;
-            default:
-                break;
-        }
-    };
-    var tangentReleaseAction = function (event) {
-        pubsub_js_1.default.publish(types_1.SpeechlyUiEvents.TangentRelease, { state: speechStateRef.current, timeMs: event.timeMs });
-        window.postMessage({ type: 'holdend' }, '*');
-        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.tapListenActive) {
-                    setStopContextTimeout(tapToTalkTime);
-                }
-            }
-        }
-        if (!buttonStateRef.current.tapListenTimeout) {
             stopListening();
-        }
+        }, timeoutMs);
     };
-    var setStopContextTimeout = function (timeoutMs) {
-        if (isStoppable(speechState)) {
-            buttonStateRef.current.tapListenActive = true;
-            if (buttonStateRef.current.tapListenTimeout) {
-                window.clearTimeout(buttonStateRef.current.tapListenTimeout);
-            }
-            buttonStateRef.current.tapListenTimeout = window.setTimeout(function () {
-                buttonStateRef.current.tapListenTimeout = null;
-                stopListening();
-            }, timeoutMs);
-        }
-    };
     var stopListening = function () {
         buttonStateRef.current.tapListenActive = false;
-        if (isStoppable(speechStateRef.current)) {
-            toggleRecording().catch(function (err) { return console.error('Error while stopping recording', err); });
+        if (isStoppable(clientStateRef.current)) {
+            stopContext().catch(function (err) { return console.error('Error while stopping recording', err); });
         }
@@ -203,15 +249,17 @@ };
     var isStoppable = function (s) {
-        return (s === react_client_1.SpeechState.Recording);
+        return (s === react_client_1.ClientState.Recording);
     };
     if (!loaded)
         return null;
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement(MicButtonDiv, { textColor: textColor, fontSize: fontSize },
         (placement === 'bottom') && (react_1.default.createElement(__1.PushToTalkButtonContainer, { size: size, voffset: voffset },
             react_1.default.createElement("holdable-button", { ref: buttonRef, poweron: powerOn, capturekey: captureKey, icon: icon, size: size, gradientstop1: gradientStops[0], gradientstop2: gradientStops[1], hide: hide ? 'true' : 'false' }),
-            react_1.default.createElement("call-out", { show: showHint && hintText !== '', fontsize: fontSize, textcolor: textColor, backgroundcolor: backgroundColor, showtime: showTime }, hintText))),
+            react_1.default.createElement("call-out", { show: showHint && hintText !== '', backgroundcolor: backgroundColor, showtime: showTime }, hintText))),
         (placement !== 'bottom') && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("holdable-button", { ref: buttonRef, poweron: powerOn, capturekey: captureKey, icon: icon, size: size, gradientstop1: gradientStops[0], gradientstop2: gradientStops[1], hide: hide ? 'true' : 'false' }),
-            react_1.default.createElement("call-out", { show: showHint && hintText !== '', fontsize: fontSize, textcolor: textColor, backgroundcolor: backgroundColor, showtime: showTime }, hintText)))));
+            react_1.default.createElement("call-out", { show: showHint && hintText !== '', backgroundcolor: backgroundColor, showtime: showTime }, hintText)))));
 };
 exports.PushToTalkButton = PushToTalkButton;
+var MicButtonDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: 'Saira Condensed', sans-serif;\n  color: ", ";\n  font-size: ", ";\n  line-height: 120%;\n  text-transform: uppercase;\n"], ["\n  font-family: 'Saira Condensed', sans-serif;\n  color: ", ";\n  font-size: ", ";\n  line-height: 120%;\n  text-transform: uppercase;\n"])), function (props) { return props.textColor; }, function (props) { return props.fontSize; });
+var templateObject_1;
 //# sourceMappingURL=PushToTalkButton.js.map

lib/components/TranscriptDrawer.js

@@ -61,3 +61,2 @@ "use strict";
 var react_client_1 = require("@speechly/react-client");
-var types_1 = require("../types");
 /**
@@ -71,3 +70,3 @@ * A React component that renders the transcript and entities received from Speechly SLU API.
 var TranscriptDrawer = function (props) {
-    var _a = (0, react_client_1.useSpeechContext)(), segment = _a.segment, speechState = _a.speechState;
+    var _a = (0, react_client_1.useSpeechContext)(), segment = _a.segment, clientState = _a.clientState;
     var refElement = (0, react_1.useRef)();
@@ -93,5 +92,5 @@ var _b = (0, react_1.useState)(false), loaded = _b[0], setLoaded = _b[1];
         if ((refElement === null || refElement === void 0 ? void 0 : refElement.current) !== undefined) {
-            refElement.current.speechstate((0, types_1.mapSpeechStateToClientState)(speechState));
+            refElement.current.speechstate(clientState);
         }
-    }, [speechState]);
+    }, [clientState]);
     (0, react_1.useEffect)(function () {
@@ -98,0 +97,0 @@ if ((refElement === null || refElement === void 0 ? void 0 : refElement.current) !== undefined && segment !== undefined) {

lib/types.d.ts

@@ -1,3 +0,1 @@
-import { ClientState } from '@speechly/browser-client';
-import { SpeechState } from '@speechly/react-client';
 export declare enum SpeechlyUiEvents {
@@ -10,2 +8,1 @@ TangentRelease = "TangentRelease",
 }
-export declare const mapSpeechStateToClientState: (s: SpeechState) => ClientState;

lib/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mapSpeechStateToClientState = exports.SpeechlyUiEvents = void 0;
-var browser_client_1 = require("@speechly/browser-client");
-var react_client_1 = require("@speechly/react-client");
+exports.SpeechlyUiEvents = void 0;
 var SpeechlyUiEvents;
@@ -15,27 +13,2 @@ (function (SpeechlyUiEvents) {
 ;
-var mapSpeechStateToClientState = function (s) {
-    switch (s) {
-        case react_client_1.SpeechState.Failed:
-            return browser_client_1.ClientState.Failed;
-        case react_client_1.SpeechState.NoBrowserSupport:
-            return browser_client_1.ClientState.NoBrowserSupport;
-        case react_client_1.SpeechState.NoAudioConsent:
-            return browser_client_1.ClientState.NoAudioConsent;
-        case react_client_1.SpeechState.Idle:
-            return browser_client_1.ClientState.Disconnected;
-        // return ClientState.Disconnecting:
-        case react_client_1.SpeechState.Connecting:
-            return browser_client_1.ClientState.Connecting;
-        case react_client_1.SpeechState.Ready:
-            return browser_client_1.ClientState.Connected;
-        case react_client_1.SpeechState.Recording:
-            // return ClientState.Starting:
-            return browser_client_1.ClientState.Recording;
-        case react_client_1.SpeechState.Loading:
-            return browser_client_1.ClientState.Stopping;
-        default:
-            return browser_client_1.ClientState.Failed;
-    }
-};
-exports.mapSpeechStateToClientState = mapSpeechStateToClientState;
 //# sourceMappingURL=types.js.map

package.json

 {
   "name": "@speechly/react-ui",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Speechly UI Components",
@@ -59,3 +59,3 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@speechly/browser-ui": "5.0.7",
+    "@speechly/browser-ui": "5.1.0",
     "pubsub-js": "^1.9.2",
@@ -62,0 +62,0 @@ "react-spring": "^8.0.27",

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

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

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

129286

increased by1.8%

Lines of code

2280

increased by1.11%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

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

• + Addednanoid@3.3.7(transitive)

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

• - Removednanoid@3.3.8(transitive)

• Updated@speechly/browser-ui@5.1.0