fix(ios): prevent MO paragraph column-breaks for audio/visual sync#160
Draft
ddfreiling wants to merge 3 commits into
Draft
fix(ios): prevent MO paragraph column-breaks for audio/visual sync#160ddfreiling wants to merge 3 commits into
ddfreiling wants to merge 3 commits into
Conversation
In paginated CSS-column layout, a paragraph straddling two columns would
play its full audio while the reader stayed pinned to column 1, leaving
the column-2 continuation invisible. When media-overlay playback starts,
inject `p { break-inside: avoid !important; }` so each paragraph stays
whole on one page, keeping audio and visible text in sync.
Exposed as `EPUBPreferences.preventMOColumnBreaks` (default `true`) so
consumers can opt out if they prefer the original layout. Re-evaluated
whenever preferences are updated mid-session. The `ReadiumReaderView`
protocol gains `setMOActive(_:)` to separate the "MO is active" signal
from the CSS-injection decision, which lives entirely in EPUBReaderView.
Also adds `.npmrc` to the helper-scripts package to suppress
`min-release-age` for the git-sourced `readium-css` dependency, which
caused `npm install` to fail when a global `min-release-age` was set.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… sync Extends the iOS fix to Android and Web. When media-overlay playback starts, injectMOBreakCSS() / removeMOBreakCSS() are called via the shared window.flutterReadium helper-script bundle (FlutterReadiumTools.ts) so the CSS lives in one place and each platform only calls one-line JS. - Android: inject on MO start, remove on stop, re-inject on spine-item change (onPageChanged), and re-evaluate when preferences change mid-session. - Web: inject on audioEnable (MO path), remove on stop, re-inject in the frameLoaded callback (via onFrameLoaded hook in FlutterEpubNavigator), and re-evaluate when setEPUBPreferences is called mid-session. - Helper scripts: adds injectMOBreakCSS() and removeMOBreakCSS() to FlutterReadiumTools; rebuilds the rollup bundle. - Dart: preventMOColumnBreaks field already present from iOS commit; Android also wires it in FlutterEpubPreferences.kt. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
ddfreiling
force-pushed
the
fix/mo-column-breaks
branch
from
90213c3 to
34bc849
Compare
Bypass window.flutterReadium for CSS injection on web. The helper script initialises window.flutterReadium inside requestAnimationFrame, so it doesn't exist yet when frameLoaded fires synchronously. Direct DOM manipulation is race-free and makes the rAF timing irrelevant. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
In paginated CSS-column layout, a paragraph straddling two columns would play its full audio while the reader stayed pinned to column 1, leaving the column-2 continuation invisible. When media-overlay playback starts, inject
p { break-inside: avoid !important; }so each paragraph stays whole on one page, keeping audio and visible text in sync.Exposed as
EPUBPreferences.preventMOColumnBreaks(defaulttrue) so consumers can opt out if they prefer the original layout. Re-evaluated whenever preferences are updated mid-session. TheReadiumReaderViewprotocol gainssetMOActive(_:)to separate the "MO is active" signal from the CSS-injection decision, which lives entirely in EPUBReaderView.