@internetarchive/ia-book-actions 0.0.29-alpha23 → 0.0.29-alpha24

package/demo/index.html

@@ -129,7 +129,8 @@
     iaBookActions.loanRenewConfig = {
       totalTime: 20, // 60 second = 1 min
       autoCheckAt: 15, // totalTime - 10th minute
-      pageChangedInLast: 15, // within last 15 second/minute 
+      pageChangedInLast: 15, // within last 15 second/minute
+      env: 'dev', // dev/prod
     };
 
     let lendingStatus1 = iaBookActions.lendingStatus;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.29-alpha23",
+  "version": "0.0.29-alpha24",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",

package/src/components/timer-countdown.js

@@ -3,14 +3,14 @@ import { html, css, LitElement } from 'lit';
 export default class TimerCountdown extends LitElement {
   static get properties() {
     return {
-      time: { type: Number },
+      timeLeftOnLoan: { type: Number },
       autoCheckAt: { type: Number },
     };
   }
 
   constructor() {
     super();
-    this.time = 0;
+    this.timeLeftOnLoan = 0;
     this.autoCheckAt = 0;
 
     // private props
@@ -22,7 +22,7 @@ export default class TimerCountdown extends LitElement {
   }
 
   updated(changed) {
-    if (changed.has('time') && this.time > 0) {
+    if (changed.has('timeLeftOnLoan') && this.timeLeftOnLoan > 0) {
       clearInterval(this.timerInterval);
       this.timerCountdown();
     }
@@ -30,17 +30,17 @@ export default class TimerCountdown extends LitElement {
 
   timerCountdown() {
     this.timerInterval = setInterval(() => {
-      this.time -= 1;
+      this.timeLeftOnLoan -= 1;
 
       // execute from last 10th minute to 0th minute
       // - 10th - to check if user has viewed
       // - till 0th - to show warning msg with remaining time to auto returned
-      if (Math.round(this.time) <= this.autoCheckAt) {
+      if (Math.round(this.timeLeftOnLoan) <= this.autoCheckAt) {
         this.dispatchEvent(
           new CustomEvent('IABookActions:loanRenew', {
             detail: {
               hasPageChanged: false,
-              timeLeft: Math.round(this.time),
+              timeLeft: Math.round(this.timeLeftOnLoan),
             },
             bubbles: true,
             composed: true,
@@ -49,7 +49,7 @@ export default class TimerCountdown extends LitElement {
       }
 
       // clear interval if timer is < this.autoCheckAt
-      if (this.time < this.autoCheckAt) {
+      if (this.timeLeftOnLoan < this.autoCheckAt) {
         clearInterval(this.timerInterval);
       }
     }, 1000);
@@ -65,7 +65,7 @@ export default class TimerCountdown extends LitElement {
       >
         <circle class="circle" cx="50" cy="50" r="50" />
       </svg>
-      <span>${Math.round(this.time)}</span>
+      <span>${Math.round(this.timeLeftOnLoan)}</span>
     `;
   }
 

package/src/core/services/loan-renew-helper.js

@@ -5,9 +5,8 @@ import { ToastConfig } from '@internetarchive/toast-manager';
  * This class is used to determine if use is eligible for auto renew loan.
  */
 export class LoanRenewHelper {
-  constructor(hasPageChanged, hideToast, identifier, localCache, loanRenewConfig) {
+  constructor(hasPageChanged, identifier, localCache, loanRenewConfig) {
     this.hasPageChanged = hasPageChanged;
-    this.hideToast = hideToast;
     this.identifier = identifier;
     this.localCache = localCache;
     this.loanRenewConfig = loanRenewConfig;
@@ -21,15 +20,12 @@ export class LoanRenewHelper {
     this.result = {
       texts: null,
       renewNow: false,
-      timeLeft: 0,
     };
   }
 
   handleLoanRenew() {
     try {
       if (this.hasPageChanged) {
-        // when user click/flip on book page
-        this.showToastMessage();
         return this.pageChanged(); // user clicked on page
       }
       return this.autoChecker(); // auto checker at 50th minute
@@ -98,7 +94,6 @@ export class LoanRenewHelper {
     ) {
       this.result.texts = this.loanReturnWarning;
       this.result.renewNow = false; // not viewed
-      this.showToastMessage();
       console.log('not viewed!');
     } else if (lastPageFlipTime >= lastFlipTimeFrame) {
       this.result.texts = '';

package/src/ia-book-actions.js

@@ -3,6 +3,7 @@ import { html, css, LitElement, nothing } from 'lit';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { ModalConfig } from '@internetarchive/modal-manager';
+import { ToastConfig } from '@internetarchive/toast-manager';
 import { LocalCache } from '@internetarchive/local-cache';
 
 import './components/collapsible-action-group.js';
@@ -73,7 +74,7 @@ export default class IABookActions extends LitElement {
     // loan auto renew
     this.browserTimer = undefined;
     this.loanRenewConfig = {};
-    this.hideToast = false;
+    this.suppressToast = false;
 
     /**
      * contains loan auto-renew response
@@ -83,6 +84,7 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult = {
       texts: null,
       renewNow: false,
+      timeLeft: 0
     };
 
     this._shadowRoot = this.attachShadow({ mode: 'open' });
@@ -235,6 +237,7 @@ export default class IABookActions extends LitElement {
     // dispatched this event from bookreader page changed
     window.addEventListener('BookReader:pageChanged', event => {
       if (this.borrowType === 'browsed' && event.detail.hasPageChanged) {
+        console.log('actual page changed executed!')
         this.autoLoanRenewChecker(true);
       }
 
@@ -243,7 +246,7 @@ export default class IABookActions extends LitElement {
 
     document.addEventListener('click', () => {
       if (this.loanRenewHelper && this.loanRenewHelper.result.renewNow === false) {
-        this.hideToast = true;
+        this.suppressToast = true;
       }
     });
 
@@ -259,8 +262,8 @@ export default class IABookActions extends LitElement {
 
       // show warning message with remaining time to auto returned it.
       if (this.loanRenewHelper.result.renewNow === false) {
-        this.loanRenewHelper.result.timeLeft = eventDetails.timeLeft;
-        this.loanRenewHelper.showToastMessage();
+        this.loanRenewResult.timeLeft = eventDetails.timeLeft;
+        this.showToastMessage();
       }
     });
   }
@@ -268,7 +271,6 @@ export default class IABookActions extends LitElement {
   async autoLoanRenewChecker(hasPageChanged = false) {
     this.loanRenewHelper = new LoanRenewHelper(
       hasPageChanged,
-      this.hideToast,
       this.identifier,
       this.localCache,
       this.loanRenewConfig
@@ -279,6 +281,25 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult = this.loanRenewHelper.result;
   }
 
+  async showToastMessage() {
+    if (this.suppressToast) return false;
+
+    // this.result = this.loanRenewHelper.result;
+    const iaBookActions = document.querySelector('ia-book-actions').shadowRoot;
+    let toastTemplate = iaBookActions.querySelector('toast-template');
+    if (!toastTemplate) {
+      toastTemplate = document.createElement('toast-template');
+    }
+    await iaBookActions.appendChild(toastTemplate);
+
+    const config = new ToastConfig();
+    config.texts = this.loanRenewResult.texts?.replace(/#time/, this.loanRenewResult.timeLeft);
+    config.dismisOnClick = true;
+    toastTemplate.showToast({
+      config,
+    });
+  }
+
   async browseHasRenew() {
     const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
     const secondsLeft = (loanTime - new Date()) / 1000; // different in seconds
@@ -328,7 +349,8 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult.texts =
       'This book has been automatically returned due to inactivity.';
 
-    this.loanRenewHelper.showToastMessage();
+    this.suppressToast = false;
+    this.showToastMessage();
   }
 
   /**
@@ -385,7 +407,7 @@ export default class IABookActions extends LitElement {
   get timerCountdownTemplate() {
     return this.borrowType === 'browsed'
       ? html`<timer-countdown
-          .time=${Number(this.lendingStatus.secondsLeftOnLoan)}
+          .timeLeftOnLoan=${Number(this.lendingStatus.secondsLeftOnLoan)}
           .autoCheckAt=${this.loanRenewConfig.autoCheckAt}
         ></timer-countdown>`
       : nothing;
@@ -425,9 +447,10 @@ export default class IABookActions extends LitElement {
    */
   async handleLoanAutoRenewed() {
     if (this.loanRenewResult.renewNow) {
-      this.hideToast = false;
       this.tokenPoller.disconnectedInterval();
-      await this.loanRenewHelper.showToastMessage();
+
+      this.suppressToast = false;
+      await this.showToastMessage();
       await this.browseHasRenew();
       await this.resetTimerCountState();
     }