2918: Add tts on web

[bahaaTuffaha]

Short description

Adding text-to-speech functionality for web.

Proposed changes

• TtsPlayer.tsx will receive content and title from useTtsPlayer.ts hook then it will process content as following:

  • Adding period to any <p> or <li> tag if there is non at the end.
  • Splitting the content using a library sentencex to support most languages.
  • Adding the title to the array.

• TtsPlayer.tsx using EasySpeech library for web speech api .. why I used it instead of directly using the native api read here: https://github.com/leaonline/easy-speech/blob/master/FAQ.md#why-does-this-library-exists-if-i-can-use-tts-natively-in-the-browser

• Web Speech API has some limitation on devices like Android I can't pause so I implemented a way to increment currentSentencesIndex at each sentence so pausing will be depend on sentence index . Another issue with Firefox about triggering onEnd function at any .cancel() method unlike chromium based browsers.

• This is different from tts-native: voices needs to be installed from OS so a modal will show up TtsHelpModal to guide users for each platform. Note: by default for windows for example you have what the keyboard layout have of languages also it may need a restart to see the newly installed language.

• Modified Modal.tsx to accept new props: icon and styling just for (backgroundColor, borderRadius)

Side effects

• CityContentToolbar.tsx, CategoriesPage.tsx, LocalNewsPage.tsx, TuNewsDetailPage.tsx, RemoteContent.tsx, RootSwitcher.tsx

Testing

• At integreat : Go to any 3rd level content in categories or news.
• Click on ToolbarItem on the side called readAloud
• The player will show up press play to make it start reading content.

Observations

I tested this PR on linux and I got different result at each browser:
Chrome: works as expected + nice voices.
Firefox: I can't pause (linux) + using opensource voice library from mbrola mb-en1 sounds robotic better sounded voices can be downloaded from pied (Note: you need to restart the browser after selecting a voice).
Brave: (linux) not working at all because there is no build in speech to text like google chrome does.
Windows on the other hand.. most browsers can run good as long you download the voices from the OS it self.
I didn't test it on mac OS...

Resolved issues

Fixes: #2918

---

[ztefanie]

Nice work 🚀

Tested this on chrome and firefox.

Firefox voice is really crappy, but chrome is really nice 🚀 Maybe we add hint, that some browsers better support this feature? Maybe @hauf-toni can share some input, how to handle this best from a UI perspective.

Found a few bug:

issue 1:

1. Open this page: http://localhost:9000/augsburg/de/willkommen/willkommen-in-augsburg-2
2. Click "read aloud"
3. Click "play"
4. Click on "Weiter"
   Result: The reader starts reading out the beginning of the current sentance, when clicking "weiter" for the first time. When clicking "weiter" a second time, it correctly jumps to the next sentance
   Expected result: When clicking "weiter" for the first time, it should directly jump to the next sentance.

issue 2:
When opening this page: http://localhost:9000/augsburg/de/willkommen
the "read aloud" button is displayed, but does nothing when clicked.
Expected: Should either not be displayed or does something when clicked

issue 3:
Open this page: http://localhost:9000/augsburg/de/behoerden-beratung/behoerden/auslaenderbehoerde
Click "next" to jump to the last sentance
in this line "Weitere Informationen finden Sie unter [hier]" the reader switches to the "start"-mode, but there is still this whole contact blog that is read

issue 4:
When clicking pause I see the initial view of the tts-player, with the first word of the page in the heading. I think this is confusing, as clicking play does not continue reading from the beginning. I would expect that the player just changes the pause button to showing a play button.
what i get when i click pause

what i expected

issue 5:
on firefox when the tts reaches the end of the text, the player does not reset to start as it is for other browsers.

[ztefanie]

Why is this "false". Do we only want this feature on beta for now?

[bahaaTuffaha]

@steffenkleinle what do you think?

[steffenkleinle]

Yes, I think so. Until iOS is ready as well I think we only want this on beta :)

[bahaaTuffaha]

Ok I will turn this to true 👍️

[steffenkleinle]

sorry, badly phrased from my side. This should stay false until ios is ready.

[ztefanie]

💭 We already have translations for previous and next in the translations file, but in other sections/categories. I think it is fine to keep it, but we may think about this in the future, if it is worth the effort to restructure things to lower translation costs.

[bahaaTuffaha]

issue 1:

1. Open this page: http://localhost:9000/augsburg/de/willkommen/willkommen-in-augsburg-2
2. Click "read aloud"
3. Click "play"
4. Click on "Weiter"
   Result: The reader starts reading out the beginning of the current sentance, when clicking "weiter" for the first time. When clicking "weiter" a second time, it correctly jumps to the next sentance
   Expected result: When clicking "weiter" for the first time, it should directly jump to the next sentance.

issue 2: When opening this page: http://localhost:9000/augsburg/de/willkommen the "read aloud" button is displayed, but does nothing when clicked. Expected: Should either not be displayed or does something when clicked

issue 3: Open this page: http://localhost:9000/augsburg/de/behoerden-beratung/behoerden/auslaenderbehoerde Click "next" to jump to the last sentance in this line "Weitere Informationen finden Sie unter [hier]" the reader switches to the "start"-mode, but there is still this whole contact blog that is read

Can you please mention which browser you used for each issue?

[ztefanie]

Can you please mention which browser you used for each issue?

I mostly used Chrome, sometimes I double checked with Firefox

[LeandraH]

This looks very good already, thank you! Tested in Firefox on OS X

A couple of small things:

I would prefer that the overlay doesn't change size based on whether or not the text is being read. I hear that will be a separate issue :)

There were a lot of very random CSS numbers, please already apply the multiples-of-four rule of thumb that Toni mentioned when introducing the new style guide.

Also, I'm getting an unfortunate word separation in German, maybe increase the width of the side bar.

[LeandraH]

💭 I don't love this test because it really tests the implementation of the component as opposed to testing roughly how a user would use the component. On the other hand, it's really hard to test third-party components, and then ones playing sounds. Not sure what to do here

[LeandraH]

💭 Hmmm, I don't like this hack to break up the content, and I see that you didn't do it in the native one. Maybe there is a better solution here?

[bahaaTuffaha]

hmm at native it stops as normal at the end of sentences but at web I noticed lists and paragraphs without full stop will continue reading the next sentence as it one.

Other option is maybe changes from CMS ?

[f1sh1918]

This looks very good already, thank you! Tested in Firefox on OS X

A couple of small things:

I would prefer that the overlay doesn't change size based on whether or not the text is being read. I hear that will be a separate issue :)

There were a lot of very random CSS numbers, please already apply the multiples-of-four rule of thumb that Toni mentioned when introducing the new style guide.

Also, I'm getting an unfortunate word separation in German, maybe increase the width of the side bar.

Maybe can also adjust css styles to only break word

[LeandraH]

Very cool, thank you so much! This is such a complicated feature, and you made it through that!

Tested in Firefox