@dr33m/react-native-readium 5.0.0-rc.22 → 5.0.0-rc.23

package/android/src/main/java/com/reactnativereadium/reader/BaseReaderFragment.kt

@@ -276,28 +276,31 @@ abstract class BaseReaderFragment : Fragment() {
   private fun applyTTSDecoration(locator: Locator) {
     if (!isNavigatorReady) return
     val decorableNavigator = navigator as? DecorableNavigator ?: return
-    // Call applyDecorations directly — it is a regular (non-suspend) function in
-    // Readium 3.x. The test app (VisualReaderFragment) does the same: no launch {},
-    // no channel routing. Wrapping in viewScope.launch defers the call to the next
-    // dispatch cycle and was preventing the highlight from ever appearing.
-    decorableNavigator.applyDecorations(
-      listOf(
-        Decoration(
-          id = "tts",
-          locator = locator,
-          style = Decoration.Style.Highlight(
-            tint = android.graphics.Color.argb(89, 0xF2, 0xCA, 0x50) // #f2ca50 @ 35%
+    // applyDecorations is suspend in Readium 3.x — must be called from a coroutine.
+    // viewLifecycleOwner.lifecycleScope dispatches to Dispatchers.Main, matching
+    // the observeWhenStarted pattern used by the Readium test app.
+    viewLifecycleOwner.lifecycleScope.launch {
+      decorableNavigator.applyDecorations(
+        listOf(
+          Decoration(
+            id = "tts",
+            locator = locator,
+            style = Decoration.Style.Highlight(
+              tint = android.graphics.Color.argb(89, 0xF2, 0xCA, 0x50) // #f2ca50 @ 35%
+            )
           )
-        )
-      ),
-      "tts"
-    )
+        ),
+        "tts"
+      )
+    }
   }
 
   private fun clearTTSDecoration() {
     if (!isNavigatorReady) return
     val decorableNavigator = navigator as? DecorableNavigator ?: return
-    decorableNavigator.applyDecorations(emptyList(), "tts")
+    viewLifecycleOwner.lifecycleScope.launch {
+      decorableNavigator.applyDecorations(emptyList(), "tts")
+    }
   }
 
   override fun onDestroyView() {

package/android/src/main/java/com/reactnativereadium/reader/TTSManager.kt

@@ -3,7 +3,9 @@ package com.reactnativereadium.reader
 import android.app.Application
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Job
+import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.launchIn
+import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.onEach
 import kotlinx.coroutines.launch
 import org.readium.navigator.media.common.MediaNavigator
@@ -108,8 +110,14 @@ class TTSManager(
                 }
                 .launchIn(this)
 
-            // Observe current locator
-            ttsNavigator.currentLocator
+            // Observe utterance-level locator (sentence, not word).
+            // TtsNavigator.currentLocator returns tokenLocator ?: utteranceLocator — the
+            // word-level locator — which has incomplete CSS selectors and cannot be rendered
+            // by the EPUB decorator. utteranceLocator is the sentence-level locator and
+            // matches what the Readium test app (TtsViewModel.highlight) uses.
+            ttsNavigator.location
+                .map { it.utteranceLocator }
+                .distinctUntilChanged()
                 .onEach { locator ->
                     val text = locator.text.highlight ?: ""
                     onUtterance(locator, text)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dr33m/react-native-readium",
-  "version": "5.0.0-rc.22",
+  "version": "5.0.0-rc.23",
   "description": "A react-native wrapper for https://readium.org/",
   "main": "lib/src/index",
   "types": "lib/src/index.d.ts",