search

Mantano / iridium

Unofficial Dart/Flutter port of some of the Readium 2 components
80 stars 27 forks source link

Epub viewer: The page contains the following errors #86

Open vitaliynester opened 1 year ago

vitaliynester commented 1 year ago

Hello all! When opening some pages in some workbooks, the following error may occur. What to do?

Screenshot_1684850306

vitaliynester commented 1 year ago

This is only in the version with inappwebview, older versions with webview work correctly

jmgeffroy commented 1 year ago

Hi @vitaliynester, can you provide us with a sample epub? Do you see some logs? This really suggests a malformed Epub... But your comment about the previous version (based on WebView) contradicts this feeling...

vitaliynester commented 1 year ago

Here is an example epub file. Error occurs from second page

example.epub.zip

jmgeffroy commented 1 year ago

OK, I can reproduce the issue on Android and iOS. On iOS, the Webview appears white, without the red paragraph. The chapter2.xhtml source code looks good, I don't see for now what can cause this issue. Investigating...

vitaliynester commented 1 year ago

I think the problem is in chapter1.xhtml. When you open it through the editor (VSCode), you can see that block a is highlighted in red. If you open this file in a browser, then the DOM tree looks different. First image - VSCode, second - chrome

image image

jmgeffroy commented 1 year ago

Thank you for the feedback. These differences are just a pretty-print artifact. VS displays a compact form when the element has no child, I think (<a id:"n_1"/>), while Chrome doesn't. In the book source code, it's written in this compact mode, too. I checked with validators, chapter1.xhtml is theoretically OK. And it shouldn't impact other chapters (each one is opened in a different webview)... For now, I'm perplexed. But I see an error in the logs:


WebViewScreenState.buildWebViewComponent.<ac>:   WebView[ERROR]: Uncaught ReferenceError: readium is not defined

Digging...

jmgeffroy commented 1 year ago

OK. Clue. I see (by adding ) that we are inserting Readium stuff at the wrong place (see the <<link below:

   <head><<link rel="stylesheet" type="text/css" href="/readium/readium-css/ReadiumCSS-before.css"/>

Weird. Never happened. I have to check the pattern matching in the HtmlInjector code...

jmgeffroy commented 1 year ago

More precisely, the wrong generated code is:

      <
      <link rel="stylesheet" type="text/css" href="/readium/readium-css/ReadiumCSS-before.css"/>
      <style>
         audio[controls] {
         width: revert;
         height: revert;
         }
      </style>
      link rel="stylesheet" href="../Styles/book.css" type="text/css" />

Both Readium-specific injected elements are inserted inside the element of the book instead of being inject outside of it!!!

The issue happens somewhere around these lines.

vitaliynester commented 1 year ago

I wonder why then it does not work with a particular instance, and not in general? How can this be fixed?

jmgeffroy commented 1 year ago

The structure of your HTML seems to defeat our pattern matching. Should be pretty easy to fix, but I need time. I have to switch to other tasks for now, but I'll fix that shortly, probably tomorrow. Sorry for the trouble.

jmgeffroy commented 1 year ago

Hi @vitaliynester, I tried a quick fix that seems to work well on your book: on this line, remove the "+ 1", as follows:

    var beginHeadIndex = head.end;

I don't push it for now, I'll wait for your feedback. I need to have a deep look at this part of the code globally; it definitely requires some love :-)

vitaliynester commented 1 year ago

This is wonderful! I will try this fix and test it on similar books. Thanks a lot!

Khaled-ElDeeb commented 1 year ago

I have tried this solution and it fixed all the books that I had an issue with, will be testing it for the upcoming week and tell you my feedback, Thanks !