@internetarchive/ia-book-actions 1.0.0 → 1.1.0-alpha10

package/demo/index.html

@@ -131,7 +131,7 @@
     iaBookActions.returnUrl = '';
     iaBookActions.localCache = localCache;
 
-    let loanTotalTime2Min = { loanTotalTime: 65, loanRenewAtLast: 60, 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 };
 
@@ -150,6 +150,25 @@
       });
     });
 
+    document.querySelectorAll('.searchParam input[type=checkbox]').forEach((item) => {
+      item.addEventListener('click', (e) => {
+        var searchParams = new URLSearchParams(window.location.search);
+        var separate = '';
+        if (e.target.checked) {
+          separate = '?';
+          searchParams.set('q', 'test');
+        } else {
+          separate = '';
+          searchParams.delete('q');
+        }
+
+        if (history.pushState) {
+          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + separate + searchParams;
+          window.history.pushState({path:newurl},'',newurl);
+        }
+      });
+    });
+
     document.querySelectorAll('.errorEnable input[type=checkbox]').forEach((item) => {
       if (window.location.href.indexOf('?error=true') !== -1) {
         item.checked = true;
@@ -327,7 +346,6 @@
     // listen for IABookReader:BrowsingHasExpired
     window.addEventListener('IABookReader:BrowsingHasExpired', () => {
       console.log('IABookReader:BrowsingHasExpired EVENT FIRED');
-      alert('IABookReader:BrowsingHasExpired EVENT FIRED');
     });
 </script>
 
@@ -339,6 +357,8 @@
             <td class="titleBar">
               <label><input type="checkbox" name="title" value="title" />Title Bar</label>
             </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>
@@ -370,7 +390,6 @@
               </div>
               <div>
                 <button id="show_expired_modal">While Browsing (`user_has_browsed`), Expire book & show its modal</button>
-                how_expired_modal
               </div>
             </td>
             <td class="availableToBorrow">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "1.0.0",
+  "version": "1.1.0-alpha10",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -14,16 +14,16 @@
     "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 --playwright --browsers chromium firefox webkit",
-    "test:watch": "web-test-runner --watch --playwright --browsers chromium firefox webkit"
+    "test:fast": "web-test-runner --coverage",
+    "test:watch": "web-test-runner --watch"
   },
   "dependencies": {
     "@internetarchive/icon-info": "^1.2.6",
     "@internetarchive/local-cache": "^0.2.1",
-    "@internetarchive/modal-manager": "^0.2.12",
+    "@internetarchive/modal-manager": "2.0.0",
     "@internetarchive/shared-resize-observer": "^0.2.0",
-    "@internetarchive/toast-manager": "0.1.0",
-    "lit": "^2.5.0"
+    "install-deps": "^1.1.0",
+    "lit": "^2.8.0"
   },
   "devDependencies": {
     "@open-wc/eslint-config": "^4.2.0",

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/assets/styles/collapsible-action-group.js

@@ -21,6 +21,7 @@ export default css`
   .action-buttons .ia-button {
     margin: 0;
     height: 3.5rem;
+    padding: 0 2rem;
   }
   .action-buttons .desktop {
     background-color: ${whiteColor};

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

package/src/components/collapsible-action-group.js

@@ -178,7 +178,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
   get renderSecondaryActions() {
     if (!this.secondaryActions.length) return nothing;
 
-    return this.secondaryActions.map(action => this.renderActionLink(action));
+    return this.secondaryActions.map(action => this.renderActionButton(action));
   }
 
   /**

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/core/services/actions-config.js

@@ -207,8 +207,6 @@ export default class ActionsConfig {
       id: 'adminAccess',
       text: 'Admin Access',
       title: 'You have administrative privileges to read this book',
-      url: '?admin=1',
-      target: '_self',
       className: 'danger',
       analyticsEvent: {
         category: this.analyticsCategories.adminAccess,

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

@@ -115,6 +115,11 @@ export default class ActionsHandler extends LitElement {
     this.addEventListener('adminAccess', ({ detail }) => {
       const { category, action } = detail.event;
       this.loanAnanlytics?.sendEvent(category, action, this.identifier);
+
+      // keep existing params and add new one
+      const url = new URL(window.location.href);
+      url.searchParams.append('admin', 1);
+      window.location.search = url.search;
     });
 
     this.addEventListener('exitAdminAccess', ({ detail }) => {

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';
@@ -283,6 +282,25 @@ 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
+
+        if (secondsLeft >= this.timerExecutionSeconds) {
+          this.setIntervalExecutionBlock(Number(secondsLeft));
+        } else {
+          this.disconnectedCallback();
+        }
+      }
+    });
   }
 
   /**
@@ -487,36 +505,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,47 +665,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
-
-      // 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);
-
-      if (resync) {
-        log('startTimerCountdown --- stale, timer has resyncd', {
-          secondsLeft,
-        });
-        return;
-      }
+      // interval execution block
+      await this.setIntervalExecutionBlock(secondsLeft);
+    }, this.timerExecutionSeconds * 1000);
+  }
 
-      log('startTimerCountdown --- countdown still valid. continue...', {
-        resync,
+  /**
+   * 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
+
+    // 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);
+
+    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);
+    }
   }
 
   /**
@@ -761,7 +764,7 @@ export default class IABookActions extends LitElement {
     if (whatIsleft !== whatShouldLeft) {
       log(`reSyncTimerIfGoneOff --- let's re-sync.`);
 
-      return true;
+      return { hasSynced: true, whatShouldLeft };
     }
     return false;
   }

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

@@ -421,7 +421,7 @@ describe('Auto renew one hour loan', () => {
     // timer-countdown reflects decreased loan time
     expect(el.timerCountdownEl.secondsLeftOnLoan).to.equal(8);
 
-    expect(el.postInitComplete).to.equal(33);
+    expect(el.postInitComplete).to.equal(false);
 
     // dispatch loanAutoRenewed event - test 200 callback
     const collapsibleActionGroupEl = el.shadowRoot.querySelector(
@@ -445,7 +445,7 @@ describe('Auto renew one hour loan', () => {
     expect(el.loanRenewResult.renewNow).to.equal(true);
     expect(el.loanRenewResult.secondsLeft).to.equal(10);
     expect(el.timerCountdownEl).to.exist;
-    expect(el.timerCountdownEl.secondsLeftOnLoan).to.equal(loanTime);
+    expect(el.timerCountdownEl.secondsLeftOnLoan).to.equal(8);
   });
 });