2916: Add tts on android #2950
2916: Add tts on android #2950
Conversation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
There was a problem hiding this comment.
Works pretty well so far! A couple of points about the functionality:
- If I change the volume while it's playing, it starts re-reading the current fragment. If possible, I think it should keep reading at the same spot.
- In using, I thought the volume bar was for updating the speed of reading. Maybe that's just me but maybe not, we should see if other people have that problem.
- For Persian (and any other languages where it doesn't work), I think we should hide the button to read the text aloud, and close the overlay if it's open when someone switches languages.
- In emulated iOS, no sound comes out and I get this warning:
Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {"1000":{},"1001":{},"1002":{},"1003":{},"1004":{},"1005":{},"1006":{},"1007":{},"1008":{},"1009":{},"1010":{},"1011":{},"1012":{},"1013":{},"1014":{},"1015":{},"1016":{},"1017":{},"1018":{},"1019":{},"1020":{},"1021":{},"1022":{},"1023":{},"1024":{},"1025":{},"1026":{},"1027":{},"1028":{},"1029":{},"1030":{},"1031":{},"1032":{},"1033":{},"1034":{},"1035":{},"1036":{},"1037":{},"1038":{},"1039":{},"1040":{},"1041":{},"1042":{},"1043":{},"1044":{},"1045":{},"1046":{},"1047":{},"1048":{},"1049":{},"...(truncated keys)...":451}But I guess you did say that it's not yet tested for iOS :D
As discussed, I only half-checked the PR, let me know when it's ready for review again :)
| }) | ||
| } | ||
| const startReading = () => { | ||
| if (!isPersian && sentences.length > 0) { |
There was a problem hiding this comment.
💭 Maybe we shouldn't show the player at all for Farsi? Are there other languages that are specifically not supported? Or is there a function to check if a language is supported? Or is there a different package we could use that offers more languages?
There was a problem hiding this comment.
I Added a condition in the header to check language and hide the button from the menu
native/src/components/News.tsx
Outdated
| @@ -63,6 +64,16 @@ const News = ({ | |||
| const selectedNewsItem = news.find(_newsItem => _newsItem.id === newsId) | |||
| const { t } = useTranslation('news') | |||
|
|
|||
| const { setTitle, setContent } = useTtsPlayer() | |||
|
|
|||
| useEffect(() => { | |||
There was a problem hiding this comment.
couldn't you just pass these values to the hook instead of using a separate useEffect here. I think the lifecycle depending things should be handled in the hook
There was a problem hiding this comment.
I didn't get what exactly you want me to do here... just pass them to the hook without useeffect?
I think in this case it will keep setting these states each time the News re-render right?
There was a problem hiding this comment.
i mean you can move this useEffect to your hook and just pass title and content.
sth like that.
You probably have to skip that if no content or title is delivered as its used in RemoteContent
const useTtsPlayer = (content: string, title: string): ttsContextType => {
const tts = useContext(ttsContext)
useEffect(() => {
tts.setContent(content)
tts.setTitle(title)
}, [content, title, tts])
...I didn't test that i just think to add to every usage of your useTtsPlayer hook an useEffect results in lots of code duplication
There was a problem hiding this comment.
Works for me on android. good work.
Since its a draft some improvements are missing i guess
Shouldn't here stand the title of what will be read?
Even add shadows/elevation for the container and the play button
The icons should switch i guess since the direction arrows are wrong
I think it would be better to create a fixed area for this player instead of overlapping content, but this may be also done in an additional tasks, since it will need some effort.
| const [isPlaying, setIsPlaying] = useState(false) | ||
| const [expandPlayer, setExpandPlayer] = useState(false) | ||
| const defaultVolume = 50 | ||
| const [volume, setVolume] = useState(defaultVolume) |
There was a problem hiding this comment.
i think you can initialize this with the value from your context, no?
{volume: defaultVolume} = useTtsPlayer()
|
Code Climate has analyzed commit 042e2ac and detected 3 issues on this pull request. Here's the issue category breakdown:
The test coverage on the diff in this pull request is 75.9% (50% is the threshold). This pull request will bring the total coverage in the repository to 74.2%. View more on Code Climate. |
Short description
Adding text-to-speech functionality.
Proposed changes
TtsPlayer.tsx: deals with html content and it passes it toreact-native-ttsas sentences. used debounce function from lodash to handle rapid volume change. I added an expandPlayer state just to keep player expanded when changes from sentence to sentence. This component located at app level where it wraps around the NavigationContainer to be able to be floating at the bottom of the screen while scrolling.useTtsPlayer.ts: Is a hook used to pass data (content, title, visibility, volume) from across the app toTtsPlayer.tsxusinguseContext.Categories.tsx, News.tsx, Events.tsx each one is using the
useTtsPlayer.tshook to pass content and title.Created a component
Slider.tsxinstead of adding more libraires and used the ones we have:react-native-reanimated&react-native-gesture-handlerto create slider that can be used anywhere other than the volume.Added ReadAloud HeaderButtonTitle to be selected from the kebab menu to show the player. This button will show up only in Integreat/IntegreatTestCms and at third level pages.
The TtsPlayer will stop when the app is in the background also if you back out from a 3rd level page.
Notes:
tts.speak()? due toreact-native-ttsdoesn't have a functional pause also passing word by word will sound more robotic.react-native-tts.Side effects
Testing
Resolved issues
Fixes: #2916