Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I get metadata for an epub? #69

Closed
Jemeni11 opened this issue Jan 5, 2023 · 17 comments
Closed

How can I get metadata for an epub? #69

Jemeni11 opened this issue Jan 5, 2023 · 17 comments

Comments

@Jemeni11
Copy link
Contributor

Jemeni11 commented Jan 5, 2023

I want to get basic stuff like the author's name, publisher, description, etc. Is there any way of doing this???

@kravchenko-anton
Copy link

Hey, in you project work useReader hook?

@kravchenko-anton
Copy link

Mee too needed metadata

@Jemeni11
Copy link
Contributor Author

Jemeni11 commented Jan 27, 2023

Hey, in you project work useReader hook?

No, I am not

@D3troit98
Copy link

Anyone figured a way on this? Or should we have to edit the code

@siphu
Copy link

siphu commented Jan 28, 2023

You'll have to edit the template or patch the default template to get the meta data.
inside the book.ready, you can add something like -

window.ReactNativeWebView.postMessage(JSON.stringify({ type: "meta", data: book.package.metadata }));

you'll also have to patch the View.tsx to also pass that data back to wherever you want to use it.

if you want to get the book cover, then you'll have to be more creative by -

  1. reading the url through book.coverUrl()
  2. converting it to a blob
  3. using FileReader to convert it into a base64.

@kravchenko-anton
Copy link

Oh my good, you know any complete case for example?

@Jemeni11
Copy link
Contributor Author

Jemeni11 commented Feb 1, 2023

You'll have to edit the template or patch the default template to get the meta data. inside the book.ready, you can add something like -

window.ReactNativeWebView.postMessage(JSON.stringify({ type: "meta", data: book.package.metadata }));

you'll also have to patch the View.tsx to also pass that data back to wherever you want to use it.

if you want to get the book cover, then you'll have to be more creative by -

  1. reading the url through book.coverUrl()
  2. converting it to a blob
  3. using FileReader to convert it into a base64.

Thanks !!!
I did this and it works.
Unfortunately, the book.coverUrl() doesn't work. It returns an empty object Object{}

@siphu
Copy link

siphu commented Feb 1, 2023

@Jemeni11
this is what how I did it -

const meta = book.package.metadata;
book.coverUrl().then(async (url) => {
    var reader = new FileReader();
    reader.onload = (res) => { 
        window.ReactNativeWebView.postMessage(JSON.stringify({ type: "cover", cover: reader.result, meta: meta }));
    }
    reader.readAsDataURL(await fetch(url).then(res => res.blob()));
  }).catch(()=>{
    window.ReactNativeWebView.postMessage(JSON.stringify({ type: "cover", cover: undefined, meta: meta }));
  });

@Jemeni11
Copy link
Contributor Author

Jemeni11 commented Feb 1, 2023

Once again, thanks !!! This worked!!

I made a pull request adding this feature: #73

@Jemeni11 Jemeni11 closed this as completed Feb 1, 2023
@kravchenko-anton
Copy link

kravchenko-anton commented Feb 8, 2023

How can I get the metadata for a book that the user won't open?
for example the user hasn't opened the book and how can I get the book's metadata right away. It is also interesting whether it is possible to make the translation functionality of the book?
and how can you do offline reading guys?

@Jemeni11
Copy link
Contributor Author

Jemeni11 commented Feb 8, 2023

How can I get the metadata for a book that the user won't open?
for example the user hasn't opened the book and how can I get the book's metadata right away. It is also interesting whether it is possible to make the translation functionality of the book?

I do not know how to do this with this library but you can use xmldom and do something like this:

const { DOMParser } = require("@xmldom/xmldom");

let xmlMetadata;

export async function parseXML(xmlFile) {
  try {
    const response = await fetch(xmlFile);
    const xmlText = await response.text();
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlText, "application/xml");  // "application/xml" or "text/xml"

    xmlMetadata = {
      title: xmlDoc.getElementsByTagName("dc:title")[0].textContent,
      author: xmlDoc.getElementsByTagName("dc:creator")[0].textContent,
      date: xmlDoc.getElementsByTagName("dc:publisher")[0].textContent,
    };
    return xmlMetadata;
  } catch (error) {
    console.error(`Error parsing XML: ${error}`);
  }
}

where xmlFile is the path to the .opf file of the epub.

Of course you'll need to unzip the epub to even get to the .opf file in the first place and I don't know how to do that.

@Jemeni11
Copy link
Contributor Author

Jemeni11 commented Feb 8, 2023

and how can you do offline reading guys?

I ... did not notice this. Are you saying this library only works if there's an internet connection?

@Jemeni11
Copy link
Contributor Author

Jemeni11 commented Feb 8, 2023

Of course you'll need to unzip the epub to even get to the .opf file in the first place and I don't know how to do that.

UPDATE:
You can use any of these libraries:

You'll have to read the docs because I only skimmed through but from what I saw they should work.

I even tested JSZip and it printed out the correct output

Screenshot

@kravchenko-anton
Copy link

kravchenko-anton commented Feb 10, 2023

I tried these three libraries but they either do not work with react native expo or they are long out of date, can you please show me an example code that could unzip epub like on JSZip site?
Thank you very much and sorry, I am new to react native

Of course you'll need to unzip the epub to even get to the .opf file in the first place and I don't know how to do that.

UPDATE: You can use any of these libraries:

You'll have to read the docs because I only skimmed through but from what I saw they should work.

I even tested JSZip and it printed out the correct output

Screenshot

@Jemeni11
Copy link
Contributor Author

I tried these three libraries but they either do not work with react native expo or they are long out of date, can you please show me an example code that could unzip epub like on JSZip site? Thank you very much and sorry, I am new to react native

Of course you'll need to unzip the epub to even get to the .opf file in the first place and I don't know how to do that.

UPDATE: You can use any of these libraries:

You'll have to read the docs because I only skimmed through but from what I saw they should work.
I even tested JSZip and it printed out the correct output
Screenshot

Hey @Anton-Kravkenko
I made an app using JSZip and Expo
Here's the repo: https://github.com/Jemeni11/ePub-file-details
When an ePub is selected, the app lists out all the files in the epub.

@kravchenko-anton
Copy link

Oh my good, thank you

@kravchenko-anton
Copy link

I fixed the problem of difference epub files and missing components using google book api, title is in all, with it I did it. There is no other choice, almost all applications for reading books use this approach

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants