Skip to content

Commit 0218b34

Browse files
mickael-menumickael-menu
authored
Fix invisible <audio> elements (#81)
1 parent e2eeb4a commit 0218b34

File tree

3 files changed

+38
-4
lines changed

3 files changed

+38
-4
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ All notable changes to this project will be documented in this file. Take a look
5454
* EPUB: Fallback on `reflowable` if the `presentation.layout` hint is missing from a manifest.
5555
* EPUB: Offset of the current selection's `rect` to take into account the vertical padding.
5656
* Improve backward compatibility of JavaScript files using Babel.
57+
* [#193](https://github.com/readium/r2-navigator-kotlin/issues/193) Fixed invisible `<audio>` elements.
5758
5859
5960
## [2.1.1]

‎readium/streamer/src/main/java/org/readium/r2/streamer/fetcher/HtmlInjector.kt‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,19 @@ internal class HtmlInjector(
7171
val endIncludes = mutableListOf<String>()
7272
val beginIncludes = mutableListOf<String>()
7373
beginIncludes.add(getHtmlLink("/assets/readium-css/${layout.readiumCSSPath}ReadiumCSS-before.css"))
74+
75+
// Fix Readium CSS issue with the positioning of <audio> elements.
76+
// https://github.com/readium/readium-css/issues/94
77+
// https://github.com/readium/r2-navigator-kotlin/issues/193
78+
beginIncludes.add("""
79+
<style>
80+
audio[controls] {
81+
width: revert;
82+
height: revert;
83+
}
84+
</style>
85+
""".trimIndent())
86+
7487
endIncludes.add(getHtmlLink("/assets/readium-css/${layout.readiumCSSPath}ReadiumCSS-after.css"))
7588
endIncludes.add(getHtmlScript("/assets/scripts/readium-reflowable.js"))
7689

‎readium/streamer/src/test/java/org/readium/r2/streamer/fetcher/HtmlInjectorTest.kt‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,12 @@ class HtmlInjectorTest {
1616
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
1717
<html xmlns="http://www.w3.org/1999/xhtml">
1818
<head><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
19-
19+
<style>
20+
audio[controls] {
21+
width: revert;
22+
height: revert;
23+
}
24+
</style>
2025
<title>Publication</title>
2126
<link rel="stylesheet" href="style.css" type="text/css"/>
2227
<link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
@@ -49,7 +54,12 @@ class HtmlInjectorTest {
4954
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
5055
<html xmlns="http://www.w3.org/1999/xhtml">
5156
<head xmlns:xlink="http://www.w3.org/1999/xlink"><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
52-
57+
<style>
58+
audio[controls] {
59+
width: revert;
60+
height: revert;
61+
}
62+
</style>
5363
<title>Publication</title>
5464
<link rel="stylesheet" href="style.css" type="text/css"/>
5565
<link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
@@ -80,7 +90,12 @@ class HtmlInjectorTest {
8090
"""
8191
<?xml version="1.0" encoding="utf-8"?>
8292
<!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"/>
83-
<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"/>
93+
<style>
94+
audio[controls] {
95+
width: revert;
96+
height: revert;
97+
}
98+
</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"/>
8499
<script type="text/javascript" src="/assets/scripts/readium-reflowable.js"></script>
85100
<style>@import url('https://fonts.googleapis.com/css?family=PT+Serif|Roboto|Source+Sans+Pro|Vollkorn');</style>
86101
<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 {
101116
<!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
102117
xmlns:xlink="http://www.w3.org/1999/xlink"
103118
><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-before.css"/>
104-
<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"/>
119+
<style>
120+
audio[controls] {
121+
width: revert;
122+
height: revert;
123+
}
124+
</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"/>
105125
<script type="text/javascript" src="/assets/scripts/readium-reflowable.js"></script>
106126
<style>@import url('https://fonts.googleapis.com/css?family=PT+Serif|Roboto|Source+Sans+Pro|Vollkorn');</style>
107127
<style type="text/css"> @font-face{font-family: "OpenDyslexic"; src:url("/assets/fonts/OpenDyslexic-Regular.otf") format('truetype');}</style>

0 commit comments

Comments
 (0)