@internetarchive/ia-book-actions 0.0.28 → 0.0.29-alpha10

package/demo/index.html

@@ -94,6 +94,12 @@
       canBrowseAndBorrow,
     } from '../src/assets/data/lending-get-status-service.js';
     import { ModalConfig } from '@internetarchive/modal-manager';
+    import { LocalCache } from '@internetarchive/local-cache';
+
+    const localCache = new LocalCache({
+      namespace: '1HourLoanStorage',
+      defaultTTL: 1 * 60,  // 1 minute
+    });
 
     const userid = '@neeraj-archive';
     const identifier = 'naturalhistoryof00unse_4111';
@@ -121,8 +127,15 @@
     iaBookActions.lendingBarPostInit = lendingBarPostInit;
     iaBookActions.tokenDelay = 2000; // 2 seconds
     iaBookActions.returnUrl = 'https://openlibrary.org';
+    iaBookActions.localCache = localCache;
+    iaBookActions.autoRenewConfig = {
+      totalTime: 60, // 60 second = 1 min
+      autoCheckAt: 55, // totalTime - 10th minute
+      FlippedInLast: 15, // within last 15 second/minute 
+    };
 
     let lendingStatus1 = iaBookActions.lendingStatus;
+    let secondsLeftOnLoan = iaBookActions.autoRenewConfig.totalTime;
 
     document.querySelectorAll('.titleBar input[type=checkbox]').forEach((item) => {
       item.addEventListener('click', (e) => {
@@ -187,12 +200,24 @@
     });
 
     document.querySelectorAll('.availableToBrowse input[type=radio]').forEach((item) => {
-      item.addEventListener('click', (e) => {
+      item.addEventListener('click', async (e) => {
         if (e.target.value === 'user_has_browsed') {
           lendingStatus1.user_has_browsed = true;
           lendingStatus1.available_to_browse = false;
-          lendingStatus1.secondsLeftOnLoan = 10;
+          lendingStatus1.secondsLeftOnLoan = secondsLeftOnLoan;
           lendingStatus1.browsingExpired = false;
+
+          try {
+            // set a value
+            await localCache.set({
+              key: `${identifier}-loanTime`,
+              value: new Date(), // current time
+              ttl: Number(iaBookActions.autoRenewConfig.totalTime),
+            })
+
+            await localCache.delete(`${identifier}-pageFlipTime`);
+          } catch (error) {}
+          
         } else if(e.target.value === 'browsingExpired') {
           lendingStatus1.user_has_browsed = true;
           lendingStatus1.available_to_browse = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.28",
+  "version": "0.0.29-alpha10",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -43,6 +43,12 @@
     "sinon": "^13.0.2"
   },
   "eslintConfig": {
+    "rules": {
+      "no-console": "off",
+      "no-unused-expressions": "off",
+      "class-methods-use-this": "off",
+      "lit-a11y/click-events-have-key-events": "off"
+    },
     "extends": [
       "@open-wc/eslint-config",
       "eslint-config-prettier"
@@ -54,7 +60,6 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
     }
   },
   "lint-staged": {

package/src/assets/data/lending-get-status-service.js

@@ -100,7 +100,7 @@ export const canBrowseAndBorrow = {
   // userid: "",
   bookUrl: '/details/practicalorganic00plim',
   daysLeftOnLoan: 0,
-  isAdmin: true,
+  isAdmin: false,
   isArchiveOrgLending: true,
   isAvailable: false,
   isAvailableForBrowsing: false,

package/src/components/collapsible-action-group.js

@@ -28,6 +28,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
       dropdownArrow: { type: String },
       disabled: { type: Boolean },
       returnUrl: { type: String },
+      browseAgainNow: { type: Boolean },
     };
   }
 
@@ -47,6 +48,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
     this.loaderIcon = 'https://archive.org/upload/images/tree/loading.gif';
     this.disabled = false;
     this.returnUrl = '';
+    this.browseAgainNow = false;
   }
 
   updated(changed) {
@@ -56,6 +58,21 @@ export class CollapsibleActionGroup extends ActionsHandler {
     ) {
       this.resetActions();
     }
+
+    if (changed.has('browseAgainNow') && this.browseAgainNow === true) {
+      this.dispatchAutoRenewBookEvent();
+    }
+  }
+
+  // dispatch this event to loan renew handler
+  dispatchAutoRenewBookEvent() {
+    this.dispatchEvent(
+      new CustomEvent('autoRenewLoan', {
+        detail: {
+          event: { autoRenewed1Hour: 'browseBook' },
+        },
+      })
+    );
   }
 
   /**

package/src/components/info-icon.js

@@ -55,7 +55,7 @@ export class InfoIcon extends LitElement {
       .more-info-icon.mobile {
         position: absolute;
         top: 4px;
-        right: 10px;
+        right: 55px;
         margin-top: 15px;
       }
       .hidden {

package/src/components/timer-countdown.js

@@ -0,0 +1,114 @@
+import { html, css, LitElement } from 'lit';
+
+export default class TimerCountdown extends LitElement {
+  static get properties() {
+    return {
+      time: { type: Number },
+      autoCheckAt: { type: Number },
+    };
+  }
+
+  constructor() {
+    super();
+    this.time = 0;
+    this.autoCheckAt = 0;
+
+    // private props
+    this.timerInterval = undefined;
+  }
+
+  disconnectedCallback() {
+    clearInterval(this.timerInterval);
+  }
+
+  updated(changed) {
+    if (changed.has('time') && this.time > 0) {
+      clearInterval(this.timerInterval);
+      this.timerCountdown();
+    }
+  }
+
+  timerCountdown() {
+    this.timerInterval = setInterval(() => {
+      this.time -= 1;
+
+      // execute 50th minute check
+      if (Math.round(this.time) === this.autoCheckAt) {
+        this.dispatchEvent(
+          new CustomEvent('autoRenewAttempt', {
+            detail: {
+              bookPageChange: false,
+            },
+            bubbles: true,
+            composed: true,
+          })
+        );
+      }
+
+      if (this.time === 0) clearInterval(this.timerInterval);
+    }, 1000);
+  }
+
+  render() {
+    return html`<div id="countdown">
+      <div id="countdown-number">${Math.round(this.time)}</div>
+      <svg>
+        <circle r="18" cx="20" cy="20"></circle>
+      </svg>
+    </div>`;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        right: 5px;
+        font-size: 14px;
+        position: absolute;
+      }
+
+      #countdown-number {
+        color: white;
+        display: inline-block;
+        line-height: 40px;
+        margin-right: 12px;
+      }
+
+      svg {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 40px;
+        height: 40px;
+        transform: rotateY(-180deg) rotateZ(-90deg);
+      }
+
+      svg circle {
+        stroke-dasharray: 113px;
+        stroke-dashoffset: 0px;
+        stroke-linecap: round;
+        stroke-width: 3px;
+        stroke: white;
+        fill: none;
+        animation: countdown 60s linear infinite forwards;
+      }
+
+      @keyframes countdown {
+        from {
+          stroke-dashoffset: 0px;
+        }
+        to {
+          stroke-dashoffset: 113px;
+        }
+      }
+
+      .hidden {
+        display: none;
+      }
+      .visible {
+        display: inline-block;
+      }
+    `;
+  }
+}
+
+window.customElements.define('timer-countdown', TimerCountdown);

package/src/components/toast-message.js

@@ -0,0 +1,80 @@
+import { html, css, LitElement, nothing } from 'lit';
+
+export class ToastMessage extends LitElement {
+  static get properties() {
+    return {
+      texts: { type: String },
+      dismisOnClick: { type: Boolean },
+      hideToast: { type: Boolean },
+      clostAfter: { type: Number },
+    };
+  }
+
+  constructor() {
+    super();
+    this.texts = '';
+    this.textClass = '';
+    this.hideToast = false;
+    this.clostAfter = 0;
+  }
+
+  render() {
+    return !this.hideToast
+      ? html`
+          <span
+            class="toast-message fade-in ${this.textClass}"
+            title="Click/tap to close"
+            @click=${() => {
+              this.dismisOnClick ? (this.hideToast = true) : nothing;
+            }}
+            >${this.texts}</span
+          >
+        `
+      : nothing;
+  }
+
+  static get styles() {
+    const heightFromTop = css`var(--messageHeightFromTop, 15%)`;
+
+    return css`
+      :host {
+        display: inline-block;
+      }
+      .toast-message {
+        z-index: 2;
+        position: absolute;
+        top: ${heightFromTop};
+        font-size: 1.4rem;
+        font-family: 'Helvetica Neue';
+        color: #fff;
+        left: 50%;
+        background: #333;
+        border: 1px solid #fff;
+        border-radius: 5px;
+        box-shadow: 1px 1px 2px;
+        padding: 10px;
+        width: fit-content;
+        transform: translate(-50%, -50%);
+        cursor: pointer;
+        animation: fadeIn 5s;
+        @keyframes fadeIn {
+          0% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 1;
+          }
+        }
+      }
+
+      .hidden {
+        display: none;
+      }
+      .visible {
+        display: inline-block;
+      }
+    `;
+  }
+}
+
+window.customElements.define('toast-message', ToastMessage);

package/src/core/services/actions-handler/actions-handler.js

@@ -15,10 +15,9 @@ import * as Cookies from '../doc-cookies.js';
 export default class ActionsHandler extends LitElement {
   constructor() {
     super();
-    this.identifier = '';
     this.ajaxTimeout = 6000;
+
     this.bindEvents();
-    this.returnUrl = '';
   }
 
   sendEvent(eventCategory, eventAction) {
@@ -44,6 +43,12 @@ export default class ActionsHandler extends LitElement {
       this.sendEvent(category, action);
     });
 
+    this.addEventListener('autoRenewLoan', ({ detail }) => {
+      this.handleAutoRenewLoan();
+      const { category, action } = detail.event;
+      this.sendEvent(category, action);
+    });
+
     this.addEventListener('returnNow', ({ detail }) => {
       this.handleReturnIt();
       const { category, action } = detail.event;
@@ -98,6 +103,7 @@ export default class ActionsHandler extends LitElement {
   handleBrowseIt() {
     const action = 'browse_book';
     this.dispatchToggleActionGroup();
+    this.setBrowseTimeSession();
 
     ActionsHandlerService({
       action,
@@ -111,6 +117,20 @@ export default class ActionsHandler extends LitElement {
     });
   }
 
+  handleAutoRenewLoan() {
+    const action = 'renew_loan';
+    this.setBrowseTimeSession();
+
+    ActionsHandlerService({
+      action,
+      identifier: this.identifier,
+      success: () => {},
+      error: data => {
+        this.dispatchActionError(action, data);
+      },
+    });
+  }
+
   handleReturnIt() {
     const action = 'return_loan';
     this.dispatchToggleActionGroup();
@@ -261,6 +281,24 @@ export default class ActionsHandler extends LitElement {
     }
   }
 
+  /**
+   * set browse time in indexedDB
+   */
+  async setBrowseTimeSession() {
+    try {
+      await this.localCache.set({
+        key: `${this.identifier}-loanTime`,
+        value: new Date(), // current time
+        ttl: Number(this.autoRenewConfig.totalTime),
+      });
+
+      // delete flip time
+      await this.localCache.delete(`${this.identifier}-pageFlipTime`);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
   deleteLoanCookies() {
     const date = new Date();
     date.setTime(date.getTime() - 24 * 60 * 60 * 1000); // one day ago

package/src/core/services/one-hour-auto-renew.js

@@ -0,0 +1,157 @@
+import { nothing } from 'lit';
+
+/**
+ * This class is used to determine if use is eligible for auto renew loan.
+ *
+ */
+export class OneHourAutoRenew {
+  constructor(
+    isPageClick,
+    identifier,
+    localCache,
+    autoRenewConfig
+  ) {
+    this.isPageClick = isPageClick;
+    this.identifier = identifier;
+    this.localCache = localCache;
+    this.autoRenewConfig = autoRenewConfig;
+
+    // messages for auto return machenism
+    this.autoRenewMessage = 'This book has been renewed for another hour.';
+    this.autoReturnMessage =
+      'This book has been auto-returned due to inactivity.';
+    this.autoReturnWarning =
+      'This book will be auto-returned in 10 minutes unless you turn a page.';
+
+    // private props
+    this.autoRenewResult = {
+      toastTexts: '',
+      hideToast: true,
+      browseAgainNow: false,
+    };
+
+    return this.handleBookAutoRenew();
+  }
+
+  handleBookAutoRenew() {
+    try {
+      // when user click/flip on book page
+      if (this.isPageClick) {
+        console.log('page flipped!!');
+        return this.userFlippedBookPage(); // user clicked on page
+      }
+
+      return this.autoCheckerTimer(); // auto checker at 50th minute
+    } catch (error) {
+      console.log(error);
+    }
+
+    return nothing;
+  }
+
+  // set new pageFlipTime in indexedDB 
+  async setPageFlippedTime() {
+    await this.localCache.set({
+      key: `${this.identifier}-pageFlipTime`,
+      value: new Date(), // current time
+      ttl: Number(this.autoRenewConfig.totalTime),
+    });
+  }
+
+  async userFlippedBookPage() {
+    const {
+      totalTime, // 60
+      autoCheckAt, // 50
+    } = this.autoRenewConfig;
+    const currentTime = new Date();
+    const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
+
+    const lastTimeFrame = this.changeTime(
+      loanTime,
+      totalTime - autoCheckAt,
+      'add'
+    ); // 50 seconds
+
+    // if user viewed new page in last 10 minutes, renew immediately
+    if (currentTime >= lastTimeFrame) {
+      console.log('1 YES NOW BORROW IT AGAIN NOW!');
+      this.autoRenewResult.toastTexts = this.autoRenewMessage;
+      this.autoRenewResult.hideToast = false;
+      this.autoRenewResult.browseAgainNow = true;
+
+      this.setNewBrowseTime();
+    }
+
+    this.setPageFlippedTime();
+    return this.autoRenewResult;
+  }
+
+  async autoCheckerTimer() {
+    const currentTime = new Date();
+    const { FlippedInLast } = this.autoRenewConfig;
+    const lastPageFlipTime = await this.localCache.get(
+      `${this.identifier}-pageFlipTime`
+    );
+
+    // last 15 min if used flipped a page.
+    const lastFlipTimeFrame = this.changeTime(
+      currentTime,
+      FlippedInLast,
+      'sub'
+    ); // 15 seconds
+
+    if (
+      lastPageFlipTime === undefined ||
+      lastPageFlipTime <= lastFlipTimeFrame
+    ) {
+      // not viewed
+      console.log('Not viewed, warning message!');
+      this.autoRenewResult.toastTexts = this.autoReturnWarning;
+      this.autoRenewResult.browseAgainNow = false;
+      this.autoRenewResult.hideToast = false;
+    } else if (lastPageFlipTime >= lastFlipTimeFrame) {
+      // viewed in last time frame
+      console.log('Viewed, auto renew and message!');
+      this.autoRenewResult.toastTexts = this.autoRenewMessage;
+      this.autoRenewResult.browseAgainNow = true;
+      this.autoRenewResult.hideToast = false;
+
+      this.setNewBrowseTime();
+    }
+
+    return this.autoRenewResult;
+  }
+
+  async setNewBrowseTime() {
+    try {
+      // last 15 min if used flipped a page.
+      const expireDate = this.changeTime(
+        new Date(),
+        this.autoRenewConfig.totalTime,
+        'add'
+      ); // 15 seconds
+
+      // set a value
+      await this.localCache.set({
+        key: `${this.identifier}-loanTime`,
+        value: expireDate, // expireDate time
+        ttl: Number(this.autoRenewConfig.totalTime),
+      });
+
+      // delete pageFlipTime when book is auto renew at nth minute
+      await this.localCache.delete(`${this.identifier}-pageFlipTime`);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  changeTime(date, minutes, op) {
+    if (date === undefined) return nothing;
+
+    if (op === 'sub') {
+      return new Date(date.getTime() - minutes * 1000);
+    }
+
+    return new Date(date.getTime() + minutes * 1000);
+  }
+}

package/src/ia-book-actions.js

@@ -1,17 +1,21 @@
 /* eslint-disable camelcase */
-import { html, css, LitElement } from 'lit';
+import { html, css, LitElement, nothing } from 'lit';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { ModalConfig } from '@internetarchive/modal-manager';
+import { LocalCache } from '@internetarchive/local-cache';
 
 import './components/collapsible-action-group.js';
 import './components/book-title-bar.js';
 import './components/text-group.js';
 import './components/info-icon.js';
+import './components/timer-countdown.js';
+import './components/toast-message.js';
 
-import { GetLendingActions } from './core/services/get-lending-actions.js';
 import { mobileContainerWidth } from './core/config/constants.js';
+import { GetLendingActions } from './core/services/get-lending-actions.js';
 import { LoanTokenPoller } from './core/services/loan-token-poller.js';
+import { OneHourAutoRenew } from './core/services/one-hour-auto-renew.js';
 
 export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
@@ -36,6 +40,9 @@ export default class IABookActions extends LitElement {
       disableActionGroup: { type: Boolean },
       modal: { Object },
       tokenDelay: { type: Number },
+      localCache: { type: Object },
+      autoRenewConfig: { type: Object },
+      autoRenewResult: { type: Object },
     };
   }
 
@@ -54,6 +61,17 @@ export default class IABookActions extends LitElement {
     this.disableActionGroup = false;
     this.modal = undefined;
     this.tokenDelay = 120000; // 2 minutes
+    this.localCache = new LocalCache({
+      namespace: '1HourLoanStorage',
+    });
+
+    // loan auto renew
+    this.autoRenewConfig = {};
+    this.autoRenewResult = {
+      toastTexts: '',
+      hideToast: true,
+      browseAgainNow: false,
+    };
 
     // private props
     this.primaryActions = [];
@@ -63,6 +81,9 @@ export default class IABookActions extends LitElement {
     this.lendingOptions = {};
     this.borrowType = ''; // (browsed|borrowed)
     this.consecutiveLoanCounts = 1; // consecutive loan count
+    this.browserTimer = undefined;
+
+    this.bindAutoRenewEvent();
   }
 
   disconnectedCallback() {
@@ -90,12 +111,65 @@ export default class IABookActions extends LitElement {
     }
   }
 
-  browseHasExpired() {
+  bindAutoRenewEvent() {
+    // dispatched this event from timer-countdown
+    this.addEventListener('autoRenewAttempt', async event => {
+      const isPageClick = event.detail.bookPageChange;
+
+      // early return if user is not browsed book
+      if (isPageClick && this.borrowType !== 'browsed') return nothing;
+
+      this.autoRenewResult = await new OneHourAutoRenew(
+        isPageClick,
+        this.identifier,
+        this.localCache,
+        this.autoRenewConfig
+      );
+
+      this.toastTexts = this.autoRenewResult.toastTexts;
+      this.hideToast = this.autoRenewResult.hideToast;
+      this.browseAgainNow = this.autoRenewResult.browseAgainNow;
+
+      if (this.autoRenewResult.browseAgainNow) {
+        this.tokenPoller.disconnectedInterval();
+        await this.browseHasRenew();
+      }
+
+      return nothing;
+    });
+  }
+
+  async browseHasExpired() {
     const currStatus = { ...this.lendingStatus, browsingExpired: true };
     this.lendingStatus = currStatus;
+    this.autoRenewResult.browseAgainNow = false;
+
+    // remove respected key:value
+    await this.localCache.delete(`${this.identifier}-loanTime`);
+    await this.localCache.delete(`${this.identifier}-pageFlipTime`);
+
+    // show message after browsed book is expired.
+    this.autoRenewResult.toastTexts = 'This book has been auto-returned due to inactivity.';
+  }
+
+  async browseHasRenew() {
+    const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
+    const secondsLeft = (loanTime - new Date()) / 1000; // different in seconds
+
+    const currStatus = {
+      ...this.lendingStatus,
+      user_has_browsed: true,
+      browsingExpired: false,
+      secondsLeftOnLoan: secondsLeft,
+    };
+    this.lendingStatus = currStatus;
+
+    this.startBrowseTimer();
   }
 
   startBrowseTimer() {
+    clearTimeout(this.browserTimer);
+
     const {
       browsingExpired,
       user_has_browsed,
@@ -106,7 +180,7 @@ export default class IABookActions extends LitElement {
     }
 
     const timeLeft = secondsLeftOnLoan * 1000;
-    setTimeout(() => {
+    this.browserTimer = setTimeout(() => {
       this.browseHasExpired();
     }, timeLeft);
   }
@@ -169,7 +243,11 @@ export default class IABookActions extends LitElement {
       'browsingExpired' in this.lendingStatus &&
       this.lendingStatus?.browsingExpired;
     if (hasExpired) {
-      window?.Sentry?.captureMessage('setupLendingToolbarActions hasExpired');
+      if (!this.tokenPoller.disconnectedInterval) {
+        window?.Sentry?.captureMessage(
+          'setupLendingToolbarActions hasExpired - no tokenPoller'
+        );
+      }
       this.tokenPoller?.disconnectedInterval();
       /** Global event - always fire */
       this.dispatchEvent(
@@ -194,7 +272,13 @@ export default class IABookActions extends LitElement {
       return;
     }
 
-    this.startLoanTokenPoller();
+    // if (book is about to renew)
+    // - start token to poller around this.tokenDelay time until renew is completed
+    // else
+    // - start token poller immediately
+    setTimeout(() => {
+      this.startLoanTokenPoller();
+    }, this.autoRenewResult.browseAgainNow ? this.tokenDelay : 100);
   }
 
   render() {
@@ -216,8 +300,28 @@ export default class IABookActions extends LitElement {
     ></book-title-bar>`;
   }
 
+  get timerCountdownTemplate() {
+    return this.borrowType === 'browsed'
+      ? html`<timer-countdown
+          time=${Number(this.lendingStatus.secondsLeftOnLoan)}
+          .autoCheckAt=${this.autoRenewConfig.autoCheckAt}
+        ></timer-countdown>`
+      : nothing;
+  }
+
+  get toastMessageTemplate() {
+    return html`
+      <toast-message
+        .texts=${this.autoRenewResult.toastTexts}
+        ?dismisOnClick=${Boolean(true)}
+        ?hideToast=${this.autoRenewResult.hideToast}
+      ></toast-message>
+    `;
+  }
+
   get bookActionBar() {
     return html`
+      <button @click=${() => this.pageFlipEvent()}>Page Flip</button>
       <collapsible-action-group
         .userid=${this.userid}
         .identifier=${this.identifier}
@@ -227,16 +331,32 @@ export default class IABookActions extends LitElement {
         .width=${this.width}
         .borrowType=${this.borrowType}
         .returnUrl=${this.returnUrl}
+        .localCache=${this.localCache}
+        .autoRenewConfig=${this.autoRenewConfig}
         ?hasAdminAccess=${this.hasAdminAccess}
         ?disabled=${this.disableActionGroup}
+        ?browseAgainNow=${this.autoRenewResult.browseAgainNow}
         @lendingActionError=${this.handleLendingActionError}
         @toggleActionGroup=${this.handleToggleActionGroup}
       >
       </collapsible-action-group>
       ${this.textGroupTemplate} ${this.infoIconTemplate}
+      ${this.timerCountdownTemplate} ${this.toastMessageTemplate}
     `;
   }
 
+  // will move this function to bookreader...
+  pageFlipEvent() {
+    // dispatch event to say book page has flipped
+    document.querySelector('ia-book-actions').dispatchEvent(
+      new CustomEvent('autoRenewAttempt', {
+        detail: { bookPageChange: true },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   /**
    * enable access of borrowed/browsed books
    */
@@ -401,6 +521,10 @@ export default class IABookActions extends LitElement {
         justify-content: center;
         flex-wrap: wrap;
       }
+
+      toast-message {
+        --messageHeightFromTop: 17%;
+      }
     `;
   }
 }

package/demo/with-bookreader.html

@@ -1,146 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <style>
-    html {
-      font-size: 10px;
-      /* This is to match petabox's base font size */
-    }
-    body {
-      margin: 0;
-      text-align: center;
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
-    #demo {
-      height: 50px;
-    }
-    ia-book-actions {
-      --white: #fff;
-      --black: #000;
-      --primaryBGColor: var(--black);
-      --secondaryBGColor: #222;
-      --tertiaryBGColor: #333;
-      --primaryTextColor:  var(--white);
-      --primaryCTAFill: #194880;
-      --primaryCTABorder: #c5d1df;
-      --secondaryCTAFill: #333;
-      --secondaryCTABorder: #999;
-      --secondaryCTAFillRGB: 51, 51, 51;
-      --primaryErrorCTAFill: #e51c26;
-      --primaryErrorCTABorder: #f8c6c8;
-      --primaryCTAFillRGB: 25, 72, 128;
-      --primaryErrorCTAFillRGB: 229, 28, 38;
-      --primaryDisableCTAFill: #767676;
-    }
-
-    fieldset {
-      width: fit-content;
-      margin-top: 50px;
-    }
-    fieldset legend {
-      text-align: left;
-      font-size: 12px;
-    }
-    td {
-      color: white;
-      font-size: 14px;
-      border-radius: 5%;
-      display: table-cell;
-      text-align: initial;
-      margin: 5px 0;
-      width: max-content;
-      display: block;
-    }
-    label {
-      padding: 10px;
-      display: block;
-      cursor: pointer;
-      margin: 2px;
-      background: #4e545a;
-      border-radius: 10px;
-    }
-    input[type="radio"], input[type="checkbox"] {
-      margin-top: 0;
-      vertical-align: middle;
-    }
-
-    .initial td {
-      float: left;
-      margin: 2px;
-    }
-
-    body.modal-manager-open {
-      overflow: hidden;
-    }
-  
-    modal-manager[mode='closed'] {
-      display: none;
-    }
-  </style>
-</head>
-
-<body>
-  <ia-bookreader class="focus-on-child-only" signedin="" fullscreen="">
-    <div slot="header">
-      <ia-book-actions></ia-book-actions>
-    </div>
-    <div slot="main">
-      <div id="BookReader"></div>
-    </div>
-  </ia-bookreader>
-
-
-  <script type="module">
-    /* eslint-disable */
-    import '@internetarchive/bookreader';
-    import '@internetarchive/bookreader/BookReader/jquery-1.10.1.js';
-    import '@internetarchive/bookreader/BookReader/BookReader.js';
-    import '../src/ia-book-actions.js';
-    import {
-      defaultLendingStatus,
-      canBrowseAndBorrow,
-    } from '../src/assets/data/lending-get-status-service.js';
-    import { ModalConfig } from '@internetarchive/modal-manager';
-
-    const userid = '@neeraj-archive';
-    const identifier = 'naturalhistoryof00unse_4111';
-    let bwbPurchaseUrl = 'https://www.betterworldbooks.com/product/detail/cambridge-ancient-hist-v04-0521044863';
-
-    let iaBookActions = document.querySelector('ia-book-actions');
-
-    // for debugging
-    window.iaBookActions = iaBookActions;
-
-    const modalConfig = new ModalConfig();
-    modalConfig.headerColor = '#d9534f';
-
-    let lendingBarPostInit = function lendingBarPostInit() {
-      setTimeout(function() {
-        console.log('executed', 'br.init()');
-      }, 100);
-    }
-
-    // set defaultLendingStatus for unavailable (without borrowables) book
-    iaBookActions.userid = userid;
-    iaBookActions.identifier = identifier;
-    iaBookActions.bookTitle = 'Contemporary Black biography. Volume 39 : profiles from the interContemporary Black biography. Volume 39';
-    iaBookActions.lendingStatus = canBrowseAndBorrow;
-    iaBookActions.bwbPurchaseUrl = '';
-    iaBookActions.modalConfig = modalConfig;
-    iaBookActions.lendingBarPostInit = lendingBarPostInit;
-    iaBookActions.tokenDelay = 2000; // 2 seconds
-    iaBookActions.returnUrl = 'https://openlibrary.org';
-
-    let lendingStatus1 = iaBookActions.lendingStatus;
-
-    const manifest = await fetch('https://ia801302.us.archive.org/BookReader/BookReaderJSIA.php?id=goody&itemPath=/29/items/goody&server=ia801302.us.archive.org&format=jsonp&subPrefix=goody&requestUri=/details/goody/mode/1up%3Fview%3Dtheater%26ui%3Dembed%26wrapper%3Dfalse');
-
-    console.log('manifest ****', manifest).then(res => res.json());
-  </script>
-
-  </div>
-</body>
-</html>