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

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

@@ -42,6 +42,11 @@ abstract class BaseReaderFragment : Fragment() {
   // TTS
   private var ttsManager: TTSManager? = null
 
+  // True while the user has an active text selection.
+  // applyDecorations injects JS into the EPUB WebView; doing so while the user
+  // is dragging selection handles causes the selection to jump or reset.
+  private var isUserSelecting = false
+
   // Track active decoration listeners to avoid duplicates
   private val activeDecorationGroups = mutableSetOf<String>()
 
@@ -275,29 +280,33 @@ abstract class BaseReaderFragment : Fragment() {
 
   private fun applyTTSDecoration(locator: Locator) {
     if (!isNavigatorReady) return
+    if (isUserSelecting) return  // skip DOM update while user drags selection handles
     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() {
@@ -341,6 +350,10 @@ abstract class BaseReaderFragment : Fragment() {
         val currentLocator = currentSelection?.locator
         val currentText = currentLocator?.text?.highlight
 
+        // Keep the guard flag in sync so TTS decoration skips DOM updates
+        // while the user is dragging selection handles.
+        isUserSelecting = currentLocator != null
+
         // Check if selection has changed
         val hasChanged = when {
           previousSelection == null && currentLocator == null -> false

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.24",
   "description": "A react-native wrapper for https://readium.org/",
   "main": "lib/src/index",
   "types": "lib/src/index.d.ts",