Add option to select voice (microsoft#2338)

* Initial commit * Add tests * Update comment * Sample for selecting voice * Update documentation * Update PR number * Remove context argument * Apply suggestions from code review Co-Authored-By: Corina <14900841+corinagum@users.noreply.github.com> * Fix ESLint and selectVoice * Bump web-speech-cognitive-services * Update entry
compulim · Aug 23, 2019 · eb2a555 · eb2a555
1 parent 19d25b7
commit eb2a555
Show file tree

Hide file tree

Showing 13 changed files with 511 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -56,7 +56,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    - [`mixin-deep@1.3.2`](https://www.npmjs.com/package/mixin-deep)
    - [`set-value@2.0.1`](https://www.npmjs.com/package/set-value)
    - [`union-value@1.0.1`](https://www.npmjs.com/package/union-value)
--  Bumps [`web-speech-cognitive-services@4.0.1-master.ad6e780`](https://www.npmjs.com/package/web-speech-cognitive-services), by [@compulim](https://github.com/compulim) in PR [#2246](https://github.com/microsoft/BotFramework-WebChat/pull/2246) and PR [#2274](https://github.com/microsoft/BotFramework-WebChat/pull/2274)
+-  Bumps [`web-speech-cognitive-services@4.0.1-master.6b2b9e3`](https://www.npmjs.com/package/web-speech-cognitive-services), by [@compulim](https://github.com/compulim) in PR [#2246](https://github.com/microsoft/BotFramework-WebChat/pull/2246), PR [#2274](https://github.com/microsoft/BotFramework-WebChat/pull/2274), and PR [#2338](https://github.com/microsoft/BotFramework-WebChat/pull/2338)
 -  Fix for React hooks constraints: both app and component must share the same reference of [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom), in PR [#2274](https://github.com/microsoft/BotFramework-WebChat/pull/2274)
    -  `/`: Install [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) to `devDependencies`
    -  `bundle`: Move [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) from `dependencies` to `peerDependencies`
@@ -66,6 +66,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Moved the typing indicator to the send box and removed the typing indicator logic from the sagas, by [@tdurnford](https://github.com/tdurnford), in PR [#2321](https://github.com/microsoft/BotFramework-WebChat/pull/2321)
 -  `component`: Move `Composer` to React hooks and functional components, by [@compulim](https://github.com), in PR [#2308](https://github.com/compulim/BotFramework-WebChat/pull/2308)
 -  `component`: Fix [#1818](https://github.com/microsoft/BotFramework-WebChat/issues/1818) Move to functional components by [@corinagum](https://github.com/corinagum), in PR [#2322](https://github.com/microsoft/BotFramework-WebChat/pull/2322)
+-  Fix [#2292](https://github.com/microsoft/BotFramework-WebChat/issues/2292). Added function to select voice to props, `selectVoice()`, by [@compulim](https://github.com/compulim), in PR [#2338](https://github.com/microsoft/BotFramework-WebChat/pull/2338)
 
 ### Fixed
 
@@ -101,6 +102,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 -  [Single sign-on for Microsoft Teams apps](https://microsoft.github.io/BotFramework-WebChat/19.c.single-sign-on-for-teams-apps/), by [@compulim](https://github.com/compulim) in [#2196](https://github.com/microsoft/BotFramework-WebChat/pull/2196)
 -  [Customize Web Chat with Reaction Buttons](https://microsoft.github.io/BotFramework-WebChat/09.customization-reaction-buttons/). Updated reaction handlers to send `messageReaction` activities, by [@tdurnford](https://github.com/tdurnford) in [#2239](https://github.com/microsoft/BotFramework-WebChat/pull/2239)
+-  [Select voice for speech synthesis](https://microsoft.github.io/BotFramework-WebChat/06.g.select-voice/), by [@compulim](https://github.com/compulim), in PR [#2338](https://github.com/microsoft/BotFramework-WebChat/pull/2338)
 
 ## [4.5.2] - 2019-08-07
 

diff --git a/README.md b/README.md
@@ -186,6 +186,7 @@ In issue [#2022](https://github.com/microsoft/BotFramework-WebChat/issues/2022),
 | [`06.d.speech-web-browser`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.d.speech-web-browser)                                                                                                         | Demonstrates how to implement text-to-speech using Web Chat's browser-based Web Speech API. (link to W3C standard in the sample)                                                                                                    | [Web Speech API Demo](https://microsoft.github.io/BotFramework-WebChat/06.d.speech-web-browser)                                                         |
 | [`06.e.cognitive-services-speech-services-with-lexical-result`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.e.cognitive-services-speech-services-with-lexical-result)                                 | Demonstrates how to use lexical result from Cognitive Services Speech Services API.                                                                                                                                                 | [Lexical Result Demo](https://microsoft.github.io/BotFramework-WebChat/06.e.cognitive-services-speech-services-with-lexical-result)                     |
 | [`06.f.hybrid-speech`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.f.hybrid-speech)                                                                                                                   | Demonstrates how to use both browser-based Web Speech API for speech-to-text, and Cognitive Services Speech Services API for text-to-speech.                                                                                        | [Hybrid Speech Demo](https://microsoft.github.io/BotFramework-WebChat/06.f.hybrid-speech)                                                               |
+| [`06.g.select-voice`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.g.select-voice)                                                                                                                     | Demonstrates how to select speech synthesis voice based on activity.                                                                                                                                                                | [Select Voice Demo](https://microsoft.github.io/BotFramework-WebChat/06.g.select-voice)                                                                |
 | [`07.a.customization-timestamp-grouping`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/07.a.customization-timestamp-grouping)                                                                             | Demonstrates how to customize timestamps by showing or hiding timestamps and changing the grouping of messages by time.                                                                                                             | [Timestamp Grouping Demo](https://microsoft.github.io/BotFramework-WebChat/07.a.customization-timestamp-grouping)                                       |
 | [`07.b.customization-send-typing-indicator`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/07.b.customization-send-typing-indicator)                                                                       | Demonstrates how to send typing activity when the user start typing on the send box.                                                                                                                                                | [User Typing Indicator Demo](https://microsoft.github.io/BotFramework-WebChat/07.b.customization-send-typing-indicator)                                 |
 | [`08.customization-user-highlighting`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/08.customization-user-highlighting)                                                                                   | Demonstrates how to customize the styling of activities based whether the message is from the user or the bot.                                                                                                                      | [User Highlighting Demo](https://microsoft.github.io/BotFramework-WebChat/08.customization-user-highlighting)                                           |
@@ -252,7 +253,7 @@ Please note, however:
 
 # How to connect client app to bot
 
-Web Chat provides UI on top of the Direct Line Channel. There are two ways to connect to your bot through HTTP calls from the client: by sending the Bot secret or generating a token via the secret. 
+Web Chat provides UI on top of the Direct Line Channel. There are two ways to connect to your bot through HTTP calls from the client: by sending the Bot secret or generating a token via the secret.
 
 <!-- TODO: https://github.com/microsoft/BotFramework-WebChat/issues/2151 -->
 <!-- Update the following paragraph and the API table (`directline`) with new documentation when updated docs are published  -->

diff --git a/__tests__/speech.selectVoice.js b/__tests__/speech.selectVoice.js
@@ -54,4 +54,27 @@ describe('selecting voice based on language', () => {
       });
     });
   });
+
+  test('using a custom selectVoice function', async () => {
+    const { driver, pageObjects } = await setupWebDriver({
+      props: {
+        locale: 'en-US',
+        selectVoice: voices => voices.find(({ lang }) => lang === 'zh-YUE'),
+        webSpeechPonyfillFactory: () => window.WebSpeechMock
+      }
+    });
+
+    await pageObjects.sendMessageViaMicrophone('echo 123');
+
+    await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+    await driver.wait(speechSynthesisUtterancePended(), timeouts.ui);
+
+    await expect(pageObjects.startSpeechSynthesize()).resolves.toHaveProperty('voice', {
+      default: false,
+      lang: 'zh-YUE',
+      localService: true,
+      name: 'Mock Voice (zh-YUE)',
+      voiceURI: 'mock://web-speech/voice/zh-YUE'
+    });
+  });
 });
diff --git a/packages/bundle/package-lock.json b/packages/bundle/package-lock.json
diff --git a/packages/bundle/package.json b/packages/bundle/package.json
@@ -46,7 +46,7 @@
     "prop-types": "^15.7.2",
     "sanitize-html": "^1.19.0",
     "url-search-params-polyfill": "^5.0.0",
-    "web-speech-cognitive-services": "4.0.1-master.d9fc5d3",
+    "web-speech-cognitive-services": "4.0.1-master.6b2b9e3",
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {

diff --git a/packages/component/src/Activity/Speak.js b/packages/component/src/Activity/Speak.js
@@ -11,20 +11,10 @@ import SayAlt from './SayAlt';
 // TODO: [P3] We should add a "spoken" or "speakState" flag to indicate whether this activity is going to speak, or spoken
 const connectSpeakActivity = (...selectors) =>
   connectToWebChat(
-    ({ language, markActivity }, { activity }) => ({
+    ({ language, markActivity, selectVoice }, { activity }) => ({
       language,
       markAsSpoken: () => markActivity(activity, 'speak', false),
-      selectVoice: voices => {
-        voices = [].slice.call(voices);
-
-        return (
-          voices.find(({ lang }) => lang === activity.locale) ||
-          voices.find(({ lang }) => lang === language) ||
-          voices.find(({ lang }) => lang === window.navigator.language) ||
-          voices.find(({ lang }) => lang === 'en-US') ||
-          voices[0]
-        );
-      }
+      selectVoice: voices => selectVoice(voices, activity)
     }),
     ...selectors
   );