@internetarchive/ia-book-actions 0.0.29-alpha26 → 0.0.29-alpha28

package/demo/index.html

@@ -128,8 +128,8 @@
     iaBookActions.localCache = localCache;
     iaBookActions.loanRenewConfig = {
       totalTime: 20, // 60 second = 1 min
-      autoCheckAt: 15, // totalTime - 10th minute
-      pageChangedInLast: 15, // within last 15 second/minute
+      autoCheckAt: 12, // totalTime - 10th minute
+      pageChangedInLast: 5, // within last 15 second/minute
       env: 'dev', // dev/prod
     };
 
@@ -285,7 +285,7 @@
       // dispatch event to say book page has flipped
       document.querySelector('ia-book-actions').dispatchEvent(
         new CustomEvent('BookReader:pageChanged', {
-          detail: { hasPageChanged: true },
+          detail: { props: { hasPageChanged: true }},
           bubbles: true,
           composed: true,
         })

package/package.json

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

package/src/components/timer-countdown.js

@@ -4,14 +4,14 @@ export default class TimerCountdown extends LitElement {
   static get properties() {
     return {
       timeLeftOnLoan: { type: Number },
-      autoCheckAt: { type: Number },
+      loanRenewConfig: { type: Object },
     };
   }
 
   constructor() {
     super();
     this.timeLeftOnLoan = 0;
-    this.autoCheckAt = 0;
+    this.loanRenewConfig = 0;
 
     // private props
     this.timerInterval = undefined;
@@ -35,7 +35,7 @@ export default class TimerCountdown extends LitElement {
       // 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.timeLeftOnLoan) <= this.autoCheckAt) {
+      if (Math.round(this.timeLeftOnLoan) <= this.loanRenewConfig.autoCheckAt) {
         this.dispatchEvent(
           new CustomEvent('IABookActions:loanRenew', {
             detail: {
@@ -48,8 +48,8 @@ export default class TimerCountdown extends LitElement {
         );
       }
 
-      // clear interval if timer is < this.autoCheckAt
-      if (this.timeLeftOnLoan < this.autoCheckAt) {
+      // clear interval if timer is < this.loanRenewConfig.autoCheckAt
+      if (this.timeLeftOnLoan < this.loanRenewConfig.autoCheckAt) {
         clearInterval(this.timerInterval);
       }
     }, 1000);

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

@@ -1,5 +1,4 @@
 import { nothing } from 'lit';
-import { ToastConfig } from '@internetarchive/toast-manager';
 
 /**
  * This class is used to determine if use is eligible for auto renew loan.
@@ -115,30 +114,6 @@ export class LoanRenewHelper {
     });
   }
 
-  /**
-   * Show toast messages on some specific loan renew features. e.g.
-   * - show success msg when book is auto renewed
-   * - show success msg when book is auto returned
-   * - show warninig msg when book is about to auto returned
-   */
-  async showToastMessage() {
-    if (this.hideToast) return false;
-
-    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.result.texts?.replace(/#time/, this.result.timeLeft);
-    config.dismisOnClick = true;
-    toastTemplate.showToast({
-      config,
-    });
-  }
-
   /**
    * Helper function to get time difference
    *

package/src/ia-book-actions.js

@@ -84,7 +84,7 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult = {
       texts: null,
       renewNow: false,
-      timeLeft: 0
+      timeLeft: 0,
     };
 
     this._shadowRoot = this.attachShadow({ mode: 'open' });
@@ -219,7 +219,7 @@ export default class IABookActions extends LitElement {
       () => {
         this.startLoanTokenPoller();
 
-        if (!this.loanRenewResult.renewNow) {
+        if (this.borrowType === 'browsed' && !this.loanRenewResult.renewNow) {
           this.resetTimerCountState();
         }
       },
@@ -234,19 +234,24 @@ export default class IABookActions extends LitElement {
    * 2. IABookActions:loanRenew - dispatched from timer-countdown component
    */
   bindLoanRenewEvents() {
-    // dispatched this event from bookreader page changed
+    /**
+     * dispatched this event from bookreader page changed
+     */
     window.addEventListener('BookReader:pageChanged', event => {
-      console.log(event.detail.props);
       if (this.borrowType === 'browsed' && event.detail.props.hasPageChanged) {
-        console.log('actual page changed executed!')
+        console.log('actual page changed executed!');
         this.autoLoanRenewChecker(true);
       }
 
       return nothing;
     });
 
+    /**
+     * Detech click-event on document to close toast-template
+     */
     document.addEventListener('click', () => {
-      if (this.loanRenewHelper && this.loanRenewHelper.result.renewNow === false) {
+      if (this.loanRenewHelper && this.loanRenewResult.timeLeft > 0) {
+        console.log('1');
         this.suppressToast = true;
       }
     });
@@ -257,13 +262,11 @@ export default class IABookActions extends LitElement {
      * 2. show warning message having remaining time
      */
     this.addEventListener('IABookActions:loanRenew', async event => {
-      const eventDetails = event.detail;
-
       await this.autoLoanRenewChecker(false);
 
       // show warning message with remaining time to auto returned it.
-      if (this.loanRenewHelper.result.renewNow === false) {
-        this.loanRenewResult.timeLeft = eventDetails.timeLeft;
+      if (this.loanRenewResult.renewNow === false) {
+        this.loanRenewResult.timeLeft = event.detail.timeLeft;
         this.showToastMessage();
       }
     });
@@ -282,10 +285,15 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult = this.loanRenewHelper.result;
   }
 
+  /**
+   * Show toast messages on some specific loan renew features. e.g.
+   * - show success msg when book is auto renewed
+   * - show success msg when book is auto returned
+   * - show warninig msg when book is about to auto returned
+   */
   async showToastMessage() {
-    if (this.suppressToast) return false;
+    if (this.suppressToast) return;
 
-    // this.result = this.loanRenewHelper.result;
     const iaBookActions = document.querySelector('ia-book-actions').shadowRoot;
     let toastTemplate = iaBookActions.querySelector('toast-template');
     if (!toastTemplate) {
@@ -294,7 +302,10 @@ export default class IABookActions extends LitElement {
     await iaBookActions.appendChild(toastTemplate);
 
     const config = new ToastConfig();
-    config.texts = this.loanRenewResult.texts?.replace(/#time/, this.loanRenewResult.timeLeft);
+    config.texts = this.loanRenewResult.texts?.replace(
+      /#time/,
+      this.loanRenewResult.timeLeft
+    );
     config.dismisOnClick = true;
     toastTemplate.showToast({
       config,
@@ -358,28 +369,23 @@ export default class IABookActions extends LitElement {
    * Reset timer animation state after book renewed
    */
   async resetTimerCountState() {
-    const secondsLeft = Number(this.lendingStatus.secondsLeftOnLoan);
-
-    const timerCountdown = this.shadowRoot.querySelector('timer-countdown');
-    const animationCircle = timerCountdown.shadowRoot.querySelector('.circle');
+    const timerCountdown = this._shadowRoot.querySelector('timer-countdown');
+    if (!timerCountdown) return;
 
-    // the perimeter of the circle
-    const circleStroke = 315;  // (π * 2 * radius)
+    const secondsLeft = Number(this.lendingStatus.secondsLeftOnLoan);
     const strokeDashOffset =
-      (secondsLeft / this.loanRenewConfig.totalTime) *
-      circleStroke;
+      (secondsLeft / this.loanRenewConfig.totalTime) * 315;
 
     // set seconds left in loan expire
-    timerCountdown.style?.setProperty(
-      '--timerSeconds',
-      `${secondsLeft}s`
-    );
+    timerCountdown.style?.setProperty('--timerSeconds', `${secondsLeft}s`);
+
     // set circle stroke offset left in loan expire
     timerCountdown.style?.setProperty(
       '--timerStroke',
-      `${Number(strokeDashOffset)}`
+      `${Number(strokeDashOffset)}` // the perimeter of the circle = (π * 2 * radius)
     );
 
+    const animationCircle = timerCountdown.shadowRoot.querySelector('.circle');
     animationCircle.style.animationName = 'none';
     setTimeout(() => {
       animationCircle.style.animationName = 'circletimer';
@@ -409,7 +415,7 @@ export default class IABookActions extends LitElement {
     return this.borrowType === 'browsed'
       ? html`<timer-countdown
           .timeLeftOnLoan=${Number(this.lendingStatus.secondsLeftOnLoan)}
-          .autoCheckAt=${this.loanRenewConfig.autoCheckAt}
+          .loanRenewConfig=${this.loanRenewConfig}
         ></timer-countdown>`
       : nothing;
   }