@internetarchive/ia-book-actions 1.1.0-alpha1 → 1.1.0-alpha11

package/demo/index.html

@@ -131,7 +131,7 @@
     iaBookActions.returnUrl = '';
     iaBookActions.localCache = localCache;
 
-    let loanTotalTime2Min = { loanTotalTime: 65, loanRenewAtLast: 60, pageChangedInLast: 15 };
+    let loanTotalTime2Min = { loanTotalTime: 170, loanRenewAtLast: 80, pageChangedInLast: 15 };
     let loanTotalTime5Min = { loanTotalTime: 300, loanRenewAtLast: 180, pageChangedInLast: 15 };
     let loanTotalTime1Hour = { loanTotalTime: 3600, loanRenewAtLast: 660, pageChangedInLast: 900 };
 
@@ -390,7 +390,6 @@
               </div>
               <div>
                 <button id="show_expired_modal">While Browsing (`user_has_browsed`), Expire book & show its modal</button>
-                how_expired_modal
               </div>
             </td>
             <td class="availableToBorrow">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "1.1.0-alpha1",
+  "version": "1.1.0-alpha11",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -14,18 +14,16 @@
     "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",
     "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"
+    "test:fast": "web-test-runner --coverage",
+    "test:watch": "web-test-runner --watch"
   },
   "dependencies": {
     "@internetarchive/icon-info": "^1.2.6",
     "@internetarchive/local-cache": "^0.2.1",
-    "@internetarchive/modal-manager": "^0.2.12",
+    "@internetarchive/modal-manager": "2.0.0",
     "@internetarchive/shared-resize-observer": "^0.2.0",
-    "@internetarchive/toast-manager": "0.1.0",
     "install-deps": "^1.1.0",
-    "lit": "^2.5.0",
-    "playwright": "^1.43.1"
+    "lit": "^2.8.0"
   },
   "devDependencies": {
     "@open-wc/eslint-config": "^4.2.0",

package/src/assets/data/lending-get-status-service.js

@@ -118,7 +118,7 @@ export const canBrowseAndBorrow = {
   loanStartDate: '2021-07-30 09:57:40',
   loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
   maxLoans: 10,
-  secondsLeftOnLoan: 155,
+  secondsLeftOnLoan: 170,
   shouldProtectImages: true,
   totalWaitlistCount: 0,
   userHasBorrowed: false,

package/src/assets/styles/collapsible-action-group.js

@@ -21,6 +21,7 @@ export default css`
   .action-buttons .ia-button {
     margin: 0;
     height: 3.5rem;
+    padding: 0 2rem;
   }
   .action-buttons .desktop {
     background-color: ${whiteColor};

package/src/assets/styles/ia-button.js

@@ -36,7 +36,7 @@ export default css`
     align-items: center;
     transition: all 0.1s ease 0s;
     vertical-align: middle;
-    padding: 0 3rem;
+    padding: 0 1rem;
     outline-color: ${whiteColor};
     outline-offset: -4px;
     user-select: none;

package/src/components/timer-countdown.js

@@ -47,7 +47,7 @@ export default class TimerCountdown extends LitElement {
   }
 
   render() {
-    const viewClass = this.displayTime ? 'view' : 'hide';
+    const viewClass = this.displayTime ? 'view' : 'hide1';
     return html`
       <button
         id="timer-counter"

package/src/ia-book-actions.js

@@ -4,7 +4,6 @@ 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';
@@ -90,7 +89,7 @@ export default class IABookActions extends LitElement {
     this.lendingOptions = {};
     this.borrowType = null; // 'browsed'|'borrowed'
     this.browseTimer = undefined; // timeout
-    this.timerExecutionSeconds = 30;
+    this.timerExecutionSeconds = 2;
 
     /** @deprecated */
     this.toast = undefined;
@@ -129,10 +128,14 @@ export default class IABookActions extends LitElement {
     // clear all intervals for lending system
     window?.IALendingIntervals?.clearAll();
 
-    window?.Sentry?.captureMessage(sentryLogs.disconnectedCallback);
+    this.sentryCaptureMsg(sentryLogs.disconnectedCallback);
     this.disconnectResizeObserver();
   }
 
+  sentryCaptureMsg(msg) {
+    if (window?.Sentry) window?.Sentry?.captureMessage(msg ?? '');
+  }
+
   firstUpdated() {
     // bind auto loan renew events
     this.bindLoanRenewEvents();
@@ -224,7 +227,7 @@ export default class IABookActions extends LitElement {
       log('setupLendingToolbarActions > hasExpired --- ');
 
       if (!this.tokenPoller) {
-        window?.Sentry?.captureMessage(sentryLogs.bookWasExpired);
+        this.sentryCaptureMsg(sentryLogs.bookWasExpired);
       }
       window?.IALendingIntervals?.clearAll();
 
@@ -283,6 +286,25 @@ export default class IABookActions extends LitElement {
         this.autoLoanRenewChecker(true);
       }
     });
+
+    /**
+     * auto-renew interval may stale when tab is in background,
+     * so [visibilitychange] event can trigger timer to show relavent messages
+     */
+    document.addEventListener("visibilitychange", async () => {
+      if (!document.hidden) {
+        log('visibilitychange is not hidden time: ------------------ ', new Date().getMinutes(), new Date().getSeconds());
+
+        const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
+        const secondsLeft = Math.round((loanTime - new Date()) / 1000); // different in seconds
+
+        if (secondsLeft >= this.timerExecutionSeconds) {
+          this.setIntervalExecutionBlock(Number(secondsLeft));
+        } else {
+          this.disconnectedCallback();
+        }
+      }
+    });
   }
 
   /**
@@ -403,7 +425,10 @@ export default class IABookActions extends LitElement {
               ></ia-activity-indicator>`
             : 'Keep reading'}
         </button>
-        <span class="sr-only">Renewing loan, one moment please.</span>
+        <span
+          style="position: absolute; visibility: none; height: 1px; width: 1px; overflow: hidden;"
+          >Renewing loan, one moment please.</span
+        >
         <button
           disabled
           style="${modalButtonStyle.iaButton} ${modalButtonStyle.return}"
@@ -484,36 +509,6 @@ export default class IABookActions extends LitElement {
     this.toast?.remove();
   }
 
-  /**
-   * @deprecated
-   * Show toast messages on some specific loan renew features. e.g.
-   * - show message when book is auto renewed
-   * - show message when book is expired
-   * - show message having remaining time when book is about to auto returned
-   */
-  async showToastMessage() {
-    await this.useToastManager();
-
-    // if secondsLeft < 60, consider it 1 minute
-    let { secondsLeft } = this.loanRenewResult;
-    if (secondsLeft === undefined) {
-      secondsLeft = this.lendingStatus.secondsLeftOnLoan;
-    } else {
-      secondsLeft = secondsLeft > 60 ? secondsLeft : 60;
-    }
-
-    const config = new ToastConfig();
-    config.dismissOnClick = true;
-    config.texts = this.loanRenewHelper?.getMessageTexts(
-      this.loanRenewResult.texts,
-      secondsLeft
-    );
-
-    this.toast?.showToast({
-      config,
-    });
-  }
-
   /**
    * Execute when loan is expired
    */
@@ -539,7 +534,7 @@ export default class IABookActions extends LitElement {
 
     await this.showExpiredModal();
 
-    window?.Sentry?.captureMessage(sentryLogs.browseHasExpired);
+    this.sentryCaptureMsg(sentryLogs.browseHasExpired);
   }
 
   async startBrowseTimer() {
@@ -662,7 +657,7 @@ export default class IABookActions extends LitElement {
       this.modal?.closeModal();
       this.modal.removeAttribute('id');
       this.modal.customModalContent = nothing;
-      window?.Sentry?.captureMessage(sentryLogs.bookHasRenewed);
+      this.sentryCaptureMsg(sentryLogs.bookHasRenewed);
     }
   }
 
@@ -674,47 +669,61 @@ export default class IABookActions extends LitElement {
   startTimerCountdown() {
     window?.IALendingIntervals?.clearTimerCountdown();
 
-    let secondsLeft = Number(this.lendingStatus.secondsLeftOnLoan);
+    const secondsLeft = Number(this.lendingStatus.secondsLeftOnLoan);
     this.timeWhenTimerStart = new Date();
 
     window.IALendingIntervals.timerCountdown = setInterval(async () => {
-      secondsLeft -= this.timerExecutionSeconds;
-      secondsLeft = Math.round(secondsLeft); // round number
-
-      // re-sync timer if gone off because of background window
-      // side effect: updates this.lendingStatus & kicks off lifecycle,
-      // if really updated, escape from here
-      const resync = await this.reSyncTimerIfGoneOff(secondsLeft);
-
-      if (resync) {
-        log('startTimerCountdown --- stale, timer has resyncd', {
-          secondsLeft,
-        });
-        return;
-      }
+      // interval execution block
+      await this.setIntervalExecutionBlock(secondsLeft);
+    }, this.timerExecutionSeconds * 1000);
+  }
 
-      log('startTimerCountdown --- countdown still valid. continue...', {
-        resync,
+  /**
+   * setInterval execution function do following things
+   * - if setInterval timer gone off, let's resync
+   * - loan-renew attempt to renew the loan OR show relavant message
+   * - if loan has expired, clear interval timers
+   * 
+   * @param {Number} secondsLeftOnLoan 
+   */
+  async setIntervalExecutionBlock(secondsLeftOnLoan) {
+    let secondsLeft = secondsLeftOnLoan;
+    secondsLeft -= this.timerExecutionSeconds;
+    secondsLeft = Math.round(secondsLeft); // round number
+
+    // re-sync timer if gone off because of background window
+    // side effect: updates this.lendingStatus & kicks off lifecycle,
+    // if really updated, escape from here
+    const resyncd = await this.reSyncTimerIfGoneOff(secondsLeft);
+
+    if (resyncd?.hasSynced) {
+      secondsLeft = resyncd.whatShouldLeft;
+      log('startTimerCountdown --- stale, timer has resyncd', {
         secondsLeft,
-        loanRenewAtLast: this.loanRenewTimeConfig.loanRenewAtLast,
       });
+    }
 
-      /**
-       * 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 expired
-       * @see IABookActions::bindLoanRenewEvents
-       */
-      if (secondsLeft <= this.loanRenewTimeConfig.loanRenewAtLast) {
-        await this.loanRenewAttempt(secondsLeft);
-      }
+    log('startTimerCountdown --- countdown still valid. continue...', {
+      resyncd,
+      secondsLeft,
+      loanRenewAtLast: this.loanRenewTimeConfig.loanRenewAtLast,
+    }, 'time: ', new Date().getMinutes(), ':', new Date().getSeconds(), ', timerDelay: ', this.timerExecutionSeconds);
 
-      // clear interval in secondsLeft if less
-      if (secondsLeft <= this.timerExecutionSeconds) {
-        this.disconnectedCallback();
-        window?.Sentry?.captureMessage(sentryLogs.clearOneHourTimer);
-      }
-    }, this.timerExecutionSeconds * 1000);
+    /**
+     * 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 expired
+     * @see IABookActions::bindLoanRenewEvents
+     */
+    if (secondsLeft <= this.loanRenewTimeConfig.loanRenewAtLast) {
+      await this.loanRenewAttempt(secondsLeft);
+    }
+
+    // clear interval in secondsLeft if less
+    if (secondsLeft <= this.timerExecutionSeconds) {
+      this.disconnectedCallback();
+      this.sentryCaptureMsg(sentryLogs.clearOneHourTimer);
+    }
   }
 
   /**
@@ -758,7 +767,7 @@ export default class IABookActions extends LitElement {
     if (whatIsleft !== whatShouldLeft) {
       log(`reSyncTimerIfGoneOff --- let's re-sync.`);
 
-      return true;
+      return { hasSynced: true, whatShouldLeft };
     }
     return false;
   }
@@ -985,17 +994,6 @@ export default class IABookActions extends LitElement {
         --toastBGColor: #333;
         --toastFontColor: #fff;
       }
-
-      .sr-only {
-        position: absolute;
-        left: -9999px;
-        width: 1px;
-        height: 1px;
-        margin: 0;
-        padding: 0;
-        border: none;
-        overflow: hidden;
-      }
     `;
   }
 }