@speechly/react-ui - npm Package Compare versions

Comparing version 2.0.1 to 2.1.2

components/BigTranscript.d.ts

@@ -18,2 +18,6 @@ import React from 'react';
     /**
+     * Optional "top" string turns on internal placement without any CSS positioning.
+     */
+    placement?: string;
+    /**
      * Optional boolean. If true, transcript is formatted with detected entities, e.g. numbers. Default: true
@@ -20,0 +24,0 @@ */

components/BigTranscript.js

@@ -35,6 +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, mockSegment = _a.mockSegment;
-    var _c = react_client_1.useSpeechContext(), segment = _c.segment, speechState = _c.speechState;
+    var _b = _a.placement, placement = _b === void 0 ? 'top' : _b, formatText = _a.formatText, fontSize = _a.fontSize, color = _a.color, highlightColor = _a.highlightColor, backgroundColor = _a.backgroundColor, _c = _a.marginBottom, marginBottom = _c === void 0 ? '2rem' : _c, mockSegment = _a.mockSegment;
+    var _d = react_client_1.useSpeechContext(), segment = _d.segment, speechState = _d.speechState;
     var refElement = react_1.useRef();
-    var _d = react_1.useState(false), demoMode = _d[0], setDemoMode = _d[1];
+    var _e = react_1.useState(false), demoMode = _e[0], setDemoMode = _e[1];
     // Change button face according to Speechly states
@@ -58,5 +58,5 @@ react_1.useEffect(function () {
     }, [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 }));
+    return (react_1.default.createElement("big-transcript", { ref: refElement, placement: placement, 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/ErrorPanel.d.ts

 import React from 'react';
+import '@speechly/browser-ui/error-panel';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'error-panel': any;
+        }
+    }
+}
 /**
+ * Properties for BigTranscript component.
+ *
+ * @public
+ */
+export declare type ErrorPanelProps = {
+    /**
+     * Optional "bottom" string turns on internal placement without any CSS positioning.
+     */
+    placement?: string;
+};
+/**
  * An optional dismissable React component that renders an error message if something
@@ -8,6 +27,6 @@ * prevents Speechly SDK from functioning. It also provides recovery instructions.
  * It is intented to be displayed at the lower part of the screen like so:
- * <PushToTalkButtonContainer><ErrorPanel/><PushToTalkButton/><PushToTalkButtonContainer>.
+ * <ErrorPanel placement="bottom"/>
  *
  * @public
  */
-export declare const ErrorPanel: React.FC;
+export declare const ErrorPanel: React.FC<ErrorPanelProps>;

components/ErrorPanel.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) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -30,19 +7,4 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.ErrorPanel = void 0;
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var pubsub_js_1 = __importDefault(require("pubsub-js"));
-var react_client_1 = require("@speechly/react-client");
-var types_1 = require("../types");
-var ErrorDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  background-color: white;\n  z-index: 51;\n  user-select: none;\n  pointer-events: all;\n  color: black;\n  display: flex;\n  box-shadow: 0 0 8px #00000040;\n  flex-direction: row;\n"], ["\n  box-sizing: border-box;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  background-color: white;\n  z-index: 51;\n  user-select: none;\n  pointer-events: all;\n  color: black;\n  display: flex;\n  box-shadow: 0 0 8px #00000040;\n  flex-direction: row;\n"])));
-var ErrorLeft = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  width: 2rem;\n  background-color: red;\n  padding: 0.2rem 0.2rem;\n  color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: start;\n  font-size: 1.5rem;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  width: 2rem;\n  background-color: red;\n  padding: 0.2rem 0.2rem;\n  color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: start;\n  font-size: 1.5rem;\n"])));
-var ErrorRight = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: white;\n  padding: 1rem 3rem 1rem 1rem;\n  overflow: auto;\n"], ["\n  background-color: white;\n  padding: 1rem 3rem 1rem 1rem;\n  overflow: auto;\n"])));
-var H1 = styled_components_1.default.h1(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 1.5rem;\n  margin: 0;\n  padding: 0 0 0.5rem 0;\n"], ["\n  font-size: 1.5rem;\n  margin: 0;\n  padding: 0 0 0.5rem 0;\n"])));
-var P = styled_components_1.default.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0 0 0.5rem 0;\n  color: #999;\n"], ["\n  margin: 0;\n  padding: 0 0 0.5rem 0;\n  color: #999;\n"])));
-var A = styled_components_1.default.a(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: #000;\n"], ["\n  color: #000;\n"])));
-var HttpsRequired = 'HttpsRequired';
-var isLocalHost = function (hostname) {
-    return !!(hostname === 'localhost' ||
-        hostname === '[::1]' ||
-        hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) !== null);
-};
+var react_1 = __importDefault(require("react"));
+require("@speechly/browser-ui/error-panel");
 /**
@@ -54,56 +16,11 @@ * An optional dismissable React component that renders an error message if something
  * It is intented to be displayed at the lower part of the screen like so:
- * <PushToTalkButtonContainer><ErrorPanel/><PushToTalkButton/><PushToTalkButtonContainer>.
+ * <ErrorPanel placement="bottom"/>
  *
  * @public
  */
-var ErrorPanel = function (props) {
-    var _a = react_1.useState(null), visible = _a[0], setVisible = _a[1];
-    react_1.useEffect(function () {
-        var subTangentClick = pubsub_js_1.default.subscribe(types_1.SpeechlyUiEvents.TangentRelease, function (message, payload) {
-            var _a;
-            switch (payload.state) {
-                case react_client_1.SpeechState.NoAudioConsent:
-                case react_client_1.SpeechState.NoBrowserSupport:
-                    // Provide special instructions for non-https access
-                    if (((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.protocol) !== 'https:' &&
-                        !isLocalHost(window.location.hostname)) {
-                        setVisible(HttpsRequired);
-                        break;
-                    }
-                    setVisible(payload.state);
-                    break;
-                default:
-                    break;
-            }
-        });
-        return function () {
-            pubsub_js_1.default.unsubscribe(subTangentClick);
-        };
-    }, []);
-    if (visible === null)
-        return null;
-    return (react_1.default.createElement(ErrorDiv, null,
-        react_1.default.createElement(ErrorLeft, { onClick: function () { return setVisible(null); } }, "\u00D7"),
-        visible === react_client_1.SpeechState.NoAudioConsent && (react_1.default.createElement(ErrorRight, null,
-            react_1.default.createElement(H1, null, "No Mic Permission"),
-            react_1.default.createElement(P, null, "To use the voice interface, please allow your web browser access the microphone and reload."),
-            react_1.default.createElement(P, null,
-                react_1.default.createElement(A, { href: "https://docs.speechly.com/faq/#why-do-i-get-mic-consent-denied-error-in-the-playground-why-doesnt-my-microphone-work-in-the-playground" }, "Troubleshooting"),
-                "\u00A0\u00A0\u00A0\u00A0",
-                react_1.default.createElement(A, { href: window.location.href }, "Reload")))),
-        visible === react_client_1.SpeechState.NoBrowserSupport && (react_1.default.createElement(ErrorRight, null,
-            react_1.default.createElement(H1, null, "Unsupported Browser"),
-            react_1.default.createElement(P, null, "To use the voice interface, please visit this site using a supported browser."),
-            react_1.default.createElement(P, null,
-                react_1.default.createElement(A, { href: "https://docs.speechly.com/faq/#the-microphone-doesnt-work-on-ios-and-mobile-safari" }, "Troubleshooting")))),
-        visible === HttpsRequired && (react_1.default.createElement(ErrorRight, null,
-            react_1.default.createElement(H1, null, "HTTPS Required"),
-            react_1.default.createElement(P, null, "To use the voice interface, please visit this site using the secure https:// protocol."),
-            react_1.default.createElement(P, null,
-                react_1.default.createElement(A, { href: "https://docs.speechly.com/faq/#http-unsupported" }, "Troubleshooting"),
-                "\u00A0\u00A0\u00A0\u00A0",
-                react_1.default.createElement(A, { href: window.location.href.replace(/^http(?!s)/, 'https') }, "Try with HTTPS"))))));
+var ErrorPanel = function (_a) {
+    var _b = _a.placement, placement = _b === void 0 ? 'bottom' : _b;
+    return (react_1.default.createElement("error-panel", { placement: placement }));
 };
 exports.ErrorPanel = ErrorPanel;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 //# sourceMappingURL=ErrorPanel.js.map

components/PushToTalkButton.d.ts

@@ -21,5 +21,5 @@ import React from 'react';
     /**
-     * Optional boolean. Shows poweron state. If false, recording can immediately start but will first press will cause a system permission prompt. Default: false
+     * Optional "bottom" string turns on internal placement without any CSS positioning.
      */
-    powerOn?: boolean;
+    placement?: string;
     /**
@@ -67,2 +67,6 @@ * Keyboard key to use for controlling the button.
     backgroundColor?: string;
+    /**
+     * Optional boolean. Shows poweron state. If false, recording can immediately start but will first press will cause a system permission prompt. Default: false
+     */
+    powerOn?: boolean;
 };
@@ -69,0 +73,0 @@ /**

components/PushToTalkButton.js

@@ -32,2 +32,3 @@ "use strict";
 require("@speechly/browser-ui/call-out");
+var __1 = require("..");
 /**
@@ -41,3 +42,3 @@ * A React component that renders a push-to-talk microphone button.
 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;
+    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;
     var _h = react_client_1.useSpeechContext(), speechState = _h.speechState, toggleRecording = _h.toggleRecording, initialise = _h.initialise;
@@ -81,3 +82,3 @@ var _j = react_1.useState((powerOn ? react_client_1.SpeechState.Idle : react_client_1.SpeechState.Ready)), icon = _j[0], setIcon = _j[1];
         pubsub_js_1.default.publish(types_1.SpeechlyUiEvents.TangentPress, { state: speechStateRef.current });
-        window.postMessage({ type: 'holdstart' }, '*');
+        window.postMessage({ type: 'holdstart', state: types_1.mapSpeechStateToClientState(speechStateRef.current !== undefined ? speechStateRef.current : react_client_1.SpeechState.Idle) }, '*');
         setShowHint(false);
@@ -122,6 +123,10 @@ switch (speechStateRef.current) {
     return (react_1.default.createElement("div", 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)));
+        (placement === 'bottom') && (react_1.default.createElement(__1.PushToTalkButtonContainer, 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))),
+        (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)))));
 };
 exports.PushToTalkButton = PushToTalkButton;
 //# sourceMappingURL=PushToTalkButton.js.map

components/TranscriptDrawer.d.ts

 import React from 'react';
 import { SpeechSegment } from '@speechly/react-client';
-import { BigTranscriptProps } from './BigTranscript';
 import '@speechly/browser-ui/transcript-drawer';
@@ -17,4 +16,36 @@ declare global {
  */
-export declare type TranscriptDrawerProps = BigTranscriptProps & {
+export declare type TranscriptDrawerProps = {
     /**
+     * Optional "top" string turns on internal placement without any CSS positioning.
+     */
+    placement?: string;
+    /**
+     * Optional boolean. If true, transcript is formatted with detected entities, e.g. numbers. Default: true
+     */
+    formatText?: boolean;
+    /**
+     * Optional CSS string for text size. Default: "1.5rem"
+     */
+    fontSize?: string;
+    /**
+     * Optional string (CSS color) for text. Default: "#ffffff"
+     */
+    color?: string;
+    /**
+     * Optional string (CSS color) for entity highlighting, vu meter and acknowledged icon. Default: "#15e8b5"
+     */
+    highlightColor?: string;
+    /**
+     * Optional string (CSS color) for hint text background. Default: "#202020"
+     */
+    backgroundColor?: string;
+    /**
+     * Optional string (CSS dimension). Dynamic margin added when element is visible. Default: "0rem"
+     */
+    marginBottom?: string;
+    /**
+     * Optional SpeechSegment to be displayed instead of actual transcription from API. Can be used to demonstrate component function to user.
+     */
+    mockSegment?: SpeechSegment | undefined;
+    /**
      * Optional hint text or array
@@ -35,6 +66,2 @@ */
     hintFontSize?: string;
-    /**
-     * Optional SpeechSegment to be displayed instead of actual transcription from API
-     */
-    mockSegment?: SpeechSegment | undefined;
 };
@@ -41,0 +68,0 @@ /**

package.json

 {
   "name": "@speechly/react-ui",
   "private": false,
-  "version": "2.0.1",
+  "version": "2.1.2",
   "description": "Speechly UI Components",
@@ -45,4 +45,4 @@ "main": "./index.js",
     "tsc-watch": "^4.2.9",
-    "typedoc": "^0.19.2",
-    "typedoc-plugin-markdown": "^3.0.7",
+    "typedoc": "^0.22.4",
+    "typedoc-plugin-markdown": "^3.11.2",
     "typescript": "^4.2.4",
@@ -58,3 +58,3 @@ "webpack": "^5.4.0",
   "dependencies": {
-    "@speechly/browser-ui": ">=3.13.0",
+    "@speechly/browser-ui": ">=4.0.2",
     "pubsub-js": "^1.9.2",
@@ -61,0 +61,0 @@ "react-spring": "^8.0.27",

README.md

@@ -5,3 +5,3 @@ <h1 align="center">
 <h2 align="center">
-Speechly is the Fast, Accurate, and Simple Voice Interface API for Web and Mobile Apps
+Complete your touch user interface with voice
 </h2>
@@ -8,0 +8,0 @@

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

Worsened metrics

Total package byte prevSize

83791

decreased by-6.58%

Lines of code

1066

decreased by-2.47%

Dependency changes

• + Addedelectron-to-chromium@1.5.64(transitive)

• - Removedelectron-to-chromium@1.5.66(transitive)

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