@internetarchive/ia-book-actions 1.1.0-alpha14 → 1.1.0-alpha15

package/demo/index.html

@@ -34,6 +34,8 @@
       --primaryCTAFillRGB: 25, 72, 128;
       --primaryErrorCTAFillRGB: 229, 28, 38;
       --primaryDisableCTAFill: #767676;
+      background: var(--secondaryBGColor);
+      color: var(--primaryTextColor);
     }
 
     fieldset {
@@ -76,6 +78,13 @@
       display: inline-grid;
     }
 
+    .action-button button {
+      padding: 6px;
+      cursor: pointer;
+      border: 2px solid #194880;
+      border-radius: 10px;
+    }
+
     body.modal-manager-open {
       overflow: hidden;
     }
@@ -128,10 +137,11 @@
     iaBookActions.modalConfig = modalConfig;
     iaBookActions.lendingBarPostInit = lendingBarPostInit;
     iaBookActions.tokenDelay = 2; // 2 seconds
+    iaBookActions.timerExecutionSeconds = 4 // 4 seconds
     iaBookActions.returnUrl = '';
     iaBookActions.localCache = localCache;
 
-    let loanTotalTime2Min = { loanTotalTime: 65, loanRenewAtLast: 60, pageChangedInLast: 15 };
+    let loanTotalTime2Min = { loanTotalTime: 120, loanRenewAtLast: 80, pageChangedInLast: 15 };
     let loanTotalTime5Min = { loanTotalTime: 300, loanRenewAtLast: 180, pageChangedInLast: 15 };
     let loanTotalTime1Hour = { loanTotalTime: 3600, loanRenewAtLast: 660, pageChangedInLast: 900 };
 
@@ -286,6 +296,19 @@
       iaBookActions.browseHasExpired();
     });
 
+    document.querySelector('#resync_timer').addEventListener('click', async (e) => {
+      if (iaBookActions.lendingStatus.user_has_browsed) {
+        document.querySelector('ia-book-actions').dispatchEvent(
+          new Event('visibilitychange', {
+            detail: {},
+            bubbles: true,
+            composed: true,
+          })
+        );
+      }
+      await new Promise(resolve => setTimeout(resolve, 5000));
+    });
+
     document.querySelectorAll('.availableToBorrow input[type=radio]').forEach((item) => {
       item.addEventListener('click', (e) => {
         if (e.target.value === 'available_to_borrow') {
@@ -359,9 +382,6 @@
             </td>
             <td class="searchParam">
               <label><input type="checkbox" name="search" value="Search Param" />Search Param</label>
-            <td>
-              <button class="pageChangedEvent">Page Change Event</button>
-            </td>
           </tr>
         </table>
     </fieldset>
@@ -385,12 +405,6 @@
               <label><input type="radio" name="browse" value="available_to_browse" />available_to_browse</label>
               <label><input type="radio" name="browse" value="user_has_browsed" />user_has_browsed</label>
               <label><input type="radio" name="browse" value="browsingExpired" />browsingExpired</label>
-              <div>
-                <button id="show_warning_modal">When Browsing (`user_has_browsed`), show Warning Modal</button>
-              </div>
-              <div>
-                <button id="show_expired_modal">While Browsing (`user_has_browsed`), Expire book & show its modal</button>
-              </div>
             </td>
             <td class="availableToBorrow">
               <label><input type="radio" name="borrow" value="available_to_borrow" />available_to_borrow</label>
@@ -410,6 +424,29 @@
               font-weight: bold; display: none" name="purchase" value="Reflect" />
             </td>
           </tr>
+          <tr>
+            <td>
+              <fieldset style="margin-top: 10px;">
+                <legend style="color: black;">controls for browsed book</legend>
+                  <table aria-hidden="true">
+                    <tbody><tr>
+                      <td class="action-button">
+                        <button class="pageChangedEvent">Page Change Event</button>
+                      </td>
+                      <td class="action-button">
+                        <button id="show_warning_modal">When Browsing (`user_has_browsed`),<br> show Warning Modal</button>
+                      </td>
+                      <td class="action-button">
+                        <button id="show_expired_modal">While Browsing (`user_has_browsed`),<br> Expire book & show its modal</button>
+                      </td>
+                      <td class="action-button">
+                        <button id="resync_timer">While Browsing (`user_has_browsed`),<br> resync timer</button>
+                      </td>
+                    </tr>
+                  </tbody></table>
+              </fieldset>
+            </td>
+          </tr>
         </table>
     </fieldset>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "1.1.0-alpha14",
+  "version": "1.1.0-alpha15",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -14,8 +14,8 @@
     "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",
-    "test:watch": "web-test-runner --watch"
+    "test:fast": "web-test-runner --coverage --playwright --browsers chromium firefox webkit",
+    "test:watch": "web-test-runner --watch --playwright --browsers chromium firefox webkit"
   },
   "dependencies": {
     "@internetarchive/icon-info": "^1.2.6",

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: 170,
+  secondsLeftOnLoan: 155,
   shouldProtectImages: true,
   totalWaitlistCount: 0,
   userHasBorrowed: false,

package/src/components/timer-countdown.js

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

package/src/ia-book-actions.js

@@ -59,6 +59,7 @@ export default class IABookActions extends LitElement {
       disableActionGroup: { type: Boolean },
       modal: { Object },
       tokenDelay: { type: Number },
+      timerExecutionSeconds: { type: Number },
       localCache: { type: Object },
       loanRenewTimeConfig: { type: Object },
       loanRenewResult: { type: Object },
@@ -79,6 +80,7 @@ export default class IABookActions extends LitElement {
     this.sharedObserver = undefined;
     this.disableActionGroup = false;
     this.tokenDelay = 120; // in seconds
+    this.timerExecutionSeconds = 30;
 
     // private props
     this.postInitComplete = false;
@@ -89,10 +91,6 @@ export default class IABookActions extends LitElement {
     this.lendingOptions = {};
     this.borrowType = null; // 'browsed'|'borrowed'
     this.browseTimer = undefined; // timeout
-    this.timerExecutionSeconds = 10;
-
-    /** @deprecated */
-    this.toast = undefined;
 
     /**
      * when user click on [return the book] button on warning modal
@@ -117,7 +115,7 @@ export default class IABookActions extends LitElement {
      * contains one hour auto-loan-renew response
      *
      * @type {object} loanRenewResult
-     * @property {string} texts - texts messages need to show in toast message
+     * @property {string} texts - texts messages shows in modal
      * @property {boolean} renewNow - key to determine if need to renew now
      * @property {number} secondsLeft - seconds left in active loan
      */
@@ -132,10 +130,13 @@ export default class IABookActions extends LitElement {
     this.disconnectResizeObserver();
   }
 
+  /**
+   * send log messages to sentry
+   * @param {string} msg
+   */
   sentryCaptureMsg(msg) {
     log(window?.Sentry);
-    log(window?.Sentry?.captureMessage(msg));
-    if (window?.Sentry) window?.Sentry?.captureMessage(msg);
+    window?.Sentry?.captureMessage(msg);
   }
 
   firstUpdated() {
@@ -291,19 +292,31 @@ export default class IABookActions extends LitElement {
 
     /**
      * auto-renew interval may stale when tab is in background,
-     * when user jump on the books tab,
+     * so when user open that tab again,
      * the [visibilitychange] event can trigger timer to show relavent messages
      */
-    document.addEventListener("visibilitychange", async () => {
+    document.addEventListener('visibilitychange', async () => {
       if (!document.hidden) {
-        log('visibilitychange is not hidden time: ------------------ ', new Date().getMinutes(), new Date().getSeconds());
-
-        if (this.borrowType === 'browsed' && this.lendingStatus.browsingExpired === false) {
-          const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
-          const secondsLeft = Math.round((loanTime - new Date()) / 1000); // different in seconds
+        log(
+          'visibilitychange event execute:------------------ ',
+          new Date().getMinutes(),
+          new Date().getSeconds(),
+          this.borrowType
+        );
+
+        if (
+          this.borrowType === 'browsed' &&
+          this.lendingStatus.browsingExpired === false
+        ) {
+          const loanTime = await this.localCache.get(
+            `${this.identifier}-loanTime`
+          );
+
+          // number of seconds left in current loan
+          const secondsLeft = Math.round((loanTime - new Date()) / 1000);
 
           if (secondsLeft >= this.timerExecutionSeconds) {
-            this.setIntervalExecutionBlock(Number(secondsLeft));
+            this.loanStatusCheckInterval(Number(secondsLeft));
           } else {
             this.browseHasExpired();
             this.disconnectedCallback();
@@ -490,31 +503,6 @@ export default class IABookActions extends LitElement {
     await this.modal?.showModal({ config, customModalContent });
   }
 
-  /**
-   * @deprecated
-   * create / select the toast-template component on DOM
-   *
-   * @memberof IABookActions
-   */
-  async useToastManager() {
-    if (!this.toast) {
-      this.toast = this.shadowRoot.querySelector('toast-template');
-
-      if (!this.toast) this.toast = document.createElement('toast-template');
-    }
-
-    await this.shadowRoot.appendChild(this.toast);
-  }
-
-  /**
-   * @deprecated
-   * close/hide toast message
-   */
-  async closeToastManager() {
-    this.toast = this.shadowRoot.querySelector('toast-template');
-    this.toast?.remove();
-  }
-
   /**
    * Execute when loan is expired
    */
@@ -643,7 +631,10 @@ export default class IABookActions extends LitElement {
     if (this.loanRenewResult.renewNow) {
       // Now, let's reset loan duration & this.lendingStatus
       const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
-      const secondsLeft = Math.round((loanTime - new Date()) / 1000); // different in seconds
+
+      // number of seconds left in current loan
+      const secondsLeft = Math.round((loanTime - new Date()) / 1000);
+      log(loanTime, secondsLeft);
 
       log('IABookActions: handleLoanAutoRenewed --- ', {
         ajaxResponse: detail?.data,
@@ -680,7 +671,7 @@ export default class IABookActions extends LitElement {
 
     window.IALendingIntervals.timerCountdown = setInterval(async () => {
       // interval execution block
-      await this.setIntervalExecutionBlock(secondsLeft);
+      await this.loanStatusCheckInterval(secondsLeft);
     }, this.timerExecutionSeconds * 1000);
   }
 
@@ -689,10 +680,10 @@ export default class IABookActions extends LitElement {
    * - 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 
+   *
+   * @param {Number} secondsLeftOnLoan
    */
-  async setIntervalExecutionBlock(secondsLeftOnLoan) {
+  async loanStatusCheckInterval(secondsLeftOnLoan) {
     let secondsLeft = secondsLeftOnLoan;
     secondsLeft -= this.timerExecutionSeconds;
     secondsLeft = Math.round(secondsLeft); // round number
@@ -702,21 +693,30 @@ export default class IABookActions extends LitElement {
     // if really updated, escape from here
     const resyncd = await this.reSyncTimerIfGoneOff(secondsLeft);
 
-    if (resyncd?.hasSynced) {
+    if (resyncd.hasSynced) {
       secondsLeft = resyncd.whatShouldLeft;
       log('startTimerCountdown --- stale, timer has resyncd', {
         secondsLeft,
       });
     }
 
-    log('startTimerCountdown --- countdown still valid. continue...', {
-      resyncd,
-      secondsLeft,
-      loanRenewAtLast: this.loanRenewTimeConfig.loanRenewAtLast,
-    }, 'time: ', new Date().getMinutes(), ':', new Date().getSeconds(), ', timerDelay: ', this.timerExecutionSeconds);
+    log(
+      'startTimerCountdown --- countdown still valid. continue...',
+      {
+        resyncd,
+        secondsLeft,
+        loanRenewAtLast: this.loanRenewTimeConfig.loanRenewAtLast,
+      },
+      'time: ',
+      new Date().getMinutes(),
+      ':',
+      new Date().getSeconds(),
+      ', timerDelay: ',
+      this.timerExecutionSeconds
+    );
 
     /**
-     * execute from last 10th minute to 0th minute
+     * execute from last 10th minutes 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
@@ -736,8 +736,7 @@ export default class IABookActions extends LitElement {
    * helper function to determine if timer is not in sync properly
    *
    * @param {number} timerSecondsLeft - actual seconds left get from setInterval
-   *
-   * @memberof TimerCountdown
+   * @returns {Object} { hasSynced: [boolean], whatShouldLeft: [number] }
    */
   async reSyncTimerIfGoneOff(timerSecondsLeft) {
     const currentTime = new Date();
@@ -772,10 +771,10 @@ export default class IABookActions extends LitElement {
 
     if (whatIsleft !== whatShouldLeft) {
       log(`reSyncTimerIfGoneOff --- let's re-sync.`);
-
       return { hasSynced: true, whatShouldLeft };
     }
-    return false;
+
+    return { hasSynced: false, whatShouldLeft };
   }
 
   /**
@@ -987,19 +986,11 @@ export default class IABookActions extends LitElement {
       .lending-wrapper {
         width: 100%;
         margin: 0 auto;
-        background: var(--primaryBGColor, #000);
-        color: var(--primaryTextColor, #fff);
         display: inline-flex;
         align-items: center;
         justify-content: center;
         flex-wrap: wrap;
       }
-
-      toast-template {
-        --toastTopMargin: 80px;
-        --toastBGColor: #333;
-        --toastFontColor: #fff;
-      }
     `;
   }
 }

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

@@ -376,7 +376,8 @@ describe('Browsing expired status', () => {
   });
 });
 
-describe('Auto renew one hour loan', () => {
+describe('Auto renew one hour loan', async () => {
+  await aTimeout(5000);
   it('Book is browsing and renewed it now', async () => {
     const loanTime = 88;
     const el = await fixture(
@@ -449,6 +450,61 @@ describe('Auto renew one hour loan', () => {
   });
 });
 
+describe('Visibility change API for document', async () => {
+  await aTimeout(5000);
+
+  beforeEach(() => {
+    Object.defineProperty(document, 'hidden', {
+      value: false,
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    Object.defineProperty(document, 'hidden', {
+      value: true,
+      configurable: true,
+    });
+  });
+
+  it('when book is not expired', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: {
+          user_has_browsed: true,
+          browsingExpired: false,
+        },
+      })
+    );
+    await el.updateComplete;
+
+    const spy = Sinon.spy(el, 'loanStatusCheckInterval');
+    document.dispatchEvent(new Event('visibilitychange'));
+
+    expect(spy.calledOnce).to.be.true;
+  });
+
+  it('when book is already expired', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: {
+          user_has_browsed: true,
+        },
+      })
+    );
+    await el.updateComplete;
+
+    const spy = Sinon.spy(el, 'browseHasExpired');
+    document.dispatchEvent(new Event('visibilitychange'));
+
+    expect(spy.calledOnce).to.be.true;
+  });
+});
+
 describe('Shared Resize Observer', () => {
   it('can receive a Shared Resize Observer', async () => {
     const sharedObserverStub = new SharedResizeObserver();