Profile
Back to NewsBack
GitHub Trending 7 min
Reader Mode
internetarchive/bookreader: The Internet Archive BookReader

internetarchive/bookreader: The Internet Archive BookReader

18 hours ago
GitHub Trending

Internet Archive BookReader

!Build Status codecov</a>

Disclaimer: BookReader v5 is currently in beta. It is stable enough for production use and is actively deployed on archive.org. Future updates while in v5 beta may introduce breaking changes to public BookReader APIs, although these will be noted in the CHANGELOG.

Internet Archive BookReader full logo

BookReader v5 interface screenshot

The Internet Archive BookReader is used to view books from the Internet Archive online and can also be used to view other books.

See live examples:

  • On details page: https://archive.org/details/birdbookillustra00reedrich
  • Full window: https://archive.org/details/birdbookillustra00reedrich?view=theater
  • Embedded url for iFrames: https://archive.org/embed/birdbookillustra00reedrich

Demos

See BookReaderDemo directory. These can be tested by building the source files (make sure Node.js is installed):

npm run build

and starting a simple web server in the root directory:

npm run serve

And then open http://localhost:8000/BookReaderDemo/demo-simple.html.

Usage

Here is a short example.

// Create the BookReader object
var options = {
  data: [
    [
      { width: 800, height: 1200,
        uri: '//archive.org/download/BookReader/img/page001.jpg' },
    ],
    [
      { width: 800, height: 1200,
        uri: '//archive.org/download/BookReader/img/page002.jpg' },
      { width: 800, height: 1200,
        uri: '//archive.org/download/BookReader/img/page003.jpg' },
    ],
    [
      { width: 800, height: 1200,
        uri: '//archive.org/download/BookReader/img/page004.jpg' },
      { width: 800, height: 1200,
        uri: '//archive.org/download/BookReader/img/page005.jpg' },
    ]
  ],

bookTitle: 'Simple BookReader Presentation',


// thumbnail is optional, but it is used in the info dialog
  thumbnail: '//archive.org/download/BookReader/img/page014.jpg',


// Metadata is optional, but it is used in the info dialog
  metadata: [
    {label: 'Title', value: 'Open Library BookReader Presentation'},
    {label: 'Author', value: 'Internet Archive'},
    {label: 'Demo Info', value: 'This demo shows how one could use BookReader with their own content.'},
  ],


ui: 'full', // embed, full (responsive)


};
var br = new BookReader(options);


// Let's go!
br.init();

Architecture Overview

Starting at v5, BookReader introduces hybrid architecture that merges the core code written in jQuery closer to its evolution as a web component. As we march toward the future of BookReader as a web component, we are taking an Event Driven approach to connect the two together.

Approach:

  • Event driven
- BookReader's (BR) core code emits custom events, reporting the actions it takes: - UI changes - Core Events src/BookReader/events.js - API returns - Search API src/BookReader/events.js - BookNavigator, BR's web components controller, listens and reacts to these events in order to populate the side menu panels
  • Control BR from the outside by using public methods
- When BookNavigator reacts to BR's events, BookNavigator can directly control BR core using public functions. - As we continue to decouple the UI from drawing/calculating logic, these logical methods will become easier to spot, raise as a public method, and create unit tests for them.

Menu panels: Web Components via LitElement

BookReader's side navigation is powered by LitElement flavored web components.

Core: jQuery

BookReader's core functionality is in jQuery. This includes:
  • drawing & resizing the book and the various modes (1up, 2 page spread, gallery view)
  • the horizontal navigation
  • search API service
  • plugins
A peek in how to use/extend core functionality:
  • Properties
- TODO (for now see src/BookReader/options.js)
  • Plugins
- A basic plugin system is used. See the examples in the plugins directory. The general idea is that they are mixins that augment the BookReader prototype. See the plugins directory for all the included plugins, but here are some examples: - plugin.autoplay.js - autoplay mode. Flips pages at set intervals. - plugin.chapters.js - render chapter markers - plugin.search.js - add search ui, and callbacks - plugin.tts.js - add tts (read aloud) ui, sound library, and callbacks - plugin.url.js - automatically updates the browser url - plugin.resume.js - uses cookies to remember the current page - plugin.vendor-fullscreen.js - replaces fullscreen mode with vendor native fullscreen - see plugin directory for current plugin files

Embedding BookReader in an iFrame

BookReader can be embedded within an