simply tts to prevent it freezes the app

src/hooks/useTextToSpeech.js

@@ -1,100 +1,40 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import Tts from 'react-native-tts';
-import { htmlToText } from '../sources/helpers/htmlToText';
-
-export const useTextToSpeech = (html, markChapterAdRead) => {
-  const [ttsStatus, setTtsStatus] = useState();
-  const [ttsPosition, setTtsPosition] = useState({ end: 0 });
-
-  let text = htmlToText(html);
 
+export const useTextToSpeech = (sentences, markChapterAdRead) => {
+  const [ttsStatus, setTtsStatus] = useState({});
+  const ttsPosition = useRef(0);
   useEffect(() => {
-    Tts.addEventListener('tts-start', () => setTtsStatus('start'));
-    Tts.addEventListener('tts-progress', event => {
-      setTtsStatus('progress');
-      setTtsPosition(event);
-    });
     Tts.addEventListener('tts-finish', () => {
-      setTtsStatus('finish');
-      markChapterAdRead();
+      if (ttsPosition == sentences.length - 1) {
+        markChapterAdRead();
+        setTtsStatus('finish');
+      }
+      ttsPosition.current = ttsPosition.current + 1;
     });
-    Tts.addEventListener('tts-cancel', () => setTtsStatus('paused'));
-
-    return () => Tts.stop();
+    return () => {
+      Tts.removeAllListeners('tts-finish');
+      Tts.stop();
+    };
   }, []);
 
   const startTts = () => {
     if (ttsStatus === 'progress') {
-      setTtsPosition({ end: 0 });
-      setTtsStatus('finish');
+      setTtsStatus('paused');
       Tts.stop();
       return;
     }
 
-    if (text.length >= 3999) {
-      const splitNChars = (txt, num) => {
-        let result = [];
-        for (let i = 0; i < txt.length; i += num) {
-          result.push(txt.substr(i, num));
-        }
-        return result;
-      };
-
-      let splitMe = splitNChars(text, 3999);
-
-      splitMe.forEach(value => {
-        Tts.speak(value, {
-          androidParams: {
-            KEY_PARAM_STREAM: 'STREAM_MUSIC',
-          },
-        });
-      });
-    } else {
-      Tts.stop();
-      Tts.speak(text, {
+    setTtsStatus('progress');
+    Tts.stop();
+    for (let i = ttsPosition.current; i < sentences.length; i++) {
+      Tts.speak(sentences[i], {
         androidParams: {
           KEY_PARAM_STREAM: 'STREAM_MUSIC',
         },
       });
     }
   };
 
-  const pauseTts = () => {
-    if (ttsStatus === 'progress') {
-      setTtsStatus('paused');
-      Tts.stop();
-      return;
-    } else {
-      text = text.slice(ttsPosition.end);
-
-      if (text.length >= 3999) {
-        const splitNChars = (txt, num) => {
-          let result = [];
-          for (let i = 0; i < txt.length; i += num) {
-            result.push(txt.substr(i, num));
-          }
-          return result;
-        };
-
-        let splitMe = splitNChars(text, 3999);
-
-        splitMe.forEach(value => {
-          Tts.speak(value, {
-            androidParams: {
-              KEY_PARAM_STREAM: 'STREAM_MUSIC',
-            },
-          });
-        });
-      } else {
-        Tts.stop();
-        Tts.speak(text, {
-          androidParams: {
-            KEY_PARAM_STREAM: 'STREAM_MUSIC',
-          },
-        });
-      }
-    }
-  };
-
-  return [ttsStatus, ttsPosition, startTts, pauseTts];
+  return [ttsStatus, startTts];
 };

src/screens/reader/ReaderScreen.js

@@ -58,6 +58,7 @@ import ChapterDrawer from './components/ChapterDrawer';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import SkeletonLines from './components/SkeletonLines';
 import color from 'color';
+import { htmlToText } from '../../sources/helpers/htmlToText';
 
 const Chapter = ({ route }) => {
   const { useChapterDrawerSwipeNavigation = true } = useSettings();
@@ -215,8 +216,8 @@ const ChapterContent = ({ route, navigation }) => {
     }
   }, []);
 
-  const [ttsStatus, ttsPosition, startTts, pauseTts] = useTextToSpeech(
-    chapter?.chapterText,
+  const [ttsStatus, startTts] = useTextToSpeech(
+    htmlToText(chapter?.chapterText).split('\n'),
     () => {
       if (!incognitoMode) {
         dispatch(markChapterReadAction(chapterId, novelId));
@@ -409,8 +410,6 @@ const ChapterContent = ({ route, navigation }) => {
           dispatch={dispatch}
           tts={startTts}
           textToSpeech={ttsStatus}
-          textToSpeechPosition={ttsPosition}
-          pauseTts={pauseTts}
           theme={theme}
         />
         <GestureRecognizer

src/screens/reader/components/ReaderAppbar.js

@@ -17,8 +17,6 @@ const ReaderAppbar = ({
   dispatch,
   tts,
   textToSpeech,
-  textToSpeechPosition,
-  pauseTts,
   theme,
 }) => {
   const { goBack } = useNavigation();
@@ -55,21 +53,13 @@ const ReaderAppbar = ({
             </Text>
           </View>
           <Appbar.Action
-            icon="volume-high"
+            icon={textToSpeech === 'progress' ? 'pause' : 'volume-high'}
             size={24}
             onPress={tts}
             iconColor={
               textToSpeech === 'progress' ? theme.primary : theme.onSurface
             }
           />
-          {textToSpeechPosition.end > 0 && (
-            <Appbar.Action
-              icon={textToSpeech === 'paused' ? 'play' : 'pause'}
-              size={24}
-              onPress={pauseTts}
-              iconColor={theme.onSurface}
-            />
-          )}
 
           <IconButtonV2
             name={bookmarked ? 'bookmark' : 'bookmark-outline'}