@speechly/react-ui - npm Package Compare versions

Comparing version 2.0.0-beta.9 to 2.0.0-beta.10

components/BigTranscript.d.ts

 import React from 'react';
+import { SpeechSegment } from '@speechly/react-client';
 import '@speechly/browser-ui/big-transcript';
@@ -40,2 +41,6 @@ declare global {
     marginBottom?: string;
+    /**
+     * Optional SpeechSegment to be displayed instead of actual transcription from API
+     */
+    mockSegment: SpeechSegment | undefined;
 };
@@ -42,0 +47,0 @@ /**

components/BigTranscript.js

@@ -35,5 +35,6 @@ "use strict";
 var BigTranscript = function (_a) {
-    var formatText = _a.formatText, fontSize = _a.fontSize, color = _a.color, highlightColor = _a.highlightColor, backgroundColor = _a.backgroundColor, _b = _a.marginBottom, marginBottom = _b === void 0 ? '2rem' : _b;
+    var 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 = react_client_1.useSpeechContext(), segment = _c.segment, speechState = _c.speechState;
     var refElement = react_1.useRef();
+    var _d = react_1.useState(false), demoMode = _d[0], setDemoMode = _d[1];
     // Change button face according to Speechly states
@@ -47,8 +48,15 @@ react_1.useEffect(function () {
         if ((refElement === null || refElement === void 0 ? void 0 : refElement.current) !== undefined && segment !== undefined) {
+            setDemoMode(false);
             refElement.current.speechsegment(segment);
         }
     }, [segment]);
-    return (react_1.default.createElement("big-transcript", { ref: refElement, formattext: (formatText !== null && formatText === false) ? 'false' : 'true', fontsize: fontSize, color: color, highlightcolor: highlightColor, backgroundcolor: backgroundColor, marginbottom: marginBottom }));
+    react_1.useEffect(function () {
+        if ((refElement === null || refElement === void 0 ? void 0 : refElement.current) !== undefined && mockSegment !== undefined) {
+            setDemoMode(true);
+            refElement.current.speechsegment(mockSegment);
+        }
+    }, [mockSegment]);
+    return (react_1.default.createElement("big-transcript", { ref: refElement, demomode: demoMode ? 'true' : 'false', formattext: (formatText !== null && formatText === false) ? 'false' : 'true', fontsize: fontSize, color: color, highlightcolor: highlightColor, backgroundcolor: backgroundColor, marginbottom: marginBottom }));
 };
 exports.BigTranscript = BigTranscript;
 //# sourceMappingURL=BigTranscript.js.map

components/TranscriptDrawer.d.ts

 import React from 'react';
+import { SpeechSegment } from '@speechly/react-client';
 import { BigTranscriptProps } from './BigTranscript';
@@ -33,2 +34,6 @@ import '@speechly/browser-ui/transcript-drawer';
     hintFontSize?: string;
+    /**
+     * Optional SpeechSegment to be displayed instead of actual transcription from API
+     */
+    mockSegment: SpeechSegment | undefined;
 };
@@ -35,0 +40,0 @@ /**

components/TranscriptDrawer.js

@@ -37,2 +37,3 @@ "use strict";
     var refElement = react_1.useRef();
+    var _b = react_1.useState(false), demoMode = _b[0], setDemoMode = _b[1];
     react_1.useEffect(function () {
@@ -45,8 +46,15 @@ if ((refElement === null || refElement === void 0 ? void 0 : refElement.current) !== undefined) {
         if ((refElement === null || refElement === void 0 ? void 0 : refElement.current) !== undefined && segment !== undefined) {
+            setDemoMode(false);
             refElement.current.speechsegment(segment);
         }
     }, [segment]);
-    return (react_1.default.createElement("transcript-drawer", { ref: refElement, formattext: props.formatText === false ? 'false' : 'true', fontsize: props.fontSize, color: props.color, smalltextcolor: props.smallTextColor, highlightcolor: props.highlightColor, backgroundcolor: props.backgroundColor, marginbottom: props.marginBottom, hint: JSON.stringify(props.hint), height: props.height, hintfontsize: props.hintFontSize }));
+    react_1.useEffect(function () {
+        if ((refElement === null || refElement === void 0 ? void 0 : refElement.current) !== undefined && props.mockSegment !== undefined) {
+            setDemoMode(true);
+            refElement.current.speechsegment(props.mockSegment);
+        }
+    }, [props.mockSegment]);
+    return (react_1.default.createElement("transcript-drawer", { ref: refElement, demomode: demoMode ? 'true' : 'false', formattext: props.formatText === false ? 'false' : 'true', fontsize: props.fontSize, color: props.color, smalltextcolor: props.smallTextColor, highlightcolor: props.highlightColor, backgroundcolor: props.backgroundColor, marginbottom: props.marginBottom, hint: JSON.stringify(props.hint), height: props.height, hintfontsize: props.hintFontSize }));
 };
 exports.TranscriptDrawer = TranscriptDrawer;
 //# sourceMappingURL=TranscriptDrawer.js.map

package.json

 {
   "name": "@speechly/react-ui",
   "private": false,
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0-beta.10",
   "description": "Speechly UI Components",
@@ -52,8 +52,8 @@ "main": "./index.js",
   "peerDependencies": {
+    "@speechly/react-client": "^0.0.20",
     "react": "^16.13.1 || ^17.0.0",
-    "react-dom": "^16.13.1 || ^17.0.0",
-    "@speechly/react-client": "^0.0.20"
+    "react-dom": "^16.13.1 || ^17.0.0"
   },
   "dependencies": {
-    "@speechly/browser-ui": "^1.3.12",
+    "@speechly/browser-ui": "^3.13.0",
     "pubsub-js": "^1.9.2",
@@ -60,0 +60,0 @@ "react-spring": "^8.0.27",

No alert changes

Improved metrics

Total package byte prevSize

88701

increased by2.52%

Lines of code

1077

increased by2.47%

Dependency changes

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

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

• Updated@speechly/browser-ui@^3.13.0