Implement EPUB reader as part of the plugin

[aladmit]

I'm trying to make resources upgrade easier. This is a proof of concept how we can implement EPUB reader inside the plugin. It uses epubjs as an npm package, part of reader.js rewritten with TypeScript.

What do you think about this kind of implementation?

Also, I discovered that defineGenericAnnotation creates OfflineIframe and does some kind of proxying, modifying file urls and stuff. What's the point of doing that?

[elias-sundqvist]

Also, I discovered that defineGenericAnnotation creates OfflineIframe and does some kind of proxying, modifying file urls and stuff. What's the point of doing that?

It's the black magic that makes the plugin work. Basically, OfflineIframe lets me download a website and display it as if you visited it online, but with the benefit that I can intercept and modify any web request. This is for example used to override API calls and to load the user specified pdfs/epubs.

So for example, whenever a hypothesis api call is made, such as when creating a new annotation. I can intercept that call, and make Annotator run its own custom logic that stores the annotation in markdown file instead of calling the hypothes.is servers.

[aladmit]

Yay! :) Looks like this changes somehow fixed a problem when annotation sidebar sometimes shows inside epub view. Also TypeError: Cannot read property 'substr' of undefined disappeared 🔥

[aladmit]

@elias-sundqvist I've added hypothesis as an npm package to remove resources/cdn.hypothesis.is/hypothesis from epub reader, but I can't figure out how to run it inside readers iframe. Could you help me with that please?

I see that is could be done in two ways:

1. Start hypothesis from defineEpubAnnotation. But hypothesis is self-evoking function, so as soon as I import the package, it runs in global Obsidian window instead of iframe window.
2. Add hypothesis from package as static js to index.html. It should work just fine, but I don't know how to do that 🤔

[elias-sundqvist]

Although importing hypothes.is as an npm package is a neat idea, I'm not sure if it will work very well. You mentioned some of the issues with this approach above, but we may also encounter situations where we need to modify parts of the original hypothes.is code.

Therefore I think it might be better to keep using the resources folder. (At least for hypothes.is. Your epub.js solution in this PR will probably be worth merging.) To avoid the manual labor involved in updating hypothes.is version, we could have a hypothes.is fork as a submodule in this repo. That would allow us to make our own custom changes, and whenever a new update is released we can just rebase our changes and run the build script.

If you want to try anyways:

Option 2 is basically what is being done right now, just that the script comes from the resources folder instead of node_modules.

You could maybe make a script in the rollup config to automatically copy the relevant files from node_modules to the resources folder. This would ensure that the hypothesis version is kept in sync with the npm version.

[elias-sundqvist]

Is this still WIP, or should I try to merge it?

[aladmit]

It's still in progress :(

Each time I turn a page, there is a chance hypothesis will crush with Uncaught (in promise) Error: No application/annotator+html (rel="sidebar") link in the document error. When it happens, it's completely impossible to highlight or annotate 🥲

Looks like it happens because hypothesis tries to parse a page before epubjs rendered it, but I didn't figure out why it happens yet.

[aladmit]

Also I researched hypothesis a little. There is a hope we can make all our changes in hypothesis through hypothesisConfig. It's possible to make your own annotation sidebar function and change hypothesis behaviour through it. Example 1, Example 2

I didn't dive into it yet, but at first glance it looks like we can expose window.guests like that without modifying the code.

[elias-sundqvist]

Ok, thanks for the update! I've made some changes locally that I can push tomorrow. One of the changes is the submodule solution I mentioned earlier.

[aladmit]

@elias-sundqvist Are you sure you pushed all changes to master? I wanted to merge new features to this branch, but I can't even build master locally now :(

P.S. Submodule solution looks great 👍🏻

[elias-sundqvist]

Getting the latest release to build yesterday was pretty annoying. I guess I let some minor issues slip by.

Regarding the warnings you got:

• upgrade the obsidian api to the latest version
• remove the plugin argument from the function calls.

[elias-sundqvist]

Also, if you are using windows you need to do the thing mentioned in README_DEV.md.

[aladmit]

Yay, it merged and built 🎉

master works great, but on ts-reader branch I get 403 errors o_O

I built by npm run build and then manually updated manifest urls in resources/cdn.hypothes.is/hypothesis.html. Did I miss some step?

GET https://cdn.hypothes.is/hypothesis/build/scripts/annotator.bundle.js?f60250 net::ERR_ABORTED 403

Refused to apply style from 'https://cdn.hypothes.is/hypothesis/build/styles/highlights.css?c308d0' because its MIME type ('application/xml') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

[elias-sundqvist]

We shouldn't have to change resources/cdn.hypothes.is/hypothesis.html.

I tried merging the main branch into yours and building.
In the epub reader I get errors like this

I guess the undefined parts of the URL is what you fixed by modifying resources/cdn.hypothes.is/hypothesis.html?

I think the underlying reason is that, when we build hypothes.is on windows, it generates file paths like this:

On linux it would generate / instead of \\ and work as expected (hopefully).

I'll investigate ways to fix this on Wednesday.

[aladmit]

Huh! I made a build with your merge and it works stranger than I thought 😅

I don't have undefined errors, I guess because I work on macOS. But! With some books I get 403 errors again, and with some everything works fine o_O
For example, I don't have any errors or messages when I open Moby Dick, but I get errors when I open Shawn Archer The Happiness Advantage 🤔

[aladmit]

I have exactly the same problem on master. Moby Dick works fine, my books have 403 errors. Also, I see file not found errors from gerUrl of defineGenericAnnotation for PDFs, but PDFs works fine despite that ¯_(ツ)_/¯

[elias-sundqvist]

One issue in my last commit was that the old call to the epubReader function still remained.
My test epub file seems to work fine after making that fix.
Does it fix anything on your end?

If not, maybe you could send me your epub file so that I can test it?

[aladmit]

I don't understand what's going on 😭

Only strange pirated books were working incorrectly yesterday, but all good legally bought books worked fine. A few minutes ago I removed node_modules and package-lock.json, cleaned npm cache, built everything again and... got errors for all books. Even with Moby Dick.

[elias-sundqvist]

Strange. Maybe some dependency got updated and caused something to change?

Most version numbers in package.json are specified as "a specific version or higher", so the dependencies may have changed when you deleted node modules and reinstalled.

I can probably look into this more during the weekend.

[aladmit]

Tried to build it again, master worked fine, ts-reader had problems with all books :(
Only difference between package-lock.json of two branches is epubjs package with deps, so I think it's not bc of dependencies. Maybe I'm just lucky and when I test reader I do some unobvious stuff triggers the errors ¯_(ツ)_/¯

Maybe it would be easier if we have a call and try to debug it together? What do u think?

[elias-sundqvist]

I made a new commit that fixes some epub loading issues for me.
If that doesn't work, we can have a call if you want. I am Elias Sundqvist on the Obsidian Members Group discord.

[aladmit]

Heeeeey, I'm back! 😄

I figured out why EPUB reader sometimes fails and what is really going on when we see hypothesis inside hypothesis or 403 error.
I noticed in an iframe with the first chapter, hypothesis runs as guest and just sets identification to the iframe. And for all next chapters it runs in iframes as host and inject full hypothesis library into iframe. Sometimes it does it successfully and we see hypothesis inside hypothesis. Sometimes it fails and then iframe requests https://cdn.hypothesis.is/hypothesis/.... But it goes to real cdn.hypotehsis.is, because it's iframe generated by epubjs with injected code by hypothesis and react-offile-iframe don't catch requests like that. The path doesn't exist at cdn.hypothesis.is, so it gets 403.

I've found fresh issue about this behavior Epub.js demo does not work

Good news is I don't get this problem on latest v1.1035.0 version! That's why send a PR to the fork. With this update we can finally merge this PR ❤️

P.S. I changed how hypothesis-client builds so it would build exactly they do it.

[aladmit]

Looks like this update also fixed Epub annotations dissapear after page turn At lest I don't see this behavior in my vault anymore.

[elias-sundqvist]

Sounds great! I'm a bit busy with other things, but I'll check this out and try to merge it sometime this week.

[aladmit]

I've tested it with updated submodule reference. LGTM 👌🏻