javascriptepub.js

(EPub.JS) Can't set the location of an ebook to open

I'm trying to work on having a epub / ebook show up in an html page and be able to store the user's progress on where they left off.

Currently, I can store the position where they were, when they use the left/right buttons to navigate. I can see that this shows up in localstorage.

However, it seems that whatever I try to set the book to display this position fails. I'm not skilled enough at javascript to understand where it's going wrong or why. I used chatgpt to get a lot of this built and have been triaging it from there as some of its info is out of date.

Currently, if i try to set the books position, on one epub file i have, it goes to the very first page. On another, it goes to what I believe is the very last page and then the navigation breaks; i'm not sure as i haven't really thumbed all the way through the other one.

Anyways, hopefully someone here knows an easy trick to this, sorry that i'm relatively uninformed on this library. I've tried looking at its documentation and frankly it's just too big with too many individual components for me to understand; i really have tried quite a few times and i feel that i'm stuck.

The part that i'm failing on is the function 'setBookToSavedState()'.

I've also tried setting the location, as in the documentation i can see that book.locations.currentLocation and rendition.currentLocation allows you to get or set it, but it seems like nothing happens when I do this.

I am going to try to just run some sort of loop where I call rendition.next until i get the start position to line up where I want, but it will be some really ignorant code and i'd like to get it done the right way here as i'm not sure if i'll be able to get that to work anyway.

Thanks in advance for any help you can offer!

<html>
    <head>
        <script src="https://futurepress.github.io/epubjs-reader/js/epub.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>

<style>
    #prev {
    left: 0;
}
#next {
    right: 0;
}
    .arrow {
        position: fixed;
        top: 50%;
        margin-top: -32px;
        font-size: 64px;
        color: #E2E2E2;
        font-family: arial, sans-serif;
        font-weight: bold;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        
    }
</style>
    </head>

    <body>
        <a id="prev" href="#prev" class="arrow" style="visibility: visible;"><</a>
        <a id="next" href="#next" class="arrow" style="visibility: visible;">></a>
        <div id="area">

        </div>
<script>
    // Load the opf
    var book = ePub("moby-dick.epub");
    var rendition = book.renderTo("area", {
      width: "100%",
      height: 600,
      spread: "always"
    });

    rendition.display();

    book.ready.then(() => {

var next = document.getElementById("next");

next.addEventListener("click", function(e){
  book.package.metadata.direction === "rtl" ? rendition.prev() : rendition.next();
  e.preventDefault();
  saveViewerState();
})

}, false);

var prev = document.getElementById("prev");
prev.addEventListener("click", function(e){
  book.package.metadata.direction === "rtl" ? rendition.next() : rendition.prev();
  e.preventDefault();
  saveViewerState();
}, false);

var keyListener = function(e){

  // Left Key
  if ((e.keyCode || e.which) == 37) {
    book.package.metadata.direction === "rtl" ? rendition.next() : rendition.prev();
  }

  // Right Key
  if ((e.keyCode || e.which) == 39) {
    book.package.metadata.direction === "rtl" ? rendition.prev() : rendition.next();
  }

};

rendition.on("keyup", keyListener);
document.addEventListener("keyup", keyListener, false);

function saveViewerState() {
  if (rendition && rendition.location && rendition.location.start) {
    // get the current location
var currentLocation = rendition.currentLocation();

// save the current location in localStorage
localStorage.setItem("currentLocation", JSON.stringify(currentLocation));
}
}

// Retrieve the saved state from local storage and set the book to the saved page
function setBookToSavedState() {
  // get the saved location from localStorage
var savedLocation = JSON.parse(localStorage.getItem("currentLocation"));

// display the saved location
rendition.display(savedLocation);
}

  </script>

    </body>
</html>
Solution

  • The documentation for Rendition.display states that it expects either a url or EpubCFI string. In your example, you would have to do the following:

    // display the saved location
rendition.display(savedLocation.start.cfi);