@speechly/react-client - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

dist/context.d.ts

 import React from 'react';
-import { ClientOptions, ClientState, Client } from '@speechly/browser-client';
+import { DecoderOptions, DecoderState, BrowserClient, BrowserMicrophone, AudioSourceState } from '@speechly/browser-client';
 import { TentativeSpeechTranscript, TentativeSpeechEntities, TentativeSpeechIntent, SpeechTranscript, SpeechEntity, SpeechIntent, SpeechSegment } from './types';
@@ -27,21 +27,12 @@ /**
      */
-    initialize: () => Promise<void>;
+    attachMicrophone: () => Promise<void>;
     /**
-     * @deprecated Use client.isListening(), startContext() and stopContext() instead
-     * Toggles listening on or off. Automatically initialises the API connection and audio stack.
-     */
-    toggleRecording: () => Promise<string>;
-    /**
      * Turns listening on. Automatically initialises the API connection and audio stack.
      */
-    startContext: () => Promise<string>;
+    start: () => Promise<string>;
     /**
      * Turns listening off.
      */
-    stopContext: () => Promise<string>;
+    stop: () => Promise<void>;
     /**
-     * Switch appId in multi-app project.
-     */
-    switchApp: (appId: string) => void;
-    /**
      * Current appId in multi-app project.
@@ -60,4 +51,8 @@ */
      */
-    clientState: ClientState;
+    clientState: DecoderState;
     /**
+     * Current state of the microphone
+     */
+    microphoneState: AudioSourceState;
+    /**
      * Last tentative transcript received from the API. Resets after current segment is finalised.
@@ -91,5 +86,9 @@ */
     /**
-     * Low-level access to underlying Speechly browser client.
+     * Low-level access to underlying Speechly BrowserClient.
      */
-    client?: Client;
+    client?: BrowserClient;
+    /**
+     * Low-level access to underlying Speechly BrowserMicrophone.
+     */
+    microphone?: BrowserMicrophone;
 }
@@ -105,3 +104,3 @@ /**
  */
-export interface SpeechProviderProps extends ClientOptions {
+export interface SpeechProviderProps extends DecoderOptions {
     /**
@@ -111,6 +110,9 @@ * Whether to disable reacting to tentative items. Set this to true if you don't use them.
     disableTentative?: boolean;
+    children?: React.ReactNode;
 }
 interface SpeechProviderState {
-    client?: Client;
-    clientState: ClientState;
+    client?: BrowserClient;
+    microphone?: BrowserMicrophone;
+    clientState: DecoderState;
+    microphoneState: AudioSourceState;
     listening: boolean;
@@ -140,7 +142,5 @@ appId?: string;
     readonly connect: () => Promise<void>;
-    readonly initialize: () => Promise<void>;
-    readonly startContext: () => Promise<string>;
-    readonly stopContext: () => Promise<string>;
-    readonly toggleRecording: () => Promise<string>;
-    readonly switchApp: (appId: string) => Promise<void>;
+    readonly attachMicrophone: () => Promise<void>;
+    readonly start: () => Promise<string>;
+    readonly stop: () => Promise<void>;
     render(): JSX.Element;
@@ -147,0 +147,0 @@ componentDidUpdate(prevProps: SpeechProviderProps): Promise<void>;

dist/context.js

@@ -79,16 +79,13 @@ "use strict";
     }); }); },
-    initialize: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+    attachMicrophone: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
         return [2 /*return*/, Promise.resolve()];
     }); }); },
-    toggleRecording: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+    start: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
         return [2 /*return*/, Promise.resolve('Unknown contextId')];
     }); }); },
-    startContext: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-        return [2 /*return*/, Promise.resolve('Unknown contextId')];
+    stop: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, Promise.resolve()];
     }); }); },
-    stopContext: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-        return [2 /*return*/, Promise.resolve('Unknown contextId')];
-    }); }); },
-    switchApp: function () { },
-    clientState: browser_client_1.ClientState.Disconnected,
+    clientState: browser_client_1.DecoderState.Disconnected,
+    microphoneState: browser_client_1.AudioSourceState.Stopped,
     listening: false,
@@ -113,3 +110,3 @@ });
             return __generator(this, function (_a) {
-                this.setState(__assign(__assign({}, this.state), { client: this.createClient(this.props) }));
+                this.createClient(this.props);
                 return [2 /*return*/];
@@ -127,3 +124,3 @@ });
                         }
-                        return [4 /*yield*/, client.connect()];
+                        return [4 /*yield*/, client.initialize()];
                     case 1:
@@ -135,4 +132,5 @@ _a.sent();
         }); };
-        _this.initialize = function () { return __awaiter(_this, void 0, void 0, function () {
-            var client;
+        _this.attachMicrophone = function () { return __awaiter(_this, void 0, void 0, function () {
+            var client, microphone;
+            var _this = this;
             return __generator(this, function (_a) {
@@ -143,7 +141,23 @@ switch (_a.label) {
                         if (client == null) {
-                            throw Error('No Speechly client (are you calling initialize in non-browser environment)');
+                            throw Error('No Speechly client (are you calling connect in non-browser environment)');
                         }
-                        return [4 /*yield*/, client.initialize()];
+                        microphone = new browser_client_1.BrowserMicrophone();
+                        microphone.onStateChange(function (state) {
+                            _this.setState({
+                                microphoneState: state,
+                            });
+                        });
+                        return [4 /*yield*/, microphone.initialize()];
                     case 1:
                         _a.sent();
+                        if (!microphone.mediaStream) return [3 /*break*/, 3];
+                        return [4 /*yield*/, client.attach(microphone.mediaStream)];
+                    case 2:
+                        _a.sent();
+                        return [3 /*break*/, 4];
+                    case 3: throw Error('Microphone contains no MediaStream to attach');
+                    case 4:
+                        this.setState({
+                            microphone: microphone,
+                        });
                         return [2 /*return*/];
@@ -153,3 +167,3 @@ }
         }); };
-        _this.startContext = function () { return __awaiter(_this, void 0, void 0, function () {
+        _this.start = function () { return __awaiter(_this, void 0, void 0, function () {
             var _a, client, appId;
@@ -160,11 +174,11 @@ return __generator(this, function (_b) {
                 if (client == null) {
-                    throw Error('No Speechly client (are you calling startContext in non-browser environment)');
+                    throw Error('No Speechly client (are you calling start in non-browser environment)');
                 }
                 if (appId !== undefined) {
-                    return [2 /*return*/, client.startContext(appId)];
+                    return [2 /*return*/, client.start({ appId: appId })];
                 }
-                return [2 /*return*/, client.startContext()];
+                return [2 /*return*/, client.start()];
             });
         }); };
-        _this.stopContext = function () { return __awaiter(_this, void 0, void 0, function () {
+        _this.stop = function () { return __awaiter(_this, void 0, void 0, function () {
             var client;
@@ -175,33 +189,7 @@ return __generator(this, function (_a) {
                 if (client == null) {
-                    throw Error('No Speechly client (are you calling stopContext in non-browser environment)');
+                    throw Error('No Speechly client (are you calling stop in non-browser environment)');
                 }
-                return [2 /*return*/, client.stopContext()];
+                return [2 /*return*/, client.stop()];
             });
         }); };
-        _this.toggleRecording = function () { return __awaiter(_this, void 0, void 0, function () {
-            var client;
-            return __generator(this, function (_a) {
-                client = this.state.client;
-                if (client == null) {
-                    throw Error('No Speechly client (are you calling toggleRecording in non-browser environment)');
-                }
-                if (!client.isListening()) {
-                    return [2 /*return*/, this.startContext()];
-                }
-                else {
-                    return [2 /*return*/, this.stopContext()];
-                }
-                return [2 /*return*/];
-            });
-        }); };
-        _this.switchApp = function (appId) { return __awaiter(_this, void 0, void 0, function () {
-            var client;
-            return __generator(this, function (_a) {
-                client = this.state.client;
-                if (client == null) {
-                    throw Error('No Speechly client (are you calling toggleRecording in non-browser environment)');
-                }
-                return [2 /*return*/, client.switchContext(appId)];
-            });
-        }); };
         _this.createClient = function (clientOptions) {
@@ -211,3 +199,3 @@ var _a;
             var effectiveOpts = __assign(__assign({}, clientOptions), { connect: false });
-            var client = new browser_client_1.Client(effectiveOpts);
+            var client = new browser_client_1.BrowserClient(effectiveOpts);
             client.onStateChange(_this.onClientStateChange);
@@ -226,8 +214,10 @@ client.onSegmentChange(_this.onSegmentChange);
                 // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                client.connect();
+                client.initialize();
             }
-            return client;
+            _this.setState({
+                client: client,
+            });
         };
         _this.onClientStateChange = function (clientState) {
-            if (clientState <= browser_client_1.ClientState.Disconnected) {
+            if (clientState <= browser_client_1.DecoderState.Disconnected) {
                 _this.setState({ listening: false });
@@ -310,4 +300,6 @@ }
             client: undefined,
+            microphone: undefined,
             listening: false,
-            clientState: browser_client_1.ClientState.Disconnected,
+            clientState: browser_client_1.DecoderState.Disconnected,
+            microphoneState: browser_client_1.AudioSourceState.Stopped,
             appId: props.appId,
@@ -318,24 +310,19 @@ };
     SpeechProvider.prototype.render = function () {
-        var _this = this;
-        var _a = this.state, appId = _a.appId, clientState = _a.clientState, segment = _a.segment, tentativeTranscript = _a.tentativeTranscript, transcript = _a.transcript, tentativeEntities = _a.tentativeEntities, entity = _a.entity, tentativeIntent = _a.tentativeIntent, intent = _a.intent, client = _a.client, listening = _a.listening;
         return (react_1.default.createElement(exports.SpeechContext.Provider, { value: {
                 connect: this.connect,
-                initialize: this.initialize,
-                startContext: this.startContext,
-                stopContext: this.stopContext,
-                toggleRecording: this.toggleRecording,
-                switchApp: function (appId) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
-                    return [2 /*return*/, this.switchApp(appId)];
-                }); }); },
-                appId: appId,
-                listening: listening,
-                clientState: clientState,
-                segment: segment,
-                tentativeTranscript: tentativeTranscript,
-                transcript: transcript,
-                tentativeEntities: tentativeEntities,
-                entity: entity,
-                tentativeIntent: tentativeIntent,
-                intent: intent,
-                client: client,
+                attachMicrophone: this.attachMicrophone,
+                start: this.start,
+                stop: this.stop,
+                appId: this.state.appId,
+                listening: this.state.listening,
+                clientState: this.state.clientState,
+                microphoneState: this.state.microphoneState,
+                segment: this.state.segment,
+                tentativeTranscript: this.state.tentativeTranscript,
+                transcript: this.state.transcript,
+                tentativeEntities: this.state.tentativeEntities,
+                entity: this.state.entity,
+                tentativeIntent: this.state.tentativeIntent,
+                intent: this.state.intent,
+                client: this.state.client,
             } }, this.props.children));
@@ -345,5 +332,5 @@ };
         return __awaiter(this, void 0, void 0, function () {
-            var props, client, e_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var props, _a, client, microphone, e_1, e_2;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
@@ -357,20 +344,29 @@ props = this.props;
                             props.debug === prevProps.debug &&
-                            props.loginUrl === prevProps.loginUrl &&
                             props.apiUrl === prevProps.apiUrl) {
                             return [2 /*return*/];
                         }
-                        client = this.state.client;
-                        _a.label = 1;
+                        _a = this.state, client = _a.client, microphone = _a.microphone;
+                        _b.label = 1;
                     case 1:
-                        _a.trys.push([1, 3, , 4]);
+                        _b.trys.push([1, 3, , 4]);
                         return [4 /*yield*/, (client === null || client === void 0 ? void 0 : client.close())];
                     case 2:
-                        _a.sent();
+                        _b.sent();
                         return [3 /*break*/, 4];
                     case 3:
-                        e_1 = _a.sent();
+                        e_1 = _b.sent();
                         console.error('Error closing Speechly client:', e_1);
                         return [3 /*break*/, 4];
                     case 4:
-                        this.setState({ client: this.createClient(props) });
+                        _b.trys.push([4, 6, , 7]);
+                        return [4 /*yield*/, (microphone === null || microphone === void 0 ? void 0 : microphone.close())];
+                    case 5:
+                        _b.sent();
+                        return [3 /*break*/, 7];
+                    case 6:
+                        e_2 = _b.sent();
+                        console.error('Error closing microphone:', e_2);
+                        return [3 /*break*/, 7];
+                    case 7:
+                        this.createClient(props);
                         return [2 /*return*/];
@@ -377,0 +373,0 @@ }

dist/index.d.ts

@@ -1,4 +0,4 @@
-export { ClientState, stateToString } from '@speechly/browser-client';
+export { DecoderState, AudioSourceState, stateToString } from '@speechly/browser-client';
 export * from './types';
 export * from './context';
 export * from './hooks';

dist/index.js

 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
@@ -13,5 +17,6 @@ if (k2 === undefined) k2 = k;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stateToString = exports.ClientState = void 0;
+exports.stateToString = exports.AudioSourceState = exports.DecoderState = void 0;
 var browser_client_1 = require("@speechly/browser-client");
-Object.defineProperty(exports, "ClientState", { enumerable: true, get: function () { return browser_client_1.ClientState; } });
+Object.defineProperty(exports, "DecoderState", { enumerable: true, get: function () { return browser_client_1.DecoderState; } });
+Object.defineProperty(exports, "AudioSourceState", { enumerable: true, get: function () { return browser_client_1.AudioSourceState; } });
 Object.defineProperty(exports, "stateToString", { enumerable: true, get: function () { return browser_client_1.stateToString; } });
@@ -18,0 +23,0 @@ __exportStar(require("./types"), exports);

package.json

 {
   "name": "@speechly/react-client",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "React client for Speechly SLU API",
@@ -52,14 +52,14 @@ "keywords": [
   "dependencies": {
-    "@speechly/browser-client": "1.5.0"
+    "@speechly/browser-client": "^2.4.0"
   },
   "peerDependencies": {
-    "react": ">=16.13.1"
+    "react": ">=16.9.0"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.10.4",
-    "@types/react": ">=16.13.1",
-    "@typescript-eslint/eslint-plugin": "^4.4.0",
-    "@typescript-eslint/parser": "^4.4.0",
-    "eslint": "^7.10.0",
-    "eslint-config-standard-with-typescript": "^19.0.1",
+    "@microsoft/api-extractor": "^7",
+    "@types/react": "^18",
+    "@typescript-eslint/eslint-plugin": "^4",
+    "@typescript-eslint/parser": "^4",
+    "eslint": "^7",
+    "eslint-config-standard-with-typescript": "^16",
     "eslint-plugin-import": "^2.22.1",
@@ -72,8 +72,8 @@ "eslint-plugin-node": "^11.1.0",
     "prettier": "^2.1.2",
-    "react": ">=16.13.1",
-    "ts-loader": "^8.0.4",
-    "tsc-watch": "^4.2.9",
+    "react": "^18",
+    "ts-loader": "^9.2.5",
+    "tsc-watch": "^4.3.5",
     "typedoc": "^0.22.6",
     "typedoc-plugin-markdown": "^3.11.3",
-    "typescript": "^4.3.5"
+    "typescript": "^4.6.4"
   },
@@ -80,0 +80,0 @@ "files": ["dist/**/*", "src/**/*"],

README.md

@@ -72,7 +72,7 @@ <div align="center" markdown="1">
 function SpeechlyApp() {
-  const { speechState, segment, toggleRecording } = useSpeechContext()
+  const { listening, segment, toggleRecording } = useSpeechContext()
 
   return (
     <div>
-      <div className="status">{speechState}</div>
+      <div className="status">Listening: {listening}</div>
       {segment ? <div className="segment">{segment.words.map(w => w.value).join(' ')}</div> : null}
@@ -91,3 +91,4 @@ <div className="mic-button">
 
-You can find the detailed API documentation in [GitHub repository](docs/modules/_index_d_.md).
+- [API documentation](https://github.com/speechly/speechly/blob/main/libraries/react-client/docs/classes/context.SpeechProvider.md) in GitHub
+- [Basic usage in docs.speechly.com](https://docs.speechly.com/client-libraries/usage/?platform=React)
 
@@ -94,0 +95,0 @@ ## Contributing

src/index.ts

@@ -1,4 +0,4 @@
-export { ClientState, stateToString } from '@speechly/browser-client'
+export { DecoderState, AudioSourceState, stateToString } from '@speechly/browser-client'
 export * from './types'
 export * from './context'
 export * from './hooks'

No alert changes

Improved metrics

Number of lines in readme file

97

increased by1.04%

Worsened metrics

Total package byte prevSize

54519

decreased by-0.6%

Lines of code

1097

decreased by-1.08%

Dependency changes

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

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

• Updated@speechly/browser-client@^2.4.0