Fix HTML media continuing to play after turning the page

CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file. Take a look
 
 ### Fixed
 
+#### Navigator
+
+* [#145](https://github.com/readium/kotlin-toolkit/issues/145) HTML `<audio>` and `<video>` elements are now paused when turning the page in the EPUB navigator, instead of playing on in the background.
+
 #### Shared
 
 * EPUB HREFs that are not percent-encoded but carry a fragment or query (e.g. `chapter one.xhtml#section`, with a space in the filename) now keep their `#fragment`/`?query` instead of encoding the separators into the path. This fixes table of contents and Media Overlays links failing to resolve and navigate in poorly-authored EPUBs.

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

@@ -9,6 +9,7 @@
 import "./gestures";
 import "./keyboard";
 import {
+  pauseAllMedia,
   removeProperty,
   scrollLeft,
   scrollRight,
@@ -37,6 +38,7 @@ window.readium = {
   setCSSProperties: setCSSProperties,
   setProperty: setProperty,
   removeProperty: removeProperty,
+  pauseAllMedia: pauseAllMedia,
 
   // selection
   getCurrentSelection: getCurrentSelection,

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

@@ -93,6 +93,15 @@ export function isScrollModeEnabled() {
   );
 }
 
+// Pauses all the media elements (e.g. audio or video) in the document, for
+// example when the page is not visible anymore after turning the page.
+// See https://github.com/readium/kotlin-toolkit/issues/145
+export function pauseAllMedia() {
+  document.querySelectorAll("audio, video").forEach((media) => {
+    media.pause();
+  });
+}
+
 export function isRTL() {
   return document.body.dir.toLowerCase() == "rtl";
 }

readium/navigator/src/main/java/org/readium/r2/navigator/R2BasicWebView.kt

@@ -530,6 +530,13 @@ internal open class R2BasicWebView(context: Context, attrs: AttributeSet) : WebV
         runJavaScript("readium.removeProperty(\"$key\");")
     }
 
+    /**
+     * Pauses all the media elements (e.g. `<audio>` or `<video>`) in the resource.
+     */
+    internal fun pauseAllMedia() {
+        runJavaScript("readium.pauseAllMedia();")
+    }
+
     fun getCurrentSelectionInfo(callback: (String) -> Unit) {
         runJavaScript("getCurrentSelectionInfo();", callback)
     }

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

@@ -474,6 +474,16 @@ internal class R2EpubPageFragment : Fragment() {
         }
     }
 
+    /**
+     * Called when the fragment is not the currently visible page anymore, for example after
+     * turning the page. Pauses any HTML media element (e.g. `<audio>` or `<video>`) still playing.
+     *
+     * See https://github.com/readium/kotlin-toolkit/issues/145
+     */
+    internal fun onPageBecameInvisible() {
+        webView?.pauseAllMedia()
+    }
+
     fun runJavaScript(script: String, callback: ((String) -> Unit)? = null) {
         whenPageFinished {
             requireNotNull(webView).runJavaScript(script, callback)

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

@@ -142,6 +142,18 @@ internal class R2FXLPageFragment : Fragment() {
         super.onDestroyView()
     }
 
+    /**
+     * Called when the fragment is not the currently visible page anymore, for example after
+     * turning the page. Pauses any HTML media element (e.g. `<audio>` or `<video>`) still playing.
+     *
+     * See https://github.com/readium/kotlin-toolkit/issues/145
+     */
+    internal fun onPageBecameInvisible() {
+        for (webView in webViews) {
+            webView.pauseAllMedia()
+        }
+    }
+
     @SuppressLint("SetJavaScriptEnabled")
     private fun setupWebView(webView: R2BasicWebView, link: Link?, resourceUrl: Url?) {
         webViews.add(webView)

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

@@ -62,6 +62,15 @@ internal class R2PagerAdapter internal constructor(
 
     override fun setPrimaryItem(container: ViewGroup, position: Int, `object`: Any) {
         if (getCurrentFragment() !== `object`) {
+            // Notifies the previously visible page that it will be hidden, for
+            // example to pause any playing media.
+            // See https://github.com/readium/kotlin-toolkit/issues/145
+            when (val hiddenFragment = currentFragment) {
+                is R2EpubPageFragment -> hiddenFragment.onPageBecameInvisible()
+                is R2FXLPageFragment -> hiddenFragment.onPageBecameInvisible()
+                else -> {}
+            }
+
             currentFragment = `object` as Fragment
             nextFragment = mFragments.get(getItemId(position + 1))
             previousFragment = mFragments.get(getItemId(position - 1))