Epub.js demo does not work

[dwhly]

Bug report form

Steps to reproduce

1. Go to https://web.hypothes.is/demos/epubjs/
2. Try to view existing annotations
3. Try to create a new annotation

Expected behaviour

You should see highlights from existing annotations
You should be able to make an annotation
Clicking the book text should close the sidebar

[dwhly]

@markjohngraham at IA is inquiring about this wrt to their own Hypothesis implementation.

[robertknight]

From a quick look:

• At least some of the highlights exist in the document, but are invisible. It looks like the logic that handles toggling the highlight visibility is not working in the context of a child iframe
• The logic related to support for multiple iframes doesn't seem to be working correctly. The sidebar is only aware of one frame and that is for the EPUB viewer rather than the document. Possibly related to the above.
• The newest annotation on that page was created on 7th January, so it looks like it broke some time between then and now

[robertknight]

These demos are now working again as a result of #3599 and #3611. These are steps in an ongoing overhaul of how different frames in the client communicate. There are remaining issues with what happens when multiple frames have annotation enabled at once - annotations can sometimes show up as orphans even if they aren't. This issue however always existed and needs to be fixed.

[robertknight]

The Epub.js demo at https://web.hypothes.is/demos/epubjs/ is no longer working. The main issue is to do with how the client is configured in the different frames of the viewer and how that affects the first chapter. The Epub.js viewer has two frames - an outer "container" frame and an inner "content" frame. What needs to happen is for the client to load into the outer "container" frame in "host" mode and the inner "content" frame in "guest" mode. See the logic related to vitalSourceFrameRole in src/annotator/index.js in the client. What is currently happening in the Epub.js demo is that the client is loaded as a guest in both the outer and inner frames. These frames have the same URL - the URL of the first chapter of the book. As a result, all annotations for the first chapter get sent to the outer frame, since it is the "main" frame, rather than the inner frame.

You can see the issue if you examine the document URLs in the client's Help panel:

The first URL is for the container frame. The second URL is for the content frame. Annotations that should be sent to the content frame get sent to the container frame instead. If you go to a later chapter in the book and make an annotation, things work better, as the content and container frames then have different URLs.

In addition to this issue, there is also some other issues that have always existed:

1. The bucket bar assumes a document that scrolls vertically, whereas Epub.js scrolls horizontally.
2. Annotations made on eg. the second chapter show up when annotating the first chapter. This doesn't happen when annotating later chapters, so I suspect there are some incorrect document equivalences in the h database, possibly relating to issues with earlier versions of the client.

Current example of a payload sent when creating an annotation on a chapter later in the book:

{
    "created": "2022-03-07T08:50:08.419Z",
    "group": "__world__",
    "permissions": {
        "read": [
            "group:__world__"
        ],
        "update": [
            "acct:robertknight@hypothes.is"
        ],
        "delete": [
            "acct:robertknight@hypothes.is"
        ]
    },
    "tags": [],
    "text": "Quick test",
    "updated": "2022-03-07T08:50:08.419Z",
    "user": "acct:robertknight@hypothes.is",
    "user_info": {
        "display_name": "Robert Knight"
    },
    "hidden": false,
    "links": {},
    "document": {
        "title": "Moby-Dick",
        "link": [
            {
                "href": "https://cdn.hypothes.is/OPS/chapter_011.xhtml"
            },
            {
                "href": "https://cdn.hypothes.is/demos/epub/epub.js/index.html?loc=chapter_011.xhtml",
                "rel": "canonical",
                "type": ""
            },
            {
                "href": "urn:x-dc:org.example.hypothesis.demo.epub-samples.moby-dick-basic/xchapter_011"
            }
        ],
        "dc": {
            "identifier": [
                "xchapter_011"
            ],
            "relation.ispartof": [
                "org.example.hypothesis.demo.epub-samples.moby-dick-basic"
            ]
        },
        "eprints": {},
        "facebook": {},
        "highwire": {},
        "prism": {},
        "twitter": {},
        "documentFingerprint": "urn:x-dc:org.example.hypothesis.demo.epub-samples.moby-dick-basic/xchapter_011"
    },
    "uri": "https://cdn.hypothes.is/demos/epub/epub.js/index.html?loc=chapter_011.xhtml",
    "target": [
        {
            "source": "https://cdn.hypothes.is/demos/epub/epub.js/index.html?loc=chapter_011.xhtml",
            "selector": [
                {
                    "type": "RangeSelector",
                    "startContainer": "/section[1]/header[1]/h1[1]",
                    "startOffset": 0,
                    "endContainer": "/section[1]/header[1]/h1[1]",
                    "endOffset": 22
                },
                {
                    "type": "TextPositionSelector",
                    "start": 3,
                    "end": 25
                },
                {
                    "type": "TextQuoteSelector",
                    "exact": "Chapter 11. Nightgown.",
                    "prefix": "\n\n\n",
                    "suffix": "\nWe had lain thus in bed, chatti"
                }
            ]
        }
    ]
}