@internetarchive/bookreader 5.0.0-32 → 5.0.0-33

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+# 5.0.0-33
+Fix: restricted books get cover image @iisa
+
 # 5.0.0-32
 Fix: fetch bookmarks from service when logged in @iisa
 Fix: adjust css to help shadydom render properly @iisa

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-32",
+  "version": "5.0.0-33",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",

package/src/BookNavigator/book-navigator.js

@@ -3,6 +3,7 @@ import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 // eslint-disable-next-line no-unused-vars
 import { ModalManager } from '@internetarchive/modal-manager';
 import { css, html, LitElement } from 'lit-element';
+import { nothing } from 'lit-html';
 import SearchProvider from './search/search-provider.js';
 import DownloadProvider from './downloads/downloads-provider.js';
 import VisualAdjustmentProvider from './visual-adjustments/visual-adjustments-provider.js';
@@ -417,6 +418,7 @@ export class BookNavigator extends LitElement {
       this.lendingStatus = lendingStatus;
       this.isAdmin = isAdmin;
       this.bookReaderCannotLoad = previewType === 'singlePagePreview';
+      this.emitLoadingStatusUpdate(true);
     });
     window.addEventListener('BRJSIA:PostInit', ({ detail }) => {
       const { isRestricted, downloadURLs } = detail;
@@ -491,20 +493,20 @@ export class BookNavigator extends LitElement {
     this.dispatchEvent(event);
   }
 
-  get loadingClass() {
-    return !this.bookReaderLoaded ? 'loading' : '';
+  get itemImage() {
+    const identifier = this.itemMD?.metadata.identifier;
+    const url = `https://${this.baseHost}/services/img/${identifier}`;
+    return html`<img class="cover-img" src=${url} alt="cover image for ${identifier}">`;
   }
 
-  get itemImage() {
-    const url = `https://${this.baseHost}/services/img/${this.item.metadata.identifier}`;
-    return html`<img class="cover-img" src=${url} alt="cover image for ${this.item.metadata.identifier}">`;
+  get placeholder() {
+    return html`<div class="placeholder">${this.itemImage}</div>`;
   }
 
   render() {
-    const placeholder = this.bookReaderCannotLoad ? this.itemImage : this.loader;
-    return html`<div id="book-navigator" class="${this.loadingClass}">
-      ${placeholder}
-      <slot name="main"></slot>
+    return html`<div id="book-navigator__root">
+      ${this.bookReaderCannotLoad ? this.placeholder : nothing}
+      ${!this.bookReaderCannotLoad ? html`<slot name="main"></slot>` : nothing}
     </div>
   `;
   }
@@ -512,13 +514,20 @@ export class BookNavigator extends LitElement {
   static get styles() {
     return css`
     :host,
-    #book-navigator,
+    #book-navigator__root,
     slot,
     slot > * {
       display: block;
       height: inherit;
       width: inherit;
     }
+    .placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      margin: 5%;
+    }
     .cover-img {
       max-height: 300px;
     }

package/tests/karma/BookNavigator/book-navigator.test.js

@@ -111,11 +111,6 @@ describe('<book-navigator>', () => {
 
     it('creates an item image from metadata', async () => {
       const el = fixtureSync(container());
-      el.item = {
-        metadata: { identifier: 'foo' },
-      };
-      await elementUpdated(el);
-
       const itemImage = fixtureSync(el.itemImage);
       expect(itemImage).to.be.instanceOf(HTMLImageElement);
       expect(itemImage.getAttribute('class')).to.equal('cover-img');