Trouble in rendering bloom book

[nikkuAg]

I have downloaded a Bloom book template using the Bloom software and saved the BloomPUB file locally.

Currently, I have a project with both backend and frontend components. The BloomPUB file is stored on my backend server, and the frontend retrieves its URL ( e.g., URL of book: http://localhost:8000/media/testbook.bloompub).

I am attempting to render the book on the frontend using the bloom-player iframe. I have added the following code:
<iframe src="https://bloomlibrary.org/bloom-player/bloomplayer.htm?url=http://localhost:8000/media/testbook.bloompub"></iframe>

However, this results in the following error: .distribution, .htm, and meta.json not found.

[JohnThomson]

Bloom player expects that the parts of the book are available unzipped. You need to unzip the bloompub file (internally it is a zip file, you can change the extension if necessary) and pass Bloom Player the url of the htm file in the root folder of the zip. The other files in the zip should also be available from the server at the same url (relative to the htm file) as in the zip.
It's conceivable, especially for small books, that Bloom Player could be made able to unzip the bloompub itself, but it would mean downloading the whole book before getting started, and possibly using up a lot of memory locally for all the parts of the book.

[nikkuAg]

Thanks for your assistance. I also want to know how to fix the CORS error when rendering a book from localhost.

Additionally, is it possible to retrieve progress data from the book, such as the page number the user has read and other progress details?

[nikkuAg]

Hey @JohnThomson,
Is there a way to get the progress from the iframe for the books like page number etc

[JohnThomson]

Regarding CORS errors, check package.json for the script "chrome-on-storybook-port": "chrome http://localhost:9009/ --disable-web-security --disable-gpu --user-data-dir=%temp%/chromeTemp", which runs chrome in a mode that ignores CORS. I think the critical thing is the --disable-web-security. Don't use Chrome in this state for anything you don't have to!

[JohnThomson]

Regarding progress information, Bloom Player sends some information to its parent window that may be helpful. You need code like this:

window.addEventListener("message", receiveMessage, false); // one-time; you'll get lots of other messages too
function receiveMessage(event: any) {
    try {
        const data = JSON.parse(event.data);
        switch (data.messageType) {
            case "sendAnalytics":
               //see what you get in data
                break;
            case "updateBookProgressReport":
                //see what you get in data
                break;
        }
    } catch (e) {}
}

I think you will find the data you get from one or both of those calls helpful.

[nikkuAg]

Thanks for your help

[nikkuAg]

Hi @JohnThomson,
I’m experiencing an issue when rendering a book to an iframe in my project. Here are the details:

Problem Description

When embedding the URL to the iframe, I encounter the following error message:

Refused to frame 'https://bloomlibrary.org/' because it violates the following Content Security Policy directive: "default-src 'self' data: blob:". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

Context

• Environment: Vue.js frontend with Django backend.
• Scenario: I have a book in a zip file on the frontend, which I unzip to extract HTML, CSS, and image files. I then set the HTML file’s Blob URL as the source for an iframe.
• Expected Behavior: The iframe should render the HTML content correctly, including all CSS and image assets.
• Actual Behavior: The iframe attempts to load the resources but fails due to the Content Security Policy (CSP) of the external site.

Steps Taken

• Unzipped the files on the frontend using fflate.
• Created Blob URLs for the HTML, CSS, and image files.
• Set the iframe’s src attribute to the Blob URL of the HTML file.

[JohnThomson]

I'm not familiar with many of the tools you are using. Sounds like a web security problem; you might try to confirm that by viewing your site using Chrome with --disable-web-security. If that's indeed the problem, as sounds likely, then figuring out the right setting for frame-src might be the answer, as the error message suggests; though I would have thought that the default setting would be right with the other book assets being served from the same base URL as the main html file. Or, you may have to configure your server to set a more open CORS policy, so the supporting files can be used from additional source locations; I would try configuring it at least temporarily so all the files are permitted to be read by any site, and if that works (and it isn't acceptable to leave it that way) try configuring it so that at least the src of your iframe and the src of the whole website are explicitly allowed to use those resources.

[nikkuAg]

Hey @JohnThomson,
Sorry for troubling you again,

I’ve installed the bloom-player package using the command npm install bloom-player. I’ve copied the files from the dist folder to my project’s directory. I want to confirm the correct usage:

• Should I use the bloomplayer.htm file from the dist folder as the src in my iframe?
• Should I pass the URL of the Bloom book as a parameter to the bloomplayer.htm file within the iframe’s src?

Here’s what I’m currently thinking:

<iframe src="path/to/bloomplayer.htm?url=path/to/bloom/book"></iframe>

Is this the correct approach, or is there a different recommended way to set it up?

[andrew-polk]

<iframe src="path/to/bloomplayer.htm?url=path/to/bloom/book"></iframe>

Yes, that's correct.

[JohnThomson]

That's the right approach. Note that the other files in the dist folder must be available at the same location as bloomplayer.htm, for example, currently if bloomplayer.htm is at localhost:8080/bloomplayer.htm, currently bloom expects to find its code at localhost:8080/bloomPlayer-a26aaa4963cbc0d22e73.min.js. (The guid in the name changes with each build. In production, this means you can tell the browser to cache everything except bloomplayer.htm itself "forever" since any new version will have a new name. In development, this may mean you need to copy everything in dist to your server whenever you build.) Similarly, the other book files must be available at the same location as the book htm file.
You may find it helpful to try "yarn start" and look at index-for-developing.htm, which demonstrate launching bloom player in an iframe. (The weird attributes of the iframe are not needed, they are alternatives you can try for "src".)

[nikkuAg]

Thank you for your help. I successfully rendered the book in my project without any errors.

I am now developing a system to track and store book progress, including page numbers, questions (correct, wrong, unattempted), and other relevant data. I can retrieve this progress data, but I need to know how to apply it back to the book to restore the exact state where it was left off when the book was last closed.

[andrew-polk]

Bloom-player doesn't currently have any way to open to a specific page.

…

On Sun, Aug 18, 2024 at 10:33 AM Divyansh Agarwal ***@***.***> wrote: Thank you for your help. I successfully rendered the book in my project without any errors. I am now developing a system to track and store book progress, including page numbers, questions (correct, wrong, unattempted), and other relevant data. I can retrieve this progress data, but I need to know how to apply it back to the book to restore the exact state where it was left off when the book was last closed. — Reply to this email directly, view it on GitHub <#316 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABMTRM62LLGE4EQJVFYJH5TZSDLGHAVCNFSM6AAAAABK2ONP3KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJVGMZTINRWHE> . You are receiving this because you commented.Message ID: ***@***.***>