Fix various EPUB positioning issues (readium#499)

Author: mickael-menu

readium/navigator/src/main/assets/_scripts/src/decorator.js

@@ -304,19 +304,21 @@ window.addEventListener(
     const body = document.body;
     var lastSize = { width: 0, height: 0 };
     const observer = new ResizeObserver(() => {
-      if (
-        lastSize.width === body.clientWidth &&
-        lastSize.height === body.clientHeight
-      ) {
-        return;
-      }
-      lastSize = {
-        width: body.clientWidth,
-        height: body.clientHeight,
-      };
-
-      groups.forEach(function (group) {
-        group.requestLayout();
+      requestAnimationFrame(() => {
+        if (
+          lastSize.width === body.clientWidth &&
+          lastSize.height === body.clientHeight
+        ) {
+          return;
+        }
+        lastSize = {
+          width: body.clientWidth,
+          height: body.clientHeight,
+        };
+
+        groups.forEach(function (group) {
+          group.requestLayout();
+        });
       });
     });
     observer.observe(body);

readium/navigator/src/main/assets/_scripts/src/utils.js

@@ -19,8 +19,10 @@ window.addEventListener(
   "load",
   function () {
     const observer = new ResizeObserver(() => {
-      onViewportWidthChanged();
-      snapCurrentOffset();
+      requestAnimationFrame(() => {
+        onViewportWidthChanged();
+        snapCurrentOffset();
+      });
     });
     observer.observe(document.body);
   },

readium/navigator/src/main/assets/readium/scripts/readium-fixed.js

@@ -267,13 +267,13 @@ public class EpubNavigatorFragment internal constructor(
 
     private sealed class State {
         /** The navigator just started and didn't load any resource yet. */
-        object Initializing : State()
+        data object Initializing : State()
 
-        /** The navigator is jumping to the resource at `locator`. */
-        data class Loading(val locator: Locator) : State()
+        /** The navigator is loading the first resource at `initialResourceHref`. */
+        data class Loading(val initialResourceHref: Url) : State()
 
-        /** The navigator is idle and ready for interactions. */
-        object Ready : State()
+        /** The navigator is fully initialized and ready for action. */
+        data object Ready : State()
     }
 
     private var state: State = State.Initializing
@@ -608,7 +608,9 @@ public class EpubNavigatorFragment internal constructor(
         @Suppress("NAME_SHADOWING")
         val locator = publication.normalizeLocator(locator)
 
-        state = State.Loading(locator)
+        if (state == State.Initializing) {
+            state = State.Loading(locator.href)
+        }
 
         listener?.onJumpToLocator(locator)
 
@@ -781,7 +783,8 @@ public class EpubNavigatorFragment internal constructor(
         override fun onPageLoaded(webView: R2BasicWebView, link: Link) {
             paginationListener?.onPageLoaded()
 
-            if (state is State.Initializing || (state as? State.Loading)?.locator?.href == link.url()) {
+            val href = link.url()
+            if (state is State.Initializing || (state as? State.Loading)?.initialResourceHref == href) {
                 state = State.Ready
             }
 

readium/navigator/src/main/assets/readium/scripts/readium-reflowable.js

@@ -11,6 +11,7 @@ package org.readium.r2.navigator.pager
 
 import android.annotation.SuppressLint
 import android.graphics.PointF
+import android.os.Build
 import android.os.Bundle
 import android.util.DisplayMetrics
 import android.view.*
@@ -19,13 +20,16 @@ import android.webkit.WebResourceResponse
 import android.webkit.WebView
 import androidx.core.os.BundleCompat
 import androidx.core.view.ViewCompat
+import androidx.core.view.postDelayed
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
 import androidx.lifecycle.repeatOnLifecycle
 import androidx.webkit.WebViewClientCompat
+import androidx.webkit.WebViewCompat
+import androidx.webkit.WebViewFeature
 import kotlin.math.roundToInt
 import kotlinx.coroutines.flow.*
 import kotlinx.coroutines.launch
@@ -213,9 +217,7 @@ internal class R2EpubPageFragment : Fragment() {
                     webView.listener?.onResourceLoaded(webView, it)
                 }
 
-                // To make sure the page is properly laid out before jumping to the target locator,
-                // we execute a dummy JavaScript and wait for the callback result.
-                webView.evaluateJavascript("true") {
+                webView.onContentReady {
                     onLoadPage()
                 }
             }
@@ -247,6 +249,24 @@ internal class R2EpubPageFragment : Fragment() {
         return containerView
     }
 
+    /**
+     * Will run the given [action] when the content of the [WebView] is fully laid out.
+     */
+    private fun WebView.onContentReady(action: () -> Unit) {
+        if (WebViewFeature.isFeatureSupported(WebViewFeature.VISUAL_STATE_CALLBACK)) {
+            WebViewCompat.postVisualStateCallback(this, 0) {
+                action()
+            }
+        } else {
+            // On older devices, there's no reliable way to guarantee the page is fully laid out.
+            // As a workaround, we run a dummy JavaScript, then wait for a short delay before
+            // assuming it's ready.
+            evaluateJavascript("true") {
+                postDelayed(500, action)
+            }
+        }
+    }
+
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
 

readium/navigator/src/main/java/org/readium/r2/navigator/epub/EpubNavigatorFragment.kt

@@ -138,11 +138,6 @@ open class ReaderActivity : AppCompatActivity() {
         )
     }
 
-    override fun finish() {
-        model.close()
-        super.finish()
-    }
-
     private fun handleReaderFragmentEvent(command: ReaderViewModel.ActivityCommand) {
         when (command) {
             is ReaderViewModel.ActivityCommand.OpenOutlineRequested ->

readium/navigator/src/main/java/org/readium/r2/navigator/pager/R2EpubPageFragment.kt

@@ -102,7 +102,10 @@ class ReaderViewModel(
         readerInitData = readerInitData
     )
 
-    fun close() {
+    override fun onCleared() {
+        // When the ReaderViewModel is disposed of, we want to close the publication to avoid
+        // using outdated information (such as the initial location) if the `ReaderActivity` is
+        // opened again with the same book.
         readerRepository.close(bookId)
     }