@internetarchive/ia-book-actions 0.1.9-alpha3 → 0.1.9-alpha5

package/demo/index.html

@@ -131,7 +131,7 @@
     iaBookActions.returnUrl = '';
     iaBookActions.localCache = localCache;
 
-    let loanTotalTime2Min = { loanTotalTime: 100, loanRenewAtLast: 97, pageChangedInLast: 15 };
+    let loanTotalTime2Min = { loanTotalTime: 65, loanRenewAtLast: 60, pageChangedInLast: 15 };
     let loanTotalTime5Min = { loanTotalTime: 300, loanRenewAtLast: 180, pageChangedInLast: 15 };
     let loanTotalTime1Hour = { loanTotalTime: 3600, loanRenewAtLast: 660, pageChangedInLast: 900 };
 

package/package.json

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

package/src/components/timer-countdown.js

@@ -41,7 +41,7 @@ export default class TimerCountdown extends LitElement {
      * delay seconds in setInterval function
      * @type {number}
      */
-    this.timerExecutionSeconds = 60;
+    this.timerExecutionSeconds = 30;
   }
 
   disconnectedCallback() {
@@ -66,6 +66,7 @@ export default class TimerCountdown extends LitElement {
     // store current time
     this.timeWhenTimerStart = new Date();
 
+    // this.dispatchLoanRenewEvent(secondsLeft);
     /**
      * set interval in window object
      * @see ia-lending-intervals.js

package/src/core/services/loan-analytics.js

@@ -144,14 +144,14 @@ export default class LoanAnanlytics {
    * @memberof LoanAnanlytics
    */
   sendEvent(eventCategory, eventAction, label, extraParams) {
-    console.log(
-      'eventCategory:-',
-      eventCategory,
-      '\t||\teventAction:-',
-      eventAction,
-      '\t||\tlabel:-',
-      label
-    );
+    // console.log(
+    //   'eventCategory:-',
+    //   eventCategory,
+    //   '\t||\teventAction:-',
+    //   eventAction,
+    //   '\t||\tlabel:-',
+    //   label
+    // );
 
     window?.archive_analytics?.send_event_no_sampling(
       eventCategory,

package/src/ia-book-actions.js

@@ -1,4 +1,5 @@
 /* eslint-disable camelcase */
+/* eslint-disable class-methods-use-this */
 import { html, css, LitElement, nothing } from 'lit';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
@@ -23,13 +24,17 @@ export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
 };
 
+/**
+ * custom styling for modal-manager buttons
+ * TODO: lets allow modal-manager to know ia-button classes
+ */
 export const modalButtonStyle = {
   iaButton:
     'min-height:3.5rem;cursor:pointer;color:white;border-radius:0.4rem;border:1px solid #c5d1df;padding:4px 8px;width:auto;user-select:none;',
   renew: 'background:#194880;width:110px;',
-  return: 'background:#d9534f;',
+  return: 'background:#d9534f;width:120px;',
   loaderIcon:
-    'display:inline-block;width:20px;height:20px;margin-top:2px;color:white; --activityIndicatorLoadingRingColor:#fff;--activityIndicatorLoadingDotColor:#fff;',
+    'display:inline-block;width:20px;height:20px;margin-top:2px;color:white;--activityIndicatorLoadingRingColor:#fff;--activityIndicatorLoadingDotColor:#fff;',
   refresh:
     'background:none;font-size:inherit;border:0;padding:0;color:#0000ee;cursor:pointer;text-decoration:underline',
 };
@@ -56,7 +61,6 @@ export default class IABookActions extends LitElement {
       localCache: { type: Object },
       loanRenewTimeConfig: { type: Object },
       loanRenewResult: { type: Object },
-      _active: { state: true },
     };
   }
 
@@ -74,7 +78,6 @@ export default class IABookActions extends LitElement {
     this.sharedObserver = undefined;
     this.disableActionGroup = false;
     this.modal = undefined;
-    this.toast = undefined;
     this.tokenDelay = 120; // in seconds
 
     // private props
@@ -84,10 +87,14 @@ export default class IABookActions extends LitElement {
     this.secondaryActions = [];
     this.lendingOptions = {};
     this.borrowType = ''; // (browsed|borrowed)
+    this.browseTimer = undefined;
+
+    /** @deprecated */
+    this.toast = undefined;
+    /** @deprecated */
     this.suppressToast = false;
+    /** @deprecated */
     this.suppressAutoRenew = false;
-    this.browseTimer = undefined;
-    this._attemptToRenew = false;
 
     /**
      * when user click on [return the book] button on warning modal
@@ -236,8 +243,9 @@ export default class IABookActions extends LitElement {
     }
 
     if (this.borrowType === 'browsed') {
+      console.log('this.borrowType', this.borrowType);
       // start timer for browsed.
-      this.startBrowseTimer();
+      await this.startBrowseTimer();
     }
 
     // early return if not borrowed or no action-bar
@@ -273,13 +281,6 @@ export default class IABookActions extends LitElement {
      * dispatched this event from bookreader page changed
      */
     window.addEventListener('BookReader:userAction', () => {
-      this.suppressToast = true;
-      this.closeToastManager();
-
-      if (this.suppressAutoRenew) {
-        return;
-      }
-
       if (this.borrowType === 'browsed') {
         this.autoLoanRenewChecker(true);
       }
@@ -292,7 +293,6 @@ export default class IABookActions extends LitElement {
      * @see TimerCountdown::timerCountdown
      */
     this.addEventListener('IABookActions:loanRenew', async event => {
-      console.log('** IABookActions:loanRenew', event.detail);
       await this.autoLoanRenewChecker(false);
 
       /**
@@ -359,6 +359,7 @@ export default class IABookActions extends LitElement {
    * Show the waring modal to ask user if they are still reading
    */
   async showWarningModal() {
+    console.log('****** showWarningModal ******');
     await this.useModalManager();
 
     // if secondsLeft < 60, consider it 1 minute
@@ -379,32 +380,21 @@ export default class IABookActions extends LitElement {
     );
 
     const customContent = html`<br />
-      <div
-        id="custom-buttons"
-        style="display:flex;justify-content:center;${this._attemptToRenew
-          ? 'pointer-events:none;opacity:0.8'
-          : ''}"
-      >
+      <div id="custom-buttons" style="display:flex;justify-content:center;">
         <button
           style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
-          @click=${() => {
-            console.log('clicked on keep reading button');
-            // e.target.parentNode.style.pointerEvents = "none";
-            // e.target.parentNode.style.opacity = "0.8";
-            this._attemptToRenew = true;
+          @click=${event => {
+            this.changeModalState(event);
             this.autoLoanRenewChecker(true);
           }}
         >
-          ${this._attemptToRenew
-            ? html` <ia-activity-indicator
-                mode="processing"
-                style=${modalButtonStyle.loaderIcon}
-              ></ia-activity-indicator>`
-            : 'Keep reading'}
+          Keep reading
         </button>
         <button
           style="${modalButtonStyle.iaButton} ${modalButtonStyle.return}"
-          @click=${() => {
+          @click=${event => {
+            this.changeModalState(event);
+            document.querySelector('ia-book-actions').disableActionGroup = true;
             this.returnNow = true;
           }}
         >
@@ -415,6 +405,27 @@ export default class IABookActions extends LitElement {
     this.modal.showModal({ config, customModalContent: customContent });
   }
 
+  /**
+   * helper function to change button click states on modal-manager
+   * - add loader on button click
+   * - change button appearance
+   *
+   * @param {Event} event
+   */
+  changeModalState(event) {
+    if (event.target === undefined) return;
+
+    const button = event.target;
+    button.innerHTML = `<ia-activity-indicator
+      mode="processing"
+      style=${modalButtonStyle.loaderIcon}
+    ></ia-activity-indicator>`;
+
+    const parentElement = event.target.parentNode;
+    parentElement.style.pointerEvents = 'none';
+    parentElement.style.opacity = 0.8;
+  }
+
   /**
    * Show modal when book is auto returned
    */
@@ -446,11 +457,8 @@ export default class IABookActions extends LitElement {
    * close/hide modal-manager
    */
   async closeModalManager() {
-    console.log('** closeModalManager');
     this.modal = document.querySelector('modal-manager');
-    if (this.modal) {
-      this.modal?.closeModal();
-    }
+    this.modal?.closeModal();
   }
 
   /**
@@ -474,11 +482,8 @@ export default class IABookActions extends LitElement {
    * close/hide toast message
    */
   async closeToastManager() {
-    console.log('** closeToastManager');
     this.toast = this.shadowRoot.querySelector('toast-template');
-    if (this.toast) {
-      this.toast?.remove();
-    }
+    this.toast?.remove();
   }
 
   /**
@@ -518,6 +523,9 @@ export default class IABookActions extends LitElement {
   }
 
   async browseHasRenew() {
+    console.log('****** browseHasRenew ******');
+    window?.IALendingIntervals?.clearAll();
+
     const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
     const secondsLeft = (loanTime - new Date()) / 1000; // different in seconds
 
@@ -528,24 +536,6 @@ export default class IABookActions extends LitElement {
       secondsLeftOnLoan: secondsLeft,
     };
     this.lendingStatus = currStatus;
-
-    this.startBrowseTimer();
-  }
-
-  startBrowseTimer() {
-    clearTimeout(this.browseTimer);
-    const {
-      browsingExpired,
-      user_has_browsed,
-      secondsLeftOnLoan,
-    } = this.lendingStatus;
-    if (!user_has_browsed || browsingExpired) {
-      return;
-    }
-
-    this.browseTimer = setTimeout(() => {
-      this.browseHasExpired();
-    }, secondsLeftOnLoan * 1000);
   }
 
   /**
@@ -571,6 +561,26 @@ export default class IABookActions extends LitElement {
     window?.Sentry?.captureMessage(sentryLogs.browseHasExpired);
   }
 
+  async startBrowseTimer() {
+    clearTimeout(this.browseTimer);
+
+    const {
+      browsingExpired,
+      user_has_browsed,
+      secondsLeftOnLoan,
+    } = this.lendingStatus;
+    if (!user_has_browsed || browsingExpired) {
+      console.log('user not browsed', this.lendingStatus);
+      return;
+    }
+
+    console.log('user browsed', this.lendingStatus);
+
+    this.browseTimer = setTimeout(() => {
+      this.browseHasExpired();
+    }, secondsLeftOnLoan * 1000);
+  }
+
   /**
    * Reset timer animation state after book renewed
    */
@@ -665,16 +675,6 @@ export default class IABookActions extends LitElement {
   async handleLoanAutoRenewed(event) {
     if (this.loanRenewResult.renewNow) {
       window?.IALendingIntervals?.clearAll();
-      this._attemptToRenew = false;
-
-      this.suppressToast = false;
-      await this.browseHasRenew();
-      await this.resetTimerCountState();
-
-      // close the modal
-      await this.modal.closeModal();
-
-      window?.Sentry?.captureMessage(sentryLogs.bookHasRenewed);
 
       // testing console....
       console.log('IABookActions: AutoRenewed:- ', {
@@ -682,6 +682,15 @@ export default class IABookActions extends LitElement {
         loanRenewResult: this.loanRenewResult,
         secondsLeftOnLoan: Math.round(this.lendingStatus.secondsLeftOnLoan),
       });
+
+      await this.browseHasRenew();
+      await this.resetTimerCountState();
+
+      // close the modal
+      this.modal?.remove();
+      this.modal?.showModal({ config: {}, customModalContent: `` });
+
+      window?.Sentry?.captureMessage(sentryLogs.bookHasRenewed);
     }
   }
 

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

@@ -80,7 +80,7 @@ describe('Loan Renew Determine', () => {
     );
 
     expect(toastMsg).to.be.equal(
-      'This book will be automatically returned in 2 minutes unless you turn a page.'
+      'With no action, this book will be auto-returned in 2 minutes.'
     );
   });
 });

package/test/ia-book-actions.test.js

@@ -188,7 +188,9 @@ describe('Borrow status actions', () => {
       },
     ];
 
-    expect(el.primaryTitle).to.equal('');
+    expect(el.primaryTitle).to.equal(
+      'Renews automatically as long as pages are turned.'
+    );
     expect(el.primaryActions.length).to.equal(2);
     expect(el.primaryActions[0].text).to.equal('Log In and Borrow');
     expect(el.primaryActions[0].text).to.equal(expectedPrimaryActions[0].text);
@@ -274,7 +276,7 @@ describe('Browsing expired status', () => {
     expect(el.loanRenewResult.renewNow).to.equal(false);
     expect(el.loanRenewResult.secondsLeft).to.equal(0);
     expect(el.loanRenewResult.texts).to.equal(
-      'This book has been automatically returned due to inactivity.'
+      'This book has been returned due to inactivity.'
     );
   });
 
@@ -347,7 +349,7 @@ describe('Auto renew one hour loan', () => {
     });
     el.dispatchEvent(myEvent);
 
-    await aTimeout(1500); // wait for 1.5 second
+    await aTimeout(1900); // wait for 1.9 second
     await el.updateComplete;
 
     expect(el.loanRenewResult.texts).to.equal(