Fix various EPUB positioning issues (readium#499)

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/java/org/readium/r2/navigator/epub/EpubNavigatorFragment.kt

@@ -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/java/org/readium/r2/navigator/pager/R2EpubPageFragment.kt

@@ -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)
 

test-app/src/main/java/org/readium/r2/testapp/reader/ReaderActivity.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 ->

test-app/src/main/java/org/readium/r2/testapp/reader/ReaderViewModel.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)
  }