Native: comic panel box (xywh) is ignored

Open
  • Is something wrong?
#235 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
android, dart, swift
Domain
mobile

Research direction

Start with the web reference in flutter_readium/web/src/mediaoverlay/syncNarration.ts and _syncDivinaToMediaOverlayLocator in ReadiumReader.ts, then inspect the iOS and Android guided-navigation item models and native comic navigators. Implement the listed parsing, locator propagation, and pan/zoom behavior on both platforms, including preventing iOS from publishing the box as a CSS selector. Done means comic cues pan to their panel with web-equivalent gating on both platforms.

Written by the indexing model from the issue text.

Description

enhancement upstream-issue

Summary

Guided-navigation cues for comics can carry a panel box, e.g. imgref: "image0001.jpg#xywh=pixel:44,113,757,226". Web reads it and pans/zooms to the panel while the audio plays. iOS and Android ignore it, so they turn the page but always show the whole page.

Where it stands today

Platform Page turn on cue Pan/zoom to panel
Web ✅ ✅ comicRegion → FlutterDivinaNavigator.panToRegion
iOS ✅ ❌ no xywh parsing anywhere
Android ✅ (after #234) ❌ no xywh parsing anywhere

Related defect on iOS

iOS passes the raw imgref through as the item's text reference:

// GuidedNavigationDocument.swift
if let audio = obj.audioref, let text = obj.textref ?? obj.imgref {

FlutterMediaOverlayItem then splits on # and publishes the fragment as a CSS selector:

locator.locations.otherLocations["cssSelector"] = .string("#\(frag!)")

For a panel cue that yields cssSelector: "#xywh=pixel:44,113,757,226" — not a DOM id, and not a valid selector. It reaches Dart on every comic cue. Android avoids this (#234 drops the fragment); iOS still needs it handled, ideally by parsing the box instead of discarding it.

Suggested work

  1. Parse #xywh=pixel:x,y,w,h in the iOS and Android guided-navigation item models.
  2. Carry the box on the cue locator, the way web puts comicRegion in otherLocations.
  3. Pan/zoom the native comic navigators to the box, with the same auto-pan and manual-override gating web uses.
  4. Stop publishing the box as a cssSelector on iOS.

Web reference: flutter_readium/web/src/mediaoverlay/syncNarration.ts (parseImgField, textLocatorForItem) and _syncDivinaToMediaOverlayLocator in ReadiumReader.ts.

Dominant language
Dart
Stars
35
Forks
19
Avg merge
3d 10h
Merged PRs (30d)
37

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Notalib/flutter_readium

All issues in Notalib/flutter_readium

Similar issues

More Dart issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.