2916: Add tts on android

build-configs/BuildConfigType.ts

@@ -39,6 +39,7 @@ export type FeatureFlagsType = FixedCityType & {
   cityNotCooperating?: boolean
   cityNotCooperatingTemplate: string | null
   chat: boolean
+  tts: boolean
 }
 
 // Available on all platforms

build-configs/aschaffenburg/index.ts

@@ -40,6 +40,7 @@ const commonAschaffenburgBuildConfig: CommonBuildConfigType = {
     fixedCity: 'hallo',
     cityNotCooperatingTemplate: null,
     chat: false,
+    tts: false,
   },
   aboutUrls: {
     default: 'https://www.aschaffenburg.de/halloaschaffenburg',

build-configs/common/theme/colors.ts

@@ -15,6 +15,8 @@ export type ColorsType = {
   negativeHighlight: string
   invalidInput: string
   linkColor: string
+  grayBackgroundColor: string
+  slightlyDarkGray: string
 }
 export const commonLightColors = {
   backgroundAccentColor: '#fafafa',
@@ -31,4 +33,6 @@ export const commonLightColors = {
   negativeHighlight: '#8b0000',
   invalidInput: '#B3261E',
   linkColor: '#0b57d0',
+  grayBackgroundColor: '#dedede',
+  slightlyDarkGray: '#b9b9b9',
 }

build-configs/integreat-e2e/index.ts

@@ -22,6 +22,7 @@ const integreatE2e = {
     fixedCity: null,
     cityNotCooperatingTemplate,
     chat: false,
+    tts: false,
   },
 }
 const commonIntegreatE2eBuildConfig: CommonBuildConfigType = {

build-configs/integreat-test-cms/index.ts

@@ -23,6 +23,7 @@ const integreatTestCms = {
     fixedCity: null,
     cityNotCooperatingTemplate,
     chat: true,
+    tts: true,
   },
 }
 export const commonIntegreatTestCmsBuildConfig: CommonBuildConfigType = {

build-configs/integreat/index.ts

@@ -39,6 +39,7 @@ const commonIntegreatBuildConfig: CommonBuildConfigType = {
     fixedCity: null,
     cityNotCooperatingTemplate,
     chat: true,
+    tts: true,
   },
   aboutUrls: {
     default: 'https://integreat-app.de/about/',

build-configs/malte-test-cms/index.ts

@@ -23,6 +23,7 @@ const commonMalteTestCmsBuildConfig: CommonBuildConfigType = {
     fixedCity: null,
     cityNotCooperatingTemplate: null,
     chat: false,
+    tts: false,
   },
 }
 

build-configs/malte/index.ts

@@ -41,6 +41,7 @@ const commonMalteBuildConfig: CommonBuildConfigType = {
     fixedCity: null,
     cityNotCooperatingTemplate: null,
     chat: false,
+    tts: false,
   },
   aboutUrls: {
     default: 'https://www.malteser-werke.de/malte-app',

build-configs/obdach/index.ts

@@ -30,6 +30,7 @@ const commonObdachBuildConfig: CommonBuildConfigType = {
     fixedCity: null,
     cityNotCooperatingTemplate: null,
     chat: false,
+    tts: false,
   },
   aboutUrls: {
     default: 'https://tuerantuer.de/digitalfabrik/projekte/netzwerkobdachwohnen/',

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

@@ -62,6 +62,7 @@
     "@sentry/types": "^8.33.1",
     "accordion-collapse-react-native": "^1.1.1",
     "build-configs": "0.0.1",
+    "entities": "^5.0.0",
     "htmlparser2": "^9.1.0",
     "i18next": "^23.14.0",
     "intl-pluralrules": "^2.0.1",
@@ -87,9 +88,11 @@
     "react-native-safe-area-context": "^4.10.9",
     "react-native-screens": "^3.34.0",
     "react-native-svg": "^15.6.0",
+    "react-native-tts": "^4.1.1",
     "react-native-url-polyfill": "^2.0.0",
     "react-navigation-header-buttons": "^11.2.1",
     "rrule": "^2.8.1",
+    "sentencex": "^0.4.2",
     "shared": "0.0.1",
     "styled-components": "^6.1.13",
     "stylis": "^4.3.4",

native/src/@types/sentencex.d.ts

@@ -0,0 +1 @@
+declare module 'sentencex'

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

@@ -4,6 +4,7 @@ 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,7 @@ const Categories = ({
 }: CategoriesProps): ReactElement => {
   const children = categories.getChildren(category)
   const cityCode = cityModel.code
+  useTtsPlayer(categories.isLeaf(category) ? category.content : '', categories.isLeaf(category) ? category.title : '')
 
   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: setTtsPlayerVisible, content } = useTtsPlayer()
 
   const onShare = async () => {
     if (!shareUrl) {
@@ -185,13 +188,20 @@ const Header = ({
     renderItem(HeaderButtonTitle.Language, 'language', showItems, goToLanguageChange),
   ]
 
+  const unsupportedLanguagesForTts = ['fa']
+  const ttsEnabled =
+    content && buildConfig().featureFlags.tts && !unsupportedLanguagesForTts.includes(languageCode)
+      ? renderOverflowItem(t(`${HeaderButtonTitle.ReadAloud}`), () => setTtsPlayerVisible(true))
+      : []
+
   const overflowItems = showOverflowItems
     ? [
         ...(shareUrl ? [renderOverflowItem(HeaderButtonTitle.Share, onShare)] : []),
         ...(!buildConfig().featureFlags.fixedCity
           ? [renderOverflowItem(HeaderButtonTitle.Location, () => navigation.navigate(LANDING_ROUTE))]
           : []),
         renderOverflowItem(HeaderButtonTitle.Settings, () => navigation.navigate(SETTINGS_ROUTE)),
+        ...[ttsEnabled],
         ...(route.name !== NEWS_ROUTE ? [renderOverflowItem(HeaderButtonTitle.Feedback, navigateToFeedback)] : []),
         ...(route.name !== DISCLAIMER_ROUTE
           ? [renderOverflowItem(HeaderButtonTitle.Disclaimer, () => navigation.navigate(DISCLAIMER_ROUTE))]

native/src/components/News.tsx

@@ -11,6 +11,7 @@ import { NavigationProps } from '../constants/NavigationTypes'
 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'
@@ -62,6 +63,7 @@ const News = ({
 }: NewsProps): ReactElement => {
   const selectedNewsItem = news.find(_newsItem => _newsItem.id === newsId)
   const { t } = useTranslation('news')
+  useTtsPlayer(selectedNewsItem?.content ?? '', selectedNewsItem?.title ?? 'News')
 
   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'
@@ -65,123 +66,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} />
   }
 
   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 + dimensions.ttsPlayerHeight : webViewHeight,
         opacity: loading ? LOADING_OPACITY : DEFAULT_OPACITY,
       }}
     />