@internetarchive/ia-book-actions 1.1.0-alpha8 → 1.1.0

package/.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: App CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16.x
+
+    - name: Install dependencies
+      run: yarn install
+
+    # - name: Run tests
+    #   run: yarn run test
+
+    # - name: Upload reports
+    #   run: npx codecov

package/.github/workflows/gh-pages-main.yml

@@ -0,0 +1,39 @@
+# This workflow will generate the static page under `main` subdirectory inside the `gh-pages` branch
+
+# This workflow will run every time new changes were pushed to the `main` branch
+
+name: App build CI/CD to main branch
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Create build files for gh-pages deploy
+        run: yarn prepare:ghpages
+
+      # Reference: https://github.com/JamesIves/github-pages-deploy-action
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.4.3
+        with:
+          branch: gh-pages
+          folder: ghpages
+          clean-exclude: pr/
+          force: false
+          target-folder: main
+          token: ${{ secrets.GH_TOKEN }}

package/.github/workflows/pr-preview.yml

@@ -0,0 +1,37 @@
+# This workflow will generate the static page under `pr` subdirectory inside the `gh-pages` branch
+
+# This workflow will run every time there's a PR opened, reopened, synchronize, or closed
+
+name: Deploy PR previews
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+concurrency: preview-${{ github.ref }}
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+
+      - name: Install and Build
+        run: |
+          yarn install
+          yarn prepare:ghpages
+      # Reference: https://github.com/rossjrw/pr-preview-action
+      - name: Deploy preview
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: ./ghpages/
+          umbrella-dir: pr

package/demo/index.html

@@ -76,6 +76,13 @@
       display: inline-grid;
     }
 
+    .action-button button {
+      padding: 6px;
+      cursor: pointer;
+      border: 2px solid #194880;
+      border-radius: 10px;
+    }
+
     body.modal-manager-open {
       overflow: hidden;
     }
@@ -128,10 +135,11 @@
     iaBookActions.modalConfig = modalConfig;
     iaBookActions.lendingBarPostInit = lendingBarPostInit;
     iaBookActions.tokenDelay = 2; // 2 seconds
+    iaBookActions.timerExecutionSeconds = 4 // 4 seconds
     iaBookActions.returnUrl = '';
     iaBookActions.localCache = localCache;
 
-    let loanTotalTime2Min = { loanTotalTime: 170, loanRenewAtLast: 80, pageChangedInLast: 15 };
+    let loanTotalTime2Min = { loanTotalTime: 120, loanRenewAtLast: 80, pageChangedInLast: 15 };
     let loanTotalTime5Min = { loanTotalTime: 300, loanRenewAtLast: 180, pageChangedInLast: 15 };
     let loanTotalTime1Hour = { loanTotalTime: 3600, loanRenewAtLast: 660, pageChangedInLast: 900 };
 
@@ -286,6 +294,19 @@
       iaBookActions.browseHasExpired();
     });
 
+    document.querySelector('#resync_timer').addEventListener('click', async (e) => {
+      if (iaBookActions.lendingStatus.user_has_browsed) {
+        document.querySelector('ia-book-actions').dispatchEvent(
+          new Event('visibilitychange', {
+            detail: {},
+            bubbles: true,
+            composed: true,
+          })
+        );
+      }
+      await new Promise(resolve => setTimeout(resolve, 5000));
+    });
+
     document.querySelectorAll('.availableToBorrow input[type=radio]').forEach((item) => {
       item.addEventListener('click', (e) => {
         if (e.target.value === 'available_to_borrow') {
@@ -359,8 +380,9 @@
             </td>
             <td class="searchParam">
               <label><input type="checkbox" name="search" value="Search Param" />Search Param</label>
+            </td>
             <td>
-              <button class="pageChangedEvent">Page Change Event</button>
+              <label class="ia-button"><button class="pageChangedEvent">Page Change Event</button></label>
             </td>
           </tr>
         </table>
@@ -385,12 +407,6 @@
               <label><input type="radio" name="browse" value="available_to_browse" />available_to_browse</label>
               <label><input type="radio" name="browse" value="user_has_browsed" />user_has_browsed</label>
               <label><input type="radio" name="browse" value="browsingExpired" />browsingExpired</label>
-              <div>
-                <button id="show_warning_modal">When Browsing (`user_has_browsed`), show Warning Modal</button>
-              </div>
-              <div>
-                <button id="show_expired_modal">While Browsing (`user_has_browsed`), Expire book & show its modal</button>
-              </div>
             </td>
             <td class="availableToBorrow">
               <label><input type="radio" name="borrow" value="available_to_borrow" />available_to_borrow</label>
@@ -410,6 +426,26 @@
               font-weight: bold; display: none" name="purchase" value="Reflect" />
             </td>
           </tr>
+          <tr>
+            <td>
+              <fieldset style="margin-top: 10px;">
+                <legend style="color: black;">controls for browsed book</legend>
+                  <table aria-hidden="true">
+                    <tbody><tr>
+                      <td class="action-button">
+                        <button id="show_warning_modal">When Browsing (`user_has_browsed`),<br> show Warning Modal</button>
+                      </td>
+                      <td class="action-button">
+                        <button id="show_expired_modal">While Browsing (`user_has_browsed`),<br> Expire book & show its modal</button>
+                      </td>
+                      <td class="action-button">
+                        <button id="resync_timer">While Browsing (`user_has_browsed`),<br> resync timer</button>
+                      </td>
+                    </tr>
+                  </tbody></table>
+              </fieldset>
+            </td>
+          </tr>
         </table>
     </fieldset>
   </div>

package/index.html

@@ -0,0 +1,474 @@
+<!doctype html>
+<html lang="en-GB">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <style>
+    html {
+      font-size: 10px;
+      /* This is to match petabox's base font size */
+    }
+    body {
+      margin: 0;
+      text-align: center;
+      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    }
+    #demo {
+      height: 100px;
+    }
+    ia-book-actions {
+      --white: #fff;
+      --black: #000;
+      --primaryBGColor: var(--black);
+      --secondaryBGColor: #222;
+      --tertiaryBGColor: #333;
+      --primaryTextColor:  var(--white);
+      --primaryCTAFill: #194880;
+      --primaryCTABorder: #c5d1df;
+      --secondaryCTAFill: #333;
+      --secondaryCTABorder: #999;
+      --secondaryCTAFillRGB: 51, 51, 51;
+      --primaryErrorCTAFill: #e51c26;
+      --primaryErrorCTABorder: #f8c6c8;
+      --primaryCTAFillRGB: 25, 72, 128;
+      --primaryErrorCTAFillRGB: 229, 28, 38;
+      --primaryDisableCTAFill: #767676;
+    }
+
+    fieldset {
+      width: fit-content;
+      margin-top: 50px;
+    }
+    fieldset legend {
+      text-align: left;
+      font-size: 12px;
+    }
+    td {
+      color: white;
+      font-size: 14px;
+      border-radius: 5%;
+      display: table-cell;
+      text-align: initial;
+      margin: 5px 0;
+      width: max-content;
+      display: block;
+    }
+    label {
+      padding: 10px;
+      display: block;
+      cursor: pointer;
+      margin: 2px;
+      background: #4e545a;
+      border-radius: 10px;
+    }
+    input[type="radio"], input[type="checkbox"] {
+      margin-top: 0;
+      vertical-align: middle;
+    }
+
+    .initial td {
+      float: left;
+      margin: 2px;
+    }
+
+    fieldset {
+      display: inline-grid;
+    }
+
+    .action-button button {
+      padding: 6px;
+      cursor: pointer;
+      border: 2px solid #194880;
+      border-radius: 10px;
+    }
+
+    body.modal-manager-open {
+      overflow: hidden;
+    }
+  
+    modal-manager[mode='closed'] {
+      display: none;
+    }
+  </style>
+</head>
+
+<body>
+  <ia-book-actions></ia-book-actions>
+
+  <script type="module">
+    /* eslint-disable */
+
+    import './src/ia-book-actions.js';
+    import {
+      defaultLendingStatus,
+      canBrowseAndBorrow,
+    } from './src/assets/data/lending-get-status-service.js';
+    import { ModalConfig } from '@internetarchive/modal-manager';
+    import { LocalCache } from '@internetarchive/local-cache';
+
+    const localCache = new LocalCache({
+      namespace: 'loanRenew',
+      defaultTTL: 1 * 60,  // 1 minute
+    });
+
+    const userid = '@neeraj-archive';
+    const identifier = 'naturalhistoryof00unse_4111';
+    let bwbPurchaseUrl = 'https://www.betterworldbooks.com/product/detail/cambridge-ancient-hist-v04-0521044863';
+
+
+    const modalConfig = new ModalConfig();
+    modalConfig.headerColor = '#d9534f';
+
+    let lendingBarPostInit = function lendingBarPostInit() {
+      setTimeout(function() {}, 100);
+    }
+
+    // set defaultLendingStatus for unavailable (without borrowables) book
+    let iaBookActions = document.querySelector('ia-book-actions');
+
+    iaBookActions.userid = userid;
+    iaBookActions.identifier = identifier;
+    iaBookActions.bookTitle = 'Contemporary Black biography. Volume 39 : profiles from the interContemporary Black biography. Volume 39';
+    iaBookActions.lendingStatus = canBrowseAndBorrow;
+    iaBookActions.bwbPurchaseUrl = '';
+    iaBookActions.modalConfig = modalConfig;
+    iaBookActions.lendingBarPostInit = lendingBarPostInit;
+    iaBookActions.tokenDelay = 10; // 2 seconds
+    iaBookActions.timerExecutionSeconds = 3 // 4 seconds
+    iaBookActions.returnUrl = '';
+    iaBookActions.localCache = localCache;
+
+    let loanTotalTime2Min = { loanTotalTime: 120, loanRenewAtLast: 110, pageChangedInLast: 30 };
+    let loanTotalTime5Min = { loanTotalTime: 300, loanRenewAtLast: 240, pageChangedInLast: 60 };
+    let loanTotalTime10Min = { loanTotalTime: 600, loanRenewAtLast: 480, pageChangedInLast: 120 };
+    let loanTotalTime30Min = { loanTotalTime: 1800, loanRenewAtLast: 1500, pageChangedInLast: 600 };
+    let loanTotalTime1Hour = { loanTotalTime: 3600, loanRenewAtLast: 660, pageChangedInLast: 900 };
+
+    iaBookActions.loanRenewTimeConfig = loanTotalTime2Min;
+    let params = new URLSearchParams(document.location.search);
+    switch (params.get("timer")) {
+      case '5':
+        iaBookActions.loanRenewTimeConfig = loanTotalTime5Min;
+        break;
+      case '10':
+        iaBookActions.loanRenewTimeConfig = loanTotalTime10Min;
+        break;
+      case '30':
+        iaBookActions.loanRenewTimeConfig = loanTotalTime30Min;
+        break;
+      case '60':
+        iaBookActions.loanRenewTimeConfig = loanTotalTime1Hour;
+        break;
+      default:
+        iaBookActions.loanRenewTimeConfig = loanTotalTime2Min;
+        break;
+    }
+
+    let lendingStatus1 = iaBookActions.lendingStatus;
+    let secondsLeftOnLoan = iaBookActions.loanRenewTimeConfig.loanTotalTime;
+
+    document.querySelectorAll('.titleBar input[type=checkbox]').forEach((item) => {
+      item.addEventListener('click', (e) => {
+        if (e.target.checked) {
+          iaBookActions.barType = 'title';
+        } else {
+          iaBookActions.barType = 'action';
+        }
+      });
+    });
+
+    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;
+      }
+      item.addEventListener('click', (e) => {
+        var searchParams = new URLSearchParams(window.location.search);
+        var separate = '';
+        if (e.target.checked) {
+          separate = '?';
+          searchParams.set('error', true);
+        } else {
+          separate = '';
+          searchParams.delete('error');
+        }
+
+        if (history.pushState) {
+          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + separate + searchParams;
+          window.history.pushState({path:newurl},'',newurl);
+        }
+      });
+    });
+
+    
+    document.querySelectorAll('.userState input[type=checkbox]').forEach((item) => {
+      item.addEventListener('click', (e) => {
+        if (e.target.checked) {
+          if (e.target.value === 'isAdmin') lendingStatus1.isAdmin = true;
+          if (e.target.value === 'isLoggedIn') iaBookActions.userid = '@neeraj';
+        } else {
+          if (e.target.value === 'isAdmin') lendingStatus1.isAdmin = false;
+          if (e.target.value === 'isLoggedIn') iaBookActions.userid = '';
+        }
+        let lending = {...defaultLendingStatus, ...lendingStatus1};
+        iaBookActions.lendingStatus = lending;
+      });
+    });
+
+    document.querySelectorAll('.printDisabled input[type=checkbox]').forEach((item) => {
+      item.addEventListener('click', (e) => {
+        if (e.target.checked) {
+          if (e.target.value === 'is_printdisabled') lendingStatus1.is_printdisabled = true;
+          if (e.target.value === 'user_is_printdisabled') lendingStatus1.user_is_printdisabled = true;
+        } else {
+          if (e.target.value === 'is_printdisabled') lendingStatus1.is_printdisabled = false;
+          if (e.target.value === 'user_is_printdisabled') lendingStatus1.user_is_printdisabled = false;
+        }
+
+        let lending = {...defaultLendingStatus, ...lendingStatus1};
+        iaBookActions.lendingStatus = lending;
+      });
+    });
+
+    document.querySelectorAll('.availableToBrowse input[type=radio]').forEach((item) => {
+      item.addEventListener('click', async (e) => {
+        if (e.target.value === 'user_has_browsed') {
+          lendingStatus1.user_has_browsed = true;
+          lendingStatus1.available_to_browse = false;
+          lendingStatus1.secondsLeftOnLoan = secondsLeftOnLoan;
+          lendingStatus1.browsingExpired = false;
+
+          const expireDate = new Date(
+            new Date().getTime() + iaBookActions.loanRenewTimeConfig.loanTotalTime * 1000
+          );
+          try {
+            // set a value
+            await localCache.set({
+              key: `${identifier}-loanTime`,
+              value: expireDate,
+              ttl: Number(iaBookActions.loanRenewTimeConfig.loanTotalTime),
+            });
+
+            await localCache.delete(`${identifier}-pageChangedTime`);
+          } catch (error) {}
+          
+        } else if(e.target.value === 'browsingExpired') {
+          lendingStatus1.user_has_browsed = true;
+          lendingStatus1.available_to_browse = false;
+          lendingStatus1.secondsLeftOnLoan = 0;
+          lendingStatus1.browsingExpired = true;
+        } else if (e.target.value === 'available_to_browse') {
+          lendingStatus1.available_to_browse = true;
+          lendingStatus1.user_has_browsed = false;
+        }
+
+        // wait for a while
+        setTimeout(() => {
+          let lending = {...defaultLendingStatus, ...lendingStatus1};
+          iaBookActions.lendingStatus = lending;
+        }, 10);
+      });
+    });
+
+    document.querySelector('#show_warning_modal').addEventListener('click', async () => {
+      if (!iaBookActions.lendingStatus.user_has_browsed) {
+        const newLendingStatus = { ...iaBookActions.lendingStatus, user_has_browsed: true };
+        iaBookActions.lendingStatus = newLendingStatus;
+        await iaBookActions.updateComplete;
+      }
+
+      iaBookActions.showWarningModal();
+
+      if (iaBookActions.lendingStatus.user_has_browsed) {
+        iaBookActions.showWarningModal();
+      }
+    });
+
+    document.querySelector('#show_expired_modal').addEventListener('click', async () => {
+      if (!iaBookActions.lendingStatus.user_has_browsed) {
+        const newLendingStatus = { ...iaBookActions.lendingStatus, user_has_browsed: true };
+        iaBookActions.lendingStatus = newLendingStatus;
+        await iaBookActions.updateComplete;
+      }
+      await new Promise(resolve => setTimeout(resolve, 5000));
+
+      iaBookActions.browseHasExpired();
+    });
+
+    document.querySelector('#resync_timer').addEventListener('click', async (e) => {
+      if (iaBookActions.lendingStatus.user_has_browsed) {
+        document.querySelector('ia-book-actions').dispatchEvent(
+          new Event('visibilitychange', {
+            detail: {},
+            bubbles: true,
+            composed: true,
+          })
+        );
+      }
+      await new Promise(resolve => setTimeout(resolve, 5000));
+    });
+
+    document.querySelectorAll('.availableToBorrow input[type=radio]').forEach((item) => {
+      item.addEventListener('click', (e) => {
+        if (e.target.value === 'available_to_borrow') {
+          lendingStatus1.available_to_borrow = true;
+          lendingStatus1.user_on_waitlist = false;
+          lendingStatus1.available_to_waitlist = false;
+          lendingStatus1.user_has_borrowed = false;
+        } else if (e.target.value === 'user_can_claim_waitlist') {
+          lendingStatus1.available_to_borrow = true;
+          lendingStatus1.user_on_waitlist = true;
+          lendingStatus1.user_can_claim_waitlist = true;
+          lendingStatus1.user_has_borrowed = false;
+          lendingStatus1.available_to_waitlist = false;
+        } else if (e.target.value === 'user_on_waitlist') {
+          lendingStatus1.available_to_borrow = false;
+          lendingStatus1.user_on_waitlist = true;
+          lendingStatus1.available_to_waitlist = false;
+          lendingStatus1.user_has_borrowed = false;
+        } else if (e.target.value === 'available_to_waitlist') {
+          lendingStatus1.available_to_borrow = false;
+          lendingStatus1.user_on_waitlist = false;
+          lendingStatus1.available_to_waitlist = true;
+          lendingStatus1.user_has_borrowed = false;
+        } else if (e.target.value === 'user_has_borrowed') {
+          lendingStatus1.available_to_borrow = false;
+          lendingStatus1.user_on_waitlist = false;
+          lendingStatus1.available_to_waitlist = false;
+          lendingStatus1.user_has_borrowed = true;
+        }
+
+        let lending = {...defaultLendingStatus, ...lendingStatus1};
+        iaBookActions.lendingStatus = lending;
+      });
+    });
+
+    document.querySelectorAll('.purchase input[type=checkbox]').forEach((item) => {
+      item.addEventListener('click', (e) => {
+        if (e.target.checked) {
+          bwbPurchaseUrl = 'https://www.google.com';
+        } else {
+          bwbPurchaseUrl = ''
+        }
+        iaBookActions.bwbPurchaseUrl = bwbPurchaseUrl;
+      })
+    });
+
+    document.querySelector('.pageChangedEvent').addEventListener('click', () => {
+      // dispatch event to say book page has flipped
+      document.querySelector('ia-book-actions').dispatchEvent(
+        new CustomEvent('BookReader:userAction', {
+          detail: {},
+          bubbles: true,
+          composed: true,
+        })
+      );
+    })
+
+    // listen for IABookReader:BrowsingHasExpired
+    window.addEventListener('IABookReader:BrowsingHasExpired', () => {
+      console.log('IABookReader:BrowsingHasExpired EVENT FIRED');
+    });
+  </script>
+
+  <div>
+    <fieldset>
+      <legend>Dev testing for book title bar</legend>
+        <table class="initial">
+          <tr>
+            <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>
+            <td>
+              <label class="ia-button"><button class="pageChangedEvent">Page Change Event</button></label>
+            </td>
+          </tr>
+        </table>
+    </fieldset>
+
+    <fieldset>
+      <legend>Dev testing for book action bar</legend>
+        <table class="initial">
+          <tr colspan='5'>
+            <td class="errorEnable"><label><input type="checkbox" name="errorEnable" value="errorEnable" />Do you want to see error response?</label></td>
+          </tr>
+          <tr>
+            <td class="userState">
+              <label><input type="checkbox" name="user" value="isAdmin" />isAdmin</label>
+              <label><input type="checkbox" name="user" value="isLoggedIn" />isLoggedIn</label>
+            </td>
+            <td class="printDisabled">
+              <label><input type="checkbox" name="is_printdisabled" value="is_printdisabled" />is_printdisabled</label>
+              <label><input type="checkbox" name="user_is_printdisabled" value="user_is_printdisabled" />user_is_printdisabled</label>
+            </td>
+            <td class="availableToBrowse">
+              <label><input type="radio" name="browse" value="available_to_browse" />available_to_browse</label>
+              <label><input type="radio" name="browse" value="user_has_browsed" />user_has_browsed</label>
+              <label><input type="radio" name="browse" value="browsingExpired" />browsingExpired</label>
+            </td>
+            <td class="availableToBorrow">
+              <label><input type="radio" name="borrow" value="available_to_borrow" />available_to_borrow</label>
+              <label><input type="radio" name="borrow" value="user_on_waitlist" />user_on_waitlist</label>
+              <label><input type="radio" name="borrow" value="user_can_claim_waitlist" />user_can_claim_waitlist</label>
+              <label><input type="radio" name="borrow" value="available_to_waitlist" />available_to_waitlist</label>
+              <label><input type="radio" name="borrow" value="user_has_borrowed" />user_has_borrowed</label>
+            </td>
+            <td class="purchase">
+              <label><input type="checkbox" name="purchase" value="purchase" />purchase</label>
+            </td>
+
+            <td class="reflect">
+              <input type="button" style="padding: 10px;
+              background: #194880;
+              color: white;
+              font-weight: bold; display: none" name="purchase" value="Reflect" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <fieldset style="margin-top: 10px;">
+                <legend style="color: black;">controls for browsed book</legend>
+                  <table aria-hidden="true">
+                    <tbody><tr>
+                      <td class="action-button">
+                        <button id="show_warning_modal">When Browsing (`user_has_browsed`),<br> show Warning Modal</button>
+                      </td>
+                      <td class="action-button">
+                        <button id="show_expired_modal">While Browsing (`user_has_browsed`),<br> Expire book & show its modal</button>
+                      </td>
+                      <td class="action-button">
+                        <button id="resync_timer">While Browsing (`user_has_browsed`),<br> resync timer</button>
+                      </td>
+                    </tr>
+                  </tbody></table>
+              </fieldset>
+            </td>
+          </tr>
+        </table>
+    </fieldset>
+  </div>
+  <modal-manager></modal-manager>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "1.1.0-alpha8",
+  "version": "1.1.0",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -11,11 +11,16 @@
   },
   "scripts": {
     "start": "web-dev-server",
-    "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",
+    "prepare:ghpages": "rimraf ghpages && yarn run prepare && vite build",
+    "prepare": "rimraf dist && husky install",
+    "lint": "eslint --ext \"./src/*.js\",.html . --ignore-path .gitignore && prettier \"./src/*.js\" --check --ignore-path .gitignore",
+    "format": "eslint --ext \"./src/*.js\",.html . --fix --ignore-path .gitignore && prettier \"./src/*.js\" --write --ignore-path .gitignore",
     "test": "yarn run lint && yarn test:fast",
-    "test:fast": "web-test-runner --coverage",
-    "test:watch": "web-test-runner --watch"
+    "test:fast": "web-test-runner --coverage --playwright --browsers chromium firefox webkit",
+    "test:watch": "web-test-runner --watch --playwright --browsers chromium firefox webkit",
+    "deploy": "yarn run deploy:run -e $(git branch --show-current)",
+    "deploy:run": "yarn run prepare:ghpages && touch ghpages/.nojekyll && yarn run deploy:gh",
+    "deploy:gh": "gh-pages -t -d ghpages -m \"Build for $(git log --pretty=format:\"%h %an %ai %s\" -n1) [skip ci]\""
   },
   "dependencies": {
     "@internetarchive/icon-info": "^1.2.6",
@@ -38,10 +43,13 @@
     "eslint-plugin-lit": "^1.3.0",
     "eslint-plugin-lit-a11y": "^1.0.1",
     "eslint-plugin-wc": "^1.3.0",
-    "husky": "^1.0.0",
+    "gh-pages": "^4.0.0",
+    "husky": "^7.0.0",
     "lint-staged": "^10.0.0",
     "prettier": "^2.0.4",
-    "sinon": "^13.0.2"
+    "sinon": "^13.0.2",
+    "vite": "^2.9.9",
+    "rimraf": "^3.0.2"
   },
   "eslintConfig": {
     "extends": [

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: 170,
+  secondsLeftOnLoan: 0,
   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' : 'hide1';
+    const viewClass = this.displayTime ? 'view' : 'hide';
     return html`
       <button
         id="timer-counter"
@@ -57,7 +57,8 @@ export default class TimerCountdown extends LitElement {
         }}
         role="timer"
       >
-        <span>${this.minutesLeftOnLoan}</span>
+        <span>${this.minutesLeftOnLoan} - </span>
+        <span class="second">${Number(this.secondsLeftOnLoan)}</span>
         <span class="sr-only">${this.remainingTime} left</span>
       </button>
     `;

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

@@ -32,7 +32,12 @@ export default async function ActionsHandlerService(options) {
     location?.href?.indexOf('?error=true') !== -1 &&
     location?.hostname !== 'archive.org';
 
-  if (location?.pathname === '/demo/') baseHost = `/demo/`;
+  const testHostname = ['localhost', 'internetarchive.github.io'];
+  let isTest = false;
+  if (testHostname.includes(location.hostname)) {
+    isTest = true;
+    baseHost = location.href;
+  }
 
   let formData = new FormData();
   formData.append('action', option.action);
@@ -51,8 +56,8 @@ export default async function ActionsHandlerService(options) {
           };
         }
 
-        // return success response for /demo/ server...
-        if (baseHost == '/demo/1' || baseHost == '/demo/') {
+        // return success response for localhost server...
+        if (isTest) {
           if (
             option?.action == 'renew_loan' ||
             option?.action == 'return_loan'

package/src/core/services/log.js

@@ -8,7 +8,8 @@ const log =
   location.host.match(/^(www|cat)-[a-z0-9]+\.archive\.org$/) ||
   location.host.match(/\.code\.archive\.org$/) ||
   location.host.match(/\.dev\.archive\.org$/) ||
-  location.host.match(/^ia-petabox-/)
+  location.host.match(/^ia-petabox-/) ||
+  location.host.match(/^internetarchive/)
     ? // eslint-disable-next-line no-console
       console.log.bind(console) // convenient, no?  Stateless function
     : () => {};

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';
@@ -60,6 +59,7 @@ export default class IABookActions extends LitElement {
       disableActionGroup: { type: Boolean },
       modal: { Object },
       tokenDelay: { type: Number },
+      timerExecutionSeconds: { type: Number },
       localCache: { type: Object },
       loanRenewTimeConfig: { type: Object },
       loanRenewResult: { type: Object },
@@ -80,6 +80,7 @@ export default class IABookActions extends LitElement {
     this.sharedObserver = undefined;
     this.disableActionGroup = false;
     this.tokenDelay = 120; // in seconds
+    this.timerExecutionSeconds = 30;
 
     // private props
     this.postInitComplete = false;
@@ -90,10 +91,7 @@ export default class IABookActions extends LitElement {
     this.lendingOptions = {};
     this.borrowType = null; // 'browsed'|'borrowed'
     this.browseTimer = undefined; // timeout
-    this.timerExecutionSeconds = 5;
-
-    /** @deprecated */
-    this.toast = undefined;
+    this.timeWhenTimerStart = undefined;
 
     /**
      * when user click on [return the book] button on warning modal
@@ -118,7 +116,7 @@ export default class IABookActions extends LitElement {
      * contains one hour auto-loan-renew response
      *
      * @type {object} loanRenewResult
-     * @property {string} texts - texts messages need to show in toast message
+     * @property {string} texts - texts messages shows in modal
      * @property {boolean} renewNow - key to determine if need to renew now
      * @property {number} secondsLeft - seconds left in active loan
      */
@@ -129,10 +127,19 @@ export default class IABookActions extends LitElement {
     // clear all intervals for lending system
     window?.IALendingIntervals?.clearAll();
 
-    window?.Sentry?.captureMessage(sentryLogs.disconnectedCallback);
+    this.sentryCaptureMsg(sentryLogs.disconnectedCallback);
     this.disconnectResizeObserver();
   }
 
+  /**
+   * send log messages to sentry
+   * @param {string} msg
+   */
+  sentryCaptureMsg(msg) {
+    log(window?.Sentry);
+    window?.Sentry?.captureMessage(msg);
+  }
+
   firstUpdated() {
     // bind auto loan renew events
     this.bindLoanRenewEvents();
@@ -224,7 +231,7 @@ export default class IABookActions extends LitElement {
       log('setupLendingToolbarActions > hasExpired --- ');
 
       if (!this.tokenPoller) {
-        window?.Sentry?.captureMessage(sentryLogs.bookWasExpired);
+        this.sentryCaptureMsg(sentryLogs.bookWasExpired);
       }
       window?.IALendingIntervals?.clearAll();
 
@@ -286,12 +293,36 @@ export default class IABookActions extends LitElement {
 
     /**
      * auto-renew interval may stale when tab is in background,
-     * so [visibilitychange] event can trigger to check timer to show relavent messages
+     * so when user open that tab again,
+     * the [visibilitychange] event can trigger timer to show relavent messages
      */
-    document.addEventListener("visibilitychange", () => {
-      log('visibilitychange');
+    document.addEventListener('visibilitychange', async () => {
       if (!document.hidden) {
-        this.startTimerCountdown();
+        log(
+          'visibilitychange event execute:------------------ ',
+          new Date().getMinutes(),
+          new Date().getSeconds(),
+          this.borrowType
+        );
+
+        if (
+          this.borrowType === 'browsed' &&
+          this.lendingStatus.browsingExpired === false
+        ) {
+          const loanTime = await this.localCache.get(
+            `${this.identifier}-loanTime`
+          );
+
+          // number of seconds left in current loan
+          const secondsLeft = Math.round((loanTime - new Date()) / 1000);
+
+          if (secondsLeft >= this.timerExecutionSeconds) {
+            this.loanStatusCheckInterval(Number(secondsLeft));
+          } else {
+            this.browseHasExpired();
+            this.disconnectedCallback();
+          }
+        }
       }
     });
   }
@@ -473,61 +504,6 @@ export default class IABookActions extends LitElement {
     await this.modal?.showModal({ config, customModalContent });
   }
 
-  /**
-   * @deprecated
-   * create / select the toast-template component on DOM
-   *
-   * @memberof IABookActions
-   */
-  async useToastManager() {
-    if (!this.toast) {
-      this.toast = this.shadowRoot.querySelector('toast-template');
-
-      if (!this.toast) this.toast = document.createElement('toast-template');
-    }
-
-    await this.shadowRoot.appendChild(this.toast);
-  }
-
-  /**
-   * @deprecated
-   * close/hide toast message
-   */
-  async closeToastManager() {
-    this.toast = this.shadowRoot.querySelector('toast-template');
-    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
    */
@@ -553,7 +529,7 @@ export default class IABookActions extends LitElement {
 
     await this.showExpiredModal();
 
-    window?.Sentry?.captureMessage(sentryLogs.browseHasExpired);
+    this.sentryCaptureMsg(sentryLogs.browseHasExpired);
   }
 
   async startBrowseTimer() {
@@ -656,7 +632,10 @@ export default class IABookActions extends LitElement {
     if (this.loanRenewResult.renewNow) {
       // Now, let's reset loan duration & this.lendingStatus
       const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
-      const secondsLeft = Math.round((loanTime - new Date()) / 1000); // different in seconds
+
+      // number of seconds left in current loan
+      const secondsLeft = Math.round((loanTime - new Date()) / 1000);
+      log(loanTime, secondsLeft);
 
       log('IABookActions: handleLoanAutoRenewed --- ', {
         ajaxResponse: detail?.data,
@@ -676,7 +655,7 @@ export default class IABookActions extends LitElement {
       this.modal?.closeModal();
       this.modal.removeAttribute('id');
       this.modal.customModalContent = nothing;
-      window?.Sentry?.captureMessage(sentryLogs.bookHasRenewed);
+      this.sentryCaptureMsg(sentryLogs.bookHasRenewed);
     }
   }
 
@@ -685,59 +664,80 @@ export default class IABookActions extends LitElement {
    *
    * @memberof IABookActions
    */
-  startTimerCountdown() {
+  async 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 resyncd = this.reSyncTimerIfGoneOff(secondsLeft);
-
-      if (resyncd.hasSynced) {
-        secondsLeft = resyncd.whatShouldLeft;
+      // interval execution block
+      await this.loanStatusCheckInterval(secondsLeft);
+    }, this.timerExecutionSeconds * 1000);
+  }
 
-        log('startTimerCountdown --- stale, timer has resyncd', {
-          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 loanStatusCheckInterval(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,
+      });
+    }
 
-      log('startTimerCountdown --- countdown still valid. continue...', {
+    log(
+      'startTimerCountdown --- countdown still valid. continue...',
+      {
         resyncd,
         secondsLeft,
         loanRenewAtLast: this.loanRenewTimeConfig.loanRenewAtLast,
-      }, new Date().getMinutes(), new Date().getSeconds());
+      },
+      'time: ',
+      new Date().getMinutes(),
+      ':',
+      new Date().getSeconds(),
+      ', timerDelay: ',
+      this.timerExecutionSeconds
+    );
 
-      /**
-       * 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);
-      }
+    /**
+     * execute from last 10th minutes 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);
-      }
-    }, this.timerExecutionSeconds * 1000);
+    // clear interval in secondsLeft if less
+    if (secondsLeft <= this.timerExecutionSeconds) {
+      this.disconnectedCallback();
+      this.sentryCaptureMsg(sentryLogs.clearOneHourTimer);
+    }
   }
 
   /**
    * helper function to determine if timer is not in sync properly
    *
    * @param {number} timerSecondsLeft - actual seconds left get from setInterval
-   *
-   * @memberof TimerCountdown
+   * @returns {Object} { hasSynced: [boolean], whatShouldLeft: [number] }
    */
   async reSyncTimerIfGoneOff(timerSecondsLeft) {
     const currentTime = new Date();
@@ -749,6 +749,15 @@ export default class IABookActions extends LitElement {
     const secondsShouldLeft =
       this.lendingStatus.secondsLeftOnLoan - diffInSeconds;
 
+    log('currentTime: ', currentTime);
+    log('timeWhenTimerStart: ', this.timeWhenTimerStart);
+    log('diffInSeconds: ', diffInSeconds);
+    log('secondsShouldLeft: ', secondsShouldLeft);
+    log(
+      'this.lendingStatus.secondsLeftOnLoan: ',
+      this.lendingStatus.secondsLeftOnLoan
+    );
+
     // convert in minutes
     const whatIsleft = Math.round(timerSecondsLeft);
     const whatShouldLeft = Math.round(secondsShouldLeft);
@@ -772,9 +781,9 @@ export default class IABookActions extends LitElement {
 
     if (whatIsleft !== whatShouldLeft) {
       log(`reSyncTimerIfGoneOff --- let's re-sync.`);
-
       return { hasSynced: true, whatShouldLeft };
     }
+
     return { hasSynced: false, whatShouldLeft };
   }
 
@@ -994,12 +1003,6 @@ export default class IABookActions extends LitElement {
         justify-content: center;
         flex-wrap: wrap;
       }
-
-      toast-template {
-        --toastTopMargin: 80px;
-        --toastBGColor: #333;
-        --toastFontColor: #fff;
-      }
     `;
   }
 }

package/test/components/timer-countdown.test.js

@@ -13,7 +13,9 @@ const container = ({
     .loanRenewAtLast=${loanRenewAtLast}
   ></timer-countdown>`;
 
-describe('<timer-countdown>', () => {
+describe('<timer-countdown>', async () => {
+  await aTimeout(5000);
+
   it('timer interval is undefined when loan is expired', async () => {
     const el = await fixture(
       container({
@@ -36,7 +38,6 @@ describe('<timer-countdown>', () => {
       })
     );
 
-    await aTimeout(1900);
     await el.updateComplete;
 
     expect(el.secondsLeftOnLoan).to.equal(2);

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

@@ -376,7 +376,8 @@ describe('Browsing expired status', () => {
   });
 });
 
-describe('Auto renew one hour loan', () => {
+describe('Auto renew one hour loan', async () => {
+  await aTimeout(5000);
   it('Book is browsing and renewed it now', async () => {
     const loanTime = 88;
     const el = await fixture(
@@ -449,6 +450,61 @@ describe('Auto renew one hour loan', () => {
   });
 });
 
+describe('Visibility change API for document', async () => {
+  await aTimeout(5000);
+
+  beforeEach(() => {
+    Object.defineProperty(document, 'hidden', {
+      value: false,
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    Object.defineProperty(document, 'hidden', {
+      value: true,
+      configurable: true,
+    });
+  });
+
+  it('when book is not expired', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: {
+          user_has_browsed: true,
+          browsingExpired: false,
+        },
+      })
+    );
+    await el.updateComplete;
+
+    const spy = Sinon.spy(el, 'loanStatusCheckInterval');
+    document.dispatchEvent(new Event('visibilitychange'));
+
+    expect(spy.calledOnce).to.be.true;
+  });
+
+  it('when book is already expired', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: {
+          user_has_browsed: true,
+        },
+      })
+    );
+    await el.updateComplete;
+
+    const spy = Sinon.spy(el, 'browseHasExpired');
+    document.dispatchEvent(new Event('visibilitychange'));
+
+    expect(spy.calledOnce).to.be.true;
+  });
+});
+
 describe('Shared Resize Observer', () => {
   it('can receive a Shared Resize Observer', async () => {
     const sharedObserverStub = new SharedResizeObserver();

package/vite.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '',
+  build: {
+    outDir: 'ghpages',
+    manifest: true,
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+      },
+    },
+  },
+  server: {
+    host: true,
+    port: 8080,
+    open: true,
+    cors: true,
+  },
+});

package/web-dev-server.config.mjs

@@ -5,7 +5,7 @@ const hmr = process.argv.includes('--hmr');
 
 export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   nodeResolve: true,
-  open: '/demo/',
+  open: '/',
   watch: !hmr,
 
   /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */