@internetarchive/ia-book-actions 0.0.29-alpha2 → 0.0.29-alpha4

package/demo/index.html

@@ -127,14 +127,14 @@
     iaBookActions.tokenDelay = 2000; // 2 seconds
     iaBookActions.returnUrl = 'https://openlibrary.org';
     iaBookActions.localCache = localCache;
-    iaBookActions.autoRenewTimeConfig = {
-      totalTime: 60, // 60 second = 1 min
-      autoCheckAt: 55, // totalTime - 10th minute
+    iaBookActions.autoRenewConfig = {
+      totalTime: 10, // 60 second = 1 min
+      autoCheckAt: 8, // totalTime - 10th minute
       FlippedInLast: 15, // within last 15 second/minute 
     };
 
     let lendingStatus1 = iaBookActions.lendingStatus;
-    let secondsLeftOnLoan = 60;
+    let secondsLeftOnLoan = iaBookActions.autoRenewConfig.totalTime;
 
     document.querySelectorAll('.titleBar input[type=checkbox]').forEach((item) => {
       item.addEventListener('click', (e) => {
@@ -226,7 +226,7 @@
             await localCache.set({
               key: `${identifier}-loanTime`,
               value: new Date(), // current time
-              ttl: parseInt(iaBookActions.autoRenewTimeConfig.totalTime),
+              ttl: parseInt(iaBookActions.autoRenewConfig.totalTime),
             })
 
             await localCache.delete(`${identifier}-pageFlipTime`);

package/package.json

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

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

@@ -29,7 +29,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
       disabled: { type: Boolean },
       returnUrl: { type: String },
       browseAgainNow: { type: Boolean },
-      autoRenewTimeConfig: { type: Object },
+      autoRenewConfig: { type: Object },
     };
   }
 
@@ -50,7 +50,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
     this.disabled = false;
     this.returnUrl = '';
     this.browseAgainNow = false;
-    this.autoRenewTimeConfig = {};
+    this.autoRenewConfig = {};
   }
 
   updated(changed) {

package/src/components/toast-message.js

@@ -4,7 +4,7 @@ export class ToastMessage extends LitElement {
   static get properties() {
     return {
       texts: { type: String },
-      dismisOnClick: { type: Function },
+      dismisOnClick: { type: Boolean },
       hideToast: { type: Boolean },
     };
   }
@@ -19,7 +19,11 @@ export class ToastMessage extends LitElement {
   render() {
     return !this.hideToast
       ? html`
-          <span class="toast-message ${this.textClass}">${this.texts}</span>
+          <span
+            class="toast-message fade-in ${this.textClass}"
+            title="Click/tap to close"
+            @click=${() => { this.dismisOnClick ? this.hideToast = true : nothing}}
+            >${this.texts}</span>
         `
       : nothing;
   }
@@ -30,15 +34,16 @@ export class ToastMessage extends LitElement {
     return css`
       :host {
         display: inline-block;
+        
       }
       .toast-message {
         z-index: 2;
         position: absolute;
         top: ${heightFromTop};
         font-size: 1.4rem;
+        font-family: "Helvetica Neue";
         color: #fff;
         left: 50%;
-        right: 50%;
         background: #333;
         border: 1px solid #fff;
         border-radius: 5px;
@@ -46,7 +51,18 @@ export class ToastMessage extends LitElement {
         padding: 10px;
         width: fit-content;
         transform: translate(-50%, -50%);
+        cursor: pointer;
+        animation: fadeIn 5s;
+        @keyframes fadeIn {
+          0% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 1;
+          }
+        }
       }
+
       .hidden {
         display: none;
       }

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

@@ -19,7 +19,7 @@ export default class ActionsHandler extends LitElement {
     this.identifier = '';
     this.ajaxTimeout = 6000;
     this.returnUrl = '';
-    this.autoRenewTimeConfig = {};
+    this.autoRenewConfig = {};
 
     this.localCache = new LocalCache({
       namespace: '1HourLoanStorage',
@@ -127,14 +127,18 @@ export default class ActionsHandler extends LitElement {
   }
 
   handleAutoBrowseIt() {
-    const action = 'auto_browse';
+    const action = 'renew_loan';
     this.setBrowseTimeSession()
 
     ActionsHandlerService({
       action,
       identifier: this.identifier,
-      success: () => {},
+      success: () => {
+        console.log('success!');
+      },
       error: data => {
+        console.log(data);
+        console.log('error!');
         this.dispatchActionError(action, data);
       },
     });
@@ -317,7 +321,7 @@ export default class ActionsHandler extends LitElement {
       await this.localCache.set({
         key: `${this.identifier}-loanTime`,
         value: new Date(), // current time
-        ttl: parseInt(this.autoRenewTimeConfig.totalTime),
+        ttl: parseInt(this.autoRenewConfig.totalTime),
       })
 
       await this.localCache.delete(`${this.identifier}-pageFlipTime`);

package/src/core/services/one-hour-auto-renew.js

@@ -6,25 +6,25 @@ import ActionsHandlerService from './actions-handler/actions-handler-service.js'
  * ActionsHandlerService is a function being used to execute
  */
 export class OneHourAutoRenew {
-  constructor(pageClick, identifier, localCache, autoRenewTimeConfig, userHasBrowsed) {
+  constructor(pageClick, identifier, localCache, autoRenewConfig, userHasBrowsed) {
     this.pageClick = pageClick;
     this.identifier = identifier;
     this.localCache = localCache;
-    this.autoRenewTimeConfig = autoRenewTimeConfig;
+    this.autoRenewConfig = autoRenewConfig;
     this.userHasBrowsed = userHasBrowsed;
 
+    // messages for auto return machenism
+    this.autoRenewMessage = 'This book has been renewed for another hour.';
+    this.autoReturnMessage = 'This book has been auto-returned due to inactivity.';
+    this.autoReturnWarning = 'This book will be auto-returned in 10 minutes unless you turn a page.';
+    
     // private props
     this.resultRes = {
-      toastTexts: null,
+      toastTexts: this.autoReturnMessage,
       hideToast: true,
       renewNow: false,
     };
 
-    // messages for auto return machenism
-    this.autoRenewMessage = 'This book has been renewed for another hour.';
-    this.autoReturnMessage = 'This book has been auto-returned due to inactivity.';
-    this.autoReturnWarning = 'This book will be auto-returned in 10 minutes unless you turn a page.';
-
     return this.handleBookAutoRenew();
   }
 
@@ -51,7 +51,7 @@ export class OneHourAutoRenew {
     await this.localCache.set({
       key: `${this.identifier}-pageFlipTime`,
       value: new Date(), // current time
-      ttl: parseInt(this.autoRenewTimeConfig.totalTime),
+      ttl: parseInt(this.autoRenewConfig.totalTime),
     })
   }
 
@@ -59,7 +59,7 @@ export class OneHourAutoRenew {
     const {
       totalTime, // 60
       autoCheckAt, // 50
-    } = this.autoRenewTimeConfig;
+    } = this.autoRenewConfig;
     const currentDate = new Date();
     const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
 
@@ -82,7 +82,7 @@ export class OneHourAutoRenew {
 
   async autoCheckerTimer() {
     const currentDate = new Date();
-    const { FlippedInLast } = this.autoRenewTimeConfig;
+    const { FlippedInLast } = this.autoRenewConfig;
     const lastPageFlipTime = await this.localCache.get(`${this.identifier}-pageFlipTime`);
 
     // last 15 min if used flipped a page.
@@ -93,15 +93,18 @@ export class OneHourAutoRenew {
     ); // 15 seconds
 
     if (lastPageFlipTime === undefined || lastPageFlipTime <= lastFlipTimeFrame) { // not viewed
-      console.log('2');
+      console.log('2 not viewed, warning message!');
       this.resultRes.toastTexts = this.autoReturnWarning;
       this.resultRes.hideToast = false;
     } else if (lastPageFlipTime >= lastFlipTimeFrame) { // viewed in last time frame
-      console.log('3');
+      console.log('3 viewed, auto renew and message!');
       this.resultRes.toastTexts = this.autoRenewMessage;
       this.resultRes.browseAgainNow = true;
       this.resultRes.hideToast = false;
       this.resultRes.renewNow = true;
+
+      // delete pageFlipTime when book is auto renew at nth minute
+      await this.localCache.delete(`${this.identifier}-pageFlipTime`);
     }
 
     return this.resultRes;
@@ -141,6 +144,7 @@ export class OneHourAutoRenew {
         this.sendEvent('handleAutoRenew', action);
       },
       success: () => {
+        console.log('success!');
         return 'success';
       },
     });

package/src/ia-book-actions.js

@@ -45,7 +45,7 @@ export default class IABookActions extends LitElement {
       remainingTime: { type: Number },
       resetTimerCountdown: { type: Boolean },
       localCache: { type: Object },
-      autoRenewTimeConfig: { type: Object },
+      autoRenewConfig: { type: Object },
       browseAgainNow: { type: Boolean },
     };
   }
@@ -69,7 +69,8 @@ export default class IABookActions extends LitElement {
     this.localCache = new LocalCache({
       namespace: '1HourLoanStorage'
     }),
-    this.autoRenewTimeConfig = {},
+    this.autoRenewConfig = {},
+    this.autoRenewObj = undefined;
 
     // private props
     this.primaryActions = [];
@@ -101,6 +102,7 @@ export default class IABookActions extends LitElement {
   }
 
   updated(changed) {
+    console.log(changed)
     if (changed.has('lendingStatus') || changed.has('bwbPurchaseUrl')) {
       this.setupLendingToolbarActions();
       this.update();
@@ -120,21 +122,20 @@ export default class IABookActions extends LitElement {
     this.addEventListener('autoRenewAttempt', async event => {
       const isPageFlipped = event.detail.bookPageChange;
 
-      const dd = await new OneHourAutoRenew(
+      this.autoRenewObj = await new OneHourAutoRenew(
         isPageFlipped,
         this.identifier,
         this.localCache,
-        this.autoRenewTimeConfig,
+        this.autoRenewConfig,
         this.lendingStatus.user_has_browsed && !this.lendingStatus.browsingExpired
       );
 
-      this.toastTexts = dd.toastTexts;
-      this.hideToast = dd.hideToast;
-      this.browseAgainNow = dd.renewNow;
+      this.toastTexts = this.autoRenewObj.toastTexts;
+      this.hideToast = this.autoRenewObj.hideToast;
+      this.browseAgainNow = this.autoRenewObj.renewNow;
       if (this.browseAgainNow) {
         await this.browseHasRenew();
       }
-      // this.handleBookAutoRenew(event);
     });
   }
 
@@ -147,7 +148,7 @@ export default class IABookActions extends LitElement {
     await this.localCache.delete(`${this.identifier}-pageFlipTime`);
 
     // show message after browsed book is expired.
-    this.toastTexts = this.autoReturnMessage;
+    this.toastTexts = 'This book has been auto-returned due to inactivity.';
   }
 
   async browseHasRenew() {
@@ -155,7 +156,7 @@ export default class IABookActions extends LitElement {
       ...this.lendingStatus,
       user_has_browsed: true,
       browsingExpired: false,
-      secondsLeftOnLoan: 61
+      secondsLeftOnLoan: this.autoRenewConfig.totalTime + 1,
     };
     this.lendingStatus = currStatus;
 
@@ -291,7 +292,7 @@ export default class IABookActions extends LitElement {
     return this.borrowType === 'browsed'
       ? html`<timer-countdown
           time=${Number(this.remainingTime)}
-          .autoCheckAt=${this.autoRenewTimeConfig.autoCheckAt}
+          .autoCheckAt=${this.autoRenewConfig.autoCheckAt}
           ?resetTimerCountdown=${this.resetTimerCountdown}
         ></timer-countdown>`
       : nothing;
@@ -301,7 +302,7 @@ export default class IABookActions extends LitElement {
     return html`
       <toast-message
         .texts=${this.toastTexts}
-        .dismisOnClick="1"
+        ?dismisOnClick=${true}
         ?hideToast=${this.hideToast}
       ></toast-message>
     `;
@@ -320,7 +321,7 @@ export default class IABookActions extends LitElement {
         .borrowType=${this.borrowType}
         .returnUrl=${this.returnUrl}
         .autoRenew=${this.autoRenew}
-        .autoRenewTimeConfig=${this.autoRenewTimeConfig}
+        .autoRenewConfig=${this.autoRenewConfig}
         ?hasAdminAccess=${this.hasAdminAccess}
         ?disabled=${this.disableActionGroup}
         ?browseAgainNow=${this.browseAgainNow}