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 (added useeffect to check whether it reached the last index or not ... Note : sometimes content gets finished reading before reaching end of the array)

• 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)

• Notes:

  • boundaryGuard is created just to prevent handleBoundary from incrementing again incases like handleForward or handleBackward (I'm still not sure about this function as I did it out of frustration 😂)
  • Not Tested on iOS !

Side effects

• CityContentToolbar.tsx, CategoriesPage.tsx, LocalNewsPage.tsx, TuNewsDetailPage.tsx, RemoteContent.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.

Resolved issues

Fixes: #2918

---