@internetarchive/ia-book-actions 0.1.11-b2 → 0.1.11-b21

package/demo/index.html

@@ -356,5 +356,6 @@
         </table>
     </fieldset>
   </div>
+  <modal-manager></modal-manager>
 </body>
 </html>

package/package.json

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

package/src/core/services/actions-handler/actions-handler-service.js

@@ -21,7 +21,7 @@ export default async function ActionsHandlerService(options) {
   const tokenError = 'loan token not found. please try again later.';
   const borrowError =
     'This book is not available to borrow at this time. Please try again later.';
-  const erroneousActions = ['browse_book', 'borrow_book', 'create_token'];
+  const erroneousActions = ['browse_book', 'borrow_book', 'create_token', 'renew_loan'];
   const shouldReturnError =
     location?.href?.indexOf('?error=true') !== -1 &&
     location?.hostname !== 'archive.org';

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

@@ -142,7 +142,13 @@ export default class ActionsHandler extends LitElement {
       action,
       identifier: this.identifier,
       success: data => {
-        console.log("RENEW_LOAN --- ", data, action, data.loan, this.identifier);
+        console.log(
+          'RENEW_LOAN --- ',
+          data,
+          action,
+          data.loan,
+          this.identifier
+        );
         if (data?.success === true && data?.loan?.renewal === true) {
           this.setBrowseTimeSession();
           this.dispatchEvent(
@@ -300,6 +306,7 @@ export default class ActionsHandler extends LitElement {
    * set browse time in indexedDB
    */
   async setBrowseTimeSession() {
+    // TODO: USE loan info to determine what we have left
     try {
       const expireDate = new Date(
         new Date().getTime() + this.loanTotalTime * 1000

package/src/ia-book-actions.js

@@ -77,7 +77,6 @@ export default class IABookActions extends LitElement {
     this.barType = 'action'; // 'title'|'action'
     this.sharedObserver = undefined;
     this.disableActionGroup = false;
-    this.modal = undefined;
     this.tokenDelay = 120; // in seconds
 
     // private props
@@ -100,13 +99,17 @@ export default class IABookActions extends LitElement {
 
     /**
      * contains one hour auto-loan-renew time configuration
-     *
-     * @type {object} loanRenewTimeConfig
-     * @property {number} loanTotalTime - total seconds a loan does have
-     * @property {number} loanRenewAtLast - check for loan renew at last
-     * @property {number} pageChangedInLast - consider loan renew eligible if viewed new page
+     * defaults to 1 hour config
+     * @type {{
+     *  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 = {};
+    this.loanRenewTimeConfig = {
+      loanTotalTime: 3600, // 1 hour
+      loanRenewAtLast: 660, // 11 minutes
+      pageChangedInLast: 900, // 15 minutes
+    };
 
     /**
      * contains one hour auto-loan-renew response
@@ -253,6 +256,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'
+        );
         this.resetTimerCountState();
       }, 100);
     }
@@ -301,19 +307,12 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult = this.loanRenewHelper.result;
   }
 
-  /**
-   * create / select the modal-manager component on DOM
-   * @memberof IABookActions
-   */
-  async useModalManager() {
-    if (!this.modal) {
-      this.modal = document.querySelector('modal-manager');
-
-      if (!this.modal) this.modal = document.createElement('modal-manager');
-    }
+  /** @returns HTMLElement */
+  get modal() {
+    const modalOnDom = document.querySelector('modal-manager');
 
-    this.modal.id = 'action-bar-modal';
-    await document.body.appendChild(this.modal);
+    modalOnDom.id = 'action-bar-modal';
+    return modalOnDom;
   }
 
   /**
@@ -321,7 +320,9 @@ export default class IABookActions extends LitElement {
    */
   async showWarningModal() {
     console.log('****** showWarningModal ******');
-    await this.useModalManager();
+    // clear modal
+    this.modal?.showModal(new ModalConfig({ customModalContent: nothing }));
+    this.modal?.closeModal();
 
     // if secondsLeft < 60, consider it 1 minute
     let { secondsLeft } = this.loanRenewResult;
@@ -331,30 +332,28 @@ export default class IABookActions extends LitElement {
       secondsLeft = secondsLeft > 60 ? secondsLeft : 60;
     }
 
-    const config = new ModalConfig();
-    config.headline = 'Are you still here?';
-    config.showCloseButton = false;
-    config.closeOnBackdropClick = false;
-    config.message = this.loanRenewHelper?.getMessageTexts(
-      this.loanRenewResult.texts,
-      secondsLeft
-    );
+    const config = new ModalConfig({
+      headline: 'Are you still here?',
+      showCloseButton: false,
+      closeOnBackdropClick: false,
+      message: this.loanRenewHelper?.getMessageTexts(
+        this.loanRenewResult.texts,
+        secondsLeft
+      )
+    });
 
-    const customContent = html`<br />
-      <div id="custom-buttons" style="display:flex;justify-content:center;">
+    const customModalContent = html`<br />
+      <div id="book-action-bar-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>
         <button
           style="${modalButtonStyle.iaButton} ${modalButtonStyle.return}"
           @click=${event => {
-            this.changeModalState(event);
+            // this.changeModalState(event);
             document.querySelector('ia-book-actions').disableActionGroup = true;
             this.returnNow = true;
           }}
@@ -363,7 +362,12 @@ export default class IABookActions extends LitElement {
         </button>
       </div> `;
 
-    this.modal?.showModal({ config, customModalContent: customContent });
+    this.modal?.showModal({ config, customModalContent });
+  }
+
+  async patronWantsToRenewBook(event) {
+    // this.changeModalState(event);
+    this.loanRenewResult = { texts: '', renewNow: true };
   }
 
   /**
@@ -374,9 +378,12 @@ 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}
@@ -392,15 +399,15 @@ export default class IABookActions extends LitElement {
    */
   async showExpiredModal() {
     console.log('showExpiredModal()');
-    await this.useModalManager();
 
-    const config = new ModalConfig();
-    config.headline = '';
-    config.showCloseButton = false;
-    config.closeOnBackdropClick = false;
-    config.message = 'This book has been returned due to inactivity.';
+    const config = new ModalConfig({
+      headline: '',
+      showCloseButton: false,
+      closeOnBackdropClick: false,
+      message: 'This book has been returned due to inactivity.'
+    });
 
-    const customContent = html`<br />
+    const customModalContent = html`<br />
       <div style="text-align: center">
         <button
           style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
@@ -412,15 +419,7 @@ export default class IABookActions extends LitElement {
         </button>
       </div> `;
 
-    this.modal?.showModal({ config, customModalContent: customContent });
-  }
-
-  /**
-   * close/hide modal-manager
-   */
-  async closeModalManager() {
-    this.modal = document.querySelector('modal-manager');
-    this.modal?.closeModal();
+    this.modal?.showModal({ config, customModalContent });
   }
 
   /**
@@ -478,21 +477,6 @@ export default class IABookActions extends LitElement {
     });
   }
 
-  async browseHasRenew() {
-    window?.IALendingIntervals?.clearAll();
-
-    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,
-      browsingExpired: false,
-      secondsLeftOnLoan: secondsLeft,
-    };
-    this.lendingStatus = currStatus;
-  }
-
   /**
    * Execute when loan is expired
    */
@@ -518,7 +502,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,
@@ -531,7 +519,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);
   }
@@ -543,11 +534,22 @@ export default class IABookActions extends LitElement {
     const timerCountdown = this._shadowRoot.querySelector('timer-countdown');
     if (!timerCountdown) return;
 
-    const secondsLeft = Number(this.lendingStatus.secondsLeftOnLoan);
-    const strokeDashOffset =
-      (secondsLeft / this.loanRenewTimeConfig.loanTotalTime) * 315;
+    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);
+    console.log('resetTimerCountState === ', {
+      secondsLeft,
+      firstStrokeDashOffset,
+      actualStrokeDashOffset,
+    });
 
     // set seconds left in loan expire
     timerCountdown.style?.setProperty('--secondsLeftOnLoan', `${secondsLeft}s`);
@@ -555,7 +557,7 @@ export default class IABookActions extends LitElement {
     // set circle stroke offset left in loan expire
     timerCountdown.style?.setProperty(
       '--strokeLeftOnLoan',
-      `${Number(strokeDashOffset)}` // the perimeter of the circle = (π * 2 * radius)
+      `${actualStrokeDashOffset}` // the perimeter of the circle = (π * 2 * radius)
     );
 
     const animationCircle = timerCountdown.shadowRoot.querySelector('.circle');
@@ -584,14 +586,6 @@ export default class IABookActions extends LitElement {
     ></book-title-bar>`;
   }
 
-  get timerCountdownTemplate() {
-    return this.borrowType === 'browsed'
-      ? html`<timer-countdown
-          .secondsLeftOnLoan=${Number(this.lendingStatus.secondsLeftOnLoan)}
-        ></timer-countdown>`
-      : nothing;
-  }
-
   get bookActionBar() {
     return html`
       <collapsible-action-group
@@ -616,7 +610,10 @@ export default class IABookActions extends LitElement {
       >
       </collapsible-action-group>
       ${this.textGroupTemplate} ${this.infoIconTemplate}
-      ${this.timerCountdownTemplate}
+      <timer-countdown
+        .secondsLeftOnLoan=${Number(this.lendingStatus.secondsLeftOnLoan)}
+        class=${this.borrowType === 'browsed' ? '' : 'hide'}
+      ></timer-countdown>
     `;
   }
 
@@ -635,13 +632,24 @@ export default class IABookActions extends LitElement {
       console.log('IABookActions: AutoRenewed:- ', {
         ajaxResponse: event?.detail?.data,
         loanRenewResult: this.loanRenewResult,
-        secondsLeftOnLoan: Math.round(this.lendingStatus.secondsLeftOnLoan),
+        secondsLeftOnLoan: Math.round(this.lendingStatus.secondsLeftOnLoan), // stale? how to fix
       });
 
-      /**
-       * update the lendingStatus property
-       */
-      await this.browseHasRenew();
+      // 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,
+        browsingExpired: false,
+        secondsLeftOnLoan: secondsLeft,
+      };
+      this.lendingStatus = currStatus;
+
+      console.log('~~~ handleLoanAutoRenewed - new this.lendingStatus', {
+        secondsLeftOnLoan: this.lendingStatus.secondsLeftOnLoan,
+      });
 
       /**
        * reset timer countdown states
@@ -649,8 +657,12 @@ export default class IABookActions extends LitElement {
       await this.resetTimerCountState();
 
       // close the modal
-      this.modal?.remove();
-      this.modal?.showModal({ config: {}, customModalContent: `` });
+      this.modal.removeAttribute('id');
+      const editedActionButtons = this.modal.shadowRoot.querySelector('#book-action-bar-custom-buttons');
+      if (editedActionButtons) {
+        editedActionButtons.parentElement.removeChild(editedActionButtons);
+      }
+      this.modal?.closeModal();
 
       window?.Sentry?.captureMessage(sentryLogs.bookHasRenewed);
     }
@@ -673,9 +685,14 @@ export default class IABookActions extends LitElement {
       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);
 
-      console.log("*** startTimerCountdown ***", secondsLeft, resync);
+      console.log('*** startTimerCountdown = reSyncTimerIfGoneOff ***', {
+        secondsLeft,
+        resync,
+      });
 
       if (resync) {
         console.log('have resyncd, will end startTimerCountdown here - ');
@@ -883,7 +900,6 @@ export default class IABookActions extends LitElement {
 
   /* show error message if something went wrong */
   async showErrorModal(errorMsg, action) {
-    await this.useModalManager();
 
     const modalConfig = new ModalConfig({
       title: 'Lending error',
@@ -948,6 +964,10 @@ export default class IABookActions extends LitElement {
         display: block;
       }
 
+      .hide {
+        display: none;
+      }
+
       .lending-wrapper {
         width: 100%;
         margin: 0 auto;