@internetarchive/ia-book-actions 0.1.3-alpha2 → 0.1.4-alpha2

package/demo/index.html

@@ -131,11 +131,11 @@
     iaBookActions.returnUrl = 'https://openlibrary.org';
     iaBookActions.localCache = localCache;
 
-    let loanTotalTime2Min = { loanTotalTime: 20, loanRenewAtLast: 15, pageChangedInLast: 15 };
+    let loanTotalTime2Min = { loanTotalTime: 20, loanRenewAtLast: 15, pageChangedInLast: 8 };
     let loanTotalTime5Min = { loanTotalTime: 300, loanRenewAtLast: 180, pageChangedInLast: 15 };
     let loanTotalTime1Hour = { loanTotalTime: 3600, loanRenewAtLast: 600, pageChangedInLast: 900 };
 
-    iaBookActions.loanRenewTimeConfig = loanTotalTime1Hour;
+    iaBookActions.loanRenewTimeConfig = loanTotalTime2Min;
 
     let lendingStatus1 = iaBookActions.lendingStatus;
     let secondsLeftOnLoan = iaBookActions.loanRenewTimeConfig.loanTotalTime;

package/package.json

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

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 1rem;
+    padding: 0 3rem;
     outline-color: ${whiteColor};
     outline-offset: -4px;
     user-select: none;

package/src/components/timer-countdown.js

@@ -31,6 +31,12 @@ export default class TimerCountdown extends LitElement {
      */
     this.loanRenewAtLast = 0;
 
+    /**
+     * timer which is not reduced along with timer
+     * @type {date}
+     */
+    this.timeWhenTimerStart = '';
+
     /**
      * delay seconds in setInterval function
      * @type {number}
@@ -42,33 +48,45 @@ export default class TimerCountdown extends LitElement {
     window?.IALendingIntervals?.clearTimerCountdown();
   }
 
+  firstUpdated() {
+    this.timerCountdown();
+  }
+
   updated(changed) {
     if (changed.has('secondsLeftOnLoan') && this.secondsLeftOnLoan > 0) {
-      this.disconnectedCallback();
-
       this.timerCountdown();
     }
   }
 
   timerCountdown() {
+    this.disconnectedCallback();
+
     // - let just execute setInterval in every 1 minute
-    this.timerExecutionSeconds = 60;
+    this.timerExecutionSeconds = 1;
+    let secondsLeft = this.secondsLeftOnLoan;
+
+    // store current time
+    this.timeWhenTimerStart = new Date();
 
     /**
      * set interval in window object
      * @see ia-lending-intervals.js
      */
-    window.IALendingIntervals.timerCountdown = setInterval(() => {
-      this.secondsLeftOnLoan -= this.timerExecutionSeconds;
-      const secondsLeft = Math.round(this.secondsLeftOnLoan);
+    window.IALendingIntervals.timerCountdown = setInterval(async () => {
+      secondsLeft -= this.timerExecutionSeconds;
+      secondsLeft = Math.round(secondsLeft); // round number
 
       console.log(
+        new Date().toLocaleTimeString(),
         'timeLeftInSec',
         secondsLeft,
         ' ||| timeLeftInMin',
         Math.ceil(secondsLeft / 60)
       );
 
+      // re-sync timer is gone off
+      await this.reSyncTimerIfGoneOff(secondsLeft);
+
       /**
        * execute from last 10th minute to 0th minute
        * - 10th - to check if user has viewed
@@ -76,26 +94,63 @@ export default class TimerCountdown extends LitElement {
        * @see IABookActions::bindLoanRenewEvents
        */
       if (secondsLeft <= this.loanRenewAtLast) {
-        this.dispatchEvent(
-          new CustomEvent('IABookActions:loanRenew', {
-            detail: {
-              hasPageChanged: false,
-              secondsLeft,
-            },
-            bubbles: true,
-            composed: true,
-          })
-        );
+        this.dispatchLoanRenewEvent(secondsLeft);
       }
 
       // clear interval
-      if (secondsLeft <= 60) {
+      if (secondsLeft <= 1) {
         this.disconnectedCallback();
         window?.Sentry?.captureMessage(sentryLogs.clearOneHourTimer);
       }
     }, this.timerExecutionSeconds * 1000);
   }
 
+  /**
+   * dispatch loan renew attempt event
+   *
+   * @param {number} secondsLeft
+   * @memberof TimerCountdown
+   */
+  dispatchLoanRenewEvent(secondsLeft) {
+    this.dispatchEvent(
+      new CustomEvent('IABookActions:loanRenew', {
+        detail: {
+          hasPageChanged: false,
+          secondsLeft,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  /**
+   * helper function to determine if timer is not in sync properly
+   *
+   * @param {number} timerSecondsLeft - actual seconds left get from setInterval
+   *
+   * @memberof TimerCountdown
+   */
+  async reSyncTimerIfGoneOff(timerSecondsLeft) {
+    const currentTime = new Date();
+
+    // current time - loan time
+    const diffInSeconds =
+      currentTime.getTime() / 1000 - this.timeWhenTimerStart.getTime() / 1000;
+
+    const secondsShouldLeft = this.secondsLeftOnLoan - diffInSeconds;
+
+    // convert in minutes
+    const whatIsleft = Math.round(timerSecondsLeft);
+    const whatShouldLeft = Math.round(secondsShouldLeft);
+
+    if (whatIsleft !== whatShouldLeft) {
+      console.log("timer is gone off, let's re-sync");
+      console.log('whatIsleft', whatIsleft, 'whatShouldLeft', whatShouldLeft);
+      this.secondsLeftOnLoan = secondsShouldLeft;
+    }
+  }
+
   /**
    * get remaining time with timeunit
    *

package/src/core/services/actions-config.js

@@ -166,7 +166,7 @@ export default class ActionsConfig {
 
     return {
       id: 'purchaseBook',
-      text: 'Purchase at',
+      text: 'Purchase at ',
       subText: 'Better World Books',
       title: 'Purchase',
       url: this.bwbPurchaseUrl,

package/src/ia-book-actions.js

@@ -271,10 +271,11 @@ export default class IABookActions extends LitElement {
     /**
      * detect click-event on document to close toast-template
      */
-    document.addEventListener('click', e => {
-      if (this.loanRenewHelper && this.loanRenewResult.secondsLeft > 0) {
-        this.suppressToast = true;
-      }
+    window.addEventListener('click', e => {
+      console.log('detech click event');
+      // if (this.loanRenewHelper && this.loanRenewResult.secondsLeft > 0) {
+      this.suppressToast = true;
+      // }
 
       // reload when user click on book-page and book is EXPIRED
       const hasExpired =