@internetarchive/bookreader 5.0.0-80 → 5.0.0-82

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# 5.0.0-82
+- Feature: New option to control unviewable page image: `unviewablePageURI` @cdrini
+
+# 5.0.0-81
+- Dev: Update test dependencies @cdrini
+- Dev: Update build dependencies @cdrini
+- Fix: BookReader buttons inherit font @rebecca-shoptaw
+- Fix: Better visual adjustment text @rebecca-shoptaw
+
 # 5.0.0-80
 - Dev: Fix/modernize IIIF demo @cdrini
 - Dev: Fix sharing panel erroring when no IA item metadata specified @cdrini

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-80",
+  "version": "5.0.0-82",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -40,20 +40,20 @@
     "lit": "^2.5.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.3",
-    "@babel/eslint-parser": "7.23.3",
+    "@babel/core": "7.24.7",
+    "@babel/eslint-parser": "7.24.7",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-decorators": "7.23.3",
-    "@babel/preset-env": "7.23.3",
+    "@babel/plugin-proposal-decorators": "7.24.7",
+    "@babel/preset-env": "7.24.7",
     "@iiif/presentation-2": "^1.0.4",
     "@iiif/presentation-3": "^2.1.3",
-    "@open-wc/testing-helpers": "3.0.0",
+    "@open-wc/testing-helpers": "3.0.1",
     "@types/jest": "29.5.12",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "babel-loader": "9.1.3",
     "codecov": "^3.8.3",
     "concurrently": "8.2.2",
-    "core-js": "3.33.3",
+    "core-js": "3.37.1",
     "cpx2": "4.2.3",
     "eslint": "^7.32.0",
     "eslint-plugin-no-jquery": "^2.7.0",
@@ -69,14 +69,14 @@
     "jquery-ui-touch-punch": "0.2.3",
     "jquery.browser": "0.1.0",
     "live-server": "1.2.2",
-    "regenerator-runtime": "0.14.0",
-    "sass": "1.69.5",
-    "sinon": "17.0.1",
+    "regenerator-runtime": "0.14.1",
+    "sass": "1.77.6",
+    "sinon": "18.0.0",
     "soundmanager2": "2.97.20170602",
-    "svgo": "3.0.4",
-    "testcafe": "3.4.0",
+    "svgo": "3.3.2",
+    "testcafe": "3.6.1",
     "testcafe-browser-provider-browserstack": "^1.13.2-alpha.1",
-    "webpack": "5.89.0",
+    "webpack": "5.92.0",
     "webpack-cli": "5.1.4"
   },
   "jest": {
@@ -110,8 +110,8 @@
     "clean": "rm -r BookReader/ || true",
     "lint": "npx eslint src/ tests/ *.js",
     "lint:fix": "npx eslint --fix src/ tests/ *.js",
-    "serve": "npx http-server . --port 8000",
-    "serve-live": "npx live-server . --cors --port 8000 --watch=index.html,BookReader,BookReaderDemo",
+    "serve": "npx http-server . --port=8000",
+    "serve-live": "npx live-server . --cors --port=8000 --watch=index.html,BookReader,BookReaderDemo",
     "serve-dev": "env NODE_ENV='development' npm run build-css && env NODE_ENV='development' npx concurrently --kill-others npm:serve-live npm:build-*:watch",
     "test": "npx jest --coverage --colors",
     "test:watch": "npx jest --watch",

package/src/BookNavigator/assets/button-base.js

@@ -12,6 +12,7 @@ export default css`
     text-align: center;
     vertical-align: middle;
     font-size: 1.4rem;
+    font-family: inherit;
     display: inline-block;
     padding: .6rem 1.2rem;
     border: 1px solid transparent;

package/src/BookNavigator/visual-adjustments/visual-adjustments-provider.js

@@ -20,11 +20,11 @@ const visualAdjustmentOptions = [{
   value: 100,
 }, {
   id: 'invert',
-  name: 'Inverted colors (dark mode)',
+  name: 'Invert colors (dark mode)',
   active: false,
 }, {
   id: 'grayscale',
-  name: 'Grayscale',
+  name: 'Convert to grayscale',
   active: false,
 }];
 

package/src/BookNavigator/visual-adjustments/visual-adjustments.js

@@ -157,7 +157,7 @@ export class IABookVisualAdjustments extends LitElement {
 
   get zoomControls() {
     return html`
-      <h4>Zoom</h4>
+      <h4>Adjust zoom</h4>
       <button class="zoom_out" @click=${this.emitZoomOut} title="zoom out">
         <ia-icon-magnify-minus></ia-icon-magnify-minus>
       </button>

package/src/BookReader/BookModel.js

@@ -4,11 +4,6 @@ import { clamp } from './utils.js';
 /** @typedef {import('./options.js').PageData} PageData */
 /** @typedef {import('../BookReader.js').default} BookReader */
 
-// URI to display when a page is not viewable.
-// TODO Render configurable html for the user instead.
-// FIXME Don't reference files on archive.org
-const UNVIEWABLE_PAGE_URI = '/bookreader/static/preview-default.png';
-
 /**
  * Contains information about the Book/Document independent of the way it is
  * being rendering. Nothing here should reference e.g. the mode, zoom, etc.
@@ -160,7 +155,17 @@ export class BookModel {
    */
   // eslint-disable-next-line no-unused-vars
   getPageURI(index, reduce, rotate) {
-    return !this.getPageProp(index, 'viewable', true) ? UNVIEWABLE_PAGE_URI : this.getPageProp(index, 'uri');
+    if (!this.getPageProp(index, 'viewable', true)) {
+      const uri = this.br.options.unviewablePageURI;
+      if (uri.startsWith('.')) {
+        // It's a relative path, so make it relative to the images path
+        return this.br.options.imagesBaseURL + uri;
+      } else {
+        return uri;
+      }
+    } else {
+      return this.getPageProp(index, 'uri');
+    }
   }
 
   /**

package/src/BookReader/options.js

@@ -301,6 +301,15 @@ export const DEFAULT_OPTIONS = {
    * On init, by default, we want to use srcSet for images
    */
   useSrcSet: false,
+
+  /**
+   * @type {string}
+   * Path to the image to display when a page is unviewable (i.e. when
+   * displaying a preview of a book).
+   *
+   * Relative to the imagesBaseURL if a relative path is specified.
+   */
+  unviewablePageURI: './unviewable_page.png',
 };
 
 /**

package/tests/jest/BookNavigator/visual-adjustments.test.js

@@ -16,7 +16,7 @@ const options = [{
   value: 100,
 }, {
   id: 'invert',
-  name: 'Invert colors',
+  name: 'Invert colors (dark mode)',
   active: false,
 }, {
   id: 'brightness',