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

package/demo/index.html

@@ -87,13 +87,18 @@
 
   <script type="module">
     /* eslint-disable */
-
     import '../src/ia-book-actions.js';
     import {
       defaultLendingStatus,
       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 +126,15 @@
     iaBookActions.lendingBarPostInit = lendingBarPostInit;
     iaBookActions.tokenDelay = 2000; // 2 seconds
     iaBookActions.returnUrl = 'https://openlibrary.org';
+    iaBookActions.localCache = localCache;
+    iaBookActions.autoRenewTimeConfig = {
+      totalTime: 60, // 60 second = 1 min
+      autoCheckAt: 55, // totalTime - 10th minute
+      FlippedInLast: 15, // within last 15 second/minute 
+    };
 
     let lendingStatus1 = iaBookActions.lendingStatus;
+    let secondsLeftOnLoan = 60;
 
     document.querySelectorAll('.titleBar input[type=checkbox]').forEach((item) => {
       item.addEventListener('click', (e) => {
@@ -134,6 +146,21 @@
       });
     });
 
+    document.querySelectorAll('.autoRenew input[type=checkbox]').forEach((item) => {
+      item.addEventListener('click', (e) => {
+        if (e.target.checked) {
+          iaBookActions.autoRenew = true;
+          iaBookActions.resetTimerCountdown = true;
+          lendingStatus1.secondsLeftOnLoan = secondsLeftOnLoan;
+        } else {
+          iaBookActions.autoRenew = false;
+        }
+
+        let lending = {...defaultLendingStatus, ...lendingStatus1};
+        iaBookActions.lendingStatus = lending;
+      });
+    });
+
     document.querySelectorAll('.errorEnable input[type=checkbox]').forEach((item) => {
       if (window.location.href.indexOf('?error=true') !== -1) {
         item.checked = true;
@@ -187,12 +214,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: parseInt(iaBookActions.autoRenewTimeConfig.totalTime),
+            })
+
+            await localCache.delete(`${identifier}-pageFlipTime`);
+          } catch (error) {}
+          
         } else if(e.target.value === 'browsingExpired') {
           lendingStatus1.user_has_browsed = true;
           lendingStatus1.available_to_browse = false;
@@ -272,6 +311,7 @@
         <table class="initial">
           <tr colspan='5'>
             <td class="errorEnable"><label><input type="checkbox" name="errorEnable" value="errorEnable" />Do you want to see error response?</label></td>
+            <td class="autoRenew"><label><input type="checkbox" name="autoRenew" value="autoRenew" />Do you want to auto-renew 1 hour</label></td>
           </tr>
           <tr>
             <td class="userState">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.28",
+  "version": "0.0.29-alpha2",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -11,8 +11,8 @@
   },
   "scripts": {
     "start": "web-dev-server",
-    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.js\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
+    "lint": "eslint --ext .js",
+    "format": "eslint --ext .js,",
     "test": "yarn run lint && yarn test:fast",
     "test:fast": "web-test-runner --coverage --playwright --browsers chromium firefox webkit",
     "test:watch": "web-test-runner --watch --playwright --browsers chromium firefox webkit"
@@ -54,7 +54,6 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
     }
   },
   "lint-staged": {

package/src/assets/styles/timer-countdown.js

@@ -0,0 +1,58 @@
+import { css } from 'lit';
+
+export default timerCountDownStyle = css`
+  :host {
+    right: 5px;
+    font-size: 14px;
+    position: absolute;
+  }
+  #countdown1 {
+    position: relative;
+    margin: auto;
+    margin-top: 100px;
+    height: 40px;
+    width: 40px;
+    text-align: center;
+  }
+  
+  #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;
+  }
+`;

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

@@ -28,6 +28,8 @@ export class CollapsibleActionGroup extends ActionsHandler {
       dropdownArrow: { type: String },
       disabled: { type: Boolean },
       returnUrl: { type: String },
+      browseAgainNow: { type: Boolean },
+      autoRenewTimeConfig: { type: Object },
     };
   }
 
@@ -47,6 +49,8 @@ export class CollapsibleActionGroup extends ActionsHandler {
     this.loaderIcon = 'https://archive.org/upload/images/tree/loading.gif';
     this.disabled = false;
     this.returnUrl = '';
+    this.browseAgainNow = false;
+    this.autoRenewTimeConfig = {};
   }
 
   updated(changed) {
@@ -56,6 +60,16 @@ export class CollapsibleActionGroup extends ActionsHandler {
     ) {
       this.resetActions();
     }
+
+    if (this.browseAgainNow === true) {
+      this.dispatchEvent(
+        new CustomEvent('autoBrowseBook', {
+          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,128 @@
+import { html, css, LitElement } from 'lit';
+
+export default class TimerCountdown extends LitElement {
+  static get properties() {
+    return {
+      time: { type: Number },
+      autoCheckAt: { type: Number },
+      resetTimerCountdown: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.time = 60;
+    this.autoCheckAt = 0;
+    this.timerInterval = undefined;
+    this.resetTimerCountdown = false;
+  }
+
+  disconnectedCallback() {
+    clearInterval(this.timerInterval)
+  }
+
+  firstUpdated() {
+    this.timerCountdown();
+  }
+
+  updated(changed) {
+    if (changed.has('resetTimerCountdown')) {
+      clearInterval(this.timerInterval);
+      this.timerCountdown()
+    }
+  }
+  
+  timerCountdown() {
+    this.timerInterval = setInterval(() => {
+      this.time -= 1;
+
+      // execute 50th minute check
+      if (this.time === this.autoCheckAt) {
+        this.dispatchEvent(
+          new CustomEvent('autoRenewAttempt', {
+            detail: {
+              remainingT: this.time,
+              bookPageChange: false,
+            },
+            bubbles: true,
+            composed: true,
+          })
+        );
+      }
+
+      if (this.time === 0) clearInterval(this.timerInterval);
+
+    }, 1000);
+  }
+
+
+  render() {
+    return html`<div id="countdown">
+    <div id="countdown-number">${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;
+      }
+      #countdown1 {
+        position: relative;
+        margin: auto;
+        margin-top: 100px;
+        height: 40px;
+        width: 40px;
+        text-align: center;
+      }
+      
+      #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,60 @@
+import { html, css, LitElement, nothing } from 'lit';
+
+export class ToastMessage extends LitElement {
+  static get properties() {
+    return {
+      texts: { type: String },
+      dismisOnClick: { type: Function },
+      hideToast: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.texts = '';
+    this.textClass = '';
+    this.hideToast = false;
+  }
+
+  render() {
+    return !this.hideToast
+      ? html`
+          <span class="toast-message ${this.textClass}">${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;
+        color: #fff;
+        left: 50%;
+        right: 50%;
+        background: #333;
+        border: 1px solid #fff;
+        border-radius: 5px;
+        box-shadow: 1px 1px 2px;
+        padding: 10px;
+        width: fit-content;
+        transform: translate(-50%, -50%);
+      }
+      .hidden {
+        display: none;
+      }
+      .visible {
+        display: inline-block;
+      }
+    `;
+  }
+}
+
+window.customElements.define('toast-message', ToastMessage);

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

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 
+import { LocalCache } from '@internetarchive/local-cache';
 import { URLHelper } from '../../config/url-helper.js';
 import ActionsHandlerService from './actions-handler-service.js';
 import * as Cookies from '../doc-cookies.js';
@@ -17,8 +18,14 @@ export default class ActionsHandler extends LitElement {
     super();
     this.identifier = '';
     this.ajaxTimeout = 6000;
-    this.bindEvents();
     this.returnUrl = '';
+    this.autoRenewTimeConfig = {};
+
+    this.localCache = new LocalCache({
+      namespace: '1HourLoanStorage',
+    });
+
+    this.bindEvents();
   }
 
   sendEvent(eventCategory, eventAction) {
@@ -29,7 +36,7 @@ export default class ActionsHandler extends LitElement {
     );
   }
 
-  bindEvents() {
+  async bindEvents() {
     this.addEventListener('browseBook', ({ detail }) => {
       this.handleBrowseIt();
       this.setConsecutiveLoanCounts();
@@ -44,6 +51,13 @@ export default class ActionsHandler extends LitElement {
       this.sendEvent(category, action);
     });
 
+    this.addEventListener('autoBrowseBook', ({ detail }) => {
+      console.log('auto renew handlerExecuted!!');
+      this.handleAutoBrowseIt();
+      const { category, action } = detail.event;
+      this.sendEvent(category, action);
+    });
+
     this.addEventListener('returnNow', ({ detail }) => {
       this.handleReturnIt();
       const { category, action } = detail.event;
@@ -98,6 +112,7 @@ export default class ActionsHandler extends LitElement {
   handleBrowseIt() {
     const action = 'browse_book';
     this.dispatchToggleActionGroup();
+    this.setBrowseTimeSession()
 
     ActionsHandlerService({
       action,
@@ -111,6 +126,21 @@ export default class ActionsHandler extends LitElement {
     });
   }
 
+  handleAutoBrowseIt() {
+    const action = 'auto_browse';
+    this.setBrowseTimeSession()
+
+    ActionsHandlerService({
+      action,
+      identifier: this.identifier,
+      success: () => {},
+      error: data => {
+        this.dispatchActionError(action, data);
+      },
+    });
+  }
+
+  
   handleReturnIt() {
     const action = 'return_loan';
     this.dispatchToggleActionGroup();
@@ -280,4 +310,17 @@ export default class ActionsHandler extends LitElement {
       '.archive.org'
     );
   }
+
+  async setBrowseTimeSession() {
+    try {
+      // set a value
+      await this.localCache.set({
+        key: `${this.identifier}-loanTime`,
+        value: new Date(), // current time
+        ttl: parseInt(this.autoRenewTimeConfig.totalTime),
+      })
+
+      await this.localCache.delete(`${this.identifier}-pageFlipTime`);
+    } catch (error) {}
+  }
 }

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

@@ -0,0 +1,148 @@
+import ActionsHandlerService from './actions-handler/actions-handler-service.js';
+
+/**
+ * This class is used to determine if use is eligible for auto renew loan.
+ *
+ * ActionsHandlerService is a function being used to execute
+ */
+export class OneHourAutoRenew {
+  constructor(pageClick, identifier, localCache, autoRenewTimeConfig, userHasBrowsed) {
+    this.pageClick = pageClick;
+    this.identifier = identifier;
+    this.localCache = localCache;
+    this.autoRenewTimeConfig = autoRenewTimeConfig;
+    this.userHasBrowsed = userHasBrowsed;
+
+    // private props
+    this.resultRes = {
+      toastTexts: null,
+      hideToast: true,
+      renewNow: false,
+    };
+
+    // 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.';
+
+    return this.handleBookAutoRenew();
+  }
+
+  async handleBookAutoRenew() {
+    try {
+      // if page is not flipped in last 15 minutes,
+      // instantaly renew it if user viewed new page in last 10 minutes
+      if (this.pageClick) {
+        console.log('page flipped!')
+        this.setPageFlippedTime();
+        return this.userFlippedBookPage(); // user clicked on page
+      } else {
+        console.log('auto checker!')
+        return this.autoCheckerTimer(); // auto checker at 50th minute
+      }
+
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  async setPageFlippedTime() {
+    // set pageFlipTime time in localStorage
+    await this.localCache.set({
+      key: `${this.identifier}-pageFlipTime`,
+      value: new Date(), // current time
+      ttl: parseInt(this.autoRenewTimeConfig.totalTime),
+    })
+  }
+
+  async userFlippedBookPage() {
+    const {
+      totalTime, // 60
+      autoCheckAt, // 50
+    } = this.autoRenewTimeConfig;
+    const currentDate = new Date();
+    const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
+
+    const lastTimeFrame = await this.changeTime(
+      loanTime,
+      totalTime - autoCheckAt,
+      'add'
+    ); // 50 seconds
+
+    if (currentDate >= lastTimeFrame) {
+      console.log('1 YES NOW BORROW IT AGAIN NOW!');
+      this.resultRes.toastTexts = this.autoRenewMessage;
+      this.resultRes.browseAgainNow = true;
+      this.resultRes.hideToast = false;
+      this.resultRes.renewNow = true;
+    }
+
+    return this.resultRes;
+  }
+
+  async autoCheckerTimer() {
+    const currentDate = new Date();
+    const { FlippedInLast } = this.autoRenewTimeConfig;
+    const lastPageFlipTime = await this.localCache.get(`${this.identifier}-pageFlipTime`);
+
+    // last 15 min if used flipped a page.
+    const lastFlipTimeFrame = await this.changeTime(
+      currentDate,
+      FlippedInLast,
+      'sub'
+    ); // 15 seconds
+
+    if (lastPageFlipTime === undefined || lastPageFlipTime <= lastFlipTimeFrame) { // not viewed
+      console.log('2');
+      this.resultRes.toastTexts = this.autoReturnWarning;
+      this.resultRes.hideToast = false;
+    } else if (lastPageFlipTime >= lastFlipTimeFrame) { // viewed in last time frame
+      console.log('3');
+      this.resultRes.toastTexts = this.autoRenewMessage;
+      this.resultRes.browseAgainNow = true;
+      this.resultRes.hideToast = false;
+      this.resultRes.renewNow = true;
+    }
+
+    return this.resultRes;
+  }
+
+  async changeTime(date, minutes, op) {
+    if (date === undefined) return undefined;
+    
+    if (op === 'sub') {
+      return new Date(date.getTime() - minutes * 1000);
+    }
+
+    return new Date(date.getTime() + minutes * 1000);
+  }
+
+
+  sendEvent(eventCategory, eventAction) {
+    window?.archive_analytics?.send_event(
+      eventCategory,
+      eventAction,
+      `identifier=${this.identifier}`
+    );
+  }
+
+  async handleAutoRenew() {
+    const action = 'renew_loan';
+    ActionsHandlerService({
+      identifier: this.identifier,
+      action,
+      error: data => {
+        window?.Sentry?.captureMessage(
+          'handleAutoRenew error',
+          JSON.stringify(data)
+        );
+        // this.errorCallback({ detail: { action, data } });
+        // send LendingServiceError to GA
+        this.sendEvent('handleAutoRenew', action);
+      },
+      success: () => {
+        return 'success';
+      },
+    });
+  }
+}

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 { LoanTokenPoller } from './core/services/loan-token-poller.js';
+import { OneHourAutoRenew } from './core/services/one-hour-auto-renew.js';
 
 export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
@@ -32,10 +36,17 @@ export default class IABookActions extends LitElement {
         attribute: false,
       },
       barType: { type: String },
+      autoRenew: { type: Boolean },
       sharedObserver: { attribute: false },
       disableActionGroup: { type: Boolean },
       modal: { Object },
       tokenDelay: { type: Number },
+      toastTexts: { type: String },
+      remainingTime: { type: Number },
+      resetTimerCountdown: { type: Boolean },
+      localCache: { type: Object },
+      autoRenewTimeConfig: { type: Object },
+      browseAgainNow: { type: Boolean },
     };
   }
 
@@ -50,10 +61,15 @@ export default class IABookActions extends LitElement {
     this.bwbPurchaseUrl = '';
     this.lendingBarPostInit = () => {};
     this.barType = 'action'; // 'title'|'action'
+    this.autoRenew = false;
     this.sharedObserver = undefined;
     this.disableActionGroup = false;
     this.modal = undefined;
     this.tokenDelay = 120000; // 2 minutes
+    this.localCache = new LocalCache({
+      namespace: '1HourLoanStorage'
+    }),
+    this.autoRenewTimeConfig = {},
 
     // private props
     this.primaryActions = [];
@@ -63,6 +79,12 @@ export default class IABookActions extends LitElement {
     this.lendingOptions = {};
     this.borrowType = ''; // (browsed|borrowed)
     this.consecutiveLoanCounts = 1; // consecutive loan count
+    this.browseAgainNow = false;
+    this.browserTimer = undefined;
+    this.hideToast = true;
+
+    this.bindAutoRenewEvent();
+    this.resetTimerCountdown = false;
   }
 
   disconnectedCallback() {
@@ -84,18 +106,65 @@ export default class IABookActions extends LitElement {
       this.update();
     }
 
+    if (changed.has('autoRenew')) {
+      this.resetTimerCountdown = true;
+    }
     if (changed.has('sharedObserver')) {
       this.disconnectResizeObserver();
       this.setupResizeObserver();
     }
   }
 
-  browseHasExpired() {
+  bindAutoRenewEvent() {
+    // dispatched this event from timer-countdown 
+    this.addEventListener('autoRenewAttempt', async event => {
+      const isPageFlipped = event.detail.bookPageChange;
+
+      const dd = await new OneHourAutoRenew(
+        isPageFlipped,
+        this.identifier,
+        this.localCache,
+        this.autoRenewTimeConfig,
+        this.lendingStatus.user_has_browsed && !this.lendingStatus.browsingExpired
+      );
+
+      this.toastTexts = dd.toastTexts;
+      this.hideToast = dd.hideToast;
+      this.browseAgainNow = dd.renewNow;
+      if (this.browseAgainNow) {
+        await this.browseHasRenew();
+      }
+      // this.handleBookAutoRenew(event);
+    });
+  }
+
+  async browseHasExpired() {
     const currStatus = { ...this.lendingStatus, browsingExpired: true };
     this.lendingStatus = currStatus;
+
+    // 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.toastTexts = this.autoReturnMessage;
+  }
+
+  async browseHasRenew() {
+    const currStatus = { 
+      ...this.lendingStatus,
+      user_has_browsed: true,
+      browsingExpired: false,
+      secondsLeftOnLoan: 61
+    };
+    this.lendingStatus = currStatus;
+
+    this.startBrowseTimer();
   }
 
   startBrowseTimer() {
+    clearTimeout(this.browserTimer);
+
     const {
       browsingExpired,
       user_has_browsed,
@@ -105,8 +174,9 @@ export default class IABookActions extends LitElement {
       return;
     }
 
+    // expired book and show browse again button
     const timeLeft = secondsLeftOnLoan * 1000;
-    setTimeout(() => {
+    this.browserTimer = setTimeout(() => {
       this.browseHasExpired();
     }, timeLeft);
   }
@@ -164,6 +234,7 @@ export default class IABookActions extends LitElement {
     });
 
     this.borrowType = actions.borrowType;
+    this.remainingTime = this.lendingStatus.secondsLeftOnLoan;
 
     const hasExpired =
       'browsingExpired' in this.lendingStatus &&
@@ -216,8 +287,29 @@ export default class IABookActions extends LitElement {
     ></book-title-bar>`;
   }
 
+  get timerCountdownTemplate() {
+    return this.borrowType === 'browsed'
+      ? html`<timer-countdown
+          time=${Number(this.remainingTime)}
+          .autoCheckAt=${this.autoRenewTimeConfig.autoCheckAt}
+          ?resetTimerCountdown=${this.resetTimerCountdown}
+        ></timer-countdown>`
+      : nothing;
+  }
+
+  get toastMessageTemplate() {
+    return html`
+      <toast-message
+        .texts=${this.toastTexts}
+        .dismisOnClick="1"
+        ?hideToast=${this.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 +319,32 @@ export default class IABookActions extends LitElement {
         .width=${this.width}
         .borrowType=${this.borrowType}
         .returnUrl=${this.returnUrl}
+        .autoRenew=${this.autoRenew}
+        .autoRenewTimeConfig=${this.autoRenewTimeConfig}
         ?hasAdminAccess=${this.hasAdminAccess}
         ?disabled=${this.disableActionGroup}
+        ?browseAgainNow=${this.browseAgainNow}
         @lendingActionError=${this.handleLendingActionError}
         @toggleActionGroup=${this.handleToggleActionGroup}
       >
       </collapsible-action-group>
       ${this.textGroupTemplate} ${this.infoIconTemplate}
+      ${this.timerCountdownTemplate} ${this.toastMessageTemplate}
     `;
   }
 
+  // will move this function to bookreader...
+  async pageFlipEvent() {
+    try {
+      // dispatch event to say book page has flipped
+      document.querySelector("ia-book-actions").dispatchEvent(
+        new CustomEvent("autoRenewAttempt", {
+          detail: { bookPageChange: true },
+        })
+      );
+    } catch (error) { console.log(error) }
+  }
+
   /**
    * enable access of borrowed/browsed books
    */
@@ -401,6 +509,10 @@ export default class IABookActions extends LitElement {
         justify-content: center;
         flex-wrap: wrap;
       }
+
+      toast-message {
+        --messageHeightFromTop: 18%;
+      }
     `;
   }
 }

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>