From 39159eac8cc6b5e883eb723a563ee21b8cf1240a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mickae=CC=88l=20Menu?= <mickael.menu@gmail.com>
Date: Thu, 13 Jan 2022 14:17:27 +0100
Subject: [PATCH] Fix invisible `<audio>` elements

---
 CHANGELOG.md                                  |  1 +
 .../r2/streamer/fetcher/HtmlInjector.kt       | 13 +++++++++
 .../r2/streamer/fetcher/HtmlInjectorTest.kt   | 28 ++++++++++++++++---
 3 files changed, 38 insertions(+), 4 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e5958ce012..9a55a147e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -54,6 +54,7 @@ All notable changes to this project will be documented in this file. Take a look
 * EPUB: Fallback on `reflowable` if the `presentation.layout` hint is missing from a manifest.
 * EPUB: Offset of the current selection's `rect` to take into account the vertical padding.
 * Improve backward compatibility of JavaScript files using Babel.
+* [#193](https://github.com/readium/r2-navigator-kotlin/issues/193) Fixed invisible `<audio>` elements.
 
 
 ## [2.1.1]
diff --git a/readium/streamer/src/main/java/org/readium/r2/streamer/fetcher/HtmlInjector.kt b/readium/streamer/src/main/java/org/readium/r2/streamer/fetcher/HtmlInjector.kt
index c051a5e202..b2987bf31b 100644
--- a/readium/streamer/src/main/java/org/readium/r2/streamer/fetcher/HtmlInjector.kt
+++ b/readium/streamer/src/main/java/org/readium/r2/streamer/fetcher/HtmlInjector.kt
@@ -71,6 +71,19 @@ internal class HtmlInjector(
         val endIncludes = mutableListOf<String>()
         val beginIncludes = mutableListOf<String>()
         beginIncludes.add(getHtmlLink("/assets/readium-css/${layout.readiumCSSPath}ReadiumCSS-before.css"))
+
+        // Fix Readium CSS issue with the positioning of <audio> elements.
+        // https://github.com/readium/readium-css/issues/94
+        // https://github.com/readium/r2-navigator-kotlin/issues/193
+        beginIncludes.add("""
+            <style>
+            audio[controls] {
+                width: revert;
+                height: revert;
+            }
+            </style>
+        """.trimIndent())
+
         endIncludes.add(getHtmlLink("/assets/readium-css/${layout.readiumCSSPath}ReadiumCSS-after.css"))
         endIncludes.add(getHtmlScript("/assets/scripts/readium-reflowable.js"))
 
diff --git a/readium/streamer/src/test/java/org/readium/r2/streamer/fetcher/HtmlInjectorTest.kt b/readium/streamer/src/test/java/org/readium/r2/streamer/fetcher/HtmlInjectorTest.kt
index 0598e47097..643491b065 100644
--- a/readium/streamer/src/test/java/org/readium/r2/streamer/fetcher/HtmlInjectorTest.kt
+++ b/readium/streamer/src/test/java/org/readium/r2/streamer/fetcher/HtmlInjectorTest.kt
@@ -16,7 +16,12 @@ class HtmlInjectorTest {
                 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                 <html xmlns="http://www.w3.org/1999/xhtml">
                     <head><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
-
+                <style>
+                audio[controls] {
+                    width: revert;
+                    height: revert;
+                }
+                </style>
                         <title>Publication</title>
                         <link rel="stylesheet" href="style.css" type="text/css"/>
                     <link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
@@ -49,7 +54,12 @@ class HtmlInjectorTest {
                 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                 <html xmlns="http://www.w3.org/1999/xhtml">
                     <head xmlns:xlink="http://www.w3.org/1999/xlink"><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
-
+                <style>
+                audio[controls] {
+                    width: revert;
+                    height: revert;
+                }
+                </style>
                         <title>Publication</title>
                         <link rel="stylesheet" href="style.css" type="text/css"/>
                     <link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
@@ -80,7 +90,12 @@ class HtmlInjectorTest {
             """
                 <?xml version="1.0" encoding="utf-8"?>
                 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head xmlns:xlink="http://www.w3.org/1999/xlink"><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
-                <title>Publication</title><link rel="stylesheet" href="style.css" type="text/css"/><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
+                <style>
+                audio[controls] {
+                    width: revert;
+                    height: revert;
+                }
+                </style><title>Publication</title><link rel="stylesheet" href="style.css" type="text/css"/><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
                 <script type="text/javascript" src="/assets/scripts/readium-reflowable.js"></script>
                 <style>@import url('https://fonts.googleapis.com/css?family=PT+Serif|Roboto|Source+Sans+Pro|Vollkorn');</style>
                 <style type="text/css"> @font-face{font-family: "OpenDyslexic"; src:url("/assets/fonts/OpenDyslexic-Regular.otf") format('truetype');}</style>
@@ -101,7 +116,12 @@ class HtmlInjectorTest {
                 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><HEAD
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  ><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
-                <title>Publication</title><link rel="stylesheet" href="style.css" type="text/css"/><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
+                <style>
+                audio[controls] {
+                    width: revert;
+                    height: revert;
+                }
+                </style><title>Publication</title><link rel="stylesheet" href="style.css" type="text/css"/><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
                 <script type="text/javascript" src="/assets/scripts/readium-reflowable.js"></script>
                 <style>@import url('https://fonts.googleapis.com/css?family=PT+Serif|Roboto|Source+Sans+Pro|Vollkorn');</style>
                 <style type="text/css"> @font-face{font-family: "OpenDyslexic"; src:url("/assets/fonts/OpenDyslexic-Regular.otf") format('truetype');}</style>
