2916: Add tts on android

native/jest.setup.ts

@@ -15,6 +15,8 @@ jest.mock('react-native-permissions', () => require('react-native-permissions/mo
 // https://reactnavigation.org/docs/testing#mocking-native-modules
 require('react-native-gesture-handler/jestSetup')
 
+jest.mock('react-native-tts')
+
 jest.mock('react-native-reanimated', () => {
   const Reanimated = require('react-native-reanimated/mock')
 

native/package.json

@@ -86,6 +86,7 @@
     "react-native-safe-area-context": "^4.9.0",
     "react-native-screens": "^3.30.1",
     "react-native-svg": "^15.1.0",
+    "react-native-tts": "^4.1.1",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-webview": "^13.8.6",
     "react-navigation-header-buttons": "^11.2.1",

native/src/App.tsx

@@ -19,6 +19,7 @@ import IOSSafeAreaView from './components/IOSSafeAreaView'
 import SnackbarContainer from './components/SnackbarContainer'
 import StaticServerProvider from './components/StaticServerProvider'
 import StatusBar from './components/StatusBar'
+import TtsPlayer from './components/TtsPlayer'
 import { RoutesParamsType } from './constants/NavigationTypes'
 import buildConfig from './constants/buildConfig'
 import { userAgent } from './constants/endpoint'
@@ -87,16 +88,18 @@ const App = (): ReactElement => {
             <SafeAreaProvider>
               <AppContextProvider>
                 <SnackbarContainer>
-                  <>
-                    <StatusBar />
-                    <IOSSafeAreaView>
-                      <NavigationContainer onStateChange={onStateChange} linking={linking}>
-                        <HeaderButtonsProvider stackType='native'>
-                          <Navigator />
-                        </HeaderButtonsProvider>
-                      </NavigationContainer>
-                    </IOSSafeAreaView>
-                  </>
+                  <TtsPlayer>
+                    <>
+                      <StatusBar />
+                      <IOSSafeAreaView>
+                        <NavigationContainer onStateChange={onStateChange} linking={linking}>
+                          <HeaderButtonsProvider stackType='native'>
+                            <Navigator />
+                          </HeaderButtonsProvider>
+                        </NavigationContainer>
+                      </IOSSafeAreaView>
+                    </>
+                  </TtsPlayer>
                 </SnackbarContainer>
               </AppContextProvider>
             </SafeAreaProvider>

native/src/assets/index.ts

@@ -22,13 +22,18 @@ import MailIcon from '../../../assets/icons/mail.svg'
 import MenuIcon from '../../../assets/icons/menu.svg'
 import NewsIcon from '../../../assets/icons/news.svg'
 import NoInternetIcon from '../../../assets/icons/no-internet.svg'
+import NoSoundIcon from '../../../assets/icons/no-sound.svg'
 import NoteIcon from '../../../assets/icons/note.svg'
+import PauseIcon from '../../../assets/icons/pause.svg'
 import PhoneIcon from '../../../assets/icons/phone.svg'
+import PlayIcon from '../../../assets/icons/play.svg'
+import PlaybackIcon from '../../../assets/icons/playback.svg'
 import POIsIcon from '../../../assets/icons/pois.svg'
 import RefreshIcon from '../../../assets/icons/refresh.svg'
 import SadSmileyIcon from '../../../assets/icons/sad-smiley.svg'
 import SearchIcon from '../../../assets/icons/search.svg'
 import SecurityIcon from '../../../assets/icons/security.svg'
+import SoundIcon from '../../../assets/icons/sound.svg'
 import SprungbrettIcon from '../../../assets/icons/sprungbrett.svg'
 import SupportIcon from '../../../assets/icons/support.svg'
 import TuNewsActiveIcon from '../../../assets/icons/tu-news-active.svg'
@@ -63,6 +68,7 @@ export {
   NewsIcon,
   NoInternetIcon,
   NoteIcon,
+  NoSoundIcon,
   PhoneIcon,
   POIsIcon,
   PoiThumbnailPlaceholder,
@@ -71,10 +77,14 @@ export {
   SadSmileyIcon,
   SearchIcon,
   SecurityIcon,
+  SoundIcon,
   SprungbrettIcon,
   SupportIcon,
   TuNewsActiveIcon,
   TuNewsInactiveIcon,
   WarningIcon,
   WebsiteIcon,
+  PauseIcon,
+  PlaybackIcon,
+  PlayIcon,
 }

native/src/components/Categories.tsx

@@ -1,9 +1,10 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect } from 'react'
 import { View } from 'react-native'
 
 import { CATEGORIES_ROUTE, getCategoryTiles, RouteInformationType } from 'shared'
 import { CategoriesMapModel, CategoryModel, CityModel } from 'shared/api'
 
+import useTtsPlayer from '../hooks/useTtsPlayer'
 import testID from '../testing/testID'
 import { LanguageResourceCacheStateType } from '../utils/DataContainer'
 import CategoryListItem from './CategoryListItem'
@@ -34,6 +35,17 @@ const Categories = ({
 }: CategoriesProps): ReactElement => {
   const children = categories.getChildren(category)
   const cityCode = cityModel.code
+  const { setTitle, setContent } = useTtsPlayer()
+
+  useEffect(() => {
+    if (categories.isLeaf(category)) {
+      setTitle(category.title)
+      setContent(category.content)
+    }
+    return () => {
+      setContent(null)
+    }
+  }, [categories, category, category.content, setContent, setTitle])
 
   const navigateToCategory = ({ path }: { path: string }) =>
     navigateTo({

native/src/components/Header.tsx

@@ -26,6 +26,7 @@ import buildConfig from '../constants/buildConfig'
 import dimensions from '../constants/dimensions'
 import { AppContext } from '../contexts/AppContextProvider'
 import useSnackbar from '../hooks/useSnackbar'
+import useTtsPlayer from '../hooks/useTtsPlayer'
 import createNavigateToFeedbackModal from '../navigation/createNavigateToFeedbackModal'
 import navigateToLanguageChange from '../navigation/navigateToLanguageChange'
 import sendTrackingSignal from '../utils/sendTrackingSignal'
@@ -50,6 +51,7 @@ enum HeaderButtonTitle {
   Language = 'changeLanguage',
   Location = 'changeLocation',
   Search = 'search',
+  ReadAloud = 'readAloud',
   Share = 'share',
   Settings = 'settings',
   Feedback = 'feedback',
@@ -82,6 +84,7 @@ const Header = ({
   // Save route/canGoBack to state to prevent it from changing during navigating which would lead to flickering of the title and back button
   const [previousRoute] = useState(navigation.getState().routes[navigation.getState().routes.length - 2])
   const [canGoBack] = useState(navigation.canGoBack())
+  const { setVisible, content } = useTtsPlayer()
 
   const onShare = async () => {
     if (!shareUrl) {
@@ -115,6 +118,10 @@ const Header = ({
     }
   }
 
+  const onRead = async () => {
+    setVisible(true)
+  }
+
   const renderItem = (title: string, iconName: string, visible: boolean, onPress?: () => void): ReactElement => (
     <Item
       key={title}
@@ -192,6 +199,11 @@ const Header = ({
           ? [renderOverflowItem(HeaderButtonTitle.Location, () => navigation.navigate(LANDING_ROUTE))]
           : []),
         renderOverflowItem(HeaderButtonTitle.Settings, () => navigation.navigate(SETTINGS_ROUTE)),
+        ...[
+          content && (buildConfig().appName === 'IntegreatTestCms' || buildConfig().appName === 'Integreat')
+            ? renderOverflowItem(t(`${HeaderButtonTitle.ReadAloud}`), onRead)
+            : [],
+        ],
         ...(route.name !== NEWS_ROUTE ? [renderOverflowItem(HeaderButtonTitle.Feedback, navigateToFeedback)] : []),
         ...(route.name !== DISCLAIMER_ROUTE
           ? [renderOverflowItem(HeaderButtonTitle.Disclaimer, () => navigation.navigate(DISCLAIMER_ROUTE))]

native/src/components/News.tsx

@@ -1,5 +1,5 @@
 import { TFunction } from 'i18next'
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ScrollView } from 'react-native'
 import styled from 'styled-components/native'
@@ -11,6 +11,7 @@
 import { contentAlignment } from '../constants/contentDirection'
 import useNavigate from '../hooks/useNavigate'
 import useSetRouteTitle from '../hooks/useSetRouteTitle'
+import useTtsPlayer from '../hooks/useTtsPlayer'
 import Failure from './Failure'
 import List from './List'
 import LoadingSpinner from './LoadingSpinner'
@@ -63,6 +64,16 @@
   const selectedNewsItem = news.find(_newsItem => _newsItem.id === newsId)
   const { t } = useTranslation('news')
 
+  const { setTitle, setContent } = useTtsPlayer()
+
+  useEffect(() => {
+    setTitle(selectedNewsItem?.title ?? 'News')
+    setContent(selectedNewsItem?.content ?? '')
+    return () => {
+      setContent(null)
+    }
+  }, [selectedNewsItem?.content, selectedNewsItem?.title, setContent, setTitle])
+
   const navigation = useNavigate().navigation as NavigationProps<NewsRouteType>
   useSetRouteTitle({ navigation, title: getPageTitle(selectedNewsType, selectedNewsItem, t) })
 

native/src/components/RemoteContent.tsx

@@ -18,6 +18,7 @@
 } from '../constants/webview'
 import { useAppContext } from '../hooks/useCityAppContext'
 import useNavigate from '../hooks/useNavigate'
+import useTtsPlayer from '../hooks/useTtsPlayer'
 import renderHtml from '../utils/renderHtml'
 import { log, reportError } from '../utils/sentry'
 import Failure from './Failure'
@@ -50,123 +51,124 @@
   const { settings, updateSettings } = useAppContext()
   const { navigateTo } = useNavigate()
   const { externalSourcePermissions } = settings
+  const { visible } = useTtsPlayer()
 
   // https://github.com/react-native-webview/react-native-webview/issues/1069#issuecomment-651699461
   const defaultWebviewHeight = 1
   const [webViewHeight, setWebViewHeight] = useState<number>(defaultWebviewHeight)
   const theme = useTheme()
   const { t } = useTranslation()
   const { width: deviceWidth } = useWindowDimensions()
 
   useEffect(() => {
     // If it takes too long returning false in onShouldStartLoadWithRequest the webview loads the pressed url anyway on android.
     // Therefore only set it to state and execute onLinkPress in useEffect.
     if (pressedUrl) {
       onLinkPress(pressedUrl)
       setPressedUrl(null)
     }
   }, [onLinkPress, pressedUrl])
 
   useEffect(() => {
     if (webViewHeight !== defaultWebviewHeight || content.length === 0) {
       onLoad()
     }
   }, [onLoad, webViewHeight, content])
 
   // messages are triggered in renderHtml.ts
   const onMessage = useCallback(
     (event: WebViewMessageEvent) => {
       const message = JSON.parse(event.nativeEvent.data)
       if (message.type === HEIGHT_MESSAGE_TYPE && typeof message.height === 'number') {
         setWebViewHeight(message.height)
         return
       }
 
       if (message.type === OPEN_SETTINGS_MESSAGE_TYPE) {
         navigateTo({ route: CONSENT_ROUTE })
         return
       }
 
       if (message.type === ALLOW_EXTERNAL_SOURCE_MESSAGE_TYPE && typeof message.source === 'string') {
         const source = message.source
         const updatedSources = { ...externalSourcePermissions, [source]: true }
         updateSettings({ externalSourcePermissions: updatedSources })
         return
       }
 
       if (message.type === WARNING_MESSAGE_TYPE) {
         log(message.message, 'warning')
       } else {
         const messageText: string | undefined = message.message
         const error = new Error(messageText ? JSON.stringify(messageText) : 'Unknown message received from webview')
         reportError(error)
         setError(error.message)
       }
     },
     [externalSourcePermissions, navigateTo, updateSettings],
   )
 
   const onShouldStartLoadWithRequest = useCallback(
     (event: WebViewNavigation): boolean => {
       if (buildConfig().supportedIframeSources.some(source => event.url.includes(source))) {
         return true
       }
       if (event.url === new URL(resourceCacheUrl).href) {
         // Needed on iOS for the initial load
         return true
       }
       // block non click events on ios that come up with iframes to avoid opening the iframe source directly in browser
       if (event.navigationType !== 'click' && Platform.OS === 'ios') {
         return false
       }
       // If it takes too long returning false the webview loads the pressed url anyway on android.
       // Therefore only set it to state and execute onLinkPress in useEffect.
       setPressedUrl(event.url)
       return false
     },
     [resourceCacheUrl],
   )
 
   if (content.length === 0) {
     return null
   }
   if (error) {
     return <Failure code={ErrorCode.UnknownError} />
   }
-
+  const ttsPlayerHeight = 50
   return (
     <WebView
       source={{
         baseUrl: resourceCacheUrl,
         html: renderHtml(
           content,
           cacheDictionary,
           buildConfig().supportedIframeSources,
           theme,
           language,
           externalSourcePermissions,
           t,
           deviceWidth,
           dimensions.pageContainerPaddingHorizontal,
         ),
       }}
       originWhitelist={['*']} // Needed by iOS to load the initial html
       javaScriptEnabled
       dataDetectorTypes='none'
       userAgent={userAgent}
       domStorageEnabled={false}
       allowsFullscreenVideo
       showsVerticalScrollIndicator={false}
       showsHorizontalScrollIndicator={false}
       scrollEnabled={false} // To disable scrolling in iOS
       onMessage={onMessage}
       renderError={renderWebviewError}
       onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
       // To allow custom handling of link clicks in android
       // https://github.com/react-native-webview/react-native-webview/issues/1869
       setSupportMultipleWindows={false}
       style={{
-        height: webViewHeight,
+        height: visible ? webViewHeight + ttsPlayerHeight : webViewHeight,
         opacity: 0.99, // fixes crashing in Android https://github.com/react-native-webview/react-native-webview/issues/811
       }}
     />