@internetarchive/bookreader 5.0.0-32-shadydom2 → 5.0.0-33

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 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
 # 5.0.0-31
 Fix: modal loads into dom from `<ia-bookreader>` @iisa
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-32-shadydom2",
+  "version": "5.0.0-33",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
   "private": false,
   "dependencies": {
     "@internetarchive/ia-activity-indicator": "^0.0.1",
-    "@internetarchive/ia-item-navigator": "0.0.5-2",
+    "@internetarchive/ia-item-navigator": "0.0.5",
     "@internetarchive/ia-menu-slider": "^1.1.1",
     "@internetarchive/ia-sharing-options": "^0.1.4",
     "@internetarchive/icon-bookmark": "^1.1.3",

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/src/BookNavigator/bookmarks/bookmarks-provider.js

@@ -16,7 +16,7 @@ export default class BookmarksProvider {
       signedIn,
       bookreader,
       modal,
-      onProviderChange
+      onProviderChange,
     } = options;
 
     const referrerStr = `referer=${encodeURIComponent(location.href)}`;

package/src/BookNavigator/bookmarks/ia-bookmarks.js

@@ -142,9 +142,8 @@ class IABookmarks extends LitElement {
     if (this.displayMode === 'login') {
       return;
     }
-    this.updateDisplay();
-    this.setBREventListeners();
     this.fetchUserBookmarks();
+    this.setBREventListeners();
   }
 
   updateDisplay() {
@@ -154,6 +153,9 @@ class IABookmarks extends LitElement {
   }
 
   fetchUserBookmarks() {
+    if (!this.api.identifier) {
+      return;
+    }
     this.fetchBookmarks()
       .then(() => {
         this.initializeBookmarks();
@@ -228,7 +230,7 @@ class IABookmarks extends LitElement {
   }
 
   fetchBookmarks() {
-    return this.api.getAll().then((res) => {
+    return this.api.getAll().then(res => res.text()).then((res) => {
       let response;
       try {
         response = JSON.parse(res);

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');

package/tests/karma/BookNavigator/bookmarks/ia-bookmarks.test.js

@@ -0,0 +1,57 @@
+import {
+  html,
+  fixtureSync,
+  expect,
+  fixtureCleanup,
+} from '@open-wc/testing';
+import '../../../../src/BookNavigator/bookmarks/ia-bookmarks.js';
+import sinon from 'sinon';
+
+afterEach(() => {
+  sinon.restore();
+  fixtureCleanup();
+});
+
+describe('<ia-bookmarks>', () => {
+  it('uses `setup` to start component', async () => {
+    const el = fixtureSync(html`<ia-bookmarks></ia-bookmarks>`);
+    await el.updateComplete;
+
+    let fetchHappened = false;
+    el.bookreader.bookId = 'foo';
+    el.displayMode = 'bookmarks';
+
+    el.fetchBookmarks = async () => {
+      fetchHappened = true;
+      return await Promise.resolve();
+    };
+
+    const fetchSpy = sinon.spy(el, 'fetchUserBookmarks');
+
+    el.setup();
+    await el.updateComplete;
+
+    expect(fetchSpy.callCount).to.equal(1);
+    expect(fetchHappened).to.equal(true);
+  });
+  it('does not fetch user bookmarks if displayMode = login', async () => {
+    const el = fixtureSync(html`<ia-bookmarks></ia-bookmarks>`);
+    await el.updateComplete;
+
+    let fetchHappened = false;
+    el.displayMode = 'login';
+
+    el.fetchBookmarks = async () => {
+      fetchHappened = true;
+      return await Promise.resolve();
+    };
+
+    const fetchSpy = sinon.spy(el, 'fetchUserBookmarks');
+
+    el.setup();
+    await el.updateComplete;
+
+    expect(fetchSpy.callCount).to.equal(0);
+    expect(fetchHappened).to.equal(false);
+  });
+});