@internetarchive/ia-book-actions 1.1.0-alpha7 → 1.1.0-alpha9

package/demo/index.html

@@ -131,7 +131,7 @@
     iaBookActions.returnUrl = '';
     iaBookActions.localCache = localCache;
 
-    let loanTotalTime2Min = { loanTotalTime: 80, loanRenewAtLast: 55, 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 };
 

package/package.json

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

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/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 = 3;
+    this.timerExecutionSeconds = 30;
 
     /** @deprecated */
     this.toast = undefined;
@@ -283,6 +282,21 @@ 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', 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
+
+        this.setIntervalExecutionBlock(Number(secondsLeft));
+      }
+    });
   }
 
   /**
@@ -487,36 +501,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.dismisOnClick = true;
-  //   config.texts = this.loanRenewHelper?.getMessageTexts(
-  //     this.loanRenewResult.texts,
-  //     secondsLeft
-  //   );
-
-  //   this.toast?.showToast({
-  //     config,
-  //   });
-  // }
-
   /**
    * Execute when loan is expired
    */
@@ -677,44 +661,62 @@ 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
+      // interval execution block
+      await this.setIntervalExecutionBlock(secondsLeft);
+    }, this.timerExecutionSeconds * 1000);
+  }
 
-      // 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);
+  /**
+   * 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
 
-      if (resync.resyncd) {
-        secondsLeft = resync.whatShouldLeft;
-      }
+    // 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);
 
-      log('startTimerCountdown --- countdown still valid. continue...', {
-        resync,
+    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,
+    }, new Date().getMinutes(), new Date().getSeconds());
 
-      // 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();
+      window?.Sentry?.captureMessage(sentryLogs.clearOneHourTimer);
+    }
   }
 
   /**
@@ -739,26 +741,28 @@ export default class IABookActions extends LitElement {
     const whatShouldLeft = Math.round(secondsShouldLeft);
     const timerElSeconds = this.timerCountdownEl.secondsLeftOnLoan || 0;
 
-    if (whatIsleft !== whatShouldLeft) {
+    log(`reSyncTimerIfGoneOff?`, {
+      whatIsleft,
+      whatShouldLeft,
+      timerElSeconds,
+      timeLeftInMin: Math.ceil(timerSecondsLeft / 60),
+    });
+
+    if (timerElSeconds !== whatShouldLeft || whatIsleft !== whatShouldLeft) {
       // set lending status with new time to update decrementor
       const currStatus = {
         ...this.lendingStatus,
         secondsLeftOnLoan: whatShouldLeft,
       };
       this.lendingStatus = currStatus;
+    }
 
-      log(`reSyncTimerIfGoneOff,\nlet's re-sync --- `, {
-        whatIsleft,
-        whatShouldLeft,
-        timerElSeconds,
-        timeLeftInMin: Math.ceil(timerSecondsLeft / 60),
-      }, '\ntimer resyncd --- ', {
-        whatShouldLeft,
-      });
+    if (whatIsleft !== whatShouldLeft) {
+      log(`reSyncTimerIfGoneOff --- let's re-sync.`);
 
-      return { resyncd: true, whatShouldLeft };
+      return { hasSynced: true, whatShouldLeft };
     }
-    return { resyncd: false, whatShouldLeft };
+    return false;
   }
 
   /**