@internetarchive/ia-book-actions 0.1.11-b4 → 0.1.11-b6

package/package.json

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

package/src/ia-book-actions.js

@@ -105,7 +105,7 @@ export default class IABookActions extends LitElement {
      *  loanTotalTime: number, - total seconds a loan does have
      *  loanRenewAtLast: number, - check for loan renew at last
      *  pageChangedInLast: number, - consider loan renew eligible if viewed new page
-    */
+     */
     this.loanRenewTimeConfig = {
       loanTotalTime: 3600, // 1 hour
       loanRenewAtLast: 660, // 11 minutes
@@ -257,7 +257,9 @@ export default class IABookActions extends LitElement {
     // initial timer state for 1-hour loan
     if (this.borrowType === 'browsed' && !this.loanRenewResult.renewNow) {
       setTimeout(() => {
-        console.log('IN TIMEOUT OF --- setupLendingToolbarActions, firing resetTimerCountState');
+        console.log(
+          'IN TIMEOUT OF --- setupLendingToolbarActions, firing resetTimerCountState'
+        );
         this.resetTimerCountState();
       }, 100);
     }
@@ -349,10 +351,7 @@ export default class IABookActions extends LitElement {
       <div id="custom-buttons" style="display:flex;justify-content:center;">
         <button
           style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
-          @click=${async event => {
-            await this.changeModalState(event);
-            this.loanRenewResult = { texts: '', renewNow: true };
-          }}
+          @click=${event => this.patronWantsToRenewBook(event)}
         >
           Keep reading
         </button>
@@ -371,6 +370,11 @@ export default class IABookActions extends LitElement {
     this.modal?.showModal({ config, customModalContent: customContent });
   }
 
+  async patronWantsToRenewBook(event) {
+    await this.changeModalState(event);
+    this.loanRenewResult = { texts: '', renewNow: true };
+  }
+
   /**
    * helper function to change button click states on modal-manager
    * - add loader on button click
@@ -379,9 +383,11 @@ export default class IABookActions extends LitElement {
    * @param {Event} event
    */
   changeModalState(event) {
+    // this doesn't really work? shows empty button
     if (event.target === undefined) return;
 
     const button = event.target;
+    button.disabled = true;
     button.innerHTML = `<ia-activity-indicator
       mode="processing"
       style=${modalButtonStyle.loaderIcon}
@@ -508,7 +514,11 @@ export default class IABookActions extends LitElement {
 
   async startBrowseTimer() {
     clearTimeout(this.browseTimer);
-    console.log('startBrowseTimerstartBrowseTimer just cleared timer', this.browseTimer, this.lendingStatus);
+    console.log(
+      'startBrowseTimerstartBrowseTimer just cleared timer',
+      this.browseTimer,
+      this.lendingStatus
+    );
 
     const {
       browsingExpired,
@@ -521,7 +531,10 @@ export default class IABookActions extends LitElement {
     }
 
     this.browseTimer = setTimeout(() => {
-      console.log('start `this.browseTimer will fire his.browseHasExpired() - secondsLeftOnLoan', secondsLeftOnLoan);
+      console.log(
+        'start `this.browseTimer will fire his.browseHasExpired() - secondsLeftOnLoan',
+        secondsLeftOnLoan
+      );
       this.browseHasExpired();
     }, secondsLeftOnLoan * 1000);
   }
@@ -533,11 +546,22 @@ export default class IABookActions extends LitElement {
     const timerCountdown = this._shadowRoot.querySelector('timer-countdown');
     if (!timerCountdown) return;
 
-    const secondsLeft = Number.parseInt((Number(this.lendingStatus.secondsLeftOnLoan)), 10);
-    const strokeDashOffset = Number.parseInt(((secondsLeft / this.loanRenewTimeConfig.loanTotalTime) * 315) * 1.5, 10);
-
+    const secondsLeft = Number.parseInt(
+      Number(this.lendingStatus.secondsLeftOnLoan),
+      10
+    );
+    const firstStrokeDashOffset = Number.parseInt(
+      (secondsLeft / this.loanRenewTimeConfig.loanTotalTime) * 315 * 1.5,
+      10
+    );
+    const actualStrokeDashOffset =
+      firstStrokeDashOffset > 315 ? 315 : firstStrokeDashOffset;
 
-    console.log('resetTimerCountState === ', { secondsLeft, strokeDashOffset });
+    console.log('resetTimerCountState === ', {
+      secondsLeft,
+      firstStrokeDashOffset,
+      actualStrokeDashOffset,
+    });
 
     // set seconds left in loan expire
     timerCountdown.style?.setProperty('--secondsLeftOnLoan', `${secondsLeft}s`);
@@ -545,7 +569,7 @@ export default class IABookActions extends LitElement {
     // set circle stroke offset left in loan expire
     timerCountdown.style?.setProperty(
       '--strokeLeftOnLoan',
-      `${strokeDashOffset}` // the perimeter of the circle = (π * 2 * radius)
+      `${actualStrokeDashOffset}` // the perimeter of the circle = (π * 2 * radius)
     );
 
     const animationCircle = timerCountdown.shadowRoot.querySelector('.circle');
@@ -623,11 +647,10 @@ export default class IABookActions extends LitElement {
         secondsLeftOnLoan: Math.round(this.lendingStatus.secondsLeftOnLoan), // stale? how to fix
       });
 
-
       // Now, let's reset loan duration & this.lendingStatus
       const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
       const secondsLeft = (loanTime - new Date()) / 1000; // different in seconds
-  
+
       const currStatus = {
         ...this.lendingStatus,
         user_has_browsed: true,
@@ -637,9 +660,9 @@ export default class IABookActions extends LitElement {
       this.lendingStatus = currStatus;
 
       console.log('~~~ handleLoanAutoRenewed - new this.lendingStatus', {
-        secondsLeftOnLoan: this.lendingStatus.secondsLeftOnLoan
+        secondsLeftOnLoan: this.lendingStatus.secondsLeftOnLoan,
       });
-  
+
       /**
        * reset timer countdown states
        */
@@ -674,7 +697,10 @@ export default class IABookActions extends LitElement {
       // if really updated, escape from here
       const resync = await this.reSyncTimerIfGoneOff(secondsLeft);
 
-      console.log("*** startTimerCountdown = reSyncTimerIfGoneOff ***", { secondsLeft, resync });
+      console.log('*** startTimerCountdown = reSyncTimerIfGoneOff ***', {
+        secondsLeft,
+        resync,
+      });
 
       if (resync) {
         console.log('have resyncd, will end startTimerCountdown here - ');