@internetarchive/ia-book-actions 0.0.27 → 0.0.28-alpha1

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,32 @@
     iaBookActions.lendingBarPostInit = lendingBarPostInit;
     iaBookActions.tokenDelay = 2000; // 2 seconds
     iaBookActions.returnUrl = 'https://openlibrary.org';
+    iaBookActions.localCache = localCache;
+    iaBookActions.autoRenewTimeConfig = {
+      totalTime: 60, // 60 second = 1 min
+      autoRenewCheckerAtLast: 10, // totalTime - 10th minute
+      autoRenewVisitedInLast: 15, // within last 15 second/minute 
+    };
 
     let lendingStatus1 = iaBookActions.lendingStatus;
+    let secondsLeftOnLoan = 60;
+
+    document.querySelector('#flip-page').addEventListener('click', async (e) => {
+      try {
+        // set pageFlipTime time in localStorage
+        await localCache.set({
+          key: `${identifier}-pageFlipTime`,
+          value: new Date(), // current time
+        })
+
+        // dispatch event to say book page has flipped
+        document.querySelector("ia-book-actions").dispatchEvent(
+          new CustomEvent("bookPageFlip", {
+            detail: { bookPageChange: true },
+          })
+        );
+      } catch (error) {}
+    });
 
     document.querySelectorAll('.titleBar input[type=checkbox]').forEach((item) => {
       item.addEventListener('click', (e) => {
@@ -134,6 +164,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 +232,23 @@
     });
 
     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
+            })
+
+            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 +328,10 @@
         <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><button id="flip-page">Flip page</button></td>
           </tr>
           <tr>
             <td class="userState">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.27",
+  "version": "0.0.28-alpha1",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -19,10 +19,12 @@
   },
   "dependencies": {
     "@internetarchive/icon-info": "^1.2.6",
-    "@internetarchive/local-cache": "^0.2.0",
+    "@internetarchive/local-cache": "^0.2.1",
     "@internetarchive/modal-manager": "^0.2.1",
     "@internetarchive/shared-resize-observer": "^0.2.0",
-    "lit": "^2.2.1"
+    "add": "^2.0.6",
+    "lit": "^2.2.1",
+    "yarn": "^1.22.19"
   },
   "devDependencies": {
     "@open-wc/eslint-config": "^4.2.0",

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,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,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,127 @@
+import { html, css, LitElement } from 'lit';
+
+export default class TimerCountdown extends LitElement {
+  static get properties() {
+    return {
+      time: { type: Number },
+      autoRenewCheckerAtLast: { type: Number },
+      resetTimerCountdown: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.time = 60;
+    this.autoRenewCheckerAtLast = 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.autoRenewCheckerAtLast) {
+        this.dispatchEvent(
+          new CustomEvent('autoReturnWarning', {
+            detail: {
+              remainingT: this.time
+            },
+            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,19 +18,27 @@ export default class ActionsHandler extends LitElement {
     super();
     this.identifier = '';
     this.ajaxTimeout = 6000;
-    this.bindEvents();
     this.returnUrl = '';
+
+    this.localCache = new LocalCache({
+      namespace: '1HourLoanStorage',
+      defaultTTL: 1 * 30,  // 0.5 minute
+    });
+
+    this.bindEvents();
   }
 
   sendEvent(eventCategory, eventAction) {
-    window?.archive_analytics?.send_event_no_sampling(
+    window?.archive_analytics?.send_event(
       eventCategory,
       eventAction,
       `identifier=${this.identifier}`
     );
   }
 
-  bindEvents() {
+  async bindEvents() {
+    // console.log(await this.localCache.get('loanTime'));
+
     this.addEventListener('browseBook', ({ detail }) => {
       this.handleBrowseIt();
       this.setConsecutiveLoanCounts();
@@ -44,6 +53,14 @@ export default class ActionsHandler extends LitElement {
       this.sendEvent(category, action);
     });
 
+    this.addEventListener('autoBrowseBook', ({ detail }) => {
+      console.log('book has be renewed for you. thank you!!!');
+      this.handleAutoBrowseIt();
+      // this.setConsecutiveLoanCounts();
+      const { category, action } = detail.event;
+      this.sendEvent(category, action);
+    });
+
     this.addEventListener('returnNow', ({ detail }) => {
       this.handleReturnIt();
       const { category, action } = detail.event;
@@ -98,6 +115,7 @@ export default class ActionsHandler extends LitElement {
   handleBrowseIt() {
     const action = 'browse_book';
     this.dispatchToggleActionGroup();
+    // this.setBrowseTimeSession()
 
     ActionsHandlerService({
       action,
@@ -111,6 +129,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 +313,16 @@ 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
+      })
+
+      await this.localCache.delete(`${this.identifier}-pageFlipTime`);
+    } catch (error) {}
+  }
 }

package/src/core/services/loan-token-poller.js

@@ -21,9 +21,14 @@ export class LoanTokenPoller {
   disconnectedInterval() {
     clearInterval(this.loanTokenInterval);
     this.loanTokenInterval = undefined;
-    if (window.Sentry) {
-      window?.Sentry?.captureMessage('loan token interval cleared');
-    }
+
+    // temporary disabling sentry notice
+    // as message is informational, not critical nor an error.
+    // also, as of 11/28/2022, JS build maps are not working properly on petabox
+    // and as a result, this comment is not properly grouped.
+    // if (window.Sentry) {
+    //   window?.Sentry?.captureMessage('loan token interval cleared');
+    // }
   }
 
   async enableBookAccess() {
@@ -70,7 +75,7 @@ export class LoanTokenPoller {
   }
 
   sendEvent(eventCategory, eventAction) {
-    window?.archive_analytics?.send_event_no_sampling(
+    window?.archive_analytics?.send_event(
       eventCategory,
       eventAction,
       `identifier=${this.identifier}`

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

@@ -0,0 +1,134 @@
+import { nothing } from 'lit';
+
+import ActionsHandlerService from './actions-handler/actions-handler-service.js';
+import * as Cookies from './doc-cookies.js';
+
+/**
+ * This class is used to create loan token for borrowed books
+ *
+ * ActionsHandlerService is a function being used to execute
+ */
+export class OneHourAutoRenew {
+  constructor(pageClick, identifier, localCache, autoRenewTimeConfig) {
+    this.pageClick = pageClick;
+    this.identifier = identifier;
+    this.localCache = localCache;
+    this.autoRenewTimeConfig = autoRenewTimeConfig; // callback function to be called after loan token is created
+
+    this.autoReturnMessage = 'This book will be automatically returned in 15 seconds unless you turn a page.';
+    this.autoRenewMessage = 'This book has been renewed for another hour.';
+
+
+    this.resultRes = {
+      toastTexts: '',
+      hideToast: true,
+    };
+
+    return this.dd();
+  }
+
+  async dd() {
+    try {
+      const currentDate = new Date();
+
+      const {
+        totalTime, // 60
+        autoRenewCheckerAtLast, // 50
+        autoRenewVisitedInLast, // 15
+      } = this.autoRenewTimeConfig;
+
+      const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
+      const lastPageFlipTime = await this.localCache.get(`${this.identifier}-pageFlipTime`);
+
+      const lastFlipTimeFrame = await this.changeTime(
+        currentDate,
+        autoRenewVisitedInLast,
+        'sub'
+      ); // 15 seconds
+
+      console.log(lastPageFlipTime, lastFlipTimeFrame)
+
+      // if page is not flipped in last 15 minutes,
+      // instantaly renew it if user viewed new page in last 10 minutes
+      if (this.pageClick === true) {
+        const lastTimeFrame = await this.changeTime(
+          loanTime,
+          totalTime - autoRenewCheckerAtLast,
+          'add'
+        ); // 50 seconds
+        console.log('page flipped!')
+
+        if (currentDate >= lastTimeFrame) {
+          console.log('1 YES NOW BORROW IT AGAIN NOW!');
+          this.toastTexts = this.autoRenewMessage;
+          this.hideToast = false;
+        }
+
+        return nothing // early return
+      }
+
+      console.log(lastPageFlipTime, lastFlipTimeFrame)
+      if (lastPageFlipTime === undefined) { // not viewed
+        console.log('2 DON\'T BORROW IT!');
+        this.resultRes.toastTexts = this.autoReturnMessage;
+        this.resultRes.hideToast = false;
+      } else if (lastPageFlipTime >= lastFlipTimeFrame) { // viewed in last time frame
+        console.log('3 YES BORROW IT AGAIN!');
+        this.resultRes.toastTexts = this.autoRenewMessage;
+        this.resultRes.hideToast = false;
+        this.toastTexts = this.autoRenewMessage;
+        // this.browseAgainNow = true;
+        this.hideToast = false;
+        // await this.browseHasRenew();
+      } else if (lastPageFlipTime <= lastFlipTimeFrame) { // viewed but not in last time frame
+        console.log('4 DON\'T BORROW IT!');
+        this.resultRes.toastTexts = this.autoReturnMessage;
+        this.resultRes.hideToast = false;
+      }
+
+      // console.log(this.resultRes)
+      return this.resultRes;
+
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  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,5 +1,5 @@
 /* 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';
@@ -8,10 +8,13 @@ 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 +35,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 +60,13 @@ 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 = {},
+    this.autoRenewTimeConfig = {},
 
     // private props
     this.primaryActions = [];
@@ -63,6 +76,43 @@ export default class IABookActions extends LitElement {
     this.lendingOptions = {};
     this.borrowType = ''; // (browsed|borrowed)
     this.consecutiveLoanCounts = 1; // consecutive loan count
+    this.browseAgainNow = false;
+
+    // show toast-message for auto return message
+    this.hideToast = true;
+    this.autoReturnMessage = 'This book will be automatically returned in 15 seconds unless you turn a page.';
+    this.autoRenewMessage = 'This book has been renewed for another hour.';
+
+    // dispatched this event from timer-countdown 
+    this.addEventListener('autoReturnWarning', event => {
+      // const dd = this.autoRenew1 = new OneHourAutoRenew(
+      //   event.detail.bookPageChange,
+      //   this.identifier,
+      //   this.localCache,
+      //   this.autoRenewTimeConfig,
+      // );
+      // this.toastTexts = dd.resultRes.toastTexts;
+      // this.hideToast = dd.resultRes.hideToast;
+      this.handleBookAutoRenew(event);
+    });
+
+    // dispatched this event from bookreader side 
+    this.addEventListener('bookPageFlip', event => {
+      // console.log(e)
+      // const dd = this.autoRenew1 = new OneHourAutoRenew(
+      //   event.detail.bookPageChange,
+      //   this.identifier,
+      //   this.localCache,
+      //   this.autoRenewTimeConfig,
+      // );
+      // this.toastTexts = dd.resultRes.toastTexts;
+      // this.hideToast = dd.resultRes.hideToast;
+      // console.log(dd.resultRes)
+      this.handleBookAutoRenew(event);
+      // this.browseAgainNow = true;
+    });
+
+    this.resetTimerCountdown = false;
   }
 
   disconnectedCallback() {
@@ -84,15 +134,30 @@ export default class IABookActions extends LitElement {
       this.update();
     }
 
+    if (changed.has('autoRenew')) {
+      this.resetTimerCountdown = true;
+    }
     if (changed.has('sharedObserver')) {
       this.disconnectResizeObserver();
       this.setupResizeObserver();
     }
   }
 
-  browseHasExpired() {
+  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 book has been automatically returned due to inactivity.';
+  }
+
+  async browseHasRenew() {
+    const currStatus = { ...this.lendingStatus, secondsLeftOnLoan: 61 };
+    this.lendingStatus = currStatus;
   }
 
   startBrowseTimer() {
@@ -105,12 +170,90 @@ export default class IABookActions extends LitElement {
       return;
     }
 
+    // expired book and show browse again button
     const timeLeft = secondsLeftOnLoan * 1000;
     setTimeout(() => {
       this.browseHasExpired();
     }, timeLeft);
   }
 
+  async handleBookAutoRenew(event) {
+    try {
+      const bookPageChange = event.detail.bookPageChange;
+      const currentDate = new Date();
+
+      const {
+        totalTime, // 60
+        autoRenewCheckerAtLast, // 50
+        autoRenewVisitedInLast, // 15
+      } = this.autoRenewTimeConfig;
+
+      const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
+      const lastPageFlipTime = await this.localCache.get(`${this.identifier}-pageFlipTime`);
+
+      const lastFlipTimeFrame = await this.changeTime(
+        currentDate,
+        autoRenewVisitedInLast,
+        'sub'
+      ); // 15 seconds
+
+      console.log(lastPageFlipTime, lastFlipTimeFrame)
+
+      // if page is not flipped in last 15 minutes,
+      // instantaly renew it if user viewed new page in last 10 minutes
+      if (bookPageChange === true) {
+        const lastTimeFrame = await this.changeTime(
+          loanTime,
+          totalTime - autoRenewCheckerAtLast,
+          'add'
+        ); // 50 seconds
+        console.log('page flipped!')
+
+        if (currentDate >= lastTimeFrame) {
+          console.log('1 YES NOW BORROW IT AGAIN NOW!');
+          this.toastTexts = this.autoRenewMessage;
+          this.browseAgainNow = true;
+          this.hideToast = false;
+          await this.browseHasRenew();
+        }
+
+        return nothing // early return
+      }
+
+      console.log(lastPageFlipTime, lastFlipTimeFrame)
+      if (lastPageFlipTime === undefined) { // not viewed
+        console.log('2 DON\'T BORROW IT!');
+        this.toastTexts = this.autoReturnMessage;
+        this.hideToast = false;
+      } else if (lastPageFlipTime >= lastFlipTimeFrame) { // viewed in last time frame
+        console.log('3 YES BORROW IT AGAIN!');
+        this.toastTexts = this.autoRenewMessage;
+        this.browseAgainNow = true;
+        this.hideToast = false;
+        await this.browseHasRenew();
+      } else if (lastPageFlipTime <= lastFlipTimeFrame) { // viewed but not in last time frame
+        console.log('4 DON\'T BORROW IT!');
+        this.toastTexts = this.autoReturnMessage;
+        this.hideToast = false;
+      } else {
+        this.browseAgainNow = true;
+        console.log('5 YES NOW BORROW IT AGAIN NOW!');
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  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);
+  }
+
   /** SharedObserver resize handler */
   handleResize(entry) {
     // if you are observing multiple targets,
@@ -164,6 +307,7 @@ export default class IABookActions extends LitElement {
     });
 
     this.borrowType = actions.borrowType;
+    this.remainingTime = this.lendingStatus.secondsLeftOnLoan;
 
     const hasExpired =
       'browsingExpired' in this.lendingStatus &&
@@ -216,6 +360,26 @@ export default class IABookActions extends LitElement {
     ></book-title-bar>`;
   }
 
+  get timerCountdownTemplate() {
+    return this.borrowType === 'browsed'
+      ? html`<timer-countdown
+          time=${Number(this.remainingTime)}
+          .autoRenewCheckerAtLast=${this.autoRenewTimeConfig.autoRenewCheckerAtLast}
+          ?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`
       <collapsible-action-group
@@ -227,13 +391,16 @@ export default class IABookActions extends LitElement {
         .width=${this.width}
         .borrowType=${this.borrowType}
         .returnUrl=${this.returnUrl}
+        .autoRenew=${this.autoRenew}
         ?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}
     `;
   }
 
@@ -401,6 +568,10 @@ export default class IABookActions extends LitElement {
         justify-content: center;
         flex-wrap: wrap;
       }
+
+      toast-message {
+        --messageHeightFromTop: 18%;
+      }
     `;
   }
 }